Motion Tweening Workflow Improvement

| September 10, 2008 | 0 Comments

xml fig03

Introduction

Motion Tweening is considered bless for animation and Flash designers, as it helps save time and effort when creating animation in Flash instead of building your animation frame-by-frame.

Furthermore, the new version of Flash provides more control to motion tweening either by using XML and the timeline context menu. These improvements make using motion tweening to become easier and fast than before.

Requirements:

Adobe Flash CS3 professional

To complete this tutorial, you will need basic knowledge of using Adobe Flash CS3 Professional.

Controlling motion tweening using timeline context menu:

The first method to discuss is using the timeline improved context menu to work with motion tweening.

The new improved context menu includes 4 options:

Copy Motion, this option allows you to copy the motion tweening you have on the time line to use in other place and over another symbol.

Copy Motion as ActionScript 3.0, this option allows you to copy motion tweening as ActionScript 3.0 code to use inside the ActionScript panel.

Paste Motion, this option allows you to paste the copied motion tweening on a different symbol.

Paste Motion Special, this option allows you to choose specific tweening properties to apply.

xml fig01

Figure01. New improved timeline context menu

To see how to use the above features follow the below steps:

1- Create a symbol on the timeline

2- Move to Frame 50 and add another keyframe and change the place of your symbol

3- Create a motion tweening between the two keyframes.

4- Click with your mouse any where not the motion tweening and right-click your mouse, choose Copy Motion.

5- Create another symbol on a new layer, select the keyframe of the new symbol on the time line and right-click mouse button and choose Paste Motion.

Now, let’s see how to use the Paste Motion Special to copy only certain properties in the tweening as following:

1- Apply the above steps on a motion tweening and make sure to create a change on different properties on the symbol. For example, change the position and scale of the symbol you are animating.

2- Copy Motion as above and choose the new symbol, right-click with your mouse button and choose Paste Motion Special.

3- From the Paste Motion Special dialog box, choose only the properties you would like to copy for example choose only the position value for the symbol (see figure02).

xml fig02

Figure02. Paste Motion Special dialog box

Working with motion tweening and XML

The second feature that improves the motion tweening is to control the motion tweening using XML from the Command top menu. The top menu includes the following features:

Copy Motion as XML, allows you to copy the motion tweening values as XML code.

Export Motion as XML, this option exports the motion tweening properties to external XML file.

Import Motion as XML, this option allows you to import external XML motion file to apply to specific symbol in the current file or another file.

xml fig03

Figure03. Copy Motion as XML in the Commands Menu

To apply this feature follow the below steps:

1- Create a symbol on the timeline

2- Move to Frame 50 and add another keyframe and change the place of your symbol

3- Create a motion tweening between the two keyframes.

4- Click with your mouse any where not the motion tweening and select Export Motion as XML from the top Command menu and save the xml file as MOTION_FILE.XML.

5- Create a new symbol on a new layer and select Import Motion XML from the Command menu.

6- Select form the Properties dialog box the tweening properties you would like to apply to the new symbol and click Ok.

Also, you can edit the XML file of the motion tweening directly from XML file which looks like below:

<Motion duration=”50″ xmlns=”fl.motion.*” xmlns:geom=”flash.geom.*” xmlns:filters=”flash.filters.*”>
<source>
<Source frameRate=”30″ x=”124.3″ y=”197.8″ scaleX=”1″ scaleY=”1″ rotation=”0″ elementType=”movie clip” symbolName=”Symbol 1″>
<dimensions>
<geom:Rectangle left=”0″ top=”0″ width=”176.5″ height=”59.85″/>
</dimensions>
<transformationPoint>
<geom:Point x=”0.5″ y=”0.49958228905597324″/>
</transformationPoint>
</Source>
</source>
<Keyframe index=”0″ tweenSnap=”true” tweenSync=”true”>
<tweens>
<SimpleEase ease=”0″/>
</tweens>
</Keyframe>
<Keyframe index=”49″/>
</Motion>

Where to go from here

The new improved tools help you work more fast and easier than before using the copy motion feature either using the timeline context menu or the Copy Motion as XML from the Commands menu.

Tags: , ,

Category: Flash tutorials

About the Author ()

Rafiq Elmansy is a graphic designer and runs his own design studio Pixel Consultations. He is also an Adobe Community Professional, Certified Expert and Adobe user group manager. He is a Friend of Icograda (the International Council of Graphic Design Associations).You can read his writings on Adobe site, Adobe Edge magazine, communitymx.com and his own blog www.graphicmania.net. He can also be followed on Twitter @rafiqelmansy

Leave a Reply