Complex Button Animation

There are a few different ways to achieve this same effect within Flash. I'm going to show you my personal favorite. I prefer this technique because it allows the flexibility of having one animation from the "up" to the "over" state and a different animation going backwards from the "over" to "up" state if you wish.

Step 1: Prepare Flash Document

First, I'm going to set up my Flash document. The button that I created in Photoshop will require a 170 x 50 stage, and I will set my frame rate to 30 frames per second.

Click to enlarge

Step 2: Create Movie Clip Container

Next, we are going to create a movie clip that will contain the assembly of our button. Go to Insert > New Symbol... (Ctl+F8) to create the container clip. In the Create New Symbol dialog, select Movie Clip and give it the name "mc_aboutContainer". I am assuming this button will be my "About" link, hence the name.

Click to enlarge

Step 3: Create Button

Rename Layer 1, "BG", as it will contain our button graphic. Now, in the first frame of the BG layer, either create a background for your button or Import one you've already made in Photoshop. This should be just the background of the button, no text. If you plan on animating anything about this background (color, transparency, etc.) you should convert it to a movie clip as well. To convert your button background to a movie clip, select it and hit F8 or Modify > Convert to Symbol. Select movie clip, and name it "mc_aboutButton".

Step 4: Create Button Label

Next, we will create the text that will be on our button. Create a new layer and name it "Label". In the first frame of this new layer use the Text tool to add text to your button. Mine will say ABOUT since this is the link to my "about us" page. If you plan on animating the text (I do), convert it to a Movie clip by selecting the newly-created text and hitting F8 (Modify > Convert to Symbol), select Movie Clip and name it "mc_about".

Click to enlarge

Step 5: Set Up Frame Labels

Now we are going to set up a layer that contains frame labels. You can use these labels as cue points and to give direction to the play head.

Create a new layer and name it "Frame Labels" . In the 2nd frame insert a blank keyframe (Insert > Timeline > Blank Keyframe or right-click on the frame itself and select Insert Blank Keyframe). With the blank keyframe in frame 2 selected, go to the Properties Inspector window and where it says FRAME enter "s1" in the box. Do the same thing in frame 11, but name this one "s2". You should now see these frame labels displayed in your Timeline window. Now select frame 20, right-click and select Insert Frame. I am planning on having a 20-frame animation and this will signify the end of it. So "s1" should extend from frame 2 to frame 10 and "s2" should be from frame 11 to 20, as shown below.

Click to enlarge

Step 6: Actions Layer

Create a new layer above your Frame Labels layer and name it "Actions". In the first frame, open the script window (F9) and add a stop; stop(); or (ESC+S+T). Now add another stop function to frame 10. The Actions layer layout and the Frame Labels layer layout should look like this:

Step 7: Create a Hit Area

Now we will need to create a hit area for the button which will also contain the scripting that will make our button animation work.

Create a new layer, name it "Hit Area". Select the first frame of this new layer, then select your Rectangle Tool from the tool bar and draw out a rectangle over the top of the button. This represents the clickable area of the button. Select frame 20 of the HIT AREA layer, right-click and choose Insert Frame to extend the hit area out to frame 20, the duration of our animation. Select the rectangle, hit F8 (Modify > Convert to Symbol) to convert it to a Symbol. In the dialog that appears, select Button and name it "btn_aboutHitArea".

Click to enlarge

Now double-click your hit area button to enter its Editing Mode. Drag the keyframe that is under the "UP" label to under the "HIT" label, thus defining the hit area. (Note: This is also the place you would add sounds to the Up, Over, Down or Hit states by adding blank keyframes and attaching the sounds to them; however, this process is not covered in this tutorial.)

Step 8: Scripting

Now we will add script to our button. With nothing else selected on the Stage, click the hit area of the button one time to select it. Hit F9 to open the Script window and place the following code:

Click to enlarge

This tells the play head that when the hit area is rolled over - go to frame label "s1" and play. When the mouse is taken away, (rollout) - go to frame label "s2" and play. When the button is hit on (release) - proceed to index.php. This example assumes that the button will be controlling a web page navigation. If you were using this button to control the play head inside of a .FLA doc, you would replace the getURL with a gotoAndPlay (frame number or label), or whatever your desired function for clicking the button would be.

Step 9: Animating

Now that our button is assembled and coded properly, we must create the animation for the rollover and rollout effects.

Hide the hit area that is covering the button so you can work on the other elements freely. Hold Alt + click-and-drag the first frame of your button's background layer to frame 10, so that it lines up beneath the 2nd stop in the Actions layer. We are going to make the button appear to change colors when it is rolled over. When the button is rolled over, the play head will play this first animation ("s1") and the play head will stop on frame 10 because of the stop function we placed in the actions layer. It will remain there until the button is either rolled out or clicked. Hence, Frame 10 would then be considered your "Up" state.

To change the color of the button, I selected the button background in frame 10, went down to TINT in the properties inspector, and changed it to a darker color.

Click to enlarge

Now, go back to frame 1 of the button's background layer and hold Alt + click-and-drag a copy of frame 1 to frame 20. This will give the effect of the button changing to a darker color on rollover and then returning back to its original color on rollout. Right-click on the first frame and select Create Motion Tween. This will now make it fade between the colors. Do the same on frame 10: select it, right-click, and select Create Motion Tween.

If you choose to do so, you may apply the same sort of effect to the button's text. I changed the color of my text and the position for the "Up" state, as shown in the diagram below. This diagram also illustrates the frame layout you should have so far.

Click to enlarge

You have now successfully created a functional "complex" button and if you wanted, you could leave it at this Step. I will take it just a bit further to illustrate why I prefer this technique over others. The reason is that this technique gives you the ability to have 2 separate animations for rollover and roll out.

Step 10: Going Further: Adding an Additional Design Element

Create a new layer and name it "Star". On the 10th frame or your "up state" of this new layer, right-click and choose Insert Blank Keyframe. Select the PolyStar Tool from the tool bar (shares the same spot as the Rectangle Tool) and hit the Options button in the Properties Inspector window. In the Tool Settings dialog that appears, set Style to star, Number of Sides to 5, and Star Point Size to 0.50. Drag out the star on your button and position it how you would like it to appear when the button is in its "up" state.

With the newly-created star selected, hit F8 to open the Convert to Symbol window. You may give the star a name of whatever you'd like. It is important to convert it to a movie clip so that you can apply effects to it. Now hold down Alt + click-and-drag a copy of frame 10 to frame 1. Manipulate the star in someway so that it looks different in frame 1 than in frame 10. I lowered the opacity on mine and shrunk it so it will appear to have the effect of "popping up" when the button is rolled over. Now, hold Alt + click-and-drag a copy of frame 1 to frame 20. Right-click frame 1 and choose Create Motion Tween. Now go to frame 10, create a Motion Tween, go down the Properties Inspector and this time, set Rotate to CCW (counter clockwise) and set the Times to 3. This will give the effect of the star fading in and getting bigger on rollover. Then on rollout, the star will rotate and disappear. Being able to have 2 separate animations on roll over and rollout adds an extra bit of customization that is nice to include and is very useful at times.

That concludes this tutorial. You are now ready to export your movie and bask in your button's animated glory

Rollover the button below to see it in action!