Juggling with Flash

A quick-and-easy guide to creating
an animated button with Flash

By Bob Schmitt
July 31, 1998

One of Flash 3's neat new features, is that Symbols (Flash vernacular for a reusable element) now include graphics and movie clips along with the standard button. This has opened up an interesting new possibility: the animated rollover. In this tutorial, I'll walk you through the necessary steps to create a button which animates on mouse over.

Try the Flash demo, move your mouse over one of the balls.

Making a Movie Clip

We get started by creating a Movie Clip, which we'll use later as the animated component of the button. The first step is to open the Library palette by selecting Window/Library from the menubar. The Library palette is a key tool in any Flash animation, as this is where Symbols are stored as you create them.

Once the Library palette is open, select Create Symbol from the Library Palette pop-up menu (figure 1).

Figure 1: The Library Palette.

This opens the Symbol Properties dialog, as seen in figure 2.

Figure 2: Symbol Properties dialog.

Selecting Movie Clip creates a new Movie Clip in the Library palette and opens the edit window for the Movie Clip (figure 3).

Figure 3: Edit window for the Movie Clip.

The next step is to create the base art for the animation, using the type tool and the pencil-oval tool to create the text and ball art. Each ball is created on a separate layer and filled with a different color gradation using the paint bucket. Create each separate layer by selecting Layer from the Insert menu.

Using Motion Guides

Next, we'll create the animation effect of the juggling balls by using motion guides. A motion guide is an animation path that appears in the timeline and controls the motion of art on the layer above it. To add a motion guide to a layer, select Add Motion Guide from the layer pop-up menu on the timeline (figure 4).

Figure 4: Add Motion Guide from the
layer pop-up menu on the timeline.

With frame one of the motion guide layer selected, draw your motion guide. In this case, I created a oval shape as my motion guide for the blue ball (figure 5). It really doesn't matter how the shape is colored, as the motion guide will be hidden from view in the final animation.

Figure 5: Creating the oval shape as
the motion guide for the blue ball.

The next step in creating the animation is to add a few more frames. Start by selecting the first frame of all the layers by clicking on frame one of the first layer and shift-clicking on frame one of the last layer. Next, select Insert/Frame from the menubar. This adds a new frame to each layer, duplicating the first frame. For this example, I added an additional 19 frames for a total of 20 frames. Now that we have the necessary frames, all we need to now is define a few key frames and "tween" them.

Creating Key Frames

In order to properly control the direction of the animation along the circular path, we need to create a few key frames. Key frames act as specific reference points; these help to direct the steps in between the animation during tweening. Tweening is an animation term which does just as it sounds, it creates the steps of an animation between a starting key frame and an ending key frame.

For example, if I wanted my ball to move across the screen in a straight line, over a duration of 20 frames, I'd make my first key frame with the ball set to the left side of the screen and my second key frame with the ball set to the right. By applying tweening to the two key frames, Flash will interpolate the other 18 frames of the animation, causing the ball to move across the screen from point A to point B.

A circular shape is a little more complex than a straight line, so it requires a few more key frames to ensure that the animation will move in the direction we want. For the juggling example, I created a key frame every five frames for a total of five (including frame one). To turn a regular frame into a key frame, select the frame in the timeline, and choose Keyframe from the Insert menu (figure 6).

Figure 6: Changing a regular frame into a key frame.

Once the key frames are defined, the balls are positioned on the motion path in each of the key frames. To do this, select the key frame by clicking it in the timeline. Then, move the ball to a position over the motion guide. When the ball is over the motion guide, a bold circle will appear around the tip of the cursor (figure 7).

Figure 7: A bold circle appears around the tip of
the cursor when the ball is over the motion guide.

This is a cue that the ball is positioned on the motion guide. In the juggling example, I wanted the blue ball to rotate in a clockwise direction, so I started with the key frame in frame five and moved the ball to the top of the oval motion guide. And, in the next three key frames moved the ball around the oval in roughly 90-degree increments until I arrived at frame 20 (the last keyframe) in which the ball ends up in the same place it started in frame one.

Tweening the Balls

Next, I tweened the blue ball. I accomplished this by first selecting all the frames in the blue ball layer by selecting frame one and shift-clicking on frame 20. Next, I opened the Frame Properties dialog (figure 8) by right-clicking on the highlighted frames and selecting Properties from the pop-up menu. To access this menu on Macintosh, click on the highlighted frames and hold the mouse button down until the menu appears.

Figure 8: The Frame Properties dialog.

The Frame Properties dialog allows you to choose either shape or motion tweening from the Tweening pop-up menu. Shape tweening, a new feature of Flash 3, essentially ""morphs" one shape into another, while motion tweening moves an object from one position to another. In this case, I used motion tweening. After selecting the tweening options in the Frame Properties dialog and clicking OK, you can see the tweening represented in the timeline by arrows that stretch across the frames between each key frame (figure 9). This process is then repeated for the other two colored balls.

Figure 9: A representation of how tweening is
displayed in the Frame Properties dialog.

Once the animation is complete, you can preview it by pressing the Enter key on your numberpad. To preview the animation without the motion guides, hide them by shift-clicking on the Modify Layers button to the right of each motion guide layer's name.

Making the Button

Now that the animation is complete, the next step is to make the button itself.

Select Create Symbol from the Library palette's pop-up menu, and select Button from the Symbol Properties dialog. This creates a new editing space for the button. Note: When you're editing symbols, you can quickly move between different symbols by clicking on the tabs to the upper right of the timeline.

Figure 10: Button timeline.

Figure 10: The Button timeline.

As you can see in Figure 10, the timeline for a button differs distinctly from that of a movie. There are four predefined frames for a button:

Up is the button's natural or unclicked state.
Down is the appearance of the button when it is clicked.
Over is, of course, what the button will look like when the mouse is moved over it.
Hit is the hit area for the button (i.e., the area of the button that is "hot" or clickable). This is an area that is largely overlooked by Flash developers, and can be used for some interesting effects, but I'll get to that in a minute.

First, let's create the Up state for the button. We'll do this by clicking on the tab (to the right of the timeline) for the juggling movie clip. Next, use Control-A (Win) or Command-A (Mac) to select all of the elements in frame one of the animation, and copy them to the clipboard. Return to the button edit area by clicking its tab in the upper right corner. Now, paste the juggling graphics in the exact same position by selecting Paste in Place from the Edit menu.

Next, we need to turn each of the four frames into key frames. Again, this is accomplished by selecting the frame in the timeline and choosing Keyframe from the Insert menu.

Now, add the animation to the over state by selecting the movie clip in the Library palette and dragging from the preview window onto the drawing area. Position the movie clip using the static art already in the frame. Be sure to delete the static art from the over frame after you have the movie clip in position.

Next, let's turn our attention to the Hit state, where we'll do something a little different. Typically, a Hit state would be a rectangle that would cover the entire area of the button, so that when the mouse rolled over or clicked on this hidden "hot spot" the button would activate.

Figure 11: Deleting the juggling text from the
Hit frame leaves only the three balls behind.

In this example, I decided I'd like the juggling animation to activate only when the mouse rolled over any of the three balls. This was easy to accomplish by simply deleting the juggling text from the Hit frame leaving behind the three balls (figure 11).

Making Use of the Button

Finally, we need to use our button in the main movie. Return to the (so far empty) movie by selecting Edit Movie from the Edit menu.

Once back to the main movie, it's an easy matter to drag the button from the Library and into the movie. Finally, you can test the movie by selecting Test Movie from the Control menu. This command, a new addition to Flash 3, exports the movie as a Flash movie and displays it in a window, right in the Flash authoring environment. A nice time saver over the alternative of having to save the Flash file to disk and load it in a browser to see how it looks.

That's all there is to creating an animated button. Of course, in this example, I only animated the Over state of the button, but you could just as easily create different animations for the Up and Down states as well — opening up a world of fun possibilities for animators to explore.