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>