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

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

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 Flash tutorial, I will show you how to move a game character using the arrow keys, and have the character face in the direction that he is moving.

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 “charMove_tut1″. Feel free to make the document dimensions (“Modify > Document or “command-J”) whatever you like, but I chose to use a size of 400 x 300 pixels.

The first thing we want to do is create a game character with 4 seperate states: left profile, right profile, front profile and back profile. Because this is not an illustration / animation tutorial, I will not be going through how to illustrate your character. Feel free to illustrate your own character, and convert each profile into it’s own symbol. For those beginners who do not want to illustrate their own character at this time, feel free to download the below .swf files (or jump to the source at the bottom of this page):

Front Profile: Download (right click on link and select “Save Link As”)

Left Profile: Download

Right Profile: Download

Back Profile: Download

—- ads by google —-

To import these files, open your Flash file, select “File > Import > Import to Library”, browse to where you saved the above files, select the files and click the “Import to Library” button. You should now see the 4 profiles as symbols in your Flash document Library (Window > Library (cmd-L)).

Once you have your character profiles ready (either by using mine or creating your own), we will need to place them in a movie clip symbol in order to control the movement. On frame 1 of our main movie timeline, select “Insert > New Symbol” (cmd-F8). This will bring up the “Create New Symbol” dialog box (Fig. 1). In the “Name” field, give your symbol an appropriate name (I chose “mc_character”, select the “Movie Clip” radial, and hit OK. This will automatically put you in the symbol editing mode for your new symbol. In your new symbol, create 2 new layers. Name the top layer “actions”, the second layer “labels” and the bottom layer “character”.

Extend your timeline to 20 frames. Select keyframe 5 for all 3 layers (you can shift click or click and drag), and insert a new keyframe (Insert > Timeline > Keyframe or F6). Do the same thing at frame 10 and 15. Click on keyframe 1 of our “labels” layer, and in the Properties window (Window > Properties > Properties or cmd-F3), give this frame a label of “right” (Fig. 2).

On frame 5, do the same thing, giving it a lable of “left”, frame 10 label “up”, frame 20 label “down”. Your timeline should now look similar to Fig. 3.

Note: Technically, we can make this movie clip only 4 frames, with frames 1-4 labeled the same as above. However, For the purposes of this tutorial, I felt it better to extend the frames in order to better illustrate the frame labels.

On frame 1 of your “character” layer, drag your right profile symbol to the stage and align it to the center. Tip: You can center align your symbols to the stage by using the Align palette (Window > Align or cmd-K (Fig. 4). Be sure the “To Stage” button is selected (it will be a darker shade of grey when selected) to align your sybols to the stage, deselecting this button allows you to align multiple symbols to each other.

On frame 5 of your “character” layer, drag your left profile symbol to the stage and align it to the center. In case you haven’t figured it out, do the same thing at frame 10 with the back profile symbol and frame 15 with the front profile symbol.

The last step is to add the ActionScript to our movie clip symbol. On the “actions” layer, click on frame 1, and add the following code to the Action panel (WIndow > Actions or alt-F9):

stop();

This simply stops our movie from playing through, since we only want it to change based on what key is pressed. Do the same thing at frame 5, 10, and 15 of our “actions” layer.

Our movie clip is now complete, so it’s time to add the ActionScript that will control our movement and the profile of our character.

Return to your main timeline. Drag your “mc_character” symbol from the library onto your stage. WIth your character selected, add the following code to the Actions panel:

onClipEvent(enterFrame){
if(Key.isDown(Key.RIGHT)){
this._x += 5;
this.gotoAndStop(“right”);
}

if(Key.isDown(Key.LEFT)){
this._x -= 5;
this.gotoAndStop(“left”);
}

if(Key.isDown(Key.UP)){
this._y -= 5;
this.gotoAndStop(“up”);
}

if(Key.isDown(Key.DOWN)){
this._y += 5;
this.gotoAndStop(“down”);
}

}

UPDATE: I’ve been finding several readers having trouble with doing a straight copy/paste of this code from the Web. I believe the issue lies in the quotation marks (”). When copying from the Web, it sometimes uses “smartquotes”. If you are getting an error on test regarding the quote marks, first step is to be sure you are using regular quotes (type them in instead of copy/paste from the Web site). If you are still having problems, feel free to drop me a comment and I will try my best to help resolve your issues. – Mike

That’s it! Go ahead and test your movie. What you shoud see is when you click on the arrow keys, your character not only moves in that direction, but faces that direction as well (up being backwards, down being forwards).

Now, let me try and explain the code:

onClipEvent(enterFrame){

On ClipEvent refers to the movie clip which this code is added to, the “enterFrame” is saying everytime our movie enters this frame of our main timeline, peform the actions between the curly brackets.

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

when the right arrow key is pressed, perform the actions within the curly brackets.

this._x += 5;

this. refers to the movie clip that this code is attached to. _x refers to the x position of this movie clip. If the right arrow is pressed, move the moviclip 5 pixels to the right (Tip: for faster movement, increase this number, for slower movement, decrease this number).

this.gotoAndStop(“right”);
}

Go to our frame labeled “right” in our movie clip symbol and stop on that frame. (Tip: Frame labels are case sensitive).

if(Key.isDown(Key.LEFT)){
this._x -= 5;
this.gotoAndStop(“left”);
}

This code is doing the same as above, but saying if the left arrow is pressed, move the clip 5 pixels to the left and go to our frame labeled “left”.

if(Key.isDown(Key.UP)){
this._y -= 5;
this.gotoAndStop(“up”);
}

This is doing the same as above, but saying if the up arrow is pressed, move the clip 5 pixels up (_y represents the y position of your clip) and go to our frame labeled “up”.

if(Key.isDown(Key.DOWN)){
this._y += 5;
this.gotoAndStop(“down”);
}
}

This is doing the same as above, but saying if the down arrow is pressed, move the clip 5 pixels down and to go our frame labeled “down”.

Thanks for reading, and I hope you found this tutorial useful. Source files are below, with commented code. As always, comments or questions are welcome. Check back soon for more expaned tutorials based on the idea of character movement.

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

Level: This is a beginner level tutorial, but knowledge of the Flash drawing tools is assumed.

Version: I will be using Flash CS3 and AS2 (although 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 demonstrate a quick and easy zoom in/out technique using a motion tween and a little ActionScript.

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 an appropriate name. I will call this “zoom_tut1.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 350×200 pixels.

The first thing we need to do is draw the object that we want to have zoom in and out. You can have this be whatever you like, but I will just use a simple rectangle with some text inside it. To do this, select the rectangle tool, give a fill color (whatever you like, it doesn’t matter), and a stroke if you desire (I chose a black fill with no stroke). Draw a small rectangle on the center of your stage. With the selection tool, select your rectangle (click-drag around your shape or double click on the shape) and choose “Modify > Convert to Symbol” (F8). Give your symbol an appropriate name (I called mine “box”), select the Movie Clip radial and hit “OK”. Your rectangle is now a movie clip symbol and should be available in your Library window (Window > Library or cmd-L).

Double click on your symbol (either on the stage or in your Library) to bring you into symbol editing mode. Within your movie clip symbol, select your rectangle and choose “Modify > Convert to Symbol” (F8) again, however this time choose the Graphic radial and give this symbol a new name (I chose “img_box”) and hit “OK”. We now have a “nested” symbol… a graphic symbol that is within our movie clip symbol. Now, click on your rectangle to bring you into editing mode for the graphic symbol. Tip: you will see a “breadcrumb” of what symbol your are currently in mode under your timeline (Fig. 1).

Add a new layer to your graphic symbol and with the Text tool, draw a box in the center of your rectangle and type “Zoom” (or whatever you like). While you don’t really need text for this symbol, I wanted to try and illustrate that this tutorial will work whether your object is on one layer, or if you have a symbol with multiple layers.

We now need to edit our movie clip symbol, so you can either double click on the symbol in your Library, or use the “breadcrumb” link under the timeline (Fig. 1). Tip: you will only see the breadcrumb of a nested symbol if you select your symbol by double clicking the object on your stage. If you select your symbol in the Library, you will only see the name of the symbol you selected. It is important to remember that whether you select the symbol directly from your library or by clicking on it’s instance on the stage, you are editing ALL instances of the symbol.

—- ads by google —-

In our movie clip symbol, click on frame 15 and choose “Insert > Timeline > Keyframe” (F6). On frame 15, select your rectangle (clicking only once) and scale the symbol to about 300% (or the maximum size you want your object to be able to zoom). Tip: to easily scale an object use the “Transform” pallette (Window > Transform or cmd-T) and input a number (Fig. 2).

Still in our movie clip symbol, click on a frame between 1 and 15 in our timeline and choose “Insert > Timeline > Create Motion Tween”. The color of the timeline on this layer should turn a light blue and you will see a solid arrow between frames 1 and 15 (Fig. 3). What we now have is an animation of a rectangle that goes from small to large. Now, we need to add some simple ActionScript that will control the zoom effect.

Let’s start by adding a new layer to our movie clip symbol. Move this layer to the top and name it “actions”. On frame 1, add the following code to our Actions Panel (Windows > Actions or alt-F9):

stop();

this.onEnterFrame = function(){
if(zoom == true){
prevFrame();
}
}

this.onRollOver = function(){
zoom = false;
play();
}

this.onRollOut = function(){
zoom = true;
}

On frame 15 of our “actions” layer, add the following code to the Actions Panel:

stop();

One last thing we want to do is change the frame rate (fps) in order to give our zoom a smoother animation. To do this, choose “Modify > Document” or cmd-J to open the document properties window, and change the number in the “Frame Rate” field (Fig. 4).

The default rate of Flash is 12, and the most common rates are 12, 24 or 30 with 30 being probably the fastest you would want to make it. For this tutorial, I have chosen to use 30 fps. Tip: “fps” stands for “frames per second”, thus changing the frame rate will also change the speed of your animation (your zoom effect). The higher the frame rate, the faster your animation. 12 fps works well for the web, especially if there is a lot of animation. Since this was a simple animation, we can get a nice smooth zoom by upping the fps to 30. We could also control the smoothness of our animation by adding or subtracting the number of frames in our movie clip timeline. The important thing to do is to find a nice balance of frame rate and length of timeline, and in most cases this is done simply by testing your movie. However, it is my recommendation to not tweak the fps once your movie is built but to add or subtract frames from your timeline.

That’s it! Go ahead and test your movie. Place your mouse over the rectangle, and you should see your object zoom in… move your mouse off the object and it will zoom out and return back to the original size.

Now my favorite part – explaining the code!

stop();

This is a simple stop action that tells our movie clip to stop playing since we want to control the animation with our mouse.

this.onEnterFrame = function(){

This is saying everytime our player enters the frame, perform the actions between the curly brackets. Note: “this.” refers to the movie clip that this action is placed in. It is optional, but good practice to use it.

if(zoom == true){
prevFrame();
}
}

The “if” statement is asking if a variable of “zoom” is true, and if it is, then perform the actions between the curly brackets.

this.onRollOver = function(){
zoom = false;
play();
}

This is saying when we roll over our object (remember “this.” is referring to the movie clip this script is in) perform the actions between the curly brackets. The actions are telling the player that “zoom” is equal to “false“, which means we are not performing the “if” statement above, but so we will “play” our movie (zooming in).

this.onRollOut = function(){
zoom = true;
}

This is telling the Flash player that when we roll off our object, our “zoom” is equal to “true“, so we will perform the if statement above which is telling the player to go to the previous frame and basically rewinding our timeline (zooming out).

While the same type of zooming effects can be created using just ActionScript rather than motion tweens (which I hope to show in a future tutorial), I hope you find that this is a very quick and simple way to create a zoom effect in Flash. And if you’re creative and understand the code, you can use this to control any type of animation, not just a zoom in/out.

I hope you enjoyed this Flash tutorial and thanks for reading. As always, feel free to leave comments below.

Source file (Flash 8): Flash Tutorial: Quick and Easy Zoom effect on Mouse Over

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 (although 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 give a button animation on rollover by creating a button as a movie clip symbol and using a mask effect.

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

The first thing we will need to do is draw a simple shape for our button. Select the rectangle tool, set your fill color to the black and white linear gradient and a stroke of none. In the property window (Window > Properties > Properties or command-F3), set the corners to slightly rounded, I chose a 5 pixel rounded corner. Draw out a rectangle approximately 100×20 pixels. Tip: You can use the up or down arrows on your keyboard when dragging out your rectangle shape to increase or decrease the roundness of your corners. You should have a rectangle similar to Fig. 1.

Select the rectangle, and convert to a movie clip symbol (Modify > Convert to Symbol or F8). Remember, we are creating a movie clip button, so be sure to select the “movie clip” radial. Give your symbol an appropriate name, I called mine “mc_btn1″. Double click on your rectangle to bring you into the symbol editing mode. Select your rectangle and let’s adjust the gradient and on our button with the “Gradient Transform” tool. Tip: the Gradient Transform tool is grouped with the Free Transform tool in the tools pallette. With the Gradient tool selected, click on your rectangle and in the color pallete, set your gradient scale to be 100% black on one end and 100% dark grey (#666666) on the other. With the rectangle still selected, rotate your linear gradient to be vertical (Tip: Hold shift when rotating to snap to 45º angles), with the 100% black on the top and the grey on the bottom. Also, shrink the gradient tool so that it is the height of your rectangle. Fig. 2 shows what your rectangle should look like with the gradient tool selected.

Let’s add a little additional styling to our button by going to our tool palette and choosing the Selection Tool (V), selecting our entire rectangle, choose “Edit > Copy” (cmd-C), add a new layer and choose “Edit > Paste in Place” (shift-cmd-V) to paste a new rectangle on top of our original. Now, select the new rectangle, rotate it 180º and cut the height in half (about 10 pixels). Tip: You can adjust the height of your rectangle using the Info pallette (“Window > Info” or cmd-I) and inputting the “H” field. Lastly, move the smaller rectangle so it aligns with the top of your original. You should now have a shape that looks similar to Fig. 3. This will be the base of our button.

For our animation, we will just do a simple “highlight” effect when the user rolls over the button. Before we start doing the animation, let’s set up our timeline. Let’s start by labeling our rectangle layers… the bottom one we can label “lower button”, the top one “upper button”. Now, add 4 new layers above these. The top one should be labeled “actions”, the second layer “labels”, the third one “mask” and the 4th “highlight”. Extend the keyframes for all layers to frame 30 by selecting Frame 30 on all layers and choosing “Insert > Timeline > Frame” (F5). On the “labels” layer, insert a new key frame (“Insert > Timeline > Keyframe” or F6) at frame 10 and 21. Select frame 1 of your labels layer, and in the Properties panel (“Window > Property > Properties” or cmd-F3), give your frame a label of “off”. Next label frame 10 “over” and frame 21 “down”. Finally, on the “actions” layer, let’s add a new keyframe at frame 20 and on our last frame. On frame 1 of our actions layer, add the following code to our Actions panel (“Window > Actions” or alt-F9):

stop();

Do the same thing on frame 20 and the last frame of our “actions” layer. All this code does is stop our movie clip from playing on these particular frames, since for our end result we want the users mouse to control our timeline. Your symbol timeline should now look similar to Fig. 4.

Now that our timeline is set, let’s build our animation. Let’s lock all our layers, except the one labeled “highlight”. On our “highlight” layer, insert a new keyframe at frame 10. Select our rectangle tool, with a fill of linear gradient and a stroke of none. Draw a rectangle on the stage with a height of about 40 and a width of about 20. With our new rectangle still selected, use the gradient transform tool and set the gradient as left side 0% white, center 30% white and right side 0% white. (Fig. 5). Choose “Modify > Convert to Symbol” (F8) and make your new rectangle into a “graphic” and give it an appropriate name. With your rectangle symbol selected, rotate your rectangle and move it just off the top left corner of your button. Finally scale your rectangle to about 50%. When your rectangle is selected with the transform tool, it should look similar to Fig. 6.

Next, add a new keyframe to frame 20 of our highlight layer. On frame 20, move your rectangle to the bottom right corner of your button (Fig. 7). Click on your timeline anywhere between frame 10 and 20, choose “Insert > Timeline > Create Motion Tween”. Finally, add a new keyframe at frame 15, select our rectangle symbol (it should be about 1/2 way across your button), and scale it to about 200%. This will now be our button animation. What about the “mask” layer we made? Well, I’ll get to that shortly, but let’s make our menu and set our ActionScript so you can see why we will need a “mask” layer.

Return to the main timeline (Scene 1). Let’s add 2 new layers and label the top layer “actions”, the second layer “text” and the bottom layer “buttons” (with our “mc_btn1″ symbol on the “buttons” layer). Next, add 2 more instances of our “mc_btn1″ symbol to our “buttons” layer, and postion all 3 button symbols so they are left aligned and stacked (Fig. 8). Click on the top button, and in our Properties panel, give it an instance name of “btn_home”. Give the second button an instance name of “btn_about” and the bottom button and instance name of “btn_contact”.

On the “text” layer, draw a text box over the top button and type the word “Home”. On the second button, draw a text box and type the word “About”, and on the bottom button, draw a box and type the word “Contact” (Fig. 9).

Our buttons are now ready to have the ActionScript added for the mouse events. There are multiple ways of adding this script, and I have written a previous tutorial about creating buttons with movieclips where the actions are applied directly to the button. For this tutorial, I’ll show you another way, which is by adding the actions to the “actions” layer of our main timeline. Either way is suitable and there are advantages to both, so what I suggest is you experiment with both ways and decide for yourself what you like better.

—- ads by google —-

On frame 1 of the “actions” layer of our main timeline, add the following code to the Action panel:

btn_home.onRollOver = function() {
_root.btn_home.gotoAndPlay(“over”);
}
btn_home.onPress = function() {
_root.btn_home.gotoAndPlay(“down”);
}
btn_home.onRollOut = function() {
_root.btn_home.gotoAndStop(“off”);
}
btn_home.onRelease = function() {
_root.btn_home.gotoAndStop(“off”);
}

btn_about.onRollOver = function() {
_root.btn_about.gotoAndPlay(“over”);
}
btn_about.onPress = function() {
_root.btn_about.gotoAndPlay(“down”);
}
btn_about.onRollOut = function() {
_root.btn_about.gotoAndStop(“off”);
}
btn_about.onRelease = function() {
_root.btn_about.gotoAndStop(“off”);
}

btn_contact.onRollOver = function() {
_root.btn_contact.gotoAndPlay(“over”);
}
btn_contact.onPress = function() {
_root.btn_contact.gotoAndPlay(“down”);
}
btn_contact.onRollOut = function() {
_root.btn_contact.gotoAndStop(“off”);
}
btn_contact.onRelease = function() {
_root.btn_contact.gotoAndStop(“off”);

UPDATE: I’ve been finding several readers having trouble with doing a straight copy/paste of this code from the Web. I believe the issue lies in the quotation marks (”). When copying from the Web, it sometimes uses “smartquotes”. If you are getting an error on test regarding the quote marks, first step is to be sure you are using regular quotes (type them in instead of copy/paste from the Web site). If you are still having problems, feel free to drop me a comment and I will try my best to help resolve your issues. – Mike

Let me try to explain the code:

What we are doing is setting up some functions to control the timeline of each button. For instance:

btn_home.onRollOver = function() {

is saying “whenever the users mouse rolls over the “btn_home”, perform the actions between the curly brackets”.

_root.btn_home.gotoAndPlay(“over”);
}

This is saying “play our “btn_home” timeline starting at the frame labeled “over”"

Hopefully from that explanation, you can figure out that the rest of the code is setting up the different actions (play or stop) for the different mouse events (onRollOver, onPress, onRelease and onRollOut) for the different buttons (btn_home, btn_contact and btn_about).

When you test your movie, you should have something that looks similar to this:

Looks pretty good, except one problem… when we rollover the second and third buttons, we see our animation spill over onto the buttons above. What do we do now? Well, remember that “mask” layer we created in our button movieclip? That’s how!

I’ve written a previous tutorial on working with masks in Flash that gets a little more in-depth about creating masks, so I will only go through it quickly here, but you should get the jist of it. Of course I suggest you check out my working with masks tutorial if you would like more information.

Returning back to our .fla file, double click on any of our button symbols to bring us into the symbol editing mode. On our “lower button” layer, select the rectangle and choose “Edit > Copy” (cmd-C). Click on frame 1 of our “mask” layer and choose “Edit > Paste in Place” (shift-cmd-V) to place our rectangle on the stage. Again on our “mask” layer, double click on the icon next to the layer name to bring up our Layer Properties window. In our Layer Properties, click on the “Mask” radial button. Now on our “highlight” layer, open the Layer Properties window and select the “Masked” radial. (Again, for further explanation on working with masks, please refer to this tutorial).

That’s it! Our menu is done. Now when you test your movie, you should see the highlight animation on only the button your mouse rolls over.

I hope you enjoyed this tutorial and as always, comments are welcome. Thanks for reading!

Source Files (Flash 8): Flash Tutorial: Button with Mask Animation