Skip to content
August 14, 2008 / Shrikant Patil

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>

Advertisements

2 Comments

Leave a Comment
  1. Stephane / Jan 7 2009 8:56 am

    It’s a good component, but I have seen that if you use multiple instances of if in an application and if you move the mouse fast enough, the rollout event is sometimes missed which leave the image in the over state. Does any one know anything to correct this ?

  2. Denis Beurive / Apr 15 2010 6:14 am

    Thank you for this nice work !

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: