2) About SHAPE TWEENING

This lecture covers the following sections:
2.1 Creating a Shape Tween Animation
2.2 Changing the Color of an Object during Shape Tween Animation
2.3 Giving Motion to the Shape Tweened Object
2.4 Shape Tweening Text
2.5 Changing the Background Color
2.6 Removing a Shape Tween Animation

2.1 Creating a Shape Tween Animation

  1. Select a timeframe of your choice on the Timeline by clicking on the respective timeframe. If this timeframe is not a Keyframe, then convert it to a Keyframe by right-clicking on that timeframe and selecting "Insert Keyframe" from the drop-down menu, or by pressing the F6 key.
  2. With the Keyframe selected (indicated by the black color of the timeframe), 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 made by you in step 1.
  3. With the Keyframe selected, open the Property inspector.
  4. Click the down-arrow-head to the right of the Tween: field in the Property inspector, and then select the option Shape . Close the Property inspector.
  5. Decide the length of the animation, and choose the final timeframe on the Timeline accordingly by clicking on that timeframe. Right-click on the chosen frame and click "Insert Keyframe" on the drop-down menu, or press the F6 key. At this point, the background of the in-between timeframes is tinted light green with an arrow connecting the beginning and the ending Keyframes. It indicates that shape tween is applied.
  6. To make the object exhibit shape tween, the shape 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 timeframe chosen, go to the Stage and with the help of the "Arrow Tool" (available in the Tools box), select the object. You may change the shape of the existing object. Or, you may delete the object and make a new object with an entirely different shape.
  7. To preview the shape animation, click the controller's Rewind button and then the Play button.
go back to the index

2.2 Changing the Color of an Object during Shape Tween Animation

  1. Choose the timeframe at which you want the object to have a different color by clicking on that timeframe. If that timeframe is not a Keyframe, convert it to a Keyframe.
  2. With the Keyframe chosen, select the Arrow Tool from the Tools box, and click on the object on the Stage ONLY once.
  3. Open the Property inspector. Choose the color that you want from the Color palette that opens when clicking on the Stroke color swatch and/or Fill color swatch in the Property inspector. Close the Property inspector.
  4. As an alternative to step 3, change the color of the object by selecting the color from the color palette that opens when clicking on the Stroke Color swatch and/or Fill Color swatch in the Colors section of the Tools box.
  5. If you wish to make your own color, then open "Window" and then select "Color Mixer" from the drop-down menu. On the Color Mixer window, you can make any color or a mixer of colors that you wish to have.
  6. Click the controller's Rewind button, and then the Play button to see the color of the object on the Stage transforming gradually as it exhibits shape tween from one Keyframe to the other.
go back to the index

2.3 Giving Motion to the Shape Tweened Object

  1. Select the timeframe at which you want the object to start moving. If that timeframe is not a Keyframe, convert it to a Keyframe.
  2. Select the timeframe at which you want the motion of the object to end. If that timeframe is not a Keyframe, convert it to a Keyframe.
  3. With the Keyframe of Step 2 selected (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 .
  4. Click the controller's Rewind button, and then the Play button to observe the object moving on the Stage as it exhibits shape tween from one Keyframe to the other.
go back to the index

2.4 Shape 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 written text, open the Property inspector, and change the font, size and the color of the text as you wish. The font Impact is recommended when shape tweening text. 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. With the text on the Stage selected using the Arrow Tool, click on "Modify". On the drop-down menu that appears, click "Break Apart". You can observe that the text on the Stage breaking apart into letters.
  6. Once again, click on "Modify" and then on "Break Apart". The text is now converted into a form that can be subjected to shape tweeing.
  7. Now you shall shape tween the text in the same as you shape tween anyother object which is described in the other sections of this lecture note. Note that each letter in the text can now be subjected to any distortion that you may wish to apply to it using the Free Transform Tool, or the Arrow Tool, or any other tool available in the Tools box.
  8. Click the controller's Rewind button, and then the Play button to observe the text undergoing shape Tween from one Keyframe to the other.
go back to the index

2.5 Changing the Background Color

The background color of the document cannot be changed in a Flash Animation Movie. However, it is possible to bypass this limitation by adopting the following procedure.
  1. Insert a new layer on the Layer window. Drag the layer to the bottom of the layers on the Layer window. Select the first timeframe of this Layer, and convert it to a Keyframe.
  2. Using the Rectangle Tool from the Tools box, draw a rectangle on the Stage. The size of the rectangle drawn must be the same as the size of the document.
  3. Subject this rectangle to shape tween according the procedure described in Section 2.1. Make sure that the final timeframe of the shape tweened rectangle is the same as the final timeframe of the Movie.
  4. Convert as many timeframes as you wish to Keyframes along the timeline of this Layer.
  5. At each of these Keyframes, change the color of the rectangle by selecting the color from the color palette that opens when clicking on the Fill Color swatch in the Colors section of the Tools box, or in the Property inspector. If you wish to make your own color, then open "Window" and then select "Color Mixer" from the drop-down menu. On the Color Mixer window, you can make any color or a mixer of colors that you wish to have.
  6. Click the controller's Rewind button, and then the Play button to observe the background changing its color.
go back to the index

2.6 Removing a Shape Tween Animation

  1. Select anyone of the timeframes (not necessarily a Keyframe) in the shape tween sequence on the shape 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 on 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