Flash tutorials | Flash video tutorials | Flash actionscript | flash animation | flash menu | flashconf.com Flash tutorials, Flash video tutorials, Flash actionscript, flash animation , flash menu

1. To take a rectangle for example,we should convert it to a movie clip at first.Select the rectangle and click "Modify->Convert to Symbol",and it will pop up a window which has three opitions.Select "Movie clip" and name it as you like.The hot key "F8" can also work.

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 rectbuttongraphic sym bol 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.

Fade-in movie symbol

(Move your move cursor over it to play the movie.)

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.

fade-out movie symbol

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.

Flash interactive button with fade-in and fade-out effects

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.

How to fade Text in and out

Open Flash MX and make a new movie.

1. Insert your text.

2. Right click on your text and select 'Convert to Symbol'.

A little box should pop-up:

Select 'Movie Clip' and give it a name of your choice, eg. Fade In.

3. Now goto a frame of your choice along the timeline - this will be the duration of the effects, so the further along the timeline you go; the longer the effect will last.

We will use 50 as the example.

4. Right click over your desired frame, in our case 50, and select 'Insert Keyframe'.

- Your timeline should now look something like this:

5. Now go back to frame 1 on the timeline and click on the text you created.

You should get the following options in the 'properties' toolbox:

- Notice the red circle I made, the name you gave your symbol should appear there; in my case 'fadein'.

But we are now looking at the place where I put the red cross.....the dropdown menu called 'color'.

6. Make sure your still at frame 1, and have the text selected.

Click on the dropdown menu called 'color' and select 'Alpha' (Alpha is another word for transparancey).

A little slider will now appear, allowing you to toggle the Alpha Value of your text:

Slide it to 0%, so that your text is no longer visible.

7. Click anywhere on your timeline and you will see that the text is completley transparents, apart from frame 50, where we added the keyframe - that is still 100%.

Now we need to get these to 'merge' together.

8. Now goto roughly the middle of your timeline, in my case frame 25 would suffice.

You should see this in your properties toolbox:

All you need to do is change the 'Tween' (The area surrounded by a red circle), to 'Motion' Using the drop down menu.

Now, as you are half way along your timeline, you text should appear semi-transparent, and the timeline should appear a blue kind of color:

All you need to do now is move the mouse along the timeline and see your text fade in!

9. To make the text fade out, instead of in, simply:

Set the Alpha value of the text on the keyframe (frame 50) to 0%  and the Alpha on frame 1 to 100%.