Flash Explained

Learn Flash easily.

Creating animated buttons with retro gaming look

October 13th, 2008 | Author: Luka | Category: Menus & Interfaces


In this tutorial you will learn how to create buttons that show an animation when you roll your mouse over them. The animations inside the buttons will be frame by frame animations, standard motion tween and guided motion tween animations.

On top of that, you will see how to design the buttons so that they convey that old-school gaming look. See below the final result of this tutorial – roll over the buttons to see the animation effects.

Designing the base layout

1 Open a new flash document. In the Document properties dialog (CTRL+J) set the background color to black and the frame rate to 24 fps.

2 Using the Rectangle tool (R), draw a borderless 200 by 200 pixel rectangle and align it with the left edge of the stage. The color of the rectangle is unimportant, as you are going to fill it with a linear gradient in a moment.

In the Properties panel, set the rectangle's Y coordinate to 133. The X coordinate should be 0 if you aligned the rectangle with the stage's left edge.

3 Go to the Color Mixer panel (Window > Color Mixer) and select the fill color by clicking on the small bucket icon if it isn't already selected.

Selecting the fill color in the Color Mixer panel.

Choose Linear as Type.

In the strip near the bottom of this panel, click on little square on the left and type in #011A37 as color code. It is a nice dark turquoise hue. Click on the small square on the right and enter #00B2DF as code for the color. It is turquoise too, but a bright shade.

Push both squares a little bit inside by clicking and dragging each one of them. At the end, your result should be similar to the one on the image below.

Defining the linear gradient.

4 Select the Paint Bucket Tool (K) and fill the rectangle top to bottom with the gradient you just made.

Filling the rectangle with a linear gradient.

Select the rectangle if it isn't selected already. In the Properties panel below the stage, check that the rectangle's coordinates are set to round numbers. You will have to do this for every object you'll draw following this tutorial, if you want to achieve this retro look and design a fine interface with no blurry parts.

Checking that the coordinates of the shape are round in the Properties panel.

5 Lock this layer. You will name it later. Create a new layer.

6 Select the Line tool (L) and choose hairline as line type in the Properties panel, and black as color. Draw a horizontal line that is 200 pixels long. Align the line with the left edge of the stage, as you did with the rectangle. Put the line's Y coordinate to 164.

7 Copy the line 5 times, so that you have 6 lines in total. Each time you make a copy, move it 33 pixels downwards. This is easily doable using the arrow keys on your keyboard. Press the down arrow three times while holding SHIFT (this will move the line 30 px down), then press the down arrow alone and you'll move it further 3 px, making 33 pixels in total.

Drawing six lines on stage.

So the Y coordinate for the six lines should be as follows: 164, 197, 230, 263, 296, 329.

8 Select all the lines you just made, copy them (CTRL+C, Command+C on a Mac) and paste them in place by selecting Edit > Paste in Place.

Now, do not unselect the lines you just pasted in place. Move them 1 pixel down by pressing the down arrow key once.

Change their color to white either in the Color Mixer panel or the Tools panel. You should now have a white line below each black line.

9 You will now change the alpha for each white line. Select the first white line. You can do this by placing the cursor below the white line, until the select line cursor appears. Click on the line and if you selected it (and not the black one above it) you'll see a white selection color appear. Look at the images below to see what I mean.

Moving the copied lines 1 pixel with the arrow keys.

Selecting the lines.

10 Change that line's alpha factor to 45% (do this in the Color Mixer panel by selecting the Stroke color there). Select the next white line below it and change it's alpha to 40%. Then do the same thing for the remaining three white lines - set their alphas to 35%, 30%, and 25%, respectively.

Erase the last white line. Your final result should look like this:

The lines positioned in place.

11 Select all the lines (white and black), cut them from their layer (Edit > Cut). Delete the layer they were situated on.

12 Paste them in the layer where the gradient is. Unselect the lines by clicking anywhere on the stage (but not on the gradient).

Top of page

Creating the buttons' backgrounds

Now the lines have separated the gradient into equal rectangles. Each of these rectangles will be a button. A nice button, I might add 🙂

13 Select the first rectangle from above. While holding SHIFT select all the subsequent rectangles by clicking on each one of them.

Selecting the first portion of the gradient on stage.

14 Cut the rectangles, call this layer you just cut them from lines. Lock this layer.

15 Create a new layer and call it buttons. Paste the rectangles in this layer.

16 Drag the buttons layer below the lines layer. Now the lines are visible above the squares, which is what you want - to preserve the nice interface effect. Lock the buttons layer.

17 Create a new layer above the buttons layer.

The layers with the gradients and lines.

18 Select the Rectangle tool (R).

In the options part of the Tools panel, turn off the Snap to Objects option (the little magnet icon), click on the Set corner radius button (the one on the bottom left) and enter 4 as value in the dialog box that appears. Click OK.

Adjusting the options for the Rectangle tool.

With the Rectangle tool still selected, got to the Colors portion of the Tools panel and block the stroke color by first selecting it and then clicking on the No color button (the small one in the middle of the three little buttons).

Got to the Color Mixel panel and select the Fill color. You will now make a nice orange-yellow gradient. Select linear as type of gradient.

Click between the two little squares to make appear a third one. Now enter the color values for each little square as follows (from left to right):

#FF6600, #FF6800 and #FFCC00.

Position the little squares to obtain a gradient as the one on the image below.

Making the orange-yellow gradient in the Color Mixel panel.

19 Draw a 33 by 20 pixel rectangle on stage. Set these dimensions in the Properties panel's W and H boxes while the rectangle is selected. Also, check that the rectangle's coordinates are set to round numbers so that it renders properly.

Now, position the rectangle so that its X coordinate equals 7. Place it vertically in the center of a future button (still on this same layer, not on the buttons layer).

Positioning the rectangle with rounded corners.

20 Zoom in on the little square to work more easily. Select the Gradient Transform Tool (F). Rotate the gradient so that the orange color comes at the bottom and the yellow at the top.

Rotating the linear gradient fill.

21 Copy the little square five times and place the copies on each portion of the blue gradient below (again, gradient that is seen below, but do this on this layer, not on the buttons layer).

Placing the backgrounds for the icons.

Top of page

Choosing the right font

You will now need to choose a right font for the buttons. For the retro gaming style you are creating, there is a perfect font complete with cool space invaders characters!

Go to the Action fonts page, click on the pixel fonts category on the left (under the free fonts heading) and find the font 04b 21 and download it. After installing it on your machine, you should restart Flash for the font to appear there. Save your work before doing that! 🙂

22 Select the Text tool (T). In the Properties panel, choose the font you just installed - the 04b21 font. Select Static Text in the menu on the left. Set the color to white and the font size to 16. Remember, the pixel fonts in most of the cases render properly at the size 8 or its multiplies - 16, 24, 32, etc.

You are using the size 16 now because if you set it to 8, the little invader characters would be too small to see.

23 Click anywhere on stage and press the e key. That's right, the small e, not the capital letter E. You will see a nice ghost from the pac-man game appear. ˆ-ˆ

Positioning the pixel-font icon.

Position this text field you just made in the middle of the first orange-yellow square and be sure to check that its coordinates are set to round numbers in the Properties panel.

24 Select the Text tool again, click somewhere on stage and write the letter a. Position the resulting "icon" on the following little square, below the one from the previous step.

Aligning the icons and the labels.

Repeat this for the remaining 4 little squares, with the letters f, j, z and g. Align the text fields properly and check that their coordinates are set to round numbers.

25 Choose a different pixel font and write the link labels for each button. But! This time, set the font size to 8. Also check that the coordinates are round. Write "home", "mission", "about us", "galleries", "contact" and "employment". Or any other labels you would.

Put the labels on the right of the icons and align their left edges so that they are nicely positioned.

To be sure that you placed everything correctly, test your movie (Control > Test Movie) and check that everything renders properly, with no blurry parts, be it the lines and gradients or the font.

26 Now, select all the objects on this layer. Cut them (Edit > Cut).

27 Delete the layer they were situated on, unlock the buttons layer and paste them in place here (Edit > Paste in Place).

Top of page

Converting the graphics to button symbols

28 Hold the SHIFT key. Select the top blue background. Click on the "home" link label, then on the small orange-yellow square and finally on the ghost icon.

All the parts of the first button selected.

By doing that , you have selected all the different pieces that will make the home button.

29 Convert the selected objects to a button symbol. Do this by choosing Modify > Convert to Symbol.

Pay attention that you select button as type in the Convert to Symbol dialog, not movie clip! Call the button home button. You can call it whatever you want, but I add the button word to the name to more easily identify the symbol.

30 Do the same thing for the remaining objects. Call them mission button, about us button, galleries button, contact button and employment button.

Open the library (Window > Library) and check that you have 6 buttons inside.

Top of page

Animating the buttons

Finally you can begin to create the animations for each button! You will start with the bottom one - the employment button. This button has a frame by frame animation inside.

31 Double-click this button on stage to enter its timeline.

The employment button timeline.

32 Call this layer background. Create a new layer and call it text and icon. Click anywhere on stage (once) to unselect everything.

33 In the background layer, select the link label, invader icon and its orange background (by holding SHIFT and clicking on each one of these).

34 Cut the selected objects. Lock the background layer and paste in place the cut objects into the text and icon layer.

35 In the background layer, right-click on the Hit frame and select Insert Frame. This will assure that the blue background is visible in all button states. Don't worry about the "hole" left by cutting the orange square, you will resolve this in a moment. The timeline of your button should look like this:

Adding a layer and a frame to the button symbol timeline.

36 Do the same thing with the text and icon layer.

Extending the duration of the first keyframe.

37 Create a new layer and call it animation. Select the invader icon in the text and icon layer, copy it (don't cut it!).

Lock the text and icon layer and paste in place the icon in the animation layer.

38 In the animation layer, click on the first (Up) keyframe and drag it to the Over keyframe. Select both the Down and Hit keyframes, right click and select Remove frames to delete both of these frames. Your timeline should now look like this:

Arranging the keyframes of the animation layer.

39 Go to the Over keyframe. Click once on your invader icon to select it. Convert it to a movie clip by selecting Modify > Convert to Symbol. Pay attention to selecting movie clip as type, because the button option stayed checked from the last time! Call the movie clip employment animation and click OK.

40 Double-click this newly created movie clip to enter inside it. Zoom in on this icon, let's say, 800%, so that you can clearly see what you're working on.

41 Call this layer invader. Create a new layer and call it rays. Copy the icon (it is still a text character, remember) from the invader layer and paste it in place into the rays layer. Lock the invader layer.

42 Convert the icon to a simple shape by clicking on it and selecting Modify > Break Apart. Select all the parts of this shape except the little square on its left. Delete the selected part of the shape.

Isolating the white square.

43 Move this little white square to the left with the left arrow key to a position with a round X coordinate: -1.0. Copy the shape, paste it in place and move it to the right of the invader, so that it is in a symmetrical position to its left-side counterpart.

Designing the rays.

44 Right-click on frame 3 of this layer (rays) and select Insert Keyframe. You are now creating the frame by frame animation of the rays.

Creating the frame by frame animation.

Copy each small white square on both sides, paste them in place and move each of them in its own direction.

Making the invader rays.

45 Right-click on the frame 5 and insert a keyframe. Repeat the process from the previous step. Copy a white square on each side, paste it and move it away from the previous one.

The icon with the rays.

46 Insert a keyframe in frame 7. Select all the squares on the left and move them as far left as possible, but without going outside the orange background area (also, keep the position to round numbers). You want all the animation to happen inside this orange area - this looks cooler. Do the same thing with the white squares on the right side of the space invader.

47 Now, insert a keyframe in frame 9, but do not add or move the squares. erase the square which is closest to the invader on each side. Repeat the same operation - insert a keyframe in frame 11 and erase again.

The rays at the end of the animation.

48 Insert a keyframe in frame 13 and just erase the remaining squares. Then right-click on frame 14 and choose Insert Frame. Finally, right-click on invader layer's frame 14 and insert a frame. Check if your timeline looks like the one below. It should!

The completed rays invader timeline.

Test the movie! Roll over the button you just made (the last one from the top) and enjoy the animation. Whoo! Nice, huh? 🙂 Compare it to the same button's rollover animation in the SWF on top of this page to see if you obtained the desired effect.

Top of page

Making the pac-man move

Save your movie if you haven't already. You certainly don't want to lose all this precious work you made up to this point!

Making the pac-man on the fifth button move will be a piece of cake compared to the previous animation.

49 Return to the main scene and double-click on the pac-man button (contact button). You'll make similar steps as for the previous button, before beginning the actual work on animation.

50 Call the first layer background. Make a new layer and call it text and icon. Select the link label ("contact"), the pac-man icon, cut them and paste them in place into this new layer.

Lock the background layer. Right-click on its Hit keyframe and select Insert Frame.

51 In the text and icon layer, insert a keyframe in its Over and Down states.

Setting up the keyframes inside the button timeline.

Go back to the layer's Over state, unselect everything and then just select the pac-man icon. Cut the pac-man. You must do this because when a user rolls the mouse over the button, the pac-man animation should be seen. If you don't do it, the animation will be spoiled because the pac-man will stay here, static, and the animation will run over it.

52 Lock this layer. Create a new layer and call it animation. Right-click on its Over state and insert a keyframe. Paste in place the pac-man here. Remove this layer's Down and Hit states.

All the layers of the button.

53 Select the pac-man icon and convert it to a movie clip (F8). Call the movie clip pac-man animation.

54 Double-click the movie clip to enter its timeline. Select the pac-man icon inside it and convert it to a movie clip symbol. Call the movie clip pac-man. Call the layer it is situated on pac-man running.

Insert a keyframe in frame 15 of this layer. Move the pacman to the right, outside the orange-yellow area.

Animating the pac-man.

Right-click anywhere between the two keyframes and select Create Motion Tween.

55 Right-click on frame 16 and insert a keyframe. Move the pac-man to the left, outside the orange area.

Right-click on the first keyframe (the start of the animation) and select Copy Frames. Now right-click on the frame 30 and select Paste Frames. Make a motion tween again.

Motion tween on the timeline.

Test your movie. Roll over the pac-man button to see it moving. The good old pac-man moves! It is going outside the orange area, but you'll deal with this later. For now, just concentrate a little bit on the movement. When the pac-man arrives at the middle, there is a little stop in the animation, a short pause.

Why is this so, you may ask? Well, because the first and the last keyframes of the animation are exactly the same. So when the pac-man arrives in this position at the end of his movement, he is again in the same place at the beginning, when the animation loops.

56 To correct this, right-click on frame 29 (the frame before the last one) and select Insert keyframe. Then remove the last keyframe (30) from this layer. Test the movie and everything will be OK - the little guy will move smoothly.

You must make the pac-man move inside the orange area only now. But how? With a mask, of course.

57 Go back to the button timeline (click its link above the timeline). Lock the animation layer and unlock the background layer. Select the orange area, copy it and lock this layer.

58 Unlock the animation layer and double-click on the pac-man movie clip. Lock the pac-man running layer. Create a new layer and call it mask.

Paste the orange shape in here.Change its color to a solid one and pick a hue that is in good contrast with the rest of the button. Place it exactly above the orange area.

Lock this layer, right-click on it and select Mask. This layer will become a mask and the one beneath it the masked one.

Test your movie, roll mouse over the button and you will see how cool this looks when the pac-man runs inside the orange area.

But, but... there is one little thing that is missing! The original pac-man eats as it runs. It opens and closes its mouth to eat the pills. While there are no pills here, a pac-man isn't a pac-man if he doesn't eat air. So, make him eat. Remember, beauty is in the details. If you want to make your or your client's site beleivable, you must refine every detail.

59 Just open the Library (CTRL+L, Command+L on a Mac) and find the pac-man movie clip. Double click on it inside the Library to enter its timeline.

60 Insert a keyframe on frame 5 of the timeline. Turn the character (yep, the little pac-man is a static text field) into a vector shape by clicking once on it and selecting Modify > Break Apart.

Select a part of its "face", copy it, paste it in place and move it to fill the void in the middle. You can see this on the image below. The pac-man with the portion of its shape selected looks like an unshaved rough lowlife 🙂

Two pictures of pac-man.

61 Now just insert a frame in frame 8 and there you go! Test the movie and see the original, one and only pac-man!

Top of page

The other buttons explained

The buttons with the ghost animation, the bombarding space invader, the rotating spaceship and the bouncing alien are based on the same principles as these two I've shown you.

The bouncing alien and the bombarding space invader have just a small addition inside - a little actionscript gotoAndPlay() command which keeps the animation in a smooth loop. Because, if you look at the start of these animations when you roll your mouse over their respective buttons, they first take off and then proceed to make a loop.

The spaceship - rocket animation is a simple motion tween with the rotation set in the Properties panel. To see this option, just click on the starting keyframe of the animation and look in the panel.

The ghost from pac-man game is the easiest of all the animations here. It is basically a change from a frame where the ghost has a white color and the next one where it appears in dark blue.

Voila! You can just add a background rectangle like I did to enhance the look of this interface and you're done! Download the source file for this menu below.

Download the tutorial's zipped source FLA file.

Be Sociable, Share!

Comments

Submit a comment

You must log in to post a comment.