Demo: Animation with a Motion Tween

Contact Us or call 1-877-932-8228
Demo: Animation with a Motion Tween

Demo: Animation with a Motion Tween

The following demo is saved as BasicAnimation/demos/Clouds-done.fla. Take a look at the completed version. It has a Motion Tween on the timeline. Scrub the timeline and watch how even the cloud animation is. Also, notice the blue section of frames which has been added to the timeline. This blue section is a motion tween. In this demo you will see how to create that Motion Tween.

  1. Close the completed file and open BasicAnimation/demos/Clouds.fla. Examine the existing layer structure and timeline. You will find one (locked) layer named "ground".
  2. Add a layer and name it clouds.
  3. Drag an instance of the clouds symbol from the Library onto your new layer in whatever you would like to designate as the starting position. (Our example will start on the left and move to the right.)
  4. Single click on the clouds instance.
  5. Select Insert > Motion Tween (or right-click and select Create Motion Tween) and notice the change to the timeline. Flash just added frames on this layer.
  6. Now, drag the red play head to the last frame. This is where the animation ends.
  7. Move the clouds to your desired ending position.
  8. This path of the animation will follow the line that appears on the stage. This line will not appear in your finished product. You may treat this line just as you would any other stroke. That means you may stretch or bend it in anyway and the clouds will follow that path. Each dot on the line represents a frame. You can start to see how far your animation will move each frame.
  9. Test the movie by pressing Control+Enter (Command+Return on a Mac). Or, select Control > Test Movie > Test.
  10. The ground layer only appears for one frame. So, while your clouds might move, the ground disappears after one frame. Adding frames to the ground layer will fix this. Check how many frames were added to the clouds layer. Flash added 24 frames to ours. Since you want the ground layer to be there the whole time, so it should have the same number of frames as the cloud layer.
  11. Select the last frame on the ground layer and press F5 to Add Frames (Insert > Timeline > Frame).
Next