The goal of gotoAndLearnFlash is to have users find the Flash tutorials they want, and write their own reviews to let future readers of this site know whether the tutorial was really helpful or not. While my goal here is to find the best free online Flash tutorials the net has to offer, I simply don’t have the time to review each and every tutorial I come across. That is why I encourage users to check out the tutorials, come back and rate or review them for future readers.

Currently, there are only a few tutorials listed, but I try to add more and more when I can. The biggest hurdle is I really would like to review any tutorials that I post, but I simply don’t have the time. So, I’ve been posting some Flash tutorials without an editorial review in hopes that users will add their own reviews in the comments section. Better than a rating system, I believe a user review will help gauge whether the tutorial is really worth checking out. If you enjoy my tutorials, check out www.gotoandlearn.com to find more Flash tutorials from other authors that I found helpful.

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 fifth part of a Flash tutorial on making a Flash game similar to the old BreakOut game for Atari. In previous parts, we created the movement for the paddle and the ball, set up the bricks and the script for collisions, added scores to our Flash game, and in our last tutorial, we set it up to go to a “You Win” screen. In this tutorial, we will set up a players “lives”, as well as what will happen when the player runs out of lives.

Demo:

(Refresh page if you don’t see the ball animation)

Let’s get started!

Let’s open up our Flash files from Part 4 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_game5.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 set our Flash game to go to a new frame when the player “wins” the game (or clears the board). Now, we want our Flash movie to change if the player “loses” the game. By “losing” the game, we simply mean the player has run out of “lives” (or balls). So, the first thing we need to do is set up some new text boxes to display our players lives. This is done similarly to how we set up the score text in Part 3 of this Flash tutorial series. In fact, to get started, we are going to do a copy/paste of the text we set up.

Click on frame 1 of our main timeline (Scene 1), and be sure your “score text” label is not locked. On the stage, select both the static text box (where it says “Score”) and the dynamic text box (the box with the dotted line around it) (Fig. 1). Tip: It may be easier to select these if you lock all the other layers except your “score text” layer.

Choose “Edit > Copy” (command-C) to add these items to the clipboard. Add a new layer above your “score text” layer and name your new layer “Player lives”. Click on frame 1 of your new layer and choose “Edit > Paste” (command-V) to paste a copy of your text boxed to the stage. Position these boxes at the bottom right corner of the stage, aligned with your score text boxes. Double click on the “Score” text on the right side of the stage, and type the word “Lives”. Now, click on the dynamic text box next to the “Lives” text and in the Properties Panel (“Window > Properties > Properties” or command-F3) change the “var” text field to say “lives” (Fig 2). Last step is to click on frame 2 of our “Player Lives” layer, and right-click (option-click) and choose “Remove Frames” from the menu flyout.

We now have our Player Lives text boxes ready, so now we have to add the code that will dynamically change when our paddle (player) misses the ball (player life). On our main timeline, click on frame 1 of the “actions” layer, open the Actions Panel (Windows > Actions or alt-F9) and add the following code below the existing code:

var lives = 5;

This, as you probably could guess, sets our dynamic text box with the var name of “lives” to display he number 5, where 5 is the number of chances the player has to drop the ball before losing the game.

Now that we assigned a number of player lives, we need to add some script that tells Flash to take away a life when the player misses the ball. On our stage, select the white circle (ball). You’ll remember in Part 1 of our Flash game tutorial we set added some script that reset our ball if the player missed the ball. In that same section of code (the if statement towards the bottom), we need to add some additional code to tell Flash to deduct a number from our “Lives” text box. Add the bold, blue code below to your existing code (green code should have been added in part 1):

if (this._y > 300) {
_root.lives -= 1;
if (_root.lives == 0) {
_root.play();
}
_x = 150;
_y = 100;

dir = Math.round(Math.random() * 1);
speed = 10;
if (dir == 1) {
var Ang = 45;
} else {
var Ang = 135;
}
xspeed = speed * Math.cos((Ang) * Math.PI / 180);
yspeed = speed * Math.sin((Ang) * Math.PI / 180);
}
}

Explanation of the new code:

if (this._y > 300) {
_root.lives -= 1;

If our ball y coordinate is greater than 300 (goes below the paddle), subtract our “lives” by 1.

if (_root.lives == 0) {
_root.play();
}

If our “lives” is equal to 0 (meaning we have no lives left), then play our main timeline.

Go ahead and test your movie. On start, you should see that you have “5″ lives. Each time you miss a ball, you should see your lives go down by 1 number. If your lives goes all the way to 0, you should see frame 2 of your main timeline come up… but wait, it still says “You Win…”. Well, we don’t want it to say that unless we clear the board, so we need to make it say something other than that if we lose, right? Well, luckily Flash makes it pretty easy to do that.

—- ads by google —-

Click on frame 2 of the “You Win” layer in your Flash file. Select the “Congratulations…” text box, and in the properties panel, change the drop down to “Dynamic Text” and in the “Var” text field give it the name “gameOver”. You’ll notice that when you change the text box to “Dynamic Text”, the actual text in your box did not change. That’s because you can input text to a dynamic text box in Flash and have it display in your movie, but because it’s “dynamic” you can modify it using ActionScript code. So, since if the player wins, we want this text to read “Congratulations…” we will leave this. But, if the Player loses, we need it to say something else. We’ll add that code now.

Click on frame 2 of your “actions” layer, open your Actions Panel and add the following code below the existing code:

if (_root.lives == 0) {
gameOver = “<p align=’center’>Sorry, you lose! <br><br>Your Final Score Is:</p>”;
}

What this says is if our player lives is equal to zero, our dynamic text box should insert the text between the quotation marks. But hold on a minute… what’s with all the extra text here? Well, if your familiar with HTML code, you should recognize this as HTML markup language. That’s right, Flash can render HTML text in a dynamic text field! But, for this to happen, we need to tell our text box to render HTML code.

Click on frame 2 of the “You Win” layer, and select the top dynamic text box. In the Properties Panel, click on the “Render Text as HTML” button (the button with the angle brackets (<>) on it (Fig 3).

That’s it! I must say our game is looking pretty good right now, don’t you agree? We have our basic challenge of bouncing a ball into multiple bricks, we can keep score, and now we only have a certain amount of chances in order to accomplish our goal. Pretty cool. While this game seems pretty complete, there’s so much more we can do to this game, including adding a start screen, adding additional levels and making different skill levels. Study up on these tutorials, and hopefully you can figure out how to do some of these things yourself, but if not, check back soon as I plan to cover all of these steps in future tutorials!

Thanks for reading, and I hope you were able to follow along and create your own Flash game, and I also hope that they have given you a nice little primer for Flash game development. Good luck and don’t forget to check back soon to expand on our Flash Breakout Game!

Source files (Flash 8): Flash Tutorial: Breakthru Flash Game Part 5

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

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

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: In this tutorial, I will explain the second part of making a game similar to the old BreakOut game for Atari. In the previous part, we created the movement for the paddle and the ball. In this part, we will set up the bricks and apply the script for the collisions of the ball with the bricks.

Demo:

Let’s get started!

Let’s open up our Flash files from Part 1 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_game2.fla”). The reason you may want to do this is it might make it easier to review each part of the tutorial later.

In our last tutorial, we set up the movement of the ball and the paddle. The ball bounces around the stage, and when it hits either side, or the top of the stage, it reverses angle and direction. The paddle is controlled by the user using the left and right arrow keys, and when the ball hits the paddle, it reverses angle and direction. Pretty neat, but not the most fun game in the world… so what we will do now is add the bricks for the us to try and direct the ball into. What we want to happen is when the ball hits a brick, that brick will disappear, and the ball will reverse angle and direction.

Obviously, the first thing we need to do is draw our bricks, and set them up in a “grid” type alignment similar to Fig. 1 below.

You’ll notice we have 16 different bricks that are 4 different colors. You of course can add as many or as few bricks as you want, but for simplicity I think this is a good number. Because Flash allows us to edit certain aspects of a symbol on the stage, such as color and size, without changing the appearance of our original Library symbol, we will only need to draw our brick symbol once.

Select the Rectangle Tool (R), and choose no stroke (white swatch with a red line through it in the color pallette), and a fill of red (although any color is fine). Draw a rectangle on your stage approximately 75 pixels wide by 10 pixels tall. Select your rectangle using the Selection Tool (V), and choose “Modify > Convert to Symbol” (F8), and give your symbol a name of “mc_brick” and select the “Movie Clip” radial and hit “Ok”. With your mc_brick symbol still selected, again choose “Modify > Convert to Symbol” (F8), and give your symbol a name of “mc_brickHolder” and select the “Movie Clip radial and hit “OK”.

—- ads by google —-

What you will now have is a nested movie clip (mc_brick is nested within mc_brickHolder) (Fig. 2). The reason we want to nest our “mc_brick” symbol inside the “mc_brickHolder” movie clip is because all of our bricks on the stage will be using the same ActionScript code. By nesting our brick symbol in a holder mc, we will only need to apply our ActionScript once (within the holder clip). While we could place each “mc_brick” symbol on the stage the same way we will the holder, if we did it that way we would need to add the ActionScript to each instance of our brick (16)… and if we need to trouble shoot, we would be trouble shooting our script 16 times. This way, we only need to add the code once, and if we need to modify the code, we only need to modify it once. I know that explanation might be a little confusing, but hopefully it makes more sense by the time you get to the end of this tutorial.

From the Library window (“Window > Library” or command-L), click on your “mc_brick” symbol to bring it into sybmol editing mode. Add a new layer and label it “actions”, and name the layer with your rectangle “brick”. In frame 2, add a new keyframe (“Insert > Timeline > Keyframe” or F6) to both layers. Select frame 1 of your actions layer, open the Actions Panel (“Window > Actions” or alt-F9), and place a stop action here:

stop();

Input another stop action on Frame 2 of the actions layer. On Frame 2 of your brick layer, delete the rectangle from the stage. Your timeline for this symbol should now look similar to Fig. 3 below.

Now, from the Library window, click on the “mc_brickHolder” symbol to bring it into symbol editing mode. This is where we will be adding the Action Script that controls what will happen when our ball comes into contact with our brick. On the stage, click on the rectangle ONCE (clicking twice will bring you into “mc_brick” symbol editing mode, which is what we don’t want). Tip: if you click on the symbol on the stage once, you will see a blue bounding box around the symbol. If you are in symbol editing mode, clicking on the rectangle will show whitedots within your selection (Fig 4).

With our symbol on the stage selected, open the Actions Panel and add the following script:

onClipEvent(enterFrame) {
if ((this.hitTest(_root.ball))) {
_root.ball.yspeed = -_root.ball.yspeed;
this.play();
}
}

Here is the code explanation (which relates to the code from Part 1 of this tutorial):

onClipEvent(enterFrame) {

When we get to this frame, perform the code between the curly brackets.

if ((this.hitTest(_root.ball))) {

If our ball (“_root.ball“) moviclip touches (“.hitTest“) the brick (“this“), then perform the actions between the curly brackets.

_root.ball.yspeed = -_root.ball.yspeed;

reverse the angle and direction of the ball (set in Part 1 of this tutorial)

this.play();
}
}

And play the brick movie clip (advancing it to the blank frame of our mc_brick symbol, essentially making our brick disappear).

That’s all the ActionScript needed for this tutorial. All that’s left to do now is place our bricks onto the stage.

Return to Scene 1 of our flash movie. Create a new layer named “bricks” and drag your “mc_brickHolder” symbol from the library to the stage. Select the symbol on the stage, and open the Info pallette (“Window > Info” or command-I). Set the width to 73, the height to 10, the x to 37.5 and the y to 44 (Fig. 5).

We now want to place this symbol 4 columns across and 4 rows up. Click on the symbol, select “Edit > Copy” (command-C) and then select “Edit > Paste” (command-V). This will add another instance of the symbol to your stage. Move this instance so that it sits next to your first symbol (it doesn’t have to be exact, we’ll fix it in a minute). Paste two more intances of the symbol, and align them 4 across, setting the 4th one against the right side of the stage. Now, select all 4 instances (drag your mouse over all, or “shift-click” on each symbol), and open the Align pallette (“Windows > Align” or command-K). Be sure that the “To Stage” button is deselected, and click on the distribute horizontal button and the align vertical center buttons to set all 4 instances in a perfect row, equally spaced apart (Fig 6).

With all four rectangles still selected, do another copy paste. In the Properties panel (Window > Properties > Properties or command F3), next to “Color”, select “Tint” from the drop down, and choose an orange color from the color pallette (Fig. 7). Position this row above the row of red rectangles (you can use the Align pallette if needed). Repeat this process 2 more times, making one set of bricks blue and one green. You should now have the grid similar to Fig 1 at the beginning of this tutorial.

That’s it. We are now done with our Flash game! Go ahead and test your movie and see what happens. While this is a relatively simple and basic game, I think it’s a great start to learning about Flash game development and design. I hope you enjoyed this tutorial, and have fun playing your newly created game. In a future tutorial, I will show you how to add a scoring feature, as well as player “lives”.

Thanks for reading!

Continue to Part 3 >>

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

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: In this tutorial, I will explain the first part of making a game similar to the old BreakOut game for Atari. In this part, I will show you how to set up the ball and paddle movement for the demo below.

Demo:

Let’s get started!

Select “File > New” (command-”N”) and select Flash File (ActionScript 2.0) to open a new Flash document file. Save the file, and give it the appropriate name. I will call this “breakthru_game1.fla”. Feel free to change the document dimensions to whatever you like (“Modify > Document” or “command-J”), but for the purpose of this tutorial, I will use 300×250 pixels. Let’s also give our stage a background color of black. You can either do this using “Modify > Document” (command-J), or by setting the “Background” color in your “Properties Panel’ (“Window > Properties > Properties” or command-F3).

The first thing we will do is set up the ball. On the center of your stage, draw a small circle using the “Oval Tool” (“O”) approximately 15 pixels in diameter with a white fill and no stroke. (Tip: Hold “Shift” when dragging the mouse to draw a perfect circle). Select your circle and select “Modify > Convert to Symbol” (F8). In the “Convert to Symbol” dialog box, give your symbol a name of “mc_ball”, and select the “Movie Clip” radial. Also be sure to select the center box in the “Registration” (Fig 1) and hit “OK”.

Now that our ball is a movie clip, we can add actions to it. Select your circle on the stage, and in the “Properties Panel”, give it an instance name of “ball”. With your ball still selected, open the “Actions” panel (“Window > Actions” or “alt-F9″) and insert the following code (I will try to explain the code later):

onClipEvent(load) {
dir = Math.round(Math.random() * 1);
speed =10;

if (dir == 1) {
var Ang = 45;
} else {
var Ang = 135;
}

xspeed = speed * Math.cos((Ang) * Math.PI / 180);
yspeed = speed * Math.sin((Ang) * Math.PI / 180);
}

onClipEvent(enterFrame) {
this._x += xspeed;
this._y += yspeed;
if ((this._x <= 5) || (this._x >= 295)) {
xspeed = -xspeed;
}

if ((this._y <= 5) || (_root.pad.hitTest(this))) {
yspeed = -yspeed;
}

if (this._y > 300) {
_x = 150;
_y = 100;

dir = Math.round(Math.random() * 1);
speed = 10;
if (dir == 1) {
var Ang = 45;
} else {
var Ang = 135;
}
xspeed = speed * Math.cos((Ang) * Math.PI / 180);
yspeed = speed * Math.sin((Ang) * Math.PI / 180);
}
}

We now have movement of our ball using ActionScript. You can go ahead and test your movie if you want (“Control > Test Movie” or command-Return). The ball will move towards the bottom of the page at an angle, disappear off the bottom and then start again from the center of the stage.

What we need to do now is create a “paddle” for our ball to bounce off of. For this, we will create a small rectangle, approximately 10 pixels high by 50 pixels wide, with a white fill and no stroke. Place this rectangle near the bottom edge of your stage. (Fig 2)

Select your rectangle, and choose “Modify > Convert to Symbol” (F8). Give your symbol a name of “mc_paddle” and be sure to select the “Movie Clip” radial. Now, with the rectangle selected on the main stage, give it an instance name of “pad”. With your movie clip still selected, open the Actions Panel and insert the following code:

onClipEvent(enterFrame) {

if(Key.isDown(Key.RIGHT)) {
if(this._x <= 275) {
this._x += 10
}
}

if(Key.isDown(Key.LEFT)) {
if(this._x >= 25) {
this._x -= 10;
}
}
}

That’s it! We have now set up the ball and paddle movement for our game. If you test your movie, you should see the ball move as before, and you should be able to move the paddle (rectangle) from side to side with the arrow keys. When the ball hits the paddle, the top or either the left or right side, it should bounce off and move in the opposite direction. Now, I will try to explain the code and hopefully it will help you understand what is happening here. I’ve also heavily commented the source code (for those of you who are impatient), which you can download below.

—- ads by google —-

Code Explanation for the Ball (circle):

onClipEvent(load) {

When the movie clip loads, perform the actions between the curly brackets.

dir = Math.round(Math.random() * 1);

Sets a random direction of either 0 or 1 where 0 = left, 1 = right.

speed =10;

Sets the speed the ball will travel. Higher the number, the faster the ball will move.

if (dir == 1) {
var Ang = 45;

If the direction of the ball (set randomly above) is equal to 1 (right), then the angle of the movement will be 45 degrees.

} else {
var Ang = 135;
}

Otherwise, the angle of the movement will be 135 degrees.

xspeed = speed * Math.cos((Ang) * Math.PI / 180);

Sets the x vector for the ang, and tells flash how much to move the balls x coordinate.

yspeed = speed * Math.sin((Ang) * Math.PI / 180);
}

Sets the y vector for the ang, and tells flash how much to move the balls y coordinate.

onClipEvent(enterFrame) {

When the clip enters this frame, perform the actions between the curly brackets.

this._x += xspeed;
this._y += yspeed;

Sets the _x and _y coordinates to the xspeed and yspeed we determined on the onLoad above.

if ((this._x <= 5) || (this._x >= 295)) {
xspeed = -xspeed;
}

If the _x coordinate is less than five or (||) the _x coordinate is greater than 295, reverse the xspeed of the ball. Basically, what this says is if the ball hits either side of the stage, reverse the direction (change xspeed from postive to negative or vice versa). The numbers 5 (left edge) and 295 (right edge) correspond to the size of your stage and take into account that the _x coordinate of your ball is based on the center point. For the true “edge” of the stage we would use 0 and 300 (the width of the stage), but then half the ball would be off the visible area of the stage before the direction change took effect.

if ((this._y <= 5) || (_root.pad.hitTest(this))) {
yspeed = -yspeed;
}

This is basically doing the same as our _x statement above, but is setting the _y coordinate to change direction if it hits either the top of the stage (_y<=5), or if it hits the pad (_root.pad.hitTest(this))) where “this” is the ball and “_root.pad.” is the rectangle instance name.

if (this._y > 300) {

if the ball goes below the bottom of the stage (greater than 300, our stage height of 250 plus a little extra so there is a slight pause when we miss it)

_x = 150;
_y = 100;
dir = Math.round(Math.random() * 1);
speed = 10;
if (dir == 1) {
var Ang = 45;
} else {
var Ang = 135;
}
xspeed = speed * Math.cos((Ang) * Math.PI / 180);
yspeed = speed * Math.sin((Ang) * Math.PI / 180);
}
}

Set a new ball using the same actions we used for the “onLoad” above.

Code explanation for the paddle (much simpler than the ball…):

onClipEvent(enterFrame) {

On enterFrame, perform the action between the curly brackets.

if(Key.isDown(Key.RIGHT)) {

If the right arrow key is pressed….

if(this._x <= 275) {

and the _x coordinate is less than 275 (the width of our stage minus 1/2 the width of our paddle)…

this._x += 10
}
}

move the paddle 10 pixels to the right.

if(Key.isDown(Key.LEFT)) {

If the left arrow key is pressed…

if(this._x >= 25) {

and the _x coordinate is greater than 25 (1/2 the width of our paddle)…

this._x -= 10;
}
}
}

move the paddle 10 pixels to the left.

Since there is a lot going on with this, I decided to break this game tutorial into several parts. Check back soon for Part 2 which will explain how to set up the bricks which is really what turns this into a fun, interactive game.

Continue to Part 2 >>

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