Skip to content
September 16, 2008 / Shrikant Patil

Flex : Creating Custom Effects in Flex

There are many build-in effect shipped with flex framework. However, a
custom application may need to create a custom effect. For such situations, Flex framework allows us to create our own custom effects.
To create a custom effect, we need to work with two basic types of classes:
factory‘ and ‘Instance‘. When we create an effect object either by using  actionscript or MXML, we are directly working with ‘factory‘ class. when this effect object is assigned to a component then, the actual class utilized is an ‘effect Instance‘. The ‘Factory‘ class is responsible for creating the ‘effect Instance’ instances, which applied to the target component.
To create a custom effect, we need to extend two classes:
1) EffectInstance Class
2) Effect class
Let us look into deep of above both implementations.

1) Extending EffectInstance Class:
The instance of this class is automatically get created by the ‘ Effect‘ class. For example, when we create a ‘resize‘ effect, the actual effect object theat is applied to a component is ‘ResizeInstance‘.

The extending EffectInstance class should include the following;
a) EffectInstance class should extend mx.effects.EffectInstance.
b) It should override at least play() method.
c) overridden play() method should class super.play().
d) Constructor should accept one parameter typed as ‘Object‘& should
pass the parameter to super().

The object which passed to the constructor is ‘target‘ component and is passed to factory class automatically.

Ex: The following is an example of AlphaEffectInstance class;

package flexScript
{
    import mx.effects.EffectInstance;

    //class must extended EffectInstance
    public class AlphaEffectInstance extends EffectInstance
    {   
        //define custom paramater
        public var alphaTo:Number; 

        // The constructor must accept a parameter
        public function AlphaEffectInstance(target:Object)
        {
            //call super() and pass the parameter to it
            super(target);
        }

        //All EffectInstance must override play() method
        //and set the target's property
        override public function play():void{
            //call super.play()
            super.play();
            target.alpha = alphaTo;
        }

        //override reverse() method if required
        override public function reverse():void{
            target.alpha = .1;
        }

    }
}

2) Extending Effect Class : Creating custom Factory Effect class:
Every effect factory class should extend the mx.effects.Effect class.The
class should;
a) override getAffectedProperties() mehtod – This method should return an array containing name of the all properties affected. If the effect does not affect any property then this method shoud empty aray.
b) Override initInstance() method – This method should accept one
parameter of type IEffectInstance and should call super.initInstance(), after that it should set the required properties of instance if neccssary.

The ‘Effect’ class has a property called instanceClass which determines which class is used by factory to create instances. we can set the  instanceClass property in constructor of the class.

Ex: The following class is example  of AlphaEffect class is Factory object
of the above AlphaEffectInstace class;

package flexScript
{
    import mx.effects.Effect;
    import mx.effects.IEffectInstance;
    import mx.effects.effectClasses.ResizeInstance;

    // Every factory class must extend the Effect class.
    public class AlphaEffect extends Effect
    {
        //define alphaTo parameter
        public var alphaTo:Number;

        // The constructor must accept a parameter
        public function AlphaEffect(target:Object=null)
        {
            //call the super of constructor, pass object to it
            super(target);
            // assign the instance class reference
            //to instanceClass.
            instanceClass = AlphaEffectInstance;
        }
        // override getAffectedProperties() and
        // return the properties effected as array
        override public function getAffectedProperties():Array{
            return ["alpha"];
        }

        // override initInstance()
        override protected function initInstance(instance:IEffectInstance):void{
            //call super.initInstance & pass IEffectInstance parameter
            super.initInstance(instance);
            //set neccssary properties of instance class
            AlphaEffectInstance(instance).alphaTo = alphaTo;
        }

    }
}

Once we have done with the custom effect, we can use it as other built-in
flex effects. Here is the code how to use the above AlphaEffect using MXML;

<?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:AlphaEffect alphaTo="1" id="alphaEff" 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="alphaEff.play()"  
       rollOut="alphaEff.reverse()"  
       horizontalCenter="0" verticalCenter="0"/>  
</mx: Panel>    
</mx:Application>
Advertisements

7 Comments

Leave a Comment
  1. Kapil Dev S / Nov 13 2008 7:31 am

    If you provide a link to preview a sample, it will be helpful. Any way nice tutorials from nice guys.

  2. Sjaak / Feb 3 2009 9:38 am

    The MXML is full of errors.

  3. Sjaak / Feb 3 2009 9:43 am
  4. Shrikant Patil / Feb 4 2009 4:33 pm

    Hi, Sjaak…
    Thanks for pointing the fault;
    actually the problem is when wordpress looks the charecter like “: P” it converts that to a smiley by placing that smiley image path at that place;
    in the tags like <mx: Panel……; where “: P” comes it replaced it with the <img tag to put that smiley.

    Now i have given a space, so that it show properly.
    Kindly remove that space for <mx: Panel… tag and use it in you code…

  5. Ravichandran J / Sep 3 2009 6:03 am

    hey Srikath,

    nice to see your blog.. 🙂 Is it possible to use flash animation for custom effects? Could pls explain about this in ur next post?

    Thanks,
    Ravi

    • Shrikant Patil / Sep 4 2009 6:20 am

      Hi Ravi nice to hear from you.
      what kind of animations of flash you want to use in custom effect? you can achieve this by coding the your animation script into custom effect class. I think that can do what you want.
      If above is not the answer for you question, can you please tell me what kind of flash animation you are talking about?.. you mean to you want to use a animated SWF file in custom effect? or something else..please explain

Trackbacks

  1. Creating custom effects in flex « Rich Internet Applications

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: