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

Lesson 4. Creating Animation > Creating a Motion Tween

Creating a Motion Tween

Motion tweening is useful for animating symbols. As its name suggests, motion tweening typically is used to move an element from one place to another, but it can do more than that. You can use motion tweening to scale, rotate, and skew elements, and to change the color settings and transparency of a symbol over time. You can apply motion tweening to only one element on a layer, so when you must tween multiple elements, you need to use multiple layers.

Right now, you have a fairly simple frame-by-frame animation for the two screens in your site. This animation is good enough for a simple site, but wouldn't it look better with some transitions—things moving, things fading in and out, and all the other stuff that makes a site interesting? That's exactly what you're going to do next. You're going to make the Navigation Bar move from its location in the first screen to its location in the second screen. Instead of having it jump there, as it does currently, you're going to make it move smoothly from place to place.

Drag the playhead over frame 1 in neptune15.fla. Click the playhead to make sure you don't have any frames selected, and add 13 frames to every layer after frame 1 by pressing the F5 key 13 times.

You're going to add some motion to the movie, so you need to give it a few extra frames over which to perform that motion. When you added 13 frames after frame 1, the contents of frame 2 moved to frame 15. The contents of frames 2 through 14 are identical to those of frame 1, because all you did was add some frames. Remember that frames only increase the time in your movie; they don't change the animation (except for expanding the time).


You can tell exactly which frame the playhead is located on by checking the current frame box at the bottom of the timeline. In the preceding figure, the frame is 14, and the box is located at the far-right side of the screen.

Select the Navigation Bar layer, and drag the playhead to frame 10. Insert a keyframe at frame 10 by choosing Insert > Keyframe or pressing F6. Select this new keyframe, and choose Insert > Create Motion Tween.

A small arrow appears between frames 10 and 15 of the Navigation Bar layer to indicate that a motion tween has been created. The frames in the motion tween are shaded.

When you create a motion tween, you must have at least two keyframes. The first keyframe contains the initial state of the symbol to be animated, and the last keyframe contains the final state of that symbol. To create the motion tween, Flash interprets the state of the symbol in the in-between frames. In this case, you have an instance of the Navigation Bar symbol in the middle of the stage in frame 1 through 10; you have another instance of the same symbol near the top of the stage in frame 15. Flash generates the intermediate positions of this symbol for frames 10 through 15.

Drag the playhead to frame 1, and play your movie by choosing Control > Play.

The first 10 frames are static, but the Navigation Bar moves to a new position over frames 10 to 15. You didn't have to put a keyframe in each frame to make this transition, because Flash did all the tweening work for you.

Save your movie in the MyWork folder as neptune16.fla.

Keep the file open for the next exercise; you're going to add more to it.

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