Animated Buttons in Flash

Animated Buttons

If you are a bit of a novice at creating your own Website, and you want a bit of advice on creating some really stunning graphics, then you need to read this. You can learn how easy it is to create some cool looking graphics for your site. This tutorial will show you how to create animated buttons for your Website using Flash 4.
If you've never used Flash before or you think you need a bit of memory jogging, then take a look at some of our earlier tutorials.

First steps in flash
Motion guides
movie making
onion skins
Part 1: prepare your image
The first thing you need to do is prepare the image that you want to turn into a graphic. You might be designing a football site, and want images of footballs for your buttons. Once we have prepared our graphics we are going to make a little movie where our ball bounces around as we hover over it with our mouse.

There are many tutorials on Adobe Photoshop which explain how to manipulate your images to get them looking how you need them to look.
For this exercise you need to have 4 versions of the same image. Because we want to make it look like our ball is bouncing around, we need to add an effect to make it look like the ball is moving.

Click on the 'Image' menu
Select 'Blur' and then 'Motion Blur'
Now you can add a bit of a blur to your ball. You need to add a different angle to the blur on each of one. You can also apply the blur as many times as you want, and you might want to do this to one of your images to make it look like there is more motion going on. Save each image and close Photoshop. Now open up Flash 4.

Click on the 'Start' menu, select 'Programs' and then 'Macromedia Flash'
Click on the 'File' menu and select import
Navigate to where you files are saved
Hold down the 'Shift key and highlight them
Click 'Open'
Toppers' tip: create your graphics in Photoshop

Part 2: elements of the button
With your graphics prepared, it's now time to start creating your button. To do this we are, essentially, creating a mini-movie. If you are unfamiliar with Flash then you might want to take a look at some of our earlier tutorials. With each of your images now opened in Flash you need to click out of the graphic that automatically opened. We are now going to create our symbols that make up the button.

Click on the 'Window' menu and select 'Library'
In the library box, click on the blue cross at the bottom
In the dialogue box select 'Graphic'
Name it the same as the first of your images and Click 'OK'
Drag the image of the same name into the stage
Repeat for each of your other 3 images
In the library box, click on the blue cross at the bottom again
In the dialogue box select 'Button'
Give it a name and Click 'OK'
You will see a small cross in the stage. This is a registration mark and everything you do on screen will centre around that mark. When you drag your images into the window, pull them so they are centred over that cross.

Most Flash buttons will have three states - up, over and down. The 'up' state is when the mouse is not over the button, the 'over' state is when the mouse is over it. And the 'down' state is when the mouse button has been clicked on the button. To represent this, your button should look different at each state.
In addition to the three states there is an additional hit state. This is the area defined by you as the area where the mouse button can be used. You need to attach a link to another page with this state otherwise the button will not function.

The first thing you need to do is create the 'up' state of the button. In the timeline at the top, highlight the 'up' state. Drag the symbol from the library onto the centre of the stage. To make the down stage of the button simply highlight the 'down' state on the time line. Right-click and select 'Insert Blank Keyframe'. Now pull in the another one of your symbols, making sure it is exactly over the top of the pervious symbol, and centred around the small cross.

Toppers' tip: open the library to access your instances

Part 3: movie making
With the up and down states of our button created, we need to add in the bit that's going to make our button move. This is called the over state, and for this part of the button we need to create a movie. Before you start doing this you need to plan out which of your symbols you want to move where. You need to return to the library window to start creating the movie.

In the library box, click on the blue cross at the bottom
In the dialogue box select 'Movie Clip'
Name it and Click 'OK'
Now the timeline appear across the top.
Go to the first frame and drag in the first of your symbols.
Now go to around 20 frames, right-click and select 'Insert Keyframe'.
Go to frame 5 and right-click and select 'Insert Blank Keyframe'.
At frame 5 bring in one of your symbols, but put it off centre
Repeat at frames 10 and 15
Now we need to create a motion tween to animate the movie
Right-click between each of the symbols and select 'Create Motion Tween'
To speed up your image you need to double click on the frame box at the bottom of the timeline. It will have a number In there with 'fps' after it. You can now change the frame rate.
Now we have created out movie we need to put it into our button.

Return to the library window.
Double-click on the button file
At the over state, right-click and 'Insert Blank Keyframe'
Pull your movie into the stage
The last thing you need to do is create the hit state. Right-click in the 'hit' state and 'Insert Blank Keyframe'. Draw a black rectangle over the registration mark, using the rectangle tool on the side toolbar. This area should be the same size as your graphic. It doesn't have to be presentable because it's the invisible area that defines where the animation starts when your mouse hovers over it.

To see if your button works, go to the stage (scene 1) Drag the button from the library onto the stage. Hover over you button to see the animation at work, and click on it to see the final effect.

Toppers' tip: create a movie for the button over state