Macromedia Flash MX: Formtweening

From Wikibooks, the open-content textbooks collection

Jump to: navigation, search

Formtweening (also known as shape tweening or morphing) is a particular type of tween used in Macromedia Flash MX to create the impression of one image changing into another.


[edit] Method

This technique is quite simple, but yields powerful results.

1. Firstly, load Macromedia Flash MX 2004 PRO and create a blank Flash document.

2. Ensure that your first frame is selected on the Timeline.

3. Create or import your first object. This could be text, a vector graphic or an imported bitmap. Please note that the objects being shape tweened must be on the same layer.


3. Select the cursor tool. With your first object still selected, go to Modify>Break Apart. This divides the image into individual fragments. The object should appear to have small "dots" on it. Please note that text usually has to be broken apart twice.


4. Ensure that the Properties field is open (Window>Properties) You must now set the properties for the tween. Select the first frame in the Timeline. You should now see the Tween option in the Properties panel. From the drop down menu, select Shape.


There are also a number of other options available, which you will be able to set after the creation of your second object:

  • Ease: Either In or Out. Makes the transition either slow at first then fast at the end, or vice versa.
  • Blend - Distributive: Allows smoother animation.
  • Blend - Angular: Preserves angles and straight lines during the animation.


4. In the Timeline, right click (ctrl-click on a Mac) on a later frame and select Insert Keyframe.

The time line should now have an arrow, the tweening symbol, between the two frames.


5. Now you must set your second object, the one that the first will "morph" into.

With your second keyframe selected, create your second object. You can edit the original in this keyframe, or create an entirely new object. Note that the original in frame one remains unchanged.


6. As you did with the first, go to Modify>Break Apart. Text has to be broken apart twice.


7. Your animation should now be finished. Go to Control>Test Movie to see the results!


8. From here, you can export the animation into several different formats, such as a web page or Flash Player movie. This can be accessed from the File>Export menu. Please refer to the Flash documentation for further details.