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

Motion Tweening

Creating a Motion Tween

In this exercise, we are going to create an animation of a circle moving from one side of the stage to the other. During this animation, the circle will fade out toward the end of the sequence and follow a motion guide during the tween. For the first time, we are going to be using motion tweening instead of a shape. Remember, the key difference is that when you motion-tween, you are tweening a symbol as opposed to a primitive shape. Here are the steps to follow for this exercise:

Double-click layer 1 to rename it. Name it animation. Draw a circle on the stage with a fill and stroke color of your choice. With the Arrow tool, double-click the circle to select its fill and stroke.

Choose Insert, New Symbol. Be sure to give this symbol a graphic behavior and name it circle. Notice the new symbol, called circle, in the library.

Select frame 20 and press F6 to insert a keyframe. With the play head on frame 20, select the circle and drag it down to the bottom-right corner of the stage. At this point, in frames 1 through 19, the circle is in the top corner, but on frame 20, it jumps down to the bottom-right corner.

To have this movement happen over time, select the first frame; then, in the Properties Inspector, choose Motion from the Tween drop-down menu. Notice that the frames turn blue with an arrow pointing from the first frame to the last. You've just created a motion tween!

Now that you have a motion tween, you can add a motion guide. This way, the animation will now follow a path that you draw, as opposed to the circle just moving from one side to the other.

To add a motion guide, click the Add Motion Guide button, as shown in Figure 5.7. Notice the new guide layer added above the animation layer. Also notice that the animation layer is indented, illustrating that this layer is now a slave to the motion guide layer.

Figure 5.7. The Add Motion Guide button.

With a new guide layer selected and the play head moved to frame 1, choose the Pencil tool. With the Pencil tool, draw a curvy line across the stage, being sure not to intersect the line at any point because this could confuse the animated item. With frame 1 in the animation layer selected, in the Properties Inspector, make sure the Snap check box is selected (see Figure 5.8). When Snap is checked, notice how the circle “snaps” to the beginning of the guide.

Figure 5.8. The guide layer and the Snap option are checked in the Properties Inspector.

If you play your animation and it does not follow the guide, it's because the item is falling off the guide before it gets to the last frame. To fix this problem, move the play head to the last frame. Click the center of the circle and drag it to the end of the guide. When you have the circle in snapping range, the symbol center of the circle increases in size. This size increase is an indication that the circle will snap to the guide in that location.

To make the circle disappear over time, you need to apply a color effect. We have already done something similar with shape tweening, but the process is a bit different for motion tweening. In shape tweening, we took down the alpha of the fill color. We can't do that to a symbol, and if we edited the symbol to apply a lower alpha fill, we would be applying it to the entire symbol, thus causing the circle to appear invisible the whole time. Therefore, we'll apply a color effect to the symbol instead.

With the play head on the last frame of the animation, select the instance of the circle on the stage. In the Properties Inspector, use the Color drop-down menu and choose Alpha. Drag the Alpha slider down to 0, as shown in Figure 5.9.

Figure 5.9. The color effect—alpha.

Play your animation. Notice the circle moving across the stage, following the guide and fading out over time.

Save this file as mtween.fla. We will refer to it later.

Some additional options are available in the Properties Inspector for motion tweening, as shown in Figure 5.10. Orient to Path, for example, not only makes the object follow the path, but it causes the baseline of the symbol to orient itself to the path. For instance, if the moving object was a car, the car would continually face the direction it is moving.



Not a subscriber?

Start A Free Trial

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