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

Hour 11. Using Layers in Your Animation > Task: Create a Bouncing Ball Animatio...

Task: Create a Bouncing Ball Animation Using a Motion Guide

In a new file, draw a bouncing line (using the Pencil or Pen tool). This will become the path our ball will follow (see Figure 11.9). It may actually work better if you just draw straight lines and then bend them and snap them together. Regardless of how you draw it, just make sure it's one continuous line that doesn't overlap at all. You don't have to make it a perfect shape, because this is only going to be a Guide (and thus, invisible).

Figure 11.9. A pretty simple drawn line will be used as a Motion Guide (for a tween to follow).

Double-click the Page Curl icon to access the Layer Properties dialog box (or select Modify, Layer from the menu).

Name the Layer Path, lock it (so we don't mess it up), and change its type to Guide. (Notice that there's no Motion Guide option here.)

Insert a new layer by clicking the Insert Layer button at the bottom left of the Timeline or by selecting Insert, Layer. Name this new layer Ball.

Most likely the inserted Ball layer will appear above the layer Path. We're going to make this new layer Guided (meaning that it can follow the drawing in our Path layer). Before you can make a layer Guided it must be directly below the layer set to Guide. We can change the layer stacking by dragging layers around. Go ahead and drag the Ball layer down (so it's just below Path).

Notice that not only did this change the layer order, but it may have caused the Ball layer to be Guided. You will see this if the layer Path now has a slightly different icon (the arch), the layer Ball is indented, and a dashed line separates the two, as shown in Figure 11.10. This is what we want, but you might not be so lucky to have everything fall into place like this (depending on exactly how you dragged around the layers). Additionally, when moving layers around, you might not want Flash to change all the layer properties for you. If that's the case, perform an Undo or two so that you're back to where just the Path layer was a Regular Guide (with the cross icon) and the Ball was above it (press Ctrl+Z as many times as necessary). We're going to do the same thing again the hard way so that you know how it works.

Figure 11.10. The Motion Guide layer (Path) has a special icon, and the Guided layer (Ball) is indented. A dashed line separates the two layers, indicating that they're related.

This time, drag the Path layer above the Ball layer. Nothing changes except the layer order. We can't just change the Path Guide layer to a Motion Guide (which is what we want in the end). Instead, we can make the Ball layer Guided (now that it's directly under a Guide layer). Access the layer properties for the Ball layer (double-click the Page Curl or, with the layer selected, choose Modify, Layer). Notice that the type Guided is available. Only when the layer just above this layer is a Guide will you see this option. Click Guided and then click OK.

Now we're going to create the animation and snap it to the guide. Into frame 1 of Ball, draw a circle and make it a symbol (called Picture of Ball). Now, in the Ball layer, click in frame 50 and insert a keyframe (press F6). Notice that the Path layer doesn't live this long. In the Path layer, click in frame 50 and insert a frame (not a keyframe) by pressing F5. Go back to frame 1 of the Ball layer and create a Motion Tween (by right-clicking the first keyframe in this layer or selecting the frame and picking Motion from the Tween drop-down list in the Properties panel).

One final step will make the ball actually follow the path. You need to snap the instances of Picture of Ball to the path for both keyframes of the Ball layer. Go to frame 1 of the Ball layer (with Snap turned on), grab the center of Picture of Ball, and snap it to the beginning of the path drawn in the Path layer. Go to frame 50 and snap the center of the Picture of Ball instance to the end of the path drawn in the Path layer. Test the movie. The ball should follow the path.

Consider what took all the time in this exercise. It was really just learning about changing layer properties, as well as some mechanics of how they need to be ordered. All you do is draw a path, make it a Guide layer, make a new layer that's Guided, do a Motion Tween, and snap the instance in each keyframe to the drawn path. (Sounds pretty easy when I say it like that but, really, that's all we did.)



Not a subscriber?

Start A Free Trial

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