| Package | mx.effects | 
| Class | public class TweenEffect | 
| Inheritance | TweenEffect    Effect   EventDispatcher   Object | 
| Subclasses | AnimateProperty, Blur, Dissolve, Fade, Glow, Move, Pause, Resize, Rotate, SeriesEffect, Zoom | 
You create a subclass of the TweenEffect class to define an effect that plays an animation over a period of time. For example, the Resize effect modifies the size of its target over a specified duration.
MXML Syntax
Hide MXML Syntax
The <mx:TweenEffect> tag
  inherits all of the tag attributes of its superclass,
  and adds the following tag attributes:
  <mx:TagName
    Properties
    easingFunction="easing function name; no default"
     
    Events
    tweenEnd="No default"
  />
  
   See also
| Property | Defined By | ||
|---|---|---|---|
![]()  | className : String
 [read-only] 
      The name of the effect class, such as "Fade". 
 | Effect | |
![]()  | constructor : Object
 
  A reference to the class object or constructor function for a given object instance. 
 | Object | |
![]()  | customFilter : EffectTargetFilter
 
      Specifies a custom filter object, of type EffectTargetFilter,
      used by the effect to determine the targets
      on which to play the effect. 
 | Effect | |
![]()  | duration : Number
  
      Duration of the effect in milliseconds. 
 | Effect | |
| easingFunction : Function = null 
      The easing function for the animation. 
 | TweenEffect | ||
![]()  | effectTargetHost : IEffectTargetHost
 
      A property that lets you access the target list-based control
      of a data effect. 
 | Effect | |
![]()  | filter : String
 
      Specifies an algorithm for filtering targets for an effect. 
 | Effect | |
![]()  | hideFocusRing : Boolean
 
      Determines whether the effect should hide the focus ring
      when starting the effect. 
 | Effect | |
![]()  | instanceClass : Class
 
      An object of type Class that specifies the effect
      instance class class for this effect class. 
 | Effect | |
![]()  | isPlaying : Boolean
 [read-only] 
      A read-only flag which is true if any instances of the effect
      are currently playing, and false if none are. 
 | Effect | |
![]()  | perElementOffset : Number
 
      Additional delay, in milliseconds, for effect targets
      after the first target of the effect. 
 | Effect | |
![]()  | prototype : Object
 [static] 
  A reference to the prototype object of a class or function object. 
 | Object | |
![]()  | relevantProperties : Array
 
      An Array of property names to use when performing filtering. 
 | Effect | |
![]()  | relevantStyles : Array
 
      An Array of style names to use when performing filtering. 
 | Effect | |
![]()  | repeatCount : int = 1 
      Number of times to repeat the effect. 
 | Effect | |
![]()  | repeatDelay : int = 0 
      Amount of time, in milliseconds, to wait before repeating the effect. 
 | Effect | |
![]()  | startDelay : int = 0 
      Amount of time, in milliseconds, to wait before starting the effect. 
 | Effect | |
![]()  | suspendBackgroundProcessing : Boolean = false 
      If true, blocks all background processing
      while the effect is playing. 
 | Effect | |
![]()  | target : Object
  
      The UIComponent object to which this effect is applied. 
 | Effect | |
![]()  | targets : Array
 
      An Array of UIComponent objects that are targets for the effect. 
 | Effect | |
![]()  | triggerEvent : Event
 
      The Event object passed to this Effect 
      by the EffectManager when an effect is triggered,
      or null if the effect is not being
      played by the EffectManager. 
 | Effect | |
| Method | Defined By | ||
|---|---|---|---|
| 
 
TweenEffect(target:Object = null) 
      Constructor. 
 | TweenEffect | ||
![]()  | 
 
addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void
 
 Registers an event listener object with an EventDispatcher object so that the listener 
 receives notification of an event. 
 | EventDispatcher | |
![]()  | 
 
      Captures the current values of the relevant properties
      on the effect's targets and saves them as end values. 
 | Effect | |
![]()  | 
 
      Captures the current values of the relevant properties
      of an additional set of targets
     
      This function is used by Flex when a data change
      effect is run.
     
       
 | Effect | |
![]()  | 
 
      Captures the current values of the relevant properties
      on the effect's targets. 
 | Effect | |
![]()  | 
 
      Creates a single effect instance and initializes it. 
 | Effect | |
![]()  | 
 
      Takes an Array of target objects and invokes the 
      createInstance() method on each target. 
 | Effect | |
![]()  | 
 
      Removes event listeners from an instance
      and removes it from the list of instances. 
 | Effect | |
![]()  | 
 
 Dispatches an event into the event flow. 
 | EventDispatcher | |
![]()  | 
 
      Interrupts an effect that is currently playing,
      and jumps immediately to the end of the effect. 
 | Effect | |
![]()  | 
 
      Returns an Array of Strings, where each String is the name
      of a property that is changed by this effect. 
 | Effect | |
![]()  | 
 
 Checks whether the EventDispatcher object has any listeners registered for a specific type 
 of event. 
 | EventDispatcher | |
![]()  | 
 
  Indicates whether an object has a specified property defined. 
 | Object | |
![]()  | 
 
  Indicates whether an instance of the Object class is in the prototype chain of the object specified 
  as the parameter. 
 | Object | |
![]()  | 
 
      Pauses the effect until you call the resume() method. 
 | Effect | |
![]()  | 
 
      Begins playing the effect. 
 | Effect | |
![]()  | 
 
  Indicates whether the specified property exists and is enumerable. 
 | Object | |
![]()  | 
 
 Removes a listener from the EventDispatcher object. 
 | EventDispatcher | |
![]()  | 
 
      Resumes the effect after it has been paused 
      by a call to the pause() method. 
 | Effect | |
![]()  | 
 
      Plays the effect in reverse, if the effect is currently playing,
      starting from the current position of the effect. 
 | Effect | |
![]()  | 
 
     Sets the availability of a dynamic property for loop operations. 
 | Object | |
![]()  | 
 
      Stops the effect, leaving the effect targets in their current state. 
 | Effect | |
![]()  | 
 
  Returns the string representation of the specified object. 
 | Object | |
![]()  | 
 
  Returns the primitive value of the specified object. 
 | Object | |
![]()  | 
 
 Checks whether an event listener is registered with this EventDispatcher object or any of 
 its ancestors for the specified event type. 
 | EventDispatcher | |
| Method | Defined By | ||
|---|---|---|---|
![]()  | 
 
      Used internally by the Effect infrastructure. 
 | Effect | |
![]()  | 
 
      Called when an effect instance has finished playing. 
 | Effect | |
![]()  | 
 
      This method is called when the effect instance starts playing. 
 | Effect | |
![]()  | 
 
      Determines the logic for filtering out an effect instance. 
 | Effect | |
![]()  | 
 
      Called by the captureStartValues() method to get the value
      of a property from the target. 
 | Effect | |
![]()  | 
 
      Copies properties of the effect to the effect instance. 
 | Effect | |
| 
 
      Called when the TweenEffect dispatches a TweenEvent. 
 | TweenEffect | ||
| Event | Summary | Defined By | ||
|---|---|---|---|---|
![]()  | Dispatched when Flash Player or an AIR application gains operating system focus and becomes active. | EventDispatcher | ||
![]()  | Dispatched when Flash Player or an AIR application loses operating system focus and is becoming inactive. | EventDispatcher | ||
![]()  | Dispatched when the effect finishes playing, either when the effect finishes playing or when the effect has been interrupted by a call to the end() method. | Effect | ||
![]()  | Dispatched when the effect starts playing. | Effect | ||
| Dispatched when the tween effect ends. | TweenEffect | |||
| Dispatched when the tween effect starts, which corresponds to the first call to the onTweenUpdate() method. | TweenEffect | |||
| Dispatched every time the tween effect updates the target. | TweenEffect | |||
| easingFunction | property | 
public var easingFunction:Function = null
The easing function for the animation. The easing function is used to interpolate between the initial value and the final value. A trivial easing function would simply do linear interpolation, but more sophisticated easing functions create the illusion of acceleration and deceleration, which makes the animation seem more natural.
If no easing function is specified, an easing function based
      on the Math.sin() method is used.
The easing function follows the function signature popularized by Robert Penner. The function accepts four arguments. The first argument is the "current time", where the animation start time is 0. The second argument is the initial value at the beginning of the animation (a Number). The third argument is the ending value minus the initial value. The fourth argument is the duration of the animation. The return value is the interpolated value for the current time. This is usually a value between the initial value and the ending value.
The value of this property must be a function object.
Flex includes a set of easing functions in the mx.effects.easing package.
| TweenEffect | () | Constructor | 
public function TweenEffect(target:Object = null)
Constructor.
Parameterstarget:Object (default = null) — The Object to animate with this effect.
      | 
| tweenEventHandler | () | method | 
protected function tweenEventHandler(event:TweenEvent):void
Called when the TweenEffect dispatches a TweenEvent. If you override this method, ensure that you call the super method.
Parameters
event:TweenEvent — An event object of type TweenEvent.
      | 
| tweenEnd | Event | 
mx.events.TweenEvent
mx.events.TweenEvent.TWEEN_END
  Dispatched when the tween effect ends.
  This event corresponds to a call to 
  the TweenEffectInstance.onTweenEnd() method.
   
When a tween effect plays a single time, this event occurs
  at the same time as an effectEnd event.
  If you configure the tween effect to repeat, 
  it occurs at the end of every repetition of the effect,
  and the endEffect event occurs
  after the effect plays for the final time.
TweenEvent.TWEEN_END constant defines the value of the 
   event object's type property for a tweenEnd event. 
     The properties of the event object have the following values:
| Property | Value | 
|---|---|
bubbles | false | 
cancelable | false | 
currentTarget | The Object that defines the 
           event listener that handles the event. For example, if you use 
           myButton.addEventListener() to register an event listener, 
           myButton is the value of the currentTarget.  | 
target | The Object that dispatched the event; 
           it is not always the Object listening for the event. 
           Use the currentTarget property to always access the 
           Object listening for the event. | 
value | The value passed to the 
           onTweenEnd() method. | 
| tweenStart | Event | 
mx.events.TweenEvent
mx.events.TweenEvent.TWEEN_START
  Dispatched when the tween effect starts, which corresponds to the 
  first call to the onTweenUpdate() method.
  Flex also dispatches the first tweenUpdate event 
  for the effect at the same time.
   
The Effect.effectStart event is dispatched 
  before the tweenStart event.
TweenEvent.TWEEN_START constant defines the value of the 
   event object's type property for a tweenStart event. 
     The properties of the event object have the following values:
| Property | Value | 
|---|---|
bubbles | false | 
cancelable | false | 
currentTarget | The Object that defines the 
           event listener that handles the event. For example, if you use 
           myButton.addEventListener() to register an event listener, 
           myButton is the value of the currentTarget.  | 
target | The Object that dispatched the event; 
           it is not always the Object listening for the event. 
           Use the currentTarget property to always access the 
           Object listening for the event. | 
value | The value passed to the 
           onTweenUpdate() method. | 
| tweenUpdate | Event | 
mx.events.TweenEvent
mx.events.TweenEvent.TWEEN_UPDATE
  Dispatched every time the tween effect updates the target.
  This event corresponds to a call to 
  the TweenEffectInstance.onTweenUpdate() method.
   
TweenEvent.TWEEN_UPDATE constant defines the value of the 
   event object's type property for a tweenUpdate event. 
     The properties of the event object have the following values:
| Property | Value | 
|---|---|
bubbles | false | 
cancelable | false | 
currentTarget | The Object that defines the 
           event listener that handles the event. For example, if you use 
           myButton.addEventListener() to register an event listener, 
           myButton is the value of the currentTarget.  | 
target | The Object that dispatched the event; 
           it is not always the Object listening for the event. 
           Use the currentTarget property to always access the 
           Object listening for the event. | 
value | The value passed to the 
           onTweenUpdate() method. | 
<?xml version="1.0"?>
<!-- Simple example to demonstrate the TweenEffect class. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
        
            import mx.events.TweenEvent;
            // Event handler for the tweenUpdate and tweenEnd effects.            
            private function tweenUpdateHandler(event:TweenEvent):void {
                // Access current width of the image.
                currentWidth.text="Current width (in pixels): " + String(event.value[0]);
            }
            // Event handler for the reset button.            
            private function resetHandler():void {
                expand.end(); 
                img.width=30; 
                currentWidth.text="Current width (in pixels): 30";                
                img.height=60; 
                button1.enabled=true;
            }
        ]]>
    </mx:Script>
    <mx:Resize id="expand" target="{img}" widthTo="100" heightTo="200" 
        duration="10000" 
        tweenUpdate="tweenUpdateHandler(event);" 
        tweenEnd="tweenUpdateHandler(event);"/>
    <mx:Panel title="Resize Effect Example" width="100%" height="100%" 
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
        <mx:Text width="100%" color="blue" 
            text="Use the Button controls to resize the image."/>
        <mx:HBox width="100%">
            <mx:Image id="img" width="30" height="60"
                source="@Embed(source='assets/Nokia_6630.png')"/>
            <mx:Text id="currentWidth" height="20" width="100%"/>     
        </mx:HBox>
            
        <mx:ControlBar>
            <mx:Button id="button1" label="Start" click="expand.play(); button1.enabled=false;"/>
            <mx:Button label="Pause" click="expand.pause();"/>
            <mx:Button label="Resume" click="expand.resume();"/>
            <mx:Button label="Reverse" click="expand.reverse();"/>
            <mx:Button label="End" click="expand.end();"/>
            <mx:Button label="Reset" click="resetHandler();"/>
        </mx:ControlBar>
        
    </mx:Panel>
</mx:Application>