Most Flex effects are implemented by using the tweening mechanism, where a tween defines a transition performed on a target object over a period of time. That transition could be a change in size, such as the Zoom or Resize effects perform; a change in visibility, such as the Fade or Dissolve effects perform; or other types of transitions.

You use the following classes to implement a tween effect:

• mx.effects.Tween A class used to implement tween effects. A Tween object accepts a start value, an end value, and an optional easing function. When you define tween effect classes, you create an instance of the Tween class in your override of the Effect.play() method.

  The Tween object invokes the mx.effects.TweenEffect.onTweenUpdate() callback method on a regular interval, passing the callback method an interpolated value between the start and end values. Typically, the callback method updates some property of the target component, causing that component's property to animate over time. For example, the Move effect modifies the x and y properties of the target component for the duration of the effect to show an animated movement.

  When the effect ends, the Tween object invokes the mx.effects.TweenEffect.onTweenEnd() callback method. This method performs any final processing before the effect terminates. You must call super.onTweenEnd() from your override.

• mx.effects.TweenEffect The base factory class for all tween effects. This class encapsulates methods and properties that are common among all Tween-based effects.
• mx.effects.effectClasses.TweenEffectInstance The instance class for all tween effects.

  When you define effects based on the TweenEffect class, you must override the TweenEffectInstance.onTweenUpdate() method, and optionally override the TweenEffectInstance.onTweenEnd() method.

The following example creates a tween effect. However, Flex supplies the AnimateProperty class that you can use to create a tween effect for a single property of the target component. For more information, see Using Behaviors.

Example: Creating a tween effect

In this example, you create a tween effect that rotates a component in a circle. This example implements a simplified version of the Rotate effect. The rotation is controlled by two parameters that are passed to the effect: angleFrom and angleTo:

package myEffects
{
   // myEffects/Rotation.as
   import mx.effects.TweenEffect;
   import mx.effects.EffectInstance;
   import mx.effects.IEffectInstance;

   public class Rotation extends TweenEffect
   {
       // Define parameters for the effect.
       public var angleFrom:Number = 0;
       public var angleTo:Number = 360;
  
       // Define constructor with optional argument.
       public function Rotation(targetObj:* = null) {
           super(targetObj);
           instanceClass= RotationInstance;            
       }

       // Override getAffectedProperties() method to return "rotation".
       override public function getAffectedProperties():Array {
           return ["rotation"];
       }
    
       // Override initInstance() method.
       override protected function initInstance(inst:IEffectInstance):void {
           super.initInstance(inst);
           RotationInstance(inst).angleFrom = angleFrom;
           RotationInstance(inst).angleTo = angleTo;
       } 
   }
}

In this example, the effect works by modifying the rotation property of the target component. Therefore, your override of the getAffectedProperties() method returns an array that contains a single element.

You derive your instance class from the TweenEffectInstance class, and override the play(), onTweenUpdate(), and onTweenEnd() methods, as the following example shows:

package myEffects
{
    // myEffects/RotationInstance.as
    import mx.effects.effectClasses.TweenEffectInstance;
    import mx.effects.Tween;

    public class RotationInstance extends TweenEffectInstance
    {
        // Define parameters for the effect.
        public var angleFrom:Number;
        public var angleTo:Number;
  
        public function RotationInstance(targetObj:*) {
            super(targetObj);
        }
  
        // Override play() method class.
        override public function play():void {
            // All classes must call super.play().
            super.play();
            // Create a Tween object. The tween begins playing immediately.
            var tween:Tween = 
                createTween(this, angleFrom, angleTo, duration);  
        }

        // Override onTweenUpdate() method.
        override public function onTweenUpdate(val:Object):void {
            target.rotation = val;
        }
  
        // Override onTweenEnd() method.
        override public function onTweenEnd(val:Object):void {
            // All classes that implement onTweenEnd() 
            // must call    super.onTweenEnd().
            super.onTweenEnd(val);
        }
    }
}

In this example, the Tween object invokes the onTweenUpdate() callback method on a regular interval, passing it values between angleFrom and angleTo. At the end of the effect, the Tween object calls the onTweenUpdate() callback method with a value of angleTo. By invoking the onTweenUpdate() callback method at regular intervals throughout the duration of the effect, the target component displays a smooth animation as it rotates.

You use your new effect in an MXML application, as the following example shows:

<?xml version="1.0"?>
<!-- effects/MainRotation.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:MyComp="myEffects.*"> 

    <MyComp:Rotation id="Rotate90" 
        angleFrom="0" angleTo="360" 
        duration="1000"/>
 
    <mx:Image source="@Embed(source='../assets/myRotationImage.jpg')" 
        mouseDownEffect="{Rotate90}"/>
 
</mx:Application>
The executing SWF file for the previous example is shown below:

In this example, you use the effect to rotate an image when the user clicks it.