Adobe® Flex® 4 Language Reference
Show Packages and Classes List |  Packages  |  Classes  |  Index  |  Appendixes
spark.effects.animation 
Keyframe 
Packagespark.effects.animation
Classpublic class Keyframe
InheritanceKeyframe Inheritance Object

Language Version: ActionScript 3.0
Product Version: Flex 4
Runtime Versions: Flash Player 10, AIR 1.5

The Keyframe class defines the value of a property at a specific time during an effect. For example, you can create three keyframes that define the value of a property at the beginning of the effect, at the midpoint of the effect, and at the end of the effect. The effect animates the property change on the target from keyframe to keyframe over the effect duration.

The collection of keyframes for an effect is called the effect's motion path. A motion path can define any number of keyframes. The effect then calculates the value of the property by interpolating between the values specified by two key frames.

Use the MotionPath class to hold the collection of Keyframe objects that represent the motion path of the effect. The MotionPath class specifies the name of the property on the target, and the collection of Keyframes objects specify the values of the property at different times during the effect.

MXML SyntaxexpandedHide MXML Syntax

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

  <s:Keyframe 
    id="ID"
    easier="Linear"
    time="val"
    value="val"
    valueBy="val"
  />
  

View the examples

See also



Public Properties
 PropertyDefined By
 Inheritedconstructor : Object
A reference to the class object or constructor function for a given object instance.
Object
  easer : IEaser
The easing behavior applied to the motion between the previous Keyframe object in motion path and this Keyframe object.
Keyframe
 Inheritedprototype : Object
[static] A reference to the prototype object of a class or function object.
Object
  time : Number
The time, in milliseconds, at which the effect target for this keyframe should have the value specified by the value property.
Keyframe
  value : Object
The value that the property of the effect target should have at the time specified by the time property.
Keyframe
  valueBy : Object
Optional parameter which, if specified, is used to calculate value in this keyframe or the previous one.
Keyframe
Public Methods
 MethodDefined By
  
Keyframe(time:Number = NaN, value:Object = null, valueBy:Object = null)
Constructor.
Keyframe
  
Returns a copy of this Keyframe object.
Keyframe
 Inherited
Indicates whether an object has a specified property defined.
Object
 Inherited
Indicates whether an instance of the Object class is in the prototype chain of the object specified as the parameter.
Object
 Inherited
Indicates whether the specified property exists and is enumerable.
Object
 Inherited
Sets the availability of a dynamic property for loop operations.
Object
 Inherited
Returns the string representation of this object, formatted according to locale-specific conventions.
Object
 Inherited
Returns the string representation of the specified object.
Object
 Inherited
Returns the primitive value of the specified object.
Object
Property Detail

easer

property
public var easer:IEaser

Language Version: ActionScript 3.0
Product Version: Flex 4
Runtime Versions: Flash Player 10, AIR 1.5

The easing behavior applied to the motion between the previous Keyframe object in motion path and this Keyframe object. By default, the easing is linear, or no easing at all.

Note that the parent effect might have easing applied already over the entire animation. Therefore, if easing per keyframe interval is desired instead, it is necessary to set the overall effect easer to linear easing (spark.effects.easing.Linear) and then set the easer on each Keyframe as appropriate.

Because this property acts on the interval between the previous Keyframe object in a sequence and this Keyframe object, the easer property is ignored on the first Keyframe object in a sequence.

The default value is Linear.

time

property 
public var time:Number

Language Version: ActionScript 3.0
Product Version: Flex 4
Runtime Versions: Flash Player 10, AIR 1.5

The time, in milliseconds, at which the effect target for this keyframe should have the value specified by the value property. This time is relative to the starting time of the effect defined with this keyframe.

value

property 
public var value:Object

Language Version: ActionScript 3.0
Product Version: Flex 4
Runtime Versions: Flash Player 10, AIR 1.5

The value that the property of the effect target should have at the time specified by the time property.

valueBy

property 
public var valueBy:Object

Language Version: ActionScript 3.0
Product Version: Flex 4
Runtime Versions: Flash Player 10, AIR 1.5

Optional parameter which, if specified, is used to calculate value in this keyframe or the previous one. If value is not set in the previous keyframe, but this keyframe defines both value and valueBy, then value in the previous keyframe is calculated as value in this keyframe minus valueBy in this keyframe.

Similarly, if value in this keyframe is not defined, but valueBy in this keyframe and value in the previous keyframe are both set, then value in this keyframe is calculated as value in the previous keyframe plus valueBy in this keyframe.

valueBy is ignored for the first keyframe in a sequence, since it applies only to the interval preceding a keyframe, and there is no preceding interval for the first keyframe.

Constructor Detail

Keyframe

()Constructor
public function Keyframe(time:Number = NaN, value:Object = null, valueBy:Object = null)

Language Version: ActionScript 3.0
Product Version: Flex 4
Runtime Versions: Flash Player 10, AIR 1.5

Constructor.

Parameters
time:Number (default = NaN) — The time, in milliseconds, at which the effect target of this keyframe should have the value specified by the value parameter.
 
value:Object (default = null) — The value that the effect target should have at the given time.
 
valueBy:Object (default = null) — Optional parameter which, if provided, causes value to be calculated dynamically by adding valueBy to the value of the previous keyframe in the set of keyframes in a MotionPath object. This value is ignored if this is the first Keyframe in a sequence.
Method Detail

clone

()method
public function clone():Keyframe

Language Version: ActionScript 3.0
Product Version: Flex 4
Runtime Versions: Flash Player 10, AIR 1.5

Returns a copy of this Keyframe object.

Returns
Keyframe — A copy of this Keyframe object.
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>