Upload
kelly-bauer
View
122
Download
0
Tags:
Embed Size (px)
DESCRIPTION
How to use Flash to design and program games step by step
Citation preview
Flash 8 Multimedia: Game Design Sydney CEO
Kelly Short 1
Flash Multimedia:
Game Design
Prepared by: Kelly Short
Flash 8 Multimedia: Game Design Sydney CEO
Kelly Short 2
Section Page
1 The Scene Panel 6
2 Action Panel 7
3 Responding to a key action 8
4 HitTest 11
5 Responding to a hitTest 12
6 Adding a score 14
7 Shooting 15
8 Adding sound to movement 17
9 Turning on and off sounds 18
10 The Final Code 20
Contents
Flash 8 Multimedia: Game Design Sydney CEO
Kelly Short 3
Screen Layout
Create a new Flash Document
Lists recently opened items
Flash 8 Multimedia: Game Design Sydney CEO
Kelly Short 4
Tim
elin
e
Stag
e To
olba
r
Prop
ertie
s Bar
Libr
ary
Flash 8 Multimedia: Game Design Sydney CEO
Kelly Short 5
The Timeline
The Tools Sub Select (A)
Gradient Fill (F)
Lasso (L)
Text (T)
Rectange (R)
Paintbrush (B)
Paint Bucket (K)
Erase (E)
Zoom (Z)
Stroke Colour
Fill Colour
Tool related Options
Black and White, No colour, Swap Colours
Select (V)
Free Transform Tool (Q)
Line Tool (N)
Pen Tool (P)
Oval (O)
Pencil (Y)
Ink Bucket Tool (S)
Eye Dropper (I)
Hand Pan(H)
Layer Name
Key Frame Empty Key Frame
Empty Frame
Scene and Symbol New Layer, Motion Guide, Layer Folder
Onion Skinning
Flash 8 Multimedia: Game Design Sydney CEO
Kelly Short 6
The Scene Panel In order to create any multimedia product, you must cre-ate multiple scenes, and navigate between them. Open the scene panel by going to Window—>Other Panels—>Scene
This lists the scenes that are within your document. Double click to change the names
Delete the scene
Add a new scene
Duplicate the current scene
Flash 8 Multimedia: Game Design Sydney CEO
Kelly Short 7
The Action Panel
Add an action script statement
Lists all the action script statements, double click to add
States what object you have added the action script to
Flash 8 Multimedia: Game Design Sydney CEO
Kelly Short 8
Responding to a key action Begin
Which Key is Pressed?
Print Message to say “Right”
Print Message to say “Left”
Print Message to say “Up”
Print Message to say “Down”
Create a key Listener
End
Draw a ball and convert it to a symbol (movie clip) Call the ball “Ball” Because there can be multiple instances of the one symbol, you also need to name the instance of the ball that you are using.
With the ball selected, type in “Ball1” into the instance name
Flash 8 Multimedia: Game Design Sydney CEO
Kelly Short 9
The following is the code to add the keylistener: (line numbers are for reference only) Add this as a frame script 1. /* =======================Key Listener=============================*/ 2. var myListener:Object = new Object(); 3. 4. //=============================================on key release 5. myListener.onKeyUp = function () { 6. switch (Key.getCode()) { 7. case Key.RIGHT : 8. 9. break; 10. case Key.LEFT : 11. 12. break; 13. case Key.UP: 14. 15. break; 16. case Key.DOWN: 17. 18. break; 19. }//end switch 20. 21. }//end function 22. 23. Key.addListener(myListener);
At the moment though, this does not do anything aside from add a listener. It doesn’t actually respond to the listener, because you haven’t programmed it to do anything. On the following lines, insert the following code: 8. trace ("Right"); 11. trace ("Left"); 14. trace ("Up"); 17. trace ("Down");
Your code should now look like this: (Changes in bold) /* =============Key Listener============================================*/ var myListener:Object = new Object(); //=============================================on key release myListener.onKeyUp = function () { switch (Key.getCode()) { case Key.RIGHT : trace ("RIGHT"); break; case Key.LEFT : trace ("Left"); break; case Key.UP: trace ("Up"); break; case Key.DOWN: trace ("Down"); break; }//end switch }//end function Key.addListener(myListener);
Flash 8 Multimedia: Game Design Sydney CEO
Kelly Short 10
Of course, the trace function is simply there to see if your ball will actually move. In order to make it move, you have to program it to. Add the bold sections to your code /* =======================Key Listener==================================*/ var myListener:Object = new Object(); //=============================================on key release myListener.onKeyUp = function () { switch (Key.getCode()) { case Key.RIGHT : _root.ball1._x= _root.ball1._x + 10; //moves ball 10 right of //current x position of ball break; case Key.LEFT : _root.ball1._x= _root.ball1._x - 10;//moves ball 10 left of cur //rent x position of ball break; case Key.UP: _root.ball1._y= _root.ball1._y - 10;//moves ball 10 UP of cur //rent y position of ball trace ("Up"); break; case Key.DOWN: trace ("Down"); _root.ball1._y= _root.ball1._y + 10;//moves ball 10 Down of cur //rent y position of ball break; }//end switch }//end function Key.addListener(myListener);
Flash 8 Multimedia: Game Design Sydney CEO
Kelly Short 11
Hit Test http://www.kirupa.com/developer/actionscript/hittest.htm
Select the circle movie clip. Once the circle movie clip has been se-lected, click the Instance tab to display the Instance panel. In the Name field of the Instance panel, enter the word circle
Because it takes at least two objects to create a collision, you will need to name the second object: the square movie clip. Select the blue square and give it the name: block. You would enter the word 'block' in the Instance panel just like you did for the circle movie clip in Step 1
Once you named the block movie clip, it is time to add the actions. Right click on the circle movie clip and select Actions. The Object Actions window will appear. Copy and paste the following code into that window:
onClipEvent (enterFrame) {
if (_root.circle, hitTest(_root.block)) {
_root.text = "Collision Detected";
} else {
_root.text = "No Collision";
}
}
The code following this statement will be enabled each time the frame of the movie clip loads. Basically, enterFrame, en-ables the action to loop continuously.
If the two shapes are colliding
Displays in the text box on the screen
Flash 8 Multimedia: Game Design Sydney CEO
Kelly Short 12
Responding to a Hit Test onClipEvent (enterFrame) {
if (_root.circle, hitTest(_root.block)) {
//anything you put here will happen if there is a conection
} else {
//anything you put here will happen if there is a conection
}
}
Things you can do:
• go back in the opposite direction
• Play a sound (see Multimedia booklet)
• Explode
Exploding: Double click on the circle. In the timeline, set a keyframe at Frame 2. This is where the explosion will start. Place a stop script on frame 1. This way, the explosion will only start when the object gets sent to Frame 2
Set a stop(); script here.
This should be the same as the first frame
Change this to a spot, or differ-ent shape and shape tween
Flash 8 Multimedia: Game Design Sydney CEO
Kelly Short 13
onClipEvent(enterFrame) { if(this.hitTest(_root.square1)) { _root.ball1.gotoAndPlay(6); } }
Flash 8 Multimedia: Game Design Sydney CEO
Kelly Short 14
Adding a score Adding a score is very simple. First, create a dynamic text field to store the score and add the Var property of score.
Add the score variable To embed the
font into the text field click here
onClipEvent(enterFrame) { if(this.hitTest(_root.square1)) { _root.ball1.gotoAndPlay(2); _root.score=_root.score+1;//make sure there //are no spaces or it won’t //work! } } Also, on the frame script, declare and initialize the variable score by: var score:Number = 0;
Flash 8 Multimedia: Game Design Sydney CEO
Kelly Short 15
Shooting
Draw the following shot and convert it to a symbol
Convert to symbol again, so that you have done so twice. Double click to enter the first symbol
Flash 8 Multimedia: Game Design Sydney CEO
Kelly Short 16
Motion tween so that the shot moves across the screen
Add a stop(); script here, as most of the time, you do not want to shoot, only when key is pressed.
Add a stop here
If the space key is pressed
Change the position of the bul-let to where the ball is
Shoot the bullet
Flash 8 Multimedia: Game Design Sydney CEO
Kelly Short 17
Adding sound to movement 1. Select File > Import to import a sound. 2. Select the sound in the library, right-click (Windows) or Control-click (Macintosh), and select Linkage.
Select Export for ActionScript and Export in First Frame; then give the sound the identifier Swish1
To add sound, for example, to shot: Var HitSound:Sound = new Sound(); HitSound.attachSound("Swish1"); HitSound.start(); break;
Flash 8 Multimedia: Game Design Sydney CEO
Kelly Short 18
Turning sound on and off
Create a button to turn sound on and off
Add the following code to the button: on (release) { if(SoundOn==1){ SoundOn=0; } else { SoundOn=1; } trace (SoundOn); }
Flash 8 Multimedia: Game Design Sydney CEO
Kelly Short 19
Now, every time a sound plays you must add a condition: if(SoundOn==1)//if the sound is on { //add sound var HitSound:Sound = new Sound(); HitSound.attachSound("Swish1"); HitSound.start(); break; }
Flash 8 Multimedia: Game Design Sydney CEO
Kelly Short 20
The Final Code //The Frame Script var score:Number = 0; /* =======================Key Listener==================================*/ var myListener:Object = new Object(); //=============================================on key release myListener.onKeyUp = function () { switch (Key.getCode()) { case Key.RIGHT : _root.ball1._x= _root.ball1._x + 10; //moves ball 10 right of current //x position of ball break; case Key.LEFT : _root.ball1._x= _root.ball1._x - 10;//moves ball 10 left of current //x position of ball break; case Key.UP: _root.ball1._y= _root.ball1._y - 10;//moves ball 10 UP of current y //position of ball trace ("Up"); break; case Key.DOWN: trace ("Down"); _root.ball1._y= _root.ball1._y + 10;//moves ball 10 Down of current //y position of ball break; case Key.SPACE: ypos=getProperty(ball1,_y); setProperty(shot1,_y,ypos); shot1.gotoAndPlay("start");//throwshot if(SoundOn==1)//if the sound is on { //add sound var HitSound:Sound = new Sound(); HitSound.attachSound("Swish1"); HitSound.start(); break; } }//end switch }//end function Key.addListener(myListener);
Flash 8 Multimedia: Game Design Sydney CEO
Kelly Short 21
//On the Ball onClipEvent(enterFrame) { if(this.hitTest(_root.square1)) { _root.ball1.gotoAndPlay(2); _root.score=_root.score+1; } } //On the sound button on (release) { if(SoundOn==1){ SoundOn=0; } else { SoundOn=1; } trace (SoundOn); }