movie properties -...

Pa

ge

| 1

Balloon Shooter GameFlash CS4

You are going to create a game (Balloon Shooter). It is a shooting game where the player has to shoot the flying balloons to gain. There are orange colored balloons, which gives the player extra points. The player gets 1-minute to shoot as many as balloons possible. For every missed balloon, a separate score is maintained. It is very important that you name all symbols and layers exactly as instructed.

These instructions are saved in the F Drive. When you get to the point of adding actions, it will be easiest if you open this Word document and copy and paste the actions.

Movie Properties1. Create a new movie (Flash 2.0) with dimensions of 300px X 400px and fps =

24 with white as the Background Color.

Intro Screen1. Rename Layer 1 to Balloon Shooter.2. Select frame 1 on the Balloon Shooter layer. Use the Text tool type the game

title and instructions as shown in the image below (font/color of your choice).3. Create two different balloon graphic symbols and place them as shown in the

image below. You must use a radial gradient on your balloons and you balloons must be the same except for the color:a. Use the oval tool and create perfect circle (no stroke and choose the color as

the base color of your balloon).b. Use your selection tool to drag the bottom edge of the

balloon down.c. Select the balloon and open your Color window.d. Choose radial and switch the colors of the gradient (if you

used blue, the blue color should be on the left and white should be on the right).

e. Click on your paint bucket tool and change the location of the gradient to the upper right corner of the balloon (click wherever you want the center of the gradient to start.

f. Use the line tool to create the tie of the balloon.g. When you are finished, copy and paste the balloon to a

new graphic symbol and change the color of the balloon and the tie of the balloon.

4. Insert a new Click to Play layer. Type “Click to Play” below the balloons and convert it to a button.

Balloon Shooter Game Adapted from: http://www.layoutgalaxy.com/html/htmnewletter47-page1.htm

Pa

ge

| 2

5. Edit the Click to Play button as follows (insert a keyframe in over, down, and hit):a. Rename layer one to Play Buttonb. Over-Change font colorc. Down-(select text) add a blur filter and change the quality to highd. Hit-Draw a rectangle over the text

6. Return to scene one and add a the following actions to the Click to Play button:on(release) {

gotoAndStop(2);}

7. Create a new layer above the Click to Play layer and name it Actions. Add the following action to frame 1:

fscommand("showmenu",false);stop();

Game Screen8. Insert a new layer above the Click to Play layer, named

Score Panel. Insert a keyframe on frame 2.9. Create a rectangle (any color) that is 300px X 35px and

place it at the bottom of the stage.10.Insert a new layer above the Score Panel layer, named

Scores. Insert a keyframe on frame 2.


Pa

ge

| 3

11.Use the Text tool to create a Dynamic Text field to display the score. In the properties panel, make the following changes (shown to the right):a. Dynamic Textb. Verdana, size 15, Regularc. Behavior: Single line (you have to create the

text box before you can edit the behavior or the variable textbox.

d. Variable: score

12. Use the Text tool to create a Dynamic Text field to display the number of misses. In the properties panel, make the following changes (both text boxes should be the same size):

a. Dynamic Textb. Verdana, size 15c. Behavior: Single lined. Variable: missed

13.Add static text to display the words “Hits” and “Miss” beside the dynamic text boxes.

14.Select frame 2 on the Actions layer, insert a keyframe and add a stop action.15.Insert a new layer above the Scores layer and name it Balloons. Insert a

keyframe on frame 2. a. Add one of your balloons to the stage and resize it to 28px X 42px. Convert

it to a movie clip (balloon) and make sure the registration point is center.16.Edit the balloon movie clip:

a. Layer 1: Blank keyframe on frame 3. Create small gradient patches which look like a busted balloon (use edit multiple frames feature so the balloon pieces are in the same spot as the balloon).

b. Layer 1: Insert a blank keyframe on frame 4c. Insert a new layer and name it actionsd. Actions Layer: Add a stop action to frame 1


Pa

ge

| 4

e. Actions Layer: Insert a keyframe on frame 4 and type in the following action:

_parent.gotoAndPlay(3);

f. Insert a new layer below the actions layer and name it Dummy Buttong. Dummy Button layer: At frame 1 draw an oval shape (no stroke, different

color) which can cover the balloon under it

h. Select the oval shape and convert it to a button named hit button, with a center registration point.

17.Edit the hit button:a. Select frame 1 (up) on the timeline and drag it to frame 4 (hit).

18.Edit balloon movie clip:a. Select the hit button on frame 4 of the dummy button layer and add the

following actions:on (press) { gotoAndPlay(2); _root.score++;}

b. Insert a blank keyframe in frame 2 on the dummy button layer.


Pa

ge

| 5

19.Return to scene 1.20.Select the balloon movie clip on the stage, convert it to another movie clip and

name it balloon move.21.In the properties panel type the instance name as “balloon”22.Edit balloon move movie clip:

a. Insert a keyframe in frame 2b. Delete the balloon movie clip from frame 1c. Insert a new layer above the existing layer and name it Actionsd. Actions layer: insert a stop action on frame 1e. Actions layer: insert a keyframe on frame 2, insert a stop actionf. Actions layer: insert a keyframe on frame 3, and insert the following code:

removeMovieClip("");


Pa

ge

| 6

g. Layer 1, frame 2, select the balloon movie clip and add the following actions:onClipEvent (load) { _root.hitz = 0; this._alpha = 0;}onClipEvent (enterFrame) { this._y -= _root.speedz; this._rotation += 7; if (this._y<=-80) { this._alpha = 100; } if (this._y<=-380 && _root.hitz == 0) { gotoAndPlay(2); _root.missed += 1; _root.hitz = 1; } if (_root._currentframe == 3) { _parent.nextFrame(); } }

23.Go back to the game scene. The balloon movie clip looks like a dot on the stage.

24.Select the balloon move movie clip and drag it downwards so that it appears below the stage area.

25.Balloons layer, frame 2, and create a small circle beside the balloon move movie clip. Select the small circle and convert it to a movie clip named trigger.


Pa

ge

| 7

26.Select the trigger movie clip and add the following actions:onClipEvent (enterFrame) { if (_root.z%_root.intervalz == 0) { duplicateMovieClip("_root.balloon", "balloons"+_root.z, _root.z); setProperty("_root.balloons"+_root.z, _x, random(200)+50); tellTarget ("_root.balloons"+_root.z) { gotoAndPlay(2); } } _root.z++;}

27.Inset a new layer above the balloons layer and name it variables and insert a keyframe on frame 2.

28.Select frame 2 of the variables layer and add the following actions:z=0;n=0;speedz=7;speedn=10;intervalz=20;intervaln=50;hitz=0;hitn=0;score=0;missed=0;time=60;

29.Test Movie-Now you can see balloons flying. If you click them with the mouse they will bust and it will increase your score by 1 every time you hit the balloon. If you miss any of them it will count as a missed balloon.

Add 5 Point Balloon30.Duplicate the balloon movie clip symbol and name it bonus balloon.31.Duplicate the balloon move movie clip and name it bonus balloon move.


Pa

ge

| 8

32.Edit the bonus balloon movie clip:a. Layer 1, frame 1, delete the balloon instance and add your 2nd balloon in the

same location.b. Resize the 2nd balloon instance to be 33px X 50px.c. Click on the Dummy Button layer, frame 1, and resize the hit button to

make it a little bigger to match the size of the new balloon.

d. Select the hit button, and edit the action. Change line 3 (_root.score++;) to (_root.score+=5;).

e. Select layer 1, frame 3, and change the color of the busted balloon pieces.33.Edit the bonus balloon move movie clip:

a. Select layer 1, frame 2 and delete the balloon movie clip. Insert the bonus balloon movie clip in the same location (hint: place the center of the movie clip over the plus sign on your screen.

b. Layer 1, frame 2, select the bonus balloon movie clip and add the following actions:onClipEvent (load) { _root.hitn = 0; this._alpha = 0;} onClipEvent (enterFrame) { this._y -= _root.speedn; this._rotation -= 5; if (this._y<=-90) { this._alpha = 100; } if (this._y<=-380 && _root.hitn == 0) { gotoAndPlay(2); _root.missed += 1; _root.hitn = 1; } if (_root._currentframe == 3) { _parent.nextFrame(); } }

34.Go back to scene 1.35.Insert a new layer above the balloons layer and name it Bonus Balloons.

Insert a keyframe on frame 2.


Pa

ge

| 9

36.Insert the Bonus Balloon move movie clip below the stage where the balloon move movie clip is placed. In the properties panel, change the instance name to bonballoon.

37.Drag the trigger move clip on the stage and place it beside the bonus balloon move movie clip. Add the following actions:onClipEvent (enterFrame) { if (_root.n%_root.intervaln == 0) { duplicateMovieClip("_root.bonballoon", "bonballoons"+_root.n, _root.n); setProperty("_root.bonballoons"+_root.n, _x, random(200)+50); tellTarget ("_root.bonballoons"+_root.n) { gotoAndPlay(2); } } _root.n++;}

38.Test Movie-Now you should see the 2nd balloon and when it’s popped it should add 5 points to your score.

Create a Timer39.Create a new movie clip named clock.

a. Create a small circle, 27px X 27 px, with a white fill and stroke color of your choice.

b. Insert a new layer and name it Timer.c. Create a dynamic text field that can contain two digits

and place it in the center of the circle. Type in 60. Change the properties as follows:Dynamic TextVerdana, size 12, RegularBehavior: Single line (you have to

create the text box before you can edit the behavior or the variable textbox).

Variable: _root.time


Pa

ge

| 1

0

d. Insert a new layer above the Timer layer and name it Clock Tic. e. Create a small clock hand (use the line tool and start from the top of the

clock and go to the center of the clock), convert it to a graphic symbol with a bottom center registration point selected and name it clock hand.

f. Use the free transform tool to move the center of the line

to the center of the clock (the circle should overlap the plus sign (figure to the right).

g. Insert a keyframe on frame 24 on the Clock Tic layer.h. Click on frame 1 of the Clock Tic layer and insert a

motion tween. In the properties panel, set the rotation to CW 1 time.

i. Insert a frame on Layer 1 and the Timer layer.j. Insert a new layer above the Clock Tic layer and name it Actions. Insert a

keyframe on frame 24. Insert the following actions:_root.time--;

40.Return to Scene 1.41.Insert a new layer above Bonus Balloons layer and name it Clock. Insert a

keyframe on frame 2. Add your clock movie clip between the hits and misses:

42.Make sure the clock is selected and add the following actions:onClipEvent (enterFrame) { if (_root.time == 30) { _root.speedz = 9; _root.intervaln = 30; } if (_root.time == 10) { _root.intervalz = 10; } if (_root.time == 0) { _root.gotoAndStop(3); } }


Pa

ge

| 1

1

43.Insert a new layer above the Clock layer and name it Game Over. Insert a keyframe on frame 3. Use the Text tool to type “Game Over” and convert it to a movie clip named game over.

44.Add the following actions to the game over movie clip:onClipEvent (load) { Mouse.show();}

45.Below the Game over move clip type the text “You Scored:” and “You Missed:” one below the other.

46.Create two dynamic text fields to show the final scoresa. Select the dynamic text field for You Scored and

add the variable name as score.b. Select the dynamic text field for You Missed and add the variable name as

missed.

Create a Play Again Button47.Insert a new layer above the Game Over layer and

name it Play Again. Insert a keyframe in frame 3.48.Use the Text tool (make sure you use static text) to

type “Play Again.” Convert it to a button and edit the button as follows”a. Over: insert a keyframe and change the text

color to red.b. Hit: insert a keyframe and add a rectangle that

covers the words.49.Go back to scene 1 and add the following action to

the Play Again Button:on(release){

gotoAndStop(2);}

50.Select frame 3 on the Actions layer. Insert a keyframe and add a stop action.51.Test the movie.

Create a Background52.Insert a new Sky layer below the Balloon Shooter layer. Create a sky

background. Create as many new symbols as needed for your sky objects.53.Insert an Outline layer above the sky layer and create a rectangle that acts as

an outline for the game (color stroke, no fill).


Pa

ge

| 1

2

Balloon Shooter GameCriteria Total

PointsYour Points

1

Sky Layer Background resembles a “sky” scene and is visible on all 3 frames. The background does not interfere with the text or game play. 10

2

Balloon Shooter Layer All text added correctly in correct location. Two different balloon graphics created and placed in correct location. This layer is visible on frame 1 only. 10

3

Click to Play Layer Click to play button created on frame 1 (Over-different color, Down-Blur Filter

added, & Hit-Rectangle place over words). Button placed on bottom, center of screen. Action assigned to Play Button to take user to frame 2. 10

4

Score Panel Layer Keyframe inserted on frame 2. Rectangle (300px X 30px) created and added to the bottom of the stage. Panel visible on frame 2 only. 5

5

Scores Layer 2 Static text boxes created (Hits and Miss) on frame 2 only. 2 Dynamic Text boxes created (Verdana, size 15, single line) Dynamic text box

beside Hits has variable of score and misses has a variable of missed 10

6

Balloons Layer Trigger symbol added below the stage. Balloon graphic converted to Balloon movie clip, converted to Balloon Move

movie clip. Correct actions added that cause balloons to rise on the screen in frame 2 only. 20

7

Bonus Balloons Layer Trigger symbol added below the stage. 2nd Balloon graphic converted to Bonus Balloon movie clip, converted to Bonus

Balloon Move movie clip. Correct actions added that cause the 2 balloon (different color, slightly larger) to

rise, less often, on the screen in frame 2 only. 20

8

Clock Layer Clock movie clip created correctly so it counts down from 60 and clock hand

moves around the clock once every second. On frame 2 only. 15

9

Game Over Layer On frame 3 only. “Game Over” text box created correctly. Dynamic text boxes created that accurately shows hits and misses. 10

10

Play Again Layer Play Again button created correctly at bottom of screen that takes user back to

frame 2 5

12Actions Layer

Correct actions added that stop movie on each frame 5

13Outline Layer

Outline created around entire screen on all 3 frames 5Total 125


Pa

ge

| 1

3


movie properties -...

Documents