Flash Button Tutorial - Animated button

Making an animated button is similar to making a simple button but instead of using graphic symbols instances we use Movie Clip symbols.

Making a movie symbol

A Movie Clip symbol is a self contain movie whose time line moves independently of the main movies' time line. Movie Clip symbols can contain animations and here we look at creating two simple movie symbols. The first symbol which we shall call fade-in consists of an animated rectangular graphic which is semi transparent at the start and then becomes clear. The second called fade-out, contains the same rectangular graphic which fades out.

The first step in to make the rectangular Graphic symbol. This should not be difficult for you, now that you have gone through so many sessions.
Open a new file and in the first frame draw a rectangle with some text. Align both the rectangle and the text to the center fo the page. Convert this into a Graphic symbol and name it rectbutton.
The rectangular graphic should look something like:

Delete the instance from the stage. Open the symbols library (Windows - Library).
Click on Insert - New Symbol and in the Symbol Properties window set the Behavior to Movie Clip and name it fade-in.

You will not be in symbol editing mode. That's fine 'cause this is what we wanted. Drag an instance of rectbutton graphic symbol you created before onto the first frame. Align the symbol to the center of the page. Insert a keyframe at frame 18 and create a motion tween between the first and the eighteenth frames. Hightlight the first frame by clicking on it and then click Modify - Instance. Change the Alpha (found under Color Effect tab) value to 30%. Click OK to continue and test your movie Control - Play.

This movie will be used for mouse-over effect. Since we don't want it to play continuously, we would have to add a Stop Action to the last frame. Add another layer to fade-in movie, call it actions and insert a keyframe at frame 18 (the last frame). Right-click on this frame and select Properties from the menu. In the Actions tab click on the Plus (+) sign and select Stop from the menu.

(Note: This is the first time an action has been included in a movie. Thus, I have introduced you to the simplest of them all. The Stop action tells the movie to stop playing at the specified frame.)

Click Edit - Edit Movie to go back to editing the main movie.
We now create the other Movie Clip symbol.
Click Insert - New Symbol. Name this symbol fade-out and set the Behavior to Movie Clip. You shall now be in symbol editing mode. Place an instance of rectbutton graphic symbol on the first frame and align the instance to the center of the page. Insert a keyframe at frame 18. Create a motion tween between the start and end key frames. Click on the last frame and then change the Alpha value of the instance to 30%. Click OK.

Add another layer and insert a kerframe at frame 18. Add a Stop action to this keyframe just as you did before. The fade-out movie is used for mouse-out effect.

Making the animated button

You would now have three symbols in the Library, one graphic and two movie clips. It is time to create an animated button. Enter the Movie editing mode and click on Insert - New Symbol. Name this symbol mybutton and set its Behavior to Button.
Place an instance of fade-out movie clip symbol into the Up frame and align in to the center of the page. Insert a Blank Keyframe in Over frame, drag an instance of fade-in movie clip symbol onto the frame and align in centrally. In the Hit frame, insert a blank keyframe, add an instance of rectbutton graphic symbol and align it to the center of the page. (Notice that we do not use the Down button frame). The button frames should look like:


Enter the movie editing mode (Edit - Edit Movie) and drag an instance of the animated button onto the movie. Align in to the center and click Control - Test Movie to see how it works.

The importance of the Stop action

We introduced a Stop action at the last frame of both our movies. This tells the movie to stop playing once it reaches the end frame. If we skip this step, our movie plays continuously messing up our animated button.