Monday, August 22, 2011

Creating a Simple Animated Button - Flash Tutorial

This article comes with exercise files. Click on the link below to download:
[GO TO EXERCISE FILES DOWNLOAD PAGE]

Step 1
Open the animated-button.fla file. On the Stage, you will see a smiley face.

Step 2
Use your selection tool to select the smiley face on the stage. MAKE SURE YOU SELECT THE WHOLE ARTWORK. Don't just click on it. Instead, use the selection tool to click and drag a selection area around the smiley face to ensure that the whole drawing is selected.

Then convert it into a button symbol named ButtonSmiley.

Step 3
Now double-click on the ButtonSmiley instance on the stage in order to enter symbol editing mode. In the edit bar, you should now see that you are inside the ButtonSmiley timeline.

Step 4
You will see that the UP state already has a keyframe. Insert keyframes in the OVER, DOWN, and HIT states as well.

Step 5
Then click on the OVER keyframe in order to select it. This is where we will place the animation so that the button becomes animated whenever the user mouses over it. The animation will actually be nested inside a movie clip that's going to be inside this OVER keyframe. We'll learn how to do that in the steps that follow.

Step 6
Once the OVER keyframe is selected, go to the stage and make sure that the smiley face is selected. MAKE SURE THAT THE ENTIRE THING IS SELECTED. Then convert it into a movie clip symbol named SmileyAnimation. We are converting it into a movie clip symbol so that we can place the animation inside it.

Step 7
After converting it into a symbol, double-click on the SmileyAnimation instance on the stage in order go inside its timeline. In the edit bar, you should see that you are now inside the timeline of the SmileyAnimation movie clip.

And remember, this movie clip instance is inside the OVER keyframe of the ButtonSmiley symbol.

Step 8
To animate the smiley face, we can use classic tweens. But first, we'll need to convert the smiley face into a symbol again since we are now actually inside the timeline of the SmileyAnimation movie clip. Inside the SmileyAnimation movie clip, the smiley face on the stage is just a drawing. It's not yet a symbol. We'll need to convert into a symbol so that we can use classic tweens to animate it. So once again, make sure that the whole smiley face is selected and convert it into a movie clip symbol. This time, just name it Smiley.

So now, we have the Smiley symbol, which is inside the SmileyAnimation symbol, which is inside the OVER keyframe of the ButtonSmiley symbol.

Step 9
Then insert keyframes on frames 10 and 20 of the SmileyAnimation symbol's timeline.

Step 10
Then go back to the keyframe on frame 10.

Step 11
Once you are back on the keyframe on frame 10, increase the size of the instance of the Smiley symbol on the stage. Select the free transform tool to be able to scale the instance on the stage.

Once the free transform tool is selected, click on the Smiley instance on the stage to make sure that it's selected. DO NOT DOUBLE CLICK IT. Just click it once.

You should then see adjustment handles on the corners and the sides of the instance.

Place the cursor over any of the corner handles and click and drag outward in order to make the Smiley instance bigger.

Step 12
Once you've increased the size, insert classic tweens in between all of the keyframes. We have 3 keyframes, so we'll insert a classic tween between the first and middle keyframes, and then we'll insert another one between the middle and last keyframes. To insert a classic tween, right-click anywhere in between the keyframes and choose Create Classic Tween.

Once the classic tweens have been added, your animation should now be complete.

To recap, you've created a nested animation inside the SmileyAnimation symbol. And since the SmileyAnimation symbol is inside the OVER keyframe of the ButtonSmiley symbol, this means that the animation is only going to come out when the user mouses over the button.

Step 13
Test the movie by pressing ctrl + enter (PC) or cmd + return (Mac). Once the test movie comes out, mouse over the smiley face and watch it animate. When you mouse out of the button, then the animation will stop. Mouse over it again, and the animation starts again.

Congratulations! You have just created an animated button.