How to build an animated button using Flash

Time: 15 Minutes.
Difficulty Level: Intermediate
Requirements: Flash 8
Assumed Knowledge: Basic actionscripting, using the actions window, using variables, creating symbols.

Purpose:
I always wanted to animate a button from ActionScript and keep my timeline clear but it was kind of hard, until I stumbled upon this Tweening Engine from Extend. This tutorial makes use of the Tweening Engine to animate a button. It is indeed a great tool, and I say that because with it took me quite little time to make an animation.

Samples & Introduction
You can check out the button animation in here, as you might want to see it in action. Frankly, I came across with animating a button kind of every time I had to build a website; as a result this extension is now one of the tools I can rely on when starting a new project.

Before you start:

Please download the source files: Animated_Button.fla and TweeningEngine.mxp.

Using the Tweening Engine:

For a starters, install the “TweeningEngine.mxp” extension (you just have to double-click on it and it will lead you to the Extension Manager). You will have to open/reopen Flash.

Create a new document. Set the frame rate to 35.
Make a movie clip containing a rectangle with rounded corners, another one smaller as height and with a lighter color on top the first one and alpha set to 50, then add the text for the button.
Name them and also name the instances. (I have backofbutton, frontofbutton with their corresponding instances: BoB and FoB).
Make another movie clip to contain all of the above mentioned movie clips and text. Name it MyButton – instance name: MyB.

From now on there will be only a bit of coding to be done, but you shouldn’t worry, it will end with a fine animation after exactly 6 lines.

The first two are used to import the tweening classes and the flash transition/easing class and they should be inserted in the Actions window of the first frame inside “MyButton” movie clip.

import xtd.tweening.*;
import mx.transitions.easing.*;
import flash.filters.DropShadowFilter;

We got to the part when we should animate the button. The code bellow is going to scale FoB as to shrink it, the textColoring will change the color of out text and the BackShadow will make the button drop shadow.

var StripShrink = new Tween(FoB, "_yscale", Bounce.easeOut, 95, 0, 10, false);
var textColoring = new ColorTween(TextLine, Strong.easeOut, "current", "663300", 8, false);
var BackShadow = new FilterTween(BoB, new DropShadowFilter(1, 90, 0x000000, .5, 5, 5, 1, 3),"distance",Strong.easeOut,"current",10,20,false);

As you can see there were used three types of Tweens each very simple to understand having to mention the instance of the movie clip it refers to, the property the tween will change, the easing type, the starting value, the ending value, the duration and if the tween starts automatically or not.

As we have chosen “false” for the “autostart”  property, the tweens will start when having the mouse over:
    
   this.onRollOver = function() {
          StripShrink.start();
          BackShadow.start();
          textColoring.start();
   };

   this.onRollOut = function() {
          StripShrink.reverse(Regular.easeIn);
          BackShadow.reverse(Regular.easeOut);
          textColoring.reverse(Regular.easeOut);
   };

When the mouse is no longer on our button the tweens will be reversed with different easing functions.

Closing

To summarize all that I have achieved through this simple animation I should begin by reminding you that with 6 code lines in 15 minutes or less, without any timeline modification there was created a button animation.

Thank you for reading this tutorial and hope you will find useful this tutorial, and the tool I’ve used to make the animated button.