Flash Tutorial: Creating a Brick Breaking Paddle Game in Flash: Part4

Level: This is a beginner lesson, but I will assume that the reader is familiar with the basic use of the Flash software including stage, timeline, drawing tools, property window, etc.

Version: I will be using Flash CS3 and AS2 (athough tut is compatible with earlier versions of Flash) and instructions are for the Mac. Windows users would use the PC counterparts for specific instructions on Flash Menu/Shortcut instuctions.

Description: The fourth part of a Flash tutorial on making a Flash game similar to the old BreakOut game for Atari. In the first part of our game tutorial, we created the movement for the paddle and the ball. In the second part of the Flash tutorial, we set up the bricks and applied the script for the collisions of the ball with the bricks. In the third part of our Flash game tutorial, we added scores to our flash game. Now, for the fourth part of our Flash game, we will have the game advance to a new screen when we “win” the game.

Demo:

Let’s get started!

Let’s open up our Flash files from Part 3 of this game tutorial. While it’s not necessary, you may want to do a “Save As” and give your document a new name (“breakthru_game4.fla”). The reason you may want to do this is it might make it easier to review each part of the Flash tutorial later.

In our last tutorial, we added a score using dynamic text to our Flash game. What we want to do now is have the game advance to a new screen when the player “wins” the game, or clears the board of the bricks. To do this, we will be advancing the game based on the players score. The first step in order to do this is to add the next “You Win” state (or screen) to our Flash file.

On our movies main timeline (Scene 1), add a new layer called “You Win”, and move the layer under the “actions” layer. Click on frame 1 of our new layer, and add a blank keyframe (“Insert > Timeline > Blank Keyframe” or F6). Because we don’t want the other layers to be visible on frame 2 of our movie, select the 2 keyframe of all the layers below our “You Win” layer, and control-click (right-click) and select “Remove Frames” from the flyout menu.

Click on frame 2 of your “You Win” layer, select the Text Tool (T), set it to “Static Text” in your Properties Panel (“Window > Properties > Properties” or command-F3) and click on the stage and type something like

“Congratulations! You Win!” <return>
“Your Final Score Is:”

You should now have something similar to Fig. 1.

Select the Text Tool (T) again, and draw another text box below this text. In the Properties Panel, set the dropdown to “Dynamic Text”, in the “var” field give it a name of “scoreFinal” and select the “center align” paragraph setting (Fig 2).

Remember that in our previous tutorial, we added a stop(); action to frame 1 of our “actions” layer in our main timeline. So, if we were to test our movie now, we would still only be able to play our game and we would never see the “You Win” frame. So, what we need to do now is add some script that tells our Flash movie to advance to the next frame IF our score equals the “winning score”.

Open the Library window (“Window > Library” or command-L). Double click on your “mc_Brick” symbol in the library to bring up symbol editing mode. Click on frame 2 of the actions layer, open the Actions Panel (“Window > Actions” or alt-F9) and add the following code under the existing code:

if (_root.score == 160) {
_root.play();
}

What this is saying is if the dynamic text box on the main timeline with the var name “score” (which we set up in our previous tutorial) is equal to 160, than play our main timeline. We use 160 because there are 16 bricks worth 10 points each: 16 x 10 = 160. So, in order for our score to equal 160, all the bricks must be hit by our ball. Once that is done, we advance to the next frame of our main timeline (_root), if our score is less than 160, we remain on frame 1 of our main timeline (because of the stop(); action we already applied).

—- ads by google —-

Return to Scene 1 of your movie. Click on frame 2 of our “actions” layer and add a blank keyframe. With frame 2 still selected, open the actions panel and add the following code:

stop();

scoreFinal = score;

What this code does is stops our movie on frame 2 and sets our dynamic text box with a var name of “scoreFinal” (which we set earlier in this tutorial) to be the same as whatever the text is in our text box with the variable name of “score”. Of course you could simply say “scoreFinal = 160“, since we know that the score is 160 if they hit this frame, but I’m going to set it dynamically in order to give you a teaser for the next part of this series which is what happens if a player loses. After all, what fun is a game that you ALWAYS win??

For now, go ahead and test your movie. The game should play just like it did at the end of the last tutorial, but now when you have all the bricks cleared, you should see the “Congratulations…” text. Obviously, this “You Win” page isn’t the most exciting thing in the world, so I would hope that you might play around and stylize this on your own.

I hope you enjoyed this tutorial, and hopefully you’ll come back soon for the next part of the game tutorial. Thanks for reading, and if you have trouble, the commented source file is available below to help you along.

Continue to Part 5 >>

Source Files (Flash 8): Flash Tutorial: Breakthru Flash Game Part 4

Be Sociable, Share!

• 
•