• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Hour 13. Making Buttons for Your User to... > Task: Create an Animated Button

Task: Create an Animated Button

In a new file, use the Text tool to type the word Home onstage (make it fairly large). Select the text with the Arrow tool, convert this to a symbol (select Insert, Convert to Symbol), name it Plain Text, select the Movie Clip Behavior, and then click OK. This symbol will be used extensively.

Now, the text onscreen is an instance of the “Plain Text” symbol. Let's create a Movie Clip symbol that animates the “Plain Text” symbol onstage. With it selected, select Insert, Convert to Symbol, name it Animating Text, again select Movie Clip Behavior, and then click OK.

Now, let's edit the Animating Text symbol. We can access the contents of this symbol by double-clicking. Just make sure you're in the Animating Text symbol before continuing (look at the address bar to make sure).

Inside the master Animating Text symbol, insert a keyframe at frame 30 and one at frame 15. (Create 30 before changing the instance at frame 15—so it ends in the same location as where it starts.) Scale the Plain Text symbol instance in frame 15 so that it's noticeably larger. Go back and set tweening in frame 1 and frame 15 to Motion (right-click on each keyframe, individually, and select Create Motion Tween). Scrub the Timeline to get a feel for our animation.

Go back to our main scene (click Scene 1 at the top left of the Timeline). Delete everything onstage (select Edit, Select All, and then select Edit, Clear—or better yet, press Ctrl+A and then press Delete). You're not deleting any symbols; they're both safe in the Library. Open the Library (select Window, Library or press Ctrl+L). Drag an instance of the Plain Text onstage.

Now we're ready to create our button. Once again, with the Plain Text symbol selected, convert it to a symbol (select Insert, Convert to Symbol), name it Animating Button, make sure that you select Button Behavior, and then click OK. By converting the existing Plain Text symbol into the Button symbol, we're using an instance of a symbol to create the button.

Now let's edit our button and make it animate. Double-click the instance onstage (the Animating Button symbol) and you're taken inside the button—which you can confirm already has an instance of Plain Text in frame 1.

Now we're going to place an instance of the Animating Text Movie Clip in the button's Over state (frame 2). You could drag it from the Library and align it to the Plain Text instance in the Up state. However, we're going to do it another way that won't require any manual alignment. Insert a keyframe into the Over state. This will copy everything from the Up frame (an instance of the Plain Text symbol).

In the Over frame of the button, access the Properties panel and select the Plain Text instance onstage). Click the Swap… button in the Properties panel shown in Figure 13.6.

Figure 13.6. The symbol to which an instance is linked can be swapped without changing any other properties (like position) of the instance.

From the Swap Symbol dialog box you'll see all the symbols in your Library and a dot next to the one the current instance is linked to (see Figure 13.7). Click on Animating Text and then click OK. You've now swapped the instance (previously Plain Text). You'll also notice the name of the current symbol listed in the Properties panel (next to “Instance of:”) has changed.

Figure 13.7. Through the Swap Symbol dialog box you can select a different symbol.

The button is lacking a nice large Hit state. It has a Hit state, but it's kind of a “moving target” and difficult to access. In the master version of the button's Hit frame, insert a keyframe and draw an oval that is at least as big as the word “Home.” After you draw the oval, you can delete the instance of “Animating Text” that was automatically placed in the Hit frame when we inserted the keyframe as it's not necessary.

We created a button that uses a Movie Clip in its Over state. However, instead of creating from the “top down” (that is, making the button and then putting a Movie Clip in the button), we did it from the “specific to the general” (or from “inside out”). First we created a symbol with text (Plain Text). Then, we animated Plain Text in the Movie Clip we called Animating Text. Finally, we created the button and used the Plain Text symbol in the Up frame and the Animating Text in the Over frame.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint