> > Tutorials > T1077

Animated Buttons in Flash.


Download source project

Animated buttons are one of the most important elements of a website. They direct visitors to different sections of your website
and contribute to aesthetics and to overall impression.

First of all you have to understand how the button is built.

Create a sprite that contains 3 frames, Master Frame, and 2 working frames (Frame 1 and Frame 2)

master frame

Draw a rectangle on the Master Frame and apply blue gradient to it to simulate 3D look.

Copy the rectangle to Frame 2 and change the gradient to gray. Leave Frame 1 empty.

The Master Frame contains the active area of the button (the blue box you’ve just created), Frame 1 is the “normal” state of the button, Frame 2 is the “over” state of the button.

After you select Master Frame as the background of Frame 1 and Frame 2, the active area will be replicated on both frames. Frame 1 and Frame 2 should be “Stop” frames.

master frame 2

To define mouse actions, go to the Master Frame and select the blue box (the active area). Choose “Action” > “On Over” and setup a jump to Frame 2 when the mouse enters the button:

create master frame

When the mouse cursor leaves the area, the button should go back to normal state, choose “Action” > “On Out” and setup a jump back to Frame 1:

select the frame

Now you can play the movie to test if the button jumps to Frame 2 when you mouseover it and returns when you move the mouse out.

Let’s add some animation now. To enhance the button go to Frame 2 and add intro animation to the “over” state. We will use simple “flash in” effect so the button will blink once before it appears. Select the gray rectangle on Frame 2 and choose “Intro” > “Flash In”


Choose 30% so the blink is soft and click OK.

In the last step exit the sprite and add text above it to describe the button. Center the text in the middle if the button. Duplicate the button to create 4 or more copies so you’ll have a menu.

button sprite

You have the menu ready but your buttons have no click actions defined. Usually the movie should go to another frame after the user clicks the button. Double click the sprite to enter it, select the active area on Master Frame (the blue gradient) and choose “Action” > “OnClick”.

Click More Actions then “Jump to Frame and Stop” or “Jump to Frame and Play”, select “_root” and click OK, in the next dialog enter the name of the frame for example “Frame 2”. You can’t apply click action to the entire sprite because of internal actions.

more action

You’ve got a Flash menu!

get flash