Flash Tutorial: Breakout Game Tutorial Part 3
This entry was posted on Thursday, June 5th, 2008 at 1:09 am and is filed under ActionScript tutorials, Flash, Flash Tutorial, Tutorials.
You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.
Flash Tutorial: Creating a Brick Breaking Paddle Game in Flash: Part 3
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 third 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 this part of our Flash game tutorial, we will set up the game score using dynamic text.
Demo:
Let’s get started!
Let’s open up our Flash files from Part 2 of this game tutorial. While it’s not necessary, you may want to do a “Save As” and give this your document a new name (“breakthru_game3.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 the bricks for us to try and direct the ball into. What now should happen is when the ball hits a brick, that brick will disappear, and the ball will reverse angle and direction. Now, what we want to happen is in addition to the brick disappearing, we want it to add points to our game score.
Since we will be adding our game scores to the bottom of the stage, the first thing we will do is move our paddle up about 25 pixels from the bottom of the stage. Now, lets add a new layer to our timeline under the “actions” layer, and name it “background”. With the Rectangle Tool (R), draw a rectangle (any color you wish, I’ve used a purple), with no stroke, approximately 25 pixels tall across the width of your stage (Fig 1).
Add a new layer above your new rectangle, and label it “score text”. Next, select the Text Tool (T), and in the lower left corner of the stage, click on the stage and type “Score:” in white letters. Click on the text and in Properties Panel (“Window > Properties > Properties” or command-F3) be sure to select “Static Text” from the dropdown (Fig 2).
Again, using the Text Tool, draw a rectangle next to your text, and in the Properties Panel select “Dynamic Text” from the drop down, and in the “var” text field, type the word “score” (Fig 3).
Here’s a quick little explanation on “Dynamic Text” vs. “Static Text”. When we use “static text”, whatever we type in the text box will remain exactly what we typed in Flash when we publish the Flash movie. So, for items that we know will never need to change, we can use the “static text” option. With “dynamic text”, our text can change based on ActionScript that we set in our Flash movie, using the “var” name (in this case, “score”). There are multiple ways to input and display Dynamic Text fields (including importing from an XML file and even formatting as HTML), however that is way beyond the scope of this tutorial, but I thought a quick explanation of the difference would be appropriate. Tip: A dynamic text box will have a dotted line around it (as long as the layer is unlocked), while a static text field will not have a box (unless it’s clicked on) (Fig 4). Also, you can add text to a dynamic text box, and what you type will display in Flash when you publish the Flash movie (until we add code to change it….)
What we’ll do now is set our score to be 0 (zero) when the game starts. To do this, on the main timeline, click on frame 1 of your “actions” layer, open the Actions Panel, and under the “stop();” actions, add the following code:
var score=0;
What this code is doing is making our dynamic text box with the var name of “score” display a zero when the movie opens.
Now that we have our dynamic score box, we will need to add the code to change our score when we hit the brick. We will be adding this code to our “mc_Brick” movie clip. Open the Symbol Library (“Window > Library” or command-L). In the Library panel, double click on the “mc_Brick” symbol to bring it into symbol editing mode. Click on frame 2 of the “actions” layer, open your Actions Panel (Window > Actions or alt-F9), and add the following code under the stop(); action:
_root.score += 10;
What this is saying is when we get to this frame, add 10 points to the number in our dynamic text box with a var of “score” that we set on our main timeline.
That’s it! We now can keep score for our Flash game. Pretty simple, huh?
Check back soon for Part 4 of our game tutorial where we will have the game change when we “win” (i.e. clear all the bricks) the game.
I hope you enjoyed this tutorial. As always, the source files (with comments) can be found below.
Continue to Part 4 >>
Source Files (Flash 8): Flash Tutorial: Breakthru Flash Game Part 3
Tags: ActionScript 2.0, Flash, Flash ActionScript tutorial, flash games, Flash tutorials, game development
Flash Tutorial: Breakout Game Tutorial Part 2
Flash Tutorial: Breakout Game Tutorial Part 4
:evil::cry::sad: I AM TRYING YOUR TUTORIAL TO LEARN FLASH BUT IT IS NOT WORKING IN MY COMPUTER I HAVE FLASH 6 AND WHEN I AM TYPE YOUR ACTION COMMAND IT SHOW ME MANNY ERRORS
Do you have a fix for it?
Help
