Flex Roll Over Image with link Component

Roll Over Image is an interactive element of HTML Pages, The element has two images for UP and OVER states and on clicking the Roll Over element navigates to specified URL. I have come across to create a same Roll Over element in flex.

I have created a component to achive this. The component extends the Canvas, and has a properties like;

• UpImage – Used to specify the embedded image for UP state of the component.
• OverImage –  Used to specify the embedded image for OVER state of the component.
• ImageLink – Used to specify the URL to open when user clicks on the component.

The component works on the base of States. The base state display a UP image and overState display OVER  image, so that component handle the two images, one at Mouse UP and another at Mouse OVER. The component opens the link specified when user clicks on the component. The component uses Fade Transition while changing the UP and OVER states of component, which gives a smooth animation effect to the component.
Here is the Usage sample:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" xmlns:com="com.*">
<com:RollOver UpImage="@Embed(source='assets/UpImage.png')"
OverImage="@Embed(source='assets/OverImage.png')"
ImageLink="http://www.google.com"/>
</mx:Application>

And here is the component source code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
 creationComplete="init()" creationPolicy="all" >
 <mx:Script>
    <!&#91;CDATA&#91;
    public var UpImage:Class;
    public var OverImage:Class;
    public var ImageLink:String;
    private function init():void{
        up.source = UpImage;
        addEventListener(MouseEvent.ROLL_OVER, mouseOver);
        addEventListener(MouseEvent.ROLL_OUT, mouseOut);
        addEventListener(MouseEvent.CLICK, mouseClick);
    }
    private function mouseOver(e:MouseEvent):void{
        currentState = 'overState';
    }
    private function mouseOut(e:MouseEvent):void{
        currentState = '';
    }
    private function mouseClick(e:MouseEvent):void{
        navigateToURL(new URLRequest(ImageLink),"_blank");   
    }
    &#93;&#93;>
    </mx:Script>
    <mx:states>
        <mx:State name="overState">
        <mx:RemoveChild target="{up}"/>
        <mx:AddChild relativeTo="{this}">
        <mx:Image source="{OverImage}" id="over"/>
        </mx:AddChild>
        </mx:State>
    </mx:states>
    <mx:transitions>
        <mx:Transition fromState="*" toState="overState">
        <mx:Fade duration="800" alphaFrom="0" alphaTo="1" target="{over}"/>
        </mx:Transition>
        <mx:Transition fromState="overState" toState="*">
        <mx:Fade duration="500" alphaFrom="0" alphaTo="1" target="{up}"/>
        </mx:Transition>
    </mx:transitions>
        <mx:Image id="up"/>   
</mx:Canvas>