1) About MOTION TWEENING

This lecture covers the following sections:
1.1 Creating a Motion Tween Animation
1.2 Transforming (Scaling, Rotating or Skewing) an Object during Motion Tween
1.3 Rotating an Object Manytimes during Motion Tween
1.4 Changing the Color of an Object during Motion Tween
1.5 Making an Object Appear or Disappear during Motion Tween
1.6 Accelerating or Decelerating an Object during Motion Tween
1.7 Motion Tweening Text
1.8 Motion Tweening a Photograph/Image
1.9 Motion Tweening Along a Specified Path
1.10 Removing a Motion Tween Animation

1.1 Creating a Motion Tween Animation

  1. Select a timeframe of your choice on the Timeline by clicking the mouse on the respective timeframe.
  2. If that timeframe contains a circle, indicating that the selected timeframe is a Keyframe, go to step 3. If that timeframe does not contain a circle, then right-click the mouse on that time frame. A drop-down menu appears. Click "Insert Keyframe" on the drop-down menu. It will put a circle on the selected timeframe, which indicates that the selected timeframe is now a Keyframe. Alternatively, you may also press the F6 key to convert a timeframe to a Keyframe.
  3. With the Keyframe selected (indicated by the black color of the timeframe) by clicking on it, go to the Stage and create an object of your choice with the help of the tools in the Tools box. The object you created belongs to the Keyframe chosen by you.
  4. Go back to the Keyframe on the Timeline, and right-click the mouse. On the drop-down menu that appears, click "Create Motion Tween".
  5. Decide the length of the animation, and choose the final timeframe on the Timeline accordingly, by clicking the mouse on that timeframe. Right-click on the chosen frame, and click "Insert Keyframe" on the drop-down menu. At this point, the background of the in-between timeframes is tinted light blue with an arrow connecting the beginning and the ending Keyframes. It indicates that motion tween is applied.
  6. To make the object exhibit motion, the positions of the object on the Stage at the initial and the final timeframes should be different from each other. To achieve that, do the following: with the final Keyframe chosen (indicated by the black color of the timeframe), go to the Stage, and with the help of the "Arrow Tool" (available in the Tools box) drag the object to a new position on the Stage.
  7. To preview the animation, click the controller's Rewind button first, and then the Play button.
go back to the index

1.2 Transforming (Scaling, Rotating or Skewing) an Object during Motion Tween

  1. Choose the timeframe at which you want the object to be transformed by clicking on that timeframe.
  2. If the chosen timeframe is not a Keyframe then first convert it to a Keyframe by right-clicking the mouse on that timeframe and selecting "Insert Keyframe" from the drop-down menu, or by pressing the F6 key.
  3. The object on the Stage is now selected at the timeframe of your choice.
  4. Click on the "Free Transfrom Tool" in the Tools box.
  5. Get back to the object on the Stage which is highlighted by the "Free Transform Tool", and scale it or skew it or rotate it.
  6. To preview the tranfromation of the object, click the controller's Rewind button first, and then the Play button. You can see the object transforming gradually as it moves from the first Keyframe to the last Keyframe.
go back to the index

1.3 Rotating an Object Manytimes during Motion Tween

An object cannot be made to make a full rotation during motion tween using the "Free Transform Tool". It has to be done with the help of the Property inspector as follows.
  1. Choose the timeframe at which you want the object to start rotating by clicking on that timeframe.
  2. If the chosen timeframe is not a Keyframe then first convert it to a Keyframe by right-clicking the mouse on that timeframe and selecting "Insert Keyframe" from the drop-down menu, or by pressing the F6 key.
  3. The object on the Stage is now selected at the timeframe of your choice. With the Keyframe selected by clicking on it, open the Property inspector.
  4. Click the down-arrow-head to the right of the Rotate: field in the Property inspector, and then select one of the following options:
    • None   - If you select this option the object does not rotate.
    • Auto   - If you select this option the object can be rotated according to the rotation set manually using the "Free Transform Tool" in the Tools box. When the animation is played, the object rotates in the direction reqiring the least motion.
    • CW   - Select this option to rotate the object in a clockwise direction between the Keyframes.
    • CCW   - Select this option to rotate the object in a counterclockwise direction between the Keyframes.
  5. If you select CW or CCW, the "times" option on the right-side of the Rotate: field becomes available. Enter the number of times you want the object to rotate between Keyframes. You must enter a whole integer in this field.
  6. Close the Property inspector.
  7. To preview the rotation of the object, click the controller's Play button. You can see the object rotating as it moves from one Keyframe to the next.
go back to the index

1.4 Changing the Color of an Object during Motion Tween

To change the color of an object during motion tween, you have to follow the following steps:
  1. Select the timeframe at which you want the object to have a different color. If the chosen timeframe is not a Keyframe then first convert it to a Keyframe by right-clicking the mouse on that timeframe and selecting "Insert Keyframe" from the drop-down menu, or by pressing the F6 key.
  2. The object on the Stage is now selected at the timeframe of your choice.
  3. Then select the "Arrow Tool" from the Tools box, and click on the object on the Stage ONLY once.
  4. Open the Property inspector.
  5. Click the down-arrow-head to the right of the Color: field in the Property inspector, and then select the option Tint .
  6. Choose the color that you want from the Color palette that opens when clicking on the Color swatch that has appeared on the right-side of the Color: field. The color chosen would only tint the original color of the object on the Stage.
  7. Change the intensity of the tinted color of the object on the Stage by entering a number between 0 and 100 on the rectangle, that has appeared on the right-side of the color swatch in the Property inspector. Alternatively, you may also input a number by clicking the triangle to the right of the rectangle, and then by draging the slider up or down. Choosing 0% would retain the original color of the object on the Stage. Choosing 100% would give the object the color that you have chosen from the color palette.
  8. Close the Property inspector.
  9. Click the controller's Rewind button, and then the Play button to see the color of the object on the Stage transforming gradually from one Keyframe to the next Keyframe.
go back to the index

1.5 Making an Object Appear or Disappear during Motion Tween

To make an object appear from nowhere or to make an object disappear during motion tween, you have to follow the following steps:
  1. Select the timeframe at which you want the object to disappear. If the chosen timeframe is not a Keyframe then first convert it to a Keyframe by right-clicking the mouse on that timeframe and selecting "Insert Keyframe" from the drop-down menu, or by pressing the F6 key.
  2. The object on the Stage is now selected at the timeframe of your choice.
  3. Select the "Arrow Tool " from the Tools box, and click on the object on the Stage ONLY once.
  4. Open the Property inspector.
  5. Click the down-arrow-head to the right of the Color: field in the Property inspector, and then select the option Alpha.
  6. Enter a number between 0 and 100 on the rectangle that has appeared on the right-side of the Color: field. Alternatively, you may also input a number by clicking the triangle to the right of the rectangle, and then by draging the slider up or down. Inputting 0% would make the object on the Stage disappear. Inputting 100% would retain the object on the Stage as it was. Inputting a number between 0 and 100 would make the object on the Stage fade to the extent which the number specifies.
  7. Close the Property inspector.
  8. Click the controller's Rewind and then the Play buttons to see the object on the Stage disappearing or appearing from one Keyframe to the next Keyframe.
go back to the index

1.6 Accelerating or Decelerating an Object during Motion Tween

An object moves with a uniform speed, determined by the Frame Rate specified, between one Keyframe to the other. If you want the motion to start slowly and then to pick up speed, or if you want the motion to slow down before it stops, it could be done as follows:
  1. Select a Keyframe and then open the Property inspector.
  2. Click the triangle to the right of the easing control labelled as Ease, and then drag the slider up or down. Or enter a value between -100 and 100 in the Easing field.
  3. To have a motion tween animation begin slowly and end quickly, enter a negative value on the Easing field.
  4. To begin a motion tween animation quickly and end it slowly, enter a positive value on the Easing field.
  5. Close the Property inspector.
  6. Click the controller's Rewind and then the Play buttons to see the object accelerating or decelerating from one Keyframe to the next Keyframe.
go back to the index

1.7 Motion Tweening Text

  1. Select a Keyframe on the timeline.
  2. Select the Text Tool from the Tools box, and write whatever you want on the Stage.
  3. Select the text written on the stage, open the Property inspector, and change the font, size and the color of the text as you wish. Close the Property inspector.
  4. Position the text on the Stage wherever you want it to be using the Arrow Tool in the Tools box.
  5. The text you have created would behave as any other object that you have motion tweened. Therefore motion tweening the text is similar to motion tweening anyother object which is described in the other sections of this lecture note.
go back to the index

1.8 Motion Tweening a Photograph/Image

  1. Select a Keyframe on the timeline.
  2. Click "File", and then click "Import" from the drop-down menu that appears.
  3. On the Import window that has poped up, browse and select the file containing the photograph/image that you would want to import to the flash file. Click "Open" on the Import window.
  4. The photograph/image is now on the flash Stage. Using the Free Transform Tool, adjust the size of the photograph/image on the Stage.
  5. Position the photograph/image on the Stage wherever you want it to be using the Arrow Tool in the Tools box.
  6. The photograph/image would now behave as any other object created on the Stage. Therefore motion tweening the photograph/image is similar to motion tweening anyother object which is described in the other sections of this lecture note.
go back to the index

1.9 Motion Tweening Along a Specified Path

An object moves along a straight line from one Keyframe to the other. If you want the motion to follow a path that is different from a strainght line between two Keyframes, do the following:
  1. Motion tween an object between two Keyframes as described in Section 1.1.
  2. Select the layer containing the motion tween by clicking that layer in the Layer window. Right-click the mouse to get the drop-down menu about layers (not frames).
  3. On the drop-down menu that has appeared, click on "Add Motion Guide". A guide layer would appear just above the layer containg the motion tween.
  4. Click on the first Keyframe of the Guide layer, select the Pencil Tool from the Tools box, and draw whatever the path you like on the Stage. Care should be taken to avoid the path crossing itself.
  5. Click on the first Keyframe of the motion tween layer. Pick the tweened object on the Stage by the Arrow Tool, and drag it to the beginning of the path that was just drawn. The object would snap to the beginning of the path when it gets close to it.
  6. Now click on the last Keyframe of the motion tween layer. Pick the tweened object by the Arrow Tool, and drag it to the end of the path. The object would snap to the end of the path when it gets close to it.
  7. Go to the Layer window, click on the dot on the Guide layer just below the eye symbol, which would create a red cross on that dot, and also would hide the path drawn on the Stage.
  8. Click the controller's Rewind and then the Play buttons to witness the object moving along the unseen path.
go back to the index

1.10 Removing a Motion Tween Animation

  1. Select any one of the timeframes (not necessarily a Keyframe) in the motion tween sequence on the motion tween layer.
  2. Open the Property inspector. Click the down-arrow-head to the right of the Tween: field, and from the drop-down menu, select "None".
  3. An alternative to step 2 is the following: right click on the chosen timeframe, and click Remove Tween from the drop-down menu.
go back to the index

For more information or clarification or to give your comments,
contact shanthini at   shanthi@ids.lk



Glossary:

Controller:
If the controller is not seen in the workspace, select "Window", and then "Toolbars" on the drop-down menu. On the menu that appears with 3 choices, choose "Controller". The playback controller would then appear somewhere on the workspace.
Property inspector:
To open the Property inspector, click on the ash colored bar found on the very bottom of the workspace with the tag "Properties". To close the Property inspector, click on the same ash colored bar once again.
go to the top