You can describe a motion tween using XML and the ActionScript
classes in the fl.motion package. Adobe Flash Professional has a
"Copy Motion as ActionScript" command that generates XML and ActionScript
based on a motion tween on the Timeline for use on other symbols
or in other projects. You can also script your own motion tween.
As long as you have the fl.motion classes in your classpath at compile
time, the motion tween will be applied to your specified display
object. For more information on the motion classes, see the fl.motion package.
The elements of the supporting XML correspond to classes and properties
in the ActionScript 3.0 Language Reference.
© 2011 Adobe Systems Incorporated. All rights reserved.
Mon Nov 28 2011, 07:50 AM -08:00
The XML element hierarchy is as follows:
<Motion>
<Source>
<dimensions/>
<geom:Rectangle />
</dimensions>
<transformationPoint>
<geom:Point />
</transformationPoint>
</Source>
<Keyframe>
<color>
<Color />
</color>
<tweens>
<SimpleEase />
<CustomEase>
<BezierControl />
<BezierNode />
</CustomEase>
</tweens>
<filters>
<filters />
</filters>
</Keyframe>
</Motion>The following table briefly summarizes the XML elements and attributes that can be assigned to a motion object, for more details about each entry, see the properties listed in the classes that correspond to each element:
| Element | Attribute | Type | Description |
|---|---|---|---|
| Motion | Defines the Motion instance so Flash can assign properties that characterize the motion tween. See the fl.motion.Motion class. | ||
| duration | Number | Number of frames for the selected motion tween. See the fl.motion.MotionBase.duration property. | |
| source | Contains the properties of the original visual object associated with the motion. See the fl.motion.Source class. | ||
| Source | frameRate | Number | The frames per second (fps) setting for the SWF file containing the original animation copied from Flash Professional. This value does not have any effect on the ActionScript implementation in a different SWF file. See the fl.motion.Source.frameRate property. |
| x | Number | The x-coordinate of the transformation point of the symbol instance at the beginning of the original motion tween copied from Flash Professional. | |
| y | Number | The y-coordinate of the transformation point of the symbol instance at the beginning of the original motion tween copied from Flash Professional. | |
| scaleX | Number | The percentage of horizontal scale as a decimal value. The value is often between 0 and 1, but can be greater than 1 or less than 0. For example, you can set scaleX to -1 to flip the object, or to 3 to make it three times the original size. | |
| skewX | Number | The angle (in degrees) of shearing along the horizontal axis. If the skewX and skewY values are equal, they are replaced by the rotation attribute. | |
| skewY | Number | The angle (in degrees) of shearing along the vertical axis.If the skewX and skewY values are equal, they are replaced by the rotation attribute. | |
| rotation | Number | The degrees of rotation for the initial frame. | |
| elementType | String | The type of visual object used in the motion tween. Possible values are: "movie clip", "button", "graphic", "rectangle object", "oval object", "drawing object", "group", "bitmap", "compiled clip", "video", or "text". | |
| symbolName | String | Name of the symbol in the Adobe Flash Professional document's library, if it exists (since the original visual object may not be a symbol instance). | |
| dimensions | Contains the tags using the geom namespace for describing the bounding box and transformation point for the tweened symbol. | ||
| geom:Rectangle | An object from the flash.geom package. | You can add attributes that correspond to the properties of the flash.geom.Rectangle object. For example: <geom:Rectangle left="7" top="9" width="151.95" height="151.95" />The top and left values are relative to the parent object's registration point (top and left are defined in the parent object's coordinate space. | |
| geom:Point | An object from the flash.geom package. | The coordinates of the transformation point are defined as a percentage of the bounding box's dimensions (geom:Rectangle element's values). If the transformation point is the upper-left corner of the bounding box, the coordinates are (0, 0). If the transformation point is the lower-right corner of the bounding box the coordinates are (1, 1). These values allow the transformation point to be applied consistently to objects of different proportions and registration points. The transformation point can lie outside of the bounding box, in which case the coordinates may be less than 0 or greater than 1. | |
| Keyframe | Contains information corresponding to a keyframe on the Timeline. | ||
| blank | Boolean | Indicates that the Keyframe is empty. | |
| index | Number | A unique integer value for the keyframe. The first keyframe index is always 0. Keyframes in the XML must be specified in ascending order of the index value. | |
| label | String | An optional string that describes the Keyframe and corresponds to a frame label on the Timeline. | |
| tweenSync | Boolean | Toggles the sync setting on ("true") and off ("false"). Sync recalculates the number of frames in a tween to match the number of frames allotted to it on the Timeline. This attribute has no effect on ActionScript animation, because ActionScript cannot control graphic symbols. The XML attribute is only used by Adobe Flash Professional’s Copy Motion and Paste Motion commands. Defaults to true if omitted from the XML. | |
| tweenSnap | Boolean | Toggles the Snap setting on ("true") and off ("false"). Snap attaches a symbol to the motion path by its registration point. This attribute has no effect on ActionScript animation, because ActionScript cannot control graphic symbols. The XML attribute is only used by Adobe Flash Professional's Copy Motion and Paste Motion commands. Defaults to true if omitted from the XML. | |
| x | Number | The x-coordinate of the center point of the symbol instance at the current keyframe. | |
| y | Number | The y-coordinate of the center point of the symbol instance at the current keyframe. | |
| scaleX | Number | The percentage of horizontal scale as a decimal value between 0 and 1. The value is often between 0 and 1, but can be greater than 1 or less than 0. For example, you can set scaleX to -1 to flip the object, or to 3 to make it 3 times the original size. | |
| scaleY | Number | The percentage of vertical scale as a decimal value between 0 and 1. The value is often between 0 and 1, but can be greater than 1 or less than 0. For example, you can set scaleY to -1 to flip the object, or to 3 to make it 3 times the original size. | |
| skewX | Number | The angle (in degrees) of shearing along the horizontal axis. If the skewX and skewY values are equal, they are replaced by the rotation attribute. | |
| skewY | Number | The angle (in degrees) of shearing along the vertical axis.If the skewX and skewY values are equal, they are replaced by the rotation attribute. | |
| rotation | Number | The degrees of rotation for the current frame. | |
| rotateDirection | String | Specifies how the tweened element rotates. Possible values are "auto", "none", "cw", "ccw". Defaults to "auto" if omitted from the XML. | |
| rotateTimes | Number | Specifies the number of times the tweened element rotates between the starting keyframe and the next keyframe in addition to the normal rotation. Adobe Flash Professional requires the value to be an integer of 0 or greater value, but the motion classes allow decimal values. | |
| tweenScale | Boolean | If false, prevents the scale from changing during a tween. Defaults to true if omitted from the XML. | |
| cacheAsBitmap | Boolean | Defaults to false if omitted from the XML. | |
| blendMode | String | Possible values are "normal", "layer", "multiply", "screen", "overlay", "hardlight", "lighten", "darken", "difference", "add", "subtract", "invert", "alpha", and "erase". Defaults to "normal" if omitted from the XML. | |
| orientToPath | Boolean | Defaults to false if omitted from the XML. | |
| Color | Contains settings for color variations. Flash symbol instances have five color modes: none, alpha, tint, brightness and advanced. For no transformation (none), the Color tag is empty, indicating the normal appearance. For alpha transformations, set the alphaMultiplier and alphaOffset attributes. For tint transformations, set the tintColor and tintMultiplier attributes.For brightness transformations, use the brightness attribute.For advanced transformations, use the redMultiplier, greenMultiplier, blueMultiplier, alphaMultiplier, redOffset, greenOffset, blueOffset, and alphaOffset attributes. | ||
| brightness | Number | The percentage to apply the brightness channel between -1 and 1, where -1 is completely black and 1 is completely white. | |
| tintColor | Hexidecimal | A hexidecimal color value representing the color to apply. | |
| alphaMultiplier | Number | The percentage to apply the alpha channel, as a decimal value between 0 and 1. | |
| redMultiplier | Number | The percentage to apply the color, as a decimal value between 0 and 1. | |
| greenMultiplier | Number | The percentage to apply the color, as a decimal value between 0 and 1. | |
| blueMultiplier | Number | The percentage to apply the color, as a decimal value between 0 and 1. | |
| alphaMultiplier | Number | A decimal value between 0 and 1 representing a percentage to apply the alpha transparency channel. | |
| tintMultiplier | Number | A decimal value between 0 and 1 representing a percentage to apply with the tintColor value. | |
| redOffset | Number | A number from -255 to 255 that is added to the red channel value after it has been multiplied by the redMultiplier value. | |
| greenOffset | Number | A number from -255 to 255 that is added to the green channel value after it has been multiplied by the greenMultiplier value. | |
| blueOffset | Number | A number from -255 to 255 that is added to the blue channel value after it has been multiplied by the blueMultiplier value. | |
| alphaOffset | Number | A number from -255 to 255 that is added to the alpha channel value after it has been multiplied by the alphaMultiplier value. | |
| tweens | Contains settings for easing variations. | ||
| SimpleEase | Defines an easing setting with a single value throughout the motion tween for all easing properties. | ||
| ease | Number | The easing value to apply to all properties of the motion tween. The ease attribute is a percentage value between -1 (100% ease in or acceleration) and 1 (100% ease out or deceleration). The default value is 0, which means that the tween animates at a constant speed, without acceleration or deceleration. | |
| target | Number | When using Adobe Flash Professional's Copy Motion and Paste Motion commands, the authoring tool generates XML that does not include a target attribute for the SimpleEase element because Flash Professional applies the same value to all ease properties. However, the ActionScript 3.0 classes allow you to apply different SimpleEase values to individual properties at the same time. The possible values for target are the same as for CustomEase: "position", "scale", "rotation", "color", "filters", "x", "y", "scaleX", "scaleY", "skewX", and "skewY". | |
| CustomEase | Defines a custom easing curve composed of cubic Bezier curves. It can be applied to all properties at once, or you can define different curves for different properties. For more information about the curves that represent custom ease properties, see the CustomEase class. | ||
| target | Number | The property that is assigned a custom value. When using Adobe Flash Professional's Copy Motion and Paste Motion commands, the authoring tool generates these possible values for target: "position", "scale", "rotation", "color", "filters". The ActionScript 3.0 motion classes allow even more flexibility, you can define individual curves for: "x", "y", "scaleX", "scaleY", "skewX", and "skewY". If the "target" attribute is omitted from the XML, all ease properties are targeted together. Note:The XML omits the first and last points on the custom easing curve. The first point must always be (0, 0) (the starting value of the tweened property), and the last point must be (1, 1) (the ending value of the tweened property). To keep the code efficient, and to avoid possible errors these values are omitted from the XML and assumed to be implicit. | |
| BezierControl | A point relative to a curve that is used to define the curve. | ||
| x | Number | The x-coordinate of the point for defining a curve. | |
| y | Number | The y-coordinate of the point for defining a curve. | |
| BezierNode | A point on a curve that is used to define the curve. | ||
| x | Number | The x-coordinate of the point on a curve. | |
| y | Number | The y-coordinate of the point on a curve. | |
| filters | Defines an object from the flash.filters package to use as an element (for example: filters:GlowFilter). You can add attributes that correspond to the properties of the specified flash.filters object. For example: <filters:DropShadowFilter quality="1" inner="false" knockout="false" hideObject="false" distance="0" angle="45" color="0x000000" alpha="1" blurX="0" blurY="0" strength="0" />. See the flash.filters package. |
The following example shows the ActionScript with inline XML describing the motion tween of a moveShape movie clip instance for the symbol myShape as it rotates, moves, uses a custom ease setting and changes alpha values over ten frames:
import fl.motion.Animator;
var moveShape_xml:XML = <Motion duration="10" xmlns="fl.motion.*" xmlns:geom="flash.geom.*" xmlns:filters="flash.filters.*">
<source>
<Source frameRate="12" x="41.35" y="91.35" scaleX="1" scaleY="1" rotation="0" elementType="movie clip" instanceName="moveShape" symbolName="myShape">
<dimensions>
<geom:Rectangle left="-46.65" top="-61.95" width="133.05" height="133.95"/>
</dimensions>
<transformationPoint>
<geom:Point x="0.49981210071401727" y="0.4998133631952222"/>
</transformationPoint>
</Source>
</source>
<Keyframe index="0" rotateTimes="2">
<tweens>
<CustomEase>
<BezierControl x="0.08650266979261687" y="0.14705453864744866"/>
<BezierControl x="0.23675978562091857" y="0.28829454738109694"/>
<BezierNode x="0.2689728109485753" y="0.49688733564952436"/>
<BezierControl x="0.32093023255813957" y="0.8333333333333333"/>
<BezierControl x="0.5988021982960045" y="1.034249160488573"/>
<BezierNode x="0.7309082984924317" y="0.8685852488735627"/>
<BezierControl x="0.8116279069767443" y="0.767361111111111"/>
<BezierControl x="0.910302766164144" y="0.9730908298492431"/>
</CustomEase>
</tweens>
</Keyframe>
<Keyframe index="9" x="371.95" y="188">
<color>
<Color alphaMultiplier="0.4" alphaOffset="0"/>
</color>
</Keyframe>
</Motion>;
var moveShape_animator:Animator = new Animator(moveShape_xml, moveShape);
moveShape_animator.play();Mon Nov 28 2011, 07:50 AM -08:00