Flash Rollover Button Tutorial

Rollover Buttons

In this tutorial you will learn how to make Flash animated buttons for the web. It’s easy to make a rollover button animation for your website. This will involves using a “Tweener Class” you can download from the link below.

We include the actionscript code for you to copy and paste. No need to learn programming in this tutorial, but you can study the code if you are an actionscript programmer. By using the “Tweener Class” in your project folder, you just have to cut and paste the code examples below into the Actions window.

Now, this tutorial will give you 3 Flash rollover buttons to experiment with. The first button will scale up when you move your mouse over it. The second button will rotate 360 degrees, and the third button will highlight itself.

Once you finish the project, you export the Flash animated buttons as a SWF file which you can embed on a website or blog. Continue on to read the tutorial below, and watch the video if you have any problems. Good Luck!

Watch the video:

 

 

A. Preparing files and set up document for start

1. Download the latest tweener classes. Which can be downloaded for free from this website: http://code.google.com/p/tweener/

Make sure you download tweener_x_xx_xx_as2.zip file as it’s for action script 2.0. For Flash CC download tweener_x_xx_xx_as3.zip for action script 3.0.

2. Create a new document on flash with actionscript 2.0 / 3.0 and save it to a folder. You can change the document’s fps to a higher like 50 or 60 fps to get a smoother animation.

3. Now copy the downloaded file “tweener_x_xx_xx_xxx.zip” to you project folder and extract the files from that. The zip file contains a folder named “caurina”. Make sure the “caurina” folder must be on the same location where your .fla file is saved.

 

B. Designing the scene

1. Create 3 buttons. You can follow the image below. Make the buttons round to follow the tutorial perfectly.

2. Now make every button a movie clip and give an instance name for each of them. I have used “button1_mc”, “button2_mc” and “button3_mc” for this tutorial.

 

C. ActionScript Part

1. Add a new empty layer then select the empty keyframe on that layer. Now press F9 to open Actions panel.

2. For the first button, use the actions below:


button1_mc.onRollOver = function(){

   Tweener.addTween(this, {_xscale:150, time:0.4, transition:"easeOutBounce"});

   Tweener.addTween(this, {_yscale:150, time:0.4, transition:"easeOutBounce"});

}

button1_mc.onRollOut = function(){

   Tweener.addTween(this, {_xscale:100, time:0.4, transition:"easeOutBounce"});

   Tweener.addTween(this, {_yscale:100, time:0.4, transition:"easeOutBounce"});

}

button1_mc.onPress = function(){

   Tweener.addTween(this, {_xscale:130, time:0.2, transition:"easeOut"});

   Tweener.addTween(this, {_yscale:130, time:0.2, transition:"easeOut"});

}

button1_mc.onRelease = function(){

   Tweener.addTween(this, {_xscale:150, time:0.2, transition:"easeOut"});

   Tweener.addTween(this, {_yscale:150, time:0.2, transition:"easeOut"});

}

button1_mc.onReleaseOutside = function(){

   Tweener.addTween(this, {_xscale:100, time:0.4, transition:"easeOutBounce"});

   Tweener.addTween(this, {_yscale:100, time:0.4, transition:"easeOutBounce"});

}

 

The Tweener’s action line is like this:

Tweener.addTween(target:Object, tweeningParameters:Object):Void

Where “target” is our object that we want to make tween and “tweeningParametersis the parameters that tell tweener what to do.

In the first 3 lines we wrote:

button1_mc.onRollOver = function(){

Tweener.addTween(this, {_xscale:150, time:0.4, transition:”easeOutBounce”});

Tweener.addTween(this, {_yscale:150, time:0.4, transition:”easeOutBounce”});

}

We are making the first button bounce style. It will respond by scaling.

That means we call a function when our mouse comes over the instance “button1_mc” and the function contains 2 tweens by tweener. The first tween to change the property _xscale and second is to change _yscale. When we call “this” on target, it targets to the parent which object calls the function. In this case, “button1_mc”. We also gave a time value for the tween. We used “0.4 seconds”. Now another thing is transition string. We used “easeOutBounce” even “easeOut” somewhere. If you don’t understand easing, then you can find it out from the tweener documentation or directly from this link: http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html. So we scale the button1 uniformly to 150% when the mouse comes over it.

Next function is “onRollOut”. Which calls a function when the mouse goes out of the button.

button1_mc.onRollOut = function(){

Tweener.addTween(this, {_xscale:100, time:0.4, transition:”easeOutBounce”});

Tweener.addTween(this, {_yscale:100, time:0.4, transition:”easeOutBounce”});

}

In this part, the mouse goes outside of the button. So we set the button to 100% scale.

In the same way, we have set the functions for “onPress”. When we press the button it will scale to 130% uniformly as “onRollOver” already have 150%.

“onRelease” has 150% scale. Because when we release the button, it should go back to RollOver position. Also for the press and release effects, we used “easeOut” transition mode.

We’ve also used “onReleaseOutside” which scales down the button to 100%.

 

3. For the “button2_mc”, use these codes:


button2_mc.onRollOver = function(){

   Tweener.addTween(this, {_rotation:360, time:2, transition:"easeOut"});

}

button2_mc.onRollOut = function(){

   Tweener.addTween(this, {_rotation:-360, time:2, transition:"easeOut"});

}

button2_mc.onPress = function(){

   Tweener.addTween(this, {_xscale:80, time:0.2, transition:"easeOut"});

   Tweener.addTween(this, {_yscale:80, time:0.2, transition:"easeOut"});

}

button2_mc.onRelease = function(){

   Tweener.addTween(this, {_xscale:100, time:0.2, transition:"easeOut"});

   Tweener.addTween(this, {_yscale:100, time:0.2, transition:"easeOut"});

}

button2_mc.onReleaseOutside = function(){

   Tweener.addTween(this, {_xscale:100, time:0.2, transition:"easeOut"});

   Tweener.addTween(this, {_yscale:100, time:0.2, transition:"easeOut"});

   Tweener.addTween(this, {_rotation:-360, time:2, transition:"easeOut"});

}

For this button, we’ll make it rotate on “rollover”, go back to original rotation on mouse “RollOut”. We have 80% scale on “onPress” and 100% scale on “onRelease”. For “onReleaseOutside”, we have 100% scale and -360 deg rotation.

 

4. For the third button, we’ll make it more advanced. Double click to edit the movie clip. Now add another layer with same shape but make the fill color a mouse over effect and make it a movie clip. Give an instance name “hover_mc” to the movie clip.

 

5. Now duplicate that movie clip once again and this time make it like a press or down effect. Give instance name “press_mc” to it.

6. Change the both of the movie clips alpha to 0%.

7. Now go back to main scene and on the actions layer, enter this code:


button3_mc.onRollOver = function(){

   Tweener.addTween(this.hover_mc, {_alpha:100, time:0.4, transition:"easeOut"});

}

button3_mc.onRollOut = function(){

   Tweener.addTween(this.hover_mc, {_alpha:0, time:0.4, transition:"easeOut"});

}

button3_mc.onPress = function(){

   Tweener.addTween(this.hover_mc, {_alpha:0, time:0.4, transition:"easeOut"});

   Tweener.addTween(this.press_mc, {_alpha:100, time:0.4, transition:"easeOut"});

}

button3_mc.onRelease = function(){

   Tweener.addTween(this.hover_mc, {_alpha:100, time:0.4, transition:"easeOut"});

   Tweener.addTween(this.press_mc, {_alpha:0, time:0.4, transition:"easeOut"});

}

button3_mc.onReleaseOutside = function(){

   Tweener.addTween(this.hover_mc, {_alpha:0, time:0.4, transition:"easeOut"});

   Tweener.addTween(this.press_mc, {_alpha:0, time:0.4, transition:"easeOut"});

}

For this button, we have made all the tweens with two movie clips which are inside the button. When “onRollOver”, we have changed the hover movie clip’s alpha to 100%, “onRollOut” alpha of hover to 0%, “onPress” alpha of hover to 0% and press to 100%, “onRelease” alpha of hover to 100% and press to 0% and “onReleaseOutside” alpha of hover and press both to 0%.

By doing this Flash animated button tutorial, you’ll get a basic idea on how to use the Tweener class with actionscript 2.0 or 3.0.

More Flash tutorials:

If you like this tutorial please share with your friends: