Keyframe

(Preview)

Package	spark.effects.animation
Class	public class Keyframe
Inheritance	Keyframe 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 Syntax expanded

Hide 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

More examples

Applying an effect using keyframes and motion paths

Related API Elements

MotionPath

Public Properties

Hide Inherited Public Properties

Show Inherited Public Properties

	Property		Defined By
		constructor : 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
		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

Hide Inherited Public Methods

Show Inherited Public Methods

	Method		Defined By
		Keyframe(time:Number = NaN, value:Object = null, valueBy:Object = null) Constructor.	Keyframe
		clone():Keyframe Returns a copy of this Keyframe object.	Keyframe
		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

Constructor Detail

Method Detail

Examples How to use this example

KeyFrameEffectExample.mxml

Copy

<?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>

[an error occurred while processing this directive]

Legal Notices | Online Privacy Policy

Keyframe - AS3 Flex

Packagesx

Language Elements

Appendixes

Package spark.effects.animation

easer

time

value

valueBy

clone

	`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.