Activity 2: Game Design (Flash CS5)

Source:  FrozenHaddock Tutorials: Simple Avoiding Game Published by Tazzydevil XIII on Jun 4th, 2007


The syntax of a programming language is the set of rules you must follow when writing code. These rules dictate the symbols and words that can be used and how to structure your code. Syntax errors are some of the most common errors made by developers, especially when they are first learning a language. Typically, the compiler cannot compile code that contains syntax errors.

One thing to keep in mind—syntax does not provide information on the meaning behind the symbols or structure in your code. The semantics of a programming language provide the meaning behind the symbols, keywords, and structure. A program that is syntactically correct may not be semantically correct.

In this article, you will learn the syntax of ActionScript 3.

Case sensitivity

ActionScript 3 is a case-sensitive language. Identifiers that differ only in case are considered different identifiers. For example, the following code creates two different variables:

var sampleVariable:int;
var SampleVariable:int;
Semicolons

The semicolon character ( ; ) is used to terminate a statement. If you omit the semicolon, the compiler assumes that each line of code represents a single statement. Terminating each statement with a semicolon is good practice and makes your code easier to read.

Parentheses

You can use parentheses (()) in three ways in ActionScript 3. First, you can use parentheses to change the order of operations in an expression. Operations that are grouped inside parentheses are always executed first. For example, parentheses are used to alter the order of operations in the following code:

trace(2 + 3 * 4); // 14
trace((2 + 3) * 4); // 20
Second, you can use parentheses with the comma operator ( , ) to evaluate a series of expressions and return the result of the final expression. This technique is shown in the following example:

var a:int = 2;
var b:int = 3;
trace((a++, b++, a+b)); // 7
Third, you can use parentheses to pass one or more parameters to functions or methods. In the following example, a String value is passed to the trace() function:

trace(“hello”); // hello
Code blocks

One or more lines of code enclosed in curly brackets ( { } ) is called a block. Code is grouped together and organized into blocks in ActionScript 3. The bodies of most programming constructs like classes, functions, and loops are contained inside blocks.

function sampleFunction():void{
var sampleVariable:String = “Hello, world.”;
trace(sampleVariable);
}

for(var i:uint=10; i>0; i–){
trace(i);
}
Whitespace

Any spacing in code—spaces, tabs, line breaks, and so on—is referred to as whitespace. The compiler ignores extra whitespace that is used to make code easier to read. For example, the following two examples are equivalent:

for(var i:uint=0; i<10; i++){ trace(i); } for(var i:uint=0; i<10; i++){trace(i);} Comments As you write ActionScript, you can leave notes to yourself or others. For example, use comments to explain how certain lines of code work or why you made a particular choice. Code comments are a tool you can use to write text that the computer ignores in your code. ActionScript 3 code supports two types of comments: single-line comments and multiline comments. The compiler ignores text that is marked as a comment. Single-line comments begin with two forward slash characters ( // ) and continue until the end of the line. For example, the following code contains a single-line comment: // a single line comment Multiline or block comments begin with a forward slash and asterisk ( /* ) and end with an asterisk and forward slash ( */ ). /* This is multiline comment that can span more than one line of code. */ Another common use of comments is to temporarily "turn off" one or more lines of code. For example, use comments to figure out why certain ActionScript code isn't working the way you expect by placing the code within comment syntax so that the compiler ignores it. You can also use comments to test a different way of doing something. Literals A literal is any fixed value that appears directly in your code. The following examples are literals: 17 "hello" -3 9.4 null undefined true false Literals can also be grouped to form compound literals. The following example shows a compound literal being passed as a parameter to the Array class constructor. var myStrings:Array = new Array(["alpha", "beta", "gamma"]); var myNumbers:Array = new Array([1,2,3,5,8]); Keywords and reserved words Reserved words are words that you cannot use as identifiers in your code because the words are reserved for use by ActionScript. Reserved words include lexical keywords, which are removed from the program namespace by the compiler. The compiler reports an error if you use a lexical keyword as an identifier. The following table lists ActionScript 3 lexical keywords. Table 1. ActionScript 3 Lexical Keywords as if return break implements super case import switch catch in this class instanceof throw const interface to default internal true delete is try do native typeof else new use extends null var false package void finally private while for protected with function public There is a small set of keywords, called syntactic keywords, that can be used as identifiers, but that have special meaning in certain contexts. The following table lists ActionScript 3 syntactic keywords. Table 2. ActionScript 3 Syntactic Keywords each include override get dynamic static set final namespace native There are also several identifiers that are sometimes referred to as future reserved words. These identifiers are not currently reserved in ActionScript 3. However, Adobe recommends avoiding these words because a subsequent version of the language may include them as keywords. Table 3. ActionScript 3 Future Reserved Words abstract export throws boolean float to byte goto transient cast intrinsic type char long virtual debugger prototype volatile double short enum synchronized Slash syntax Slash syntax is not supported in ActionScript 3. Slash syntax was used in earlier versions of ActionScript to indicate the path of a movieclip or variable. Where to go from here Now that you are familiar with the syntax, learn other fundamentals of programming in ActionScript 3. Begin with ActionScript 3 fundamentals: Variables, ActionScript 3 fundamentals: Data types, ActionScript 3 fundamentals: Operators, and ActionScript 3 fundamentals: functions. Acknowledgement The content in this article is based on material originally published in the Learning ActionScript 3 user guide created by Adobe Community Help and Learning.   Source: http://www.adobe.com/devnet/actionscript/learning/as3-fundamentals/syntax.html

You will be making a game like this:

The first thing we will do is set up our flash document. I’m setting mine up as 300×300px, 24fps and I’ve chosen grey as a background colour. You can choose different dimensions, but you will have to change the actionscript to reflect that.

Now we need to setup our character. Draw your character onstage and convert it to a movie clip (F8). Name it accordingly and make sure the registration point is in the centre. Then open up the properties bar for your player and set the instance name to player.

Now, open the character’s actions panel and give it these actions;

  1. onClipEvent(enterFrame){
  2. Mouse.hide();//hides the mouse
  3. this._x=_root._xmouse;//sets the x of the player to the x of the mouse
  4. this._y=_root._ymouse;//sets the y of the player to the y of the mouse
  5. }

Now test your movie, the player mc will now follow the mouse, good. So lets move onto some enemies.

Draw your enemy on the stage, and convert this to a movie clip. As with the character name it accordingly and set the registration point to the centre.

Open up the actions panel for your enemy and add these actions;

  1. onClipEvent (load) {
  2. this._x = random(300);//sets the horizontal position randomly
  3. this._y = random(-50);//sets the y position above the stage
  4. speed = random(5)+1;//sets the speed randomly
  5. }
  6. onClipEvent (enterFrame) {
  7. this._y += speed;//moves the enemy downwards
  8. if (this.hitTest(_root.player)) {//if the enemy hits the player
  9. _root.gotoAndStop(2);//goto the second frame, which will be a gameover screen
  10. }
  11. if (this._y>=310) {//if the player reaches 10 pixels below the stage
  12. this._x = random(300);//randomly set the x, y and speed again.
  13. this._y = random(-50);
  14. speed = random(5)+1;
  15. }
  16. }

Test your movie now, and see your enemy fall down the stage. You can copy and paste this enemy for multiple enemies.

Now, before we setup a game over screen, we’ll setup a timer. (For a more indepth tutorial on creating this, see here)

Draw anything, and convert it to a movie clip. Move it off the stage.

Now, double click this to get inside the mc, and add a frame in at 24, or whatever value you set your fps at. open the actions of this frame and enter;

_root.clock+=1;

Double click anywhere to return to the main timeline, and click on your frame. Add these actions in;

  1. stop();
  2. clock=0

Right, so now the clock is timing, we need a way to see it. Use the text tool to add a new text box onstage. Open the properties bar for this text box, and change the drop down menu from ’static’ to ‘dynamic’

hen, keeping the bar open, change the var: input box to clock

Test your movie, you’ll see the clock time as you play.

Right, now for the game over screen, giving users their time and an option to replay.

Add a new blank keyframe on the main timeline. On this new frame setup the way you want it to look. Make sure to copy the dynamic textbox from the other frame wherever you want your players time to show. I have this;

(NOTE: I just realised, you’ll want to put Mouse.show(); on the frame here so you can actually click your button.)

Of course, we need to give our players the option to play the game again, so we need to setup a button. More information on setting up a button can be found on the site.

The actions we want on this button are these;

  1. on(release){
  2. gotoAndStop(1);
  3. }

Now test your movie, and play your fully functioning avoision game!

If you learn more about hittests and variables, you will be able to setup scoring and powerups etc. But that’s for you to learn yourself!

Save as:firstlastname_avoidgame.fla

Exports as:  firstlastname_avoidgame.swf

THE NEXT STEP:

Modify your original game, sprite, background and actions and submit:

Save as:firstlastname_avoidgame2.fla

 

Exports as:  firstlastname_avoidgame2.swf

 

hints:  check out the additional pages for suggestions:  Part 2Part 3Part 4Part 5Part 5b

In this tutorial you will learn how to create a simple dodge game, this will help learn about hittesting, whilst allowing new flash developers to get a quick and easy game.