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

Hour 11. Using Layers in Your Animation > Task: Use Two Layers to Animate Two C...

Task: Use Two Layers to Animate Two Circles

In this task we'll make two circles move across the screen. One will appear to move faster than the other.

In a new file, draw a circle, select it, and convert it to a symbol (press F8). Name it Circle, leave the default Movie Clip behavior, and click OK.

With the instance of Circle onstage, we can do a Motion Tween. To keep things from getting too complicated, name this layer Fast (indicating that the circle in this layer will move fast). To name a layer, click once in the Timeline so that it has the focus, and then double-click on just the name of the layer (currently Layer 1) and type a new name.

Focus applies to all kinds of computer buttons and fields generally. In an online form, only one field has focus at a time. That is, if you start typing, you'll be typing into whichever field currently has focus. When you tab through a form, the focus moves from one field to the next.

In Flash, several buttons and fields also reflect focus. Even the Stage can have focus (indicated by a highlight around the outside of the window). If you click into the Timeline, it will have focus (indicated by a highlight outline). Quite often, it might not be entirely clear which window, panel, or button has the focus, but you want to be conscious of which option has focus.

Because our Timeline only has one frame so far, position the instance of Circle on the left side of the stage. Then click the cell in frame 31 of the Fast layer. Select Insert, Keyframe (or press F6).

Make sure that the red current frame marker is on frame 31 and move the circle all the way to the right side of the stage.

To make a Motion Tween, either right-click (control-click on Macintosh) on the first keyframe and select Create Motion Tween or select the first keyframe and from the Properties panel select Motion from the Tween drop-down list. Most of this is a review of Hour 8.

Let's create a new layer. Either select Insert, Layerfrom the menu or click the Insert Layer button at the bottom left of the Timeline (see Figure 11.1). Before we forget, let's name this new layer Slow, the same way we named the other layer Fast (in step 2).

Figure 11.1. The Insert Layer button at the bottom left of the Timeline is a quick way to insert a new layer (just like using the Insert, Layer menu options).

From this point forward, you want to be conscious of the layer in which you are currently editing (that is, know where you are). You can only be “in” one layer at a time, which is indicated by the pencil icon in the layer (see Figure 11.2).

Figure 11.2. The pencil icon indicates which layer is currently active (in this case, Slow).

Now we're going to copy an instance of Circle from the Fast layer and paste it in the Slow layer. Click an instance of Circle (to select it) and copy (Ctrl+C). By clicking an object onstage from the Fast layer, you cause that layer to become active. Before you paste, make sure you make Slow the active layer by clicking the word Slow, then paste. Position the copy of Circle you just pasted on the left side of the stage, but not right on top of the other one.

To keep things straight, tint the instance of Circle in the Slow layer. Select it and, from the Properties panel, select Tint from the Color Effect drop-down list and then select a color different from the other circle.

In frame 31 of the Slow layer, select Insert, Keyframe. Move the instance of Circle in frame 31 over to the right side of the stage (but not as far to the right as you moved the circle in the Fast layer).

You can now set a Motion Tween for the first frame of the Slow layer. Test the movie, and you see two circles moving across the screen—two things animating at once!

Save this file, as you'll use it in the next task.



Not a subscriber?

Start A Free Trial

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