Of course, not everyone gets through these tutorials without problems. I understand, it’s expected. I don’t fell that my tutorials are bad because some people have problems, and I don’t think people who have difficulties with the tutorial don’t know what they are doing. People learn differently and comprehend things differently, so not everyone gets through these tutorials without a hitch.

I get plenty of questions and comments when people are having problems with any of my Flash tutorials. And I absolutely welcome all questions and comments (good or bad). I try very hard to help users and answer any questions they may have. I’ve had several back and forth emails with different readers who have had questions, and hopefully have helped them solve the problems. Unfortunately, I’m not always able to answer questions for several reasons… sometimes I just don’t have the time, sometimes the reader didn’t provide enough info, sometimes the question is well beyond the scope of the tutorial… but no matter whether I can answer the question or not, I appreciate people asking. It let’s me know that people are reading them, which is very gratifying.

Recently, a reader was trying to apply one of my tutorials to a real world project, and was struggling to get it to do exactly what she needed. We’ve been communicating through email for several weeks now, and while we haven’t quite gotten to the desired result just yet, I think we will. As appreciation for my help, she has made a monetary donation to the site. While it wasn’t expected, and no dollar value was asked of her, it was very appreciated. She simply gave an amount that she thought was right, and I happily accepted. So, for that I would like to publicly say “thank you K (aka Lou in the comment string).”

Her donation will help keep this site running so that more tutorials can be written and hopefully help others learn Flash. I know it’s been a while since I’ve written a new Flash tutorial, but the readers have actually given me several new ideas, I just need to find the time to write them. Keep those questions and comments coming, and I’ll try my best to keep writing new tutorials.

-Mike

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.

If you haven’t visited psdtuts.com (and it’s sister site nettuts.com) I recommend you check it out. They always have some great, high-quality tutorials on Photoshop (while nettuts.com is focused on Web development tutorials).

In the past, web designers faced challenges if they chose to develop a site in Flash because the content they included was not indexable by search engines. They needed to make extra effort to ensure that their content was also presented in another way that search engines could find.

Thanks in part to Adobe’s new Searchable SWF library, Google has come up with new algorithms that better search and index Flash (.swf) files.

Basically, Google can now index any textual content in a Flash file (I was under the impression that it could always do that…). I would imagine this would be text blocks that haven’t been broken apart, which some designers do to apply animation effects. In other words, say you wanted a headline that came in one letter at a time (like a typewriter)…. each letter would be a seperate element, thus put together, it reads as a word, but Google would see it as the individual letters.

In addition to text blocks, Google can now track links to other pages. While things like anchor text and title tags cannot be attributed to these links, the fact that Google can now at least REACH these pages through Flash is huge!

Google still cannot index any image elements, or really anything other than text and urls, but this is still a really big step in getting Flash sites indexed (or even having Flash elements on a page support the page content).

Read the Google Webmasters Q and A about Flash indexing.

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.

—- ads by google —-

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 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 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.

—- ads by google —-

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.

—- ads by google —-

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.

—- ads by google —-

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

Level: This is an intermeidate lesson, so 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 how to add buttons to your Flash movie with dynamic text content using ActionScript:

Demo:

Let’s get started!

Note: For this tutorial, I will be using the buttons I created for a previous tutorial titled “Animating a button using a mask effect”.

If you haven’t already, I recommend you start with that tutorial, as I will not be going over the animation process of the button symbols in this tutorial. If you already know how to create button animations, you can use your own button animation symbol, or download the previous tutorial source file here.

—- ads by google —-

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 “dynamicButton_tutorial.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 250×100 pixels.

Choose “File > Import > Open External Library” (shift-cmd-O), and navigate to where you placed the source file of our previous tutorial (btnWithMask_tut1.fla) and click “Open”. What this will do is open up just the “Symbol Library” of that source file. Tip: You can also access the symbol library of any .fla file you have open with the dropdown menu in your Symbol Library window (Fig. 1).

We will be using the symbol called “mc_btn1″ from the Button With Masked Animation source file, so we can simply click and drag this symbol from one library to the other. (Fig. 1). If you notice, when you drag the one symbol, it should also place the symbol “img_highlight” in your current file symbol library. This is because the “img_highlight” symbol is used within the “mc_btn1″ symbol, so Flash knows to import all associated symbols as well.

You can go ahead and close the external symbol library so save space since we don’t need any other symbols from there. In our dynamic button .fla symbol library, double click on our “mc_btn1″ symbol to bring us into symbol editing mode. You should see several layers and animation tweens in your timeline. We are going to leave all of this as is, so go ahead and lock all of these layers. What we need to do is add our text boxes that we will be using as our button labels. Add a new layer above your layer named “mask” and call it “text”. WIth the text tool (T), draw a box roughly the same width of our button, and position it on the center of our button shape. Select your text box, and in the Properties Panel (WIndow > Properties > Properties (cmd-F3)), and give it the settings in Fig. 2.

Now, select the text box, choose Edit > Copy (cmd-C) and then Edit > Paste in Place (cmd-shift-V), and move it 2 or three pixels up and to the left. In Properties Panel, leave all the settings the same, except change the instance name from “textBlack” to “textWhite”, and change the color to white. What we are doing is simply giving our button label a basic “dropshadow” effect, just to make it more easily legible on all the button states.

We are now done editing our button, but since we are going to be placing our button on the stage using ActionsScript, the final thing we need to do is assign our buttona “Linkage” identifier name. Not to be confused with “symbol name” or “instance name”, an identifier name is used to call our button in ActionScript in order to be place on our stage. To give you button an id, right-click (control-click) on your button symbol in your library, and select “Linkage…” from the menu. This will open the Linkage Properties window (Fig. 3). Click on the “Export for ActionScript” check box and in the “Identifier” field, type “button” and hit OK.

Now, it’s time for our ActionScript. It may look like a lot, but don’t be too intimidated, it’s not nearly as complicated as it looks, I promise!

On our main timeline, click on the first (and only) layer and give it a name of “actions”. In keyframe one, open the Actions Panel (Window > Actions or alt-F9) and paste the following code:

onLoad = function(){
var button:Array = [home, about, contact];

var xPosition:Number = 50;
var yPosition:Number = 15;

for(i=0;i<button.length;i++){
_root.attachMovie(”button”,”btn”+i,_root.getNextHighestDepth());

_root[”btn”+i]._x = xPosition;
_root[”btn”+i]._y = yPosition;

yPosition = yPosition + 25;

_root.btn0.textBlack.text = “Home”;
_root.btn1.textBlack.text = “About”;
_root.btn2.textBlack.text = “Contact”;

_root.btn0.textWhite.text = “Home”;
_root.btn1.textWhite.text = “About”;
_root.btn2.textWhite.text = “Contact”;

_root.btn0.link = “http://www.spitshine-design.com”;
_root.btn1.link = “http://www.spitshine-design.com/about.html”;
_root.btn2.link = “http://www.spitshine-design.com/contact.html”;

_root[”btn”+(i)].onRollOver = btnOver;
_root[”btn”+(i)].onRollOut = btnOut;
_root[”btn”+(i)].onRelease = btnRelease;
_root[”btn”+(i)].onPress = btnPress;
}
}

function btnOver(){
this.gotoAndPlay(”over”);
}

function btnOut(){
this.gotoAndPlay(”off”);
}

function btnPress(){
this.gotoAndStop(”down”);
}

function btnRelease() {
this.gotoAndStop(”off”);
getURL(this.link);
}

That’s it! Go ahead and test your movie. You should see 3 buttons appear, stacked, with the top one labled “home”, the middle one labeled “about” and the bottom one labeled “contact”. You should also see the animation on the different rollover states as well.

Since there is a lot of code here, rather than explain it all here, I decided to heavily comment the code in the source file. Since the real objective of any tutorial is for the reader to actually learn WHY things work and not just how, I encourage you to download the source file and read through the comments. The comments also help to explain the different items that need to be edited to customize your menu, such as placement, position and labels.

As always, I hope you found this tutorial helpful, and comments/questions are welcome. Thanks for reading!

Source Files (Flash 8): Flash Tutorial: Character Movement with Arrow Keys