Skip to content
September 16, 2008 / Shrikant Patil

Flex : Creating Custom TweenEffect Objects in flex

Flex framework utilize native flash player’s Tween API to create TweenEffects, such as MoveEffect, ResizeEffect etc which cause changes over time. We can create a custom TweenEffect using the framework to reach the point of expections of applications needs.
TweenEffect’s are different than of Effect objects. The difference of consideration is that the TweenEffects uses a tween animation while changing the properties of the object.
To create a custom TweenEffect, we need to work with two base classes:
1. TweenEffect and 2. TweenEffectInstance.

First we will grasp on the Tween class.Tween event uses callback model,instead of event model. The callback object contains methods which are get called in response of a specific events. For Example: onTweenUpdate() method, which get called when value changes. Tween object requires four parameters to construct a new Tween Object. For Example

var twn:Tween = new Tween(this,0,200,2000);

First Parameter – Is a Callback object.
Second Paramater – Is Initial value.
Third Property – Is End Value.
Fourth Parameter – Time interval to send notifications to callback.

To Create a custom TweenEffect we need to create the following classes
1) TweenEffectInstance
2) TweenEffect

let us dig into these steps;

1) Creating custom TweenEffectInstance Object:
The Custom TweenEffectInstance should
a) Class should extend TweenEffectInstance.
b) Constructor should accept a parameter of type Object.
c) Constructor should pass the parameter to super().
d) Class must at least override play() method.
e) overridden play() method should class super.play() method.
f) Overridden play() method should construct a Tween object – The
Tween object should set callback parameter as ‘this‘.
g) Class may override onTweenUpdate() method – if so, it should call super.onTweenUpdate(). At this method we can set the properties of the
object to update.
g) class may override onTweenEnd() method – if so, it should call
super.onTweenEnd().

Example : Following is ScaleEffectInstace object, which cause an effect of
scale animation on target component.

package flexScript
{
    import mx.effects.Tween;
    import mx.effects.effectClasses.TweenEffectInstance;

    //Class must Override TweenEffectInstance
    public class ScaleEffectInstance extends TweenEffectInstance
    {
        //custom parameter specification
        public var scaleTo:Number;

        //constructor must accept a parameter of type Object
        public function ScaleEffectInstance(target:Object)
        {
            // parameter should get passed to super.
            super(target);
        }

        //class should override play() method
        override public function play():void{
            //overriden play() method should call super.play()
            super.play();
            //play() method should construct Tween object
            new Tween(this, 0 , scaleTo, 2000);
        }

        //override onTweenUpate() method
        override public function onTweenUpdate(value:Object):void{
            //call super.onTweenUpdate()
            super.onTweenUpdate(value);
            //update the properties
            target.scaleX = value;
            target.scaleY = value;
        }
    }
}

2) Creating custom TweenEffect Object:
This is a factory object. While creating the any TweenEffect we work with
this Factory pattern based TweenEffect class, which is responsible for
creating the instances of TweenEffectInstance Object. The class should;
a) Class should Extend TweenEffect
b) Constructor should accept a parameter of type Object
c) Constructor should call super() and pass the Object parameter.
d) Constructor should define a TweenEffectInstance class for  instanceClass Property
e) Class should override getAffectedProperties() method
f) overridden getAffectedProperties() method should return an array of affected properties. If there is no affected properties then it should return an empty array.
g) Class should override initInstance() method accepting IEffectInstance parameter.
h) overridden initInstance() method should call super.initInstance() method and should pass IEffectInstance parameter.
i) overridden initInstance() method may set the required properties initial values if required for instanceClass.

Example: Below is the TweenEffect factory class of ScaleEffect class;

package flexScript
{
    import mx.effects.IEffectInstance;
    import mx.effects.TweenEffect;

    //class should extend TweenEffect
    public class ScaleEffect extends TweenEffect
    {
        //define scaleto parameter
        public var scaleTo:Number;

        //constructor should accept a parameter if type of Object
        public function ScaleEffect(target:Object=null)
        {
            //constructor should call super() and  pass paramater
            super(target);
            //define instanceClass
            instanceClass = ScaleEffectInstance;
        }

        // override getAffectedProperties() method
        override public function getAffectedProperties():Array{
            // return an array of affecetd properties
            return ["scaleX,scaleY"];
        }

        // override initInstance() accepting IEffectInstance paramater
        override protected function initInstance(instance:IEffectInstance):void{
            //call super.initInstance() and pass IEffectInstance paramater
            super.initInstance(instance);
            //set the initial properties of instanceClass if required
            ScaleEffectInstance(instance).scaleTo = scaleTo;
        }
    }
}

Once we had done with both TweenEffect and TweenEffectInstance objects. We can use the Effect as other TweenEffects of the framework;
Here is source code using ScaleEffect.


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
xmlns:com="*" xmlns:flexScript="flexScript.*">
<flexScript:ScaleEffect scaleTo="1" id="scaleEff" target="{btn}"/>
<mx:Panel title="Custom Effect Example"  width="250" height="125"
    paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10"
    layout="absolute">
    <mx:Button id="btn" label="Roll Over Me"
      rollOver="scaleEff.play()"
      rollOut="scaleEff.reverse()"
      horizontalCenter="0" verticalCenter="0"  />
  </mx:Panel>
</mx:Application>

Advertisements

One Comment

Leave a Comment
  1. Jesús Zazueta / Nov 14 2009 6:48 pm

    Hi. Thanks for this post!

    I noticed that the definition of these custom tween effects do not explicitly specify the duration parameter when you use them in the mxml code. To me, it seems that the duration of the effect is being specified when you construct the new Tween instance as a hard coded value of 2000.

    Is there a way to make the custom effect aware of the duration parameter which can be specified for almost any other effect? for example:

    Thanks for your time and help!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: