Creating Smooth Button Animation in Flash

By Blue_Chi | Flash 8 | ActionScript | Intermediate

This tutorial will teach you how to create a menu with smooth button animation using the ActionScript Tween Class. Using the technique illustrated in this tutorial will make you able to create smooth hover effect for buttons that does not jump or skip when the mouse is moved too quickly over the buttons. This is an intermediate level tutorial which assumes knowlege on how to use the Tween Class.

All of our buttons above are made up of two layers, one of the button graphic coloured, and the other of the same image in black and white. When the mouse rolls over each graphic, the black and white image fades out to unveil the coloured version, and when it rolls out of the button the black and white image fades back in to cover up the coloured version again. Read on to learn how to use the Tween Class to control this animation process.

Starting Off

We prepared all the button graphics required for this tutorial so that we concentrate on creating the effect itself. Download this file and extract all the images in it somewhere accessible. Once that is done, open up Flash and create a new ActionScript 1/2 flash movie, set the frame-rate to 30 fps. and the background to white. The dimensions do not really matter as long as they are not too small.

The next step is to import all the images extracted from the zip file you downloaded earlier into your Flash movie. Go through File>Import>Import to Library..., browser to file where your files were extracted, select them all and import them in one go. Open up your library now (Ctrl+L) to view what you have got now, you should have eight images and eight graphic symbols containing a copy of each of these images. We do not need those extra graphic instances, so you can delete them. You should end up with eight images only.

Creating the Buttons

Creating the button symbols is a simple but a repetitive process. While the library is still opened, drag an instance of the image color1.png onto the stage, select it, and then press F8 to convert it to a Symbol, select Movie Clip and NOT BUTTON, name it Button 1, and click OK. You should have your button on the stage now as a Movie Clip symbol. Access the Properties Inspector and set the Instance Name of our first button to my1_btn.

We will insert the black and white copy of the graphic inside our movie clip. Double-click your button to edit its own timeline. Once in this new timeline, add a new layerabove the existing one, and then open up the Library and drag into it an instance of b&w1.png right on top of the coloured version of the same image (You might need to use the align panel (Ctrl+K) to properly do that).

While the black and white image is still selected, press F8 to convert it to a Movie Clip symbol, name it b&w1 and click OK. Access the Properties Inspector now and set the Instance Name of this movie clip to cover_mc.

OK, that should do it, our first button is now ready. Go back to the main timeline by clicking twice in any empty spot on the stage.

Creating the Other Buttons

You will have to repeat the process used above to create the rest of the images, the only change that you would have to make is the instance name of the button, it should bemy2_btn, my3_btn, and my4_btn accordingly. The instance name of cover_mc should be the same for all of these buttons. Here is the summary of what you have to do:

1. Create an Movie Clip symbol of the coloured button graphic.
2. Assign the appropriate instance name to it.
3. Double click on it to edit its own time line.
4. Add a new layer.
5. Insert the black and white version of the button graphic in this new layer.
6. Assign the instance name conver_mc to it.

Once done you should have four buttons on the stage, you can align them in order above each other this way.

Scripting the Buttons

On the main time line of the Flash movie, right-click the only frame you have and select Actions to open up the Actions Panel. Copy and paste the code below and then test your movie to see your effect working, explanation will follow:

import mx.transitions.Tween;
import mx.transitions.easing.*;

for (i=1; i<=4; i++) {

var current_btn = this["my"+i+"_btn"];

current_btn.onRollOver = function() {
var currentAlpha = this.cover_mc._alpha;
var myHoriTween:Tween = new Tween(this.cover_mc, "_alpha", Strong.easeOut, currentAlpha, 0, 0.5, true);
};

current_btn.onRollOut = function() {
var currentAlpha = this.cover_mc._alpha;
var myHoriTween:Tween = new Tween(this.cover_mc, "_alpha", Regular.easeIn, currentAlpha, 100, 0.5, true);

};
}

The first two lines merely import the assets of the Class Tween required to make this effect work. Review the Tween Class Tutorial to learn more on how to use it.

import mx.transitions.Tween;
import mx.transitions.easing.*;

The rest of the code is a loop that attach the same code to the four buttons, the counts from 1 to 4, which is the total number of buttons that we have, if you would like to change the number of buttons you have in your movie you will have to change the number here.

for (i=1; i<=4; i++) {

Through each iteration through the loop we generate a referece to the current button we plan on attaching the code to, the square bracket [] operator is required to create references to an object.

var current_btn = this["my"+i+"_btn"];

The next part is the real code that creates this effect. An instance of the Tween Class executed through an .onRollOver event handler property attached to the button. Right before we run the Tween we record the current value of the _alpha property of the cover_mc to ensure that when the Tween starts it starts from that point and not from a pre-specified value such as 100 or zero so that the animation does not 'jump'. It is worth noting that the Tween object is the cover_mc and not the actual button calling the script.

current_btn.onRollOver = function() {
var currentAlpha = this.cover_mc._alpha;
var myHoriTween:Tween = new Tween(this.cover_mc, "_alpha", Strong.easeOut, currentAlpha, 0, 0.5, true);
};

The last section of the code sets the .onRollOut event handler property of the button, it looks almost identical to the earlier segment, except that the Tween's ending point here is 100 so that the cover_mc object is fully opaque.

current_btn.onRollOut = function() {
var currentAlpha = this.cover_mc._alpha;
var myHoriTween:Tween = new Tween(this.cover_mc, "_alpha", Regular.easeIn, currentAlpha, 100, 0.5, true);


};
}

The Buttons Actual Command

To make your buttons do things, as in go to another section or open up a new page, you will have to set these commands individually for each button using the .onReleaseevent handler property. The code below is a sample code you can use while testing your movie, this code goes below or above the code we created earlier:

my1_btn.onRelease = function(){
trace ("Home");
}
my2_btn.onRelease = function(){
trace ("About");
}
my3_btn.onRelease = function(){
trace ("Work");
}
my4_btn.onRelease = function(){
trace ("Contact");
}

This concludes our tutorial, you can download the end source file in Flash 8 format here. Feel free to post any questions you have at the Oman3D Forum.

- End of Tutorial.