MotionPath

Package	spark.effects.animation
Class	public class MotionPath
Inheritance	MotionPath Object
Subclasses	SimpleMotionPath

Language Version:

ActionScript 3.0

Product Version:

Flex 4

Runtime Versions:

Flash Player 10, AIR 1.5

The MotionPath class defines the collection of Keyframes objects for an effect, and the name of the property on the target to animate. Each Keyframe object defines the value of the property at a specific time during an effect. The effect then calculates the value of the target property by interpolating between the values specified by two key frames.

MXML Syntax expanded

Hide MXML Syntax

The <s:MotionPath> tag inherits the tag attributes of its superclass, and adds the following tag attributes:

  <s:MotionPath 
    id="ID"
    interpolator="NumberInterpolator"
    keyframes="val"
    property="val"
  />

Default MXML Propertykeyframes

View the examples

More examples

Applying an effect using keyframes and motion paths

Learn more

Motion paths and keyframes

Related API Elements

Keyframe
spark.effects.interpolation.NumberInterpolator

Public Properties

	Property		Defined By
		constructor : Object A reference to the class object or constructor function for a given object instance.	Object
		interpolator : IInterpolator The interpolator determines how in-between values in an animation are calculated.	MotionPath
		keyframes : Vector.<Keyframe> A sequence of Keyframe objects that represent the time/value pairs that the property takes during the animation.	MotionPath
		property : String The name of the property on the effect target to be animated.	MotionPath

Public Methods

	Method		Defined By
		MotionPath(property:String = null) Constructor.	MotionPath
		clone():MotionPath Returns a copy of this MotionPath object, including copies of each keyframe.	MotionPath
		getValue(fraction:Number):Object Calculates and returns an interpolated value, given the elapsed time fraction.	MotionPath
		hasOwnProperty(name:String):Boolean Indicates whether an object has a specified property defined.	Object
		isPrototypeOf(theClass:Object):Boolean Indicates whether an instance of the Object class is in the prototype chain of the object specified as the parameter.	Object
		propertyIsEnumerable(name:String):Boolean Indicates whether the specified property exists and is enumerable.	Object
		setPropertyIsEnumerable(name:String, isEnum:Boolean = true):void Sets the availability of a dynamic property for loop operations.	Object
		toLocaleString():String Returns the string representation of this object, formatted according to locale-specific conventions.	Object
		toString():String Returns the string representation of the specified object.	Object
		valueOf():Object Returns the primitive value of the specified object.	Object

Property Detail

interpolator

property

public var interpolator:IInterpolator

Language Version:

ActionScript 3.0

Product Version:

Flex 4

Runtime Versions:

Flash Player 10, AIR 1.5

The interpolator determines how in-between values in an animation are calculated. By default, the MotionPath class assumes that the values are of type Number and can calculate in-between Number values automatically. If the MotionPath class is given keyframes with non-Number values, or if the desired behavior should use a different approach to interpolation (such as per-channel color interpolation), then an interpolator should be supplied.

Flex supplies predefined interpolators in the spark.effects.interpolation package.

keyframes

property

public var keyframes:Vector.<Keyframe>

Language Version:

ActionScript 3.0

Product Version:

Flex 4

Runtime Versions:

Flash Player 10, AIR 1.5

A sequence of Keyframe objects that represent the time/value pairs that the property takes during the animation. Each successive pair of keyframes controls the animation during the time interval between them. The optional easer and valueBy properties of the later keyframe are used to determine the behavior during that interval. The sequence of keyframes must be sorted in order of increasing time values.

Animations always start at time=0 and lasts for a duration equal to the time value in the final keyframe. If no keyframe is defined at time=0, that keyframe is implicit, using the value of the target property at the time the animation begins.

Because keyframes explicitly define the times involved in an animation, the duration for an effect using keyframes is set according to the maximum time of the final keyframe of all MotionPaths in the effect. For example, if an effect has keyframes at times 0, 500, 1000, and 2000, then the effective duration of that effect is 2000 ms, regardless of any duration property set on the effect itself. Because the final keyframe determines the duration, there must always be a final keyframe in any MotionPath. That is, it is implicit that the time in the final keyframe is the duration of the MotionPath.

Any keyframe may leave its value undefined (either unset, set to null, or set to NaN). In that case, the value is determined dynamically when the animation starts. Any undefined value is determined as follows:

If it is the first keyframe, it is calculated from the next keyframe if that keyframe has both a value and valueBy property set, as the difference of those values. Otherwise it gets the current value of the property from the target.
If it is the final keyframe and the animation is running in a transition, it uses the value in the destination view state of the transition.
Otherwise, any keyframe calculates its value by using the previous keyframe's value and adding the current keyframe's valueBy to it, if valueBy is set.

Related API Elements

Keyframe

property

public var property:String

Language Version:

ActionScript 3.0

Product Version:

Flex 4

Runtime Versions:

Flash Player 10, AIR 1.5

The name of the property on the effect target to be animated.

Constructor Detail

MotionPath

()

Constructor

public function MotionPath(property:String = null)

Language Version:

ActionScript 3.0

Product Version:

Flex 4

Runtime Versions:

Flash Player 10, AIR 1.5

Constructor.

Parameters

property:String (default = null) — The name of the property on the target to animate.

Method Detail

clone

()

method

public function clone():MotionPath

Language Version:

ActionScript 3.0

Product Version:

Flex 4

Runtime Versions:

Flash Player 10, AIR 1.5

Returns a copy of this MotionPath object, including copies of each keyframe.

Returns

MotionPath — A copy of this MotionPath object, including copies of each keyframe.

getValue

()

method

public function getValue(fraction:Number):Object

Language Version:

ActionScript 3.0

Product Version:

Flex 4

Runtime Versions:

Flash Player 10, AIR 1.5

Calculates and returns an interpolated value, given the elapsed time fraction. The function determines the keyframe interval that the fraction falls within and then interpolates within that interval between the values of the bounding keyframes on that interval.

Parameters

fraction:Number — The fraction of the overall duration of the effect, (a value from 0.0 to 1.0).

Returns

Object — The interpolated value.

Examples How to use this example

KeyFrameEffectExample.mxml

<?xml version="1.0"?>
<!-- Simple example to demonstrate the s:Keyframe and s:MotionPath classes. -->
<s:Application
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:s="library://ns.adobe.com/flex/spark">

    <fx:Declarations>
        <fx:Vector id="kf" type="spark.effects.animation.MotionPath">
            <s:MotionPath property="scaleX">
                <s:Keyframe time="250" value="0.5"/>
                <s:Keyframe time="500" value="1.0"/>
                <s:Keyframe time="750" value="0.5"/>
                <s:Keyframe time="1000" value="1.0"/> 
                <s:Keyframe time="1250" value="0.5"/>
                <s:Keyframe time="1500" value="1.0"/>
            </s:MotionPath> 
            <s:MotionPath property="scaleY">
                <s:Keyframe time="250" value="0.5"/>
                <s:Keyframe time="500" value="1.0"/>
                <s:Keyframe time="750" value="0.5"/>
                <s:Keyframe time="1000" value="1.0"/>
                <s:Keyframe time="1250" value="0.5"/>
                <s:Keyframe time="1500" value="1.0"/>
            </s:MotionPath>
        </fx:Vector>
        
        <s:Animate id="shrinkEffect"
            motionPaths="{kf}"
            target="{myImage}"/>
    </fx:Declarations>

    <s:Panel id="examplePanel"
        title="Keyframe and MotionPath Effect Example"
        width="75%" height="75%">
        <s:layout>
            <s:VerticalLayout paddingTop="10" paddingLeft="10"/>
        </s:layout>

        <!-- Directions -->
        <s:VGroup id="detailsBox" width="50%" left="0">
            <s:Label width="99%" color="blue"
                text="Click the Adobe logo to watch the effect."/>
        </s:VGroup>

        <mx:Image id="myImage" 
            source="@Embed(source='assets/logo.jpg')"
            click="shrinkEffect.end();shrinkEffect.play();"/>
    </s:Panel>
</s:Application>

Legal Notices | Online Privacy Policy

MotionPath - AS3 Flex

Classes x

interpolator

keyframes

property

MotionPath

clone

getValue