Blinking Image in Flex

I posted a blog Blinking Label some days ago so I decided to make it a little more interesting. I figured if you could do it for a Label, you could also do it for an Image.

I wanted to create an alert/warning utility either as an image or a label that blinks to catch the user’s attention so I decided to come up with the blinking image.

Code after the jump:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Image xmlns:mx=”; creationComplete=”init()”>


import mx.effects.Parallel;
import mx.effects.Fade;

private var fadeTimer:Timer = new Timer(700);
private var count:int = 0;
private var _relay:Number;

private function init():void
fadeTimer.addEventListener(TimerEvent.TIMER, timerFunction);
fadeTimer.addEventListener(TimerEvent.TIMER_COMPLETE, relayRelapse);

public function startBlink():void

private function timerFunction(event:TimerEvent):void
trace(“ok count is ” + count + ” for capturing…”);

private function relayRelapse(event:TimerEvent):void
trace(“ok reached completion”);
var relayTime:Timer = new Timer(relay, 1);
relayTime.addEventListener(TimerEvent.TIMER, notreprocess);

private function notreprocess(event:TimerEvent):void
trace(“ok reading something….relay”);

private function restartFadeTimer(event:TimerEvent):void

public function get relay():Number
return _relay;

public function set relay(value:Number):void
_relay = value;

<mx:BlurFilter blurX=”0″ blurY=”0″/>

<mx:Parallel id=”activeplay”>
<mx:Fade id=”fadeIn” alphaFrom=”0.0″ alphaTo=”1.0″ target=”{this}” duration=”250″/>
<mx:Fade id=”fadeOut” alphaFrom=”1.0″ alphaTo=”0.0″ target=”{this}” duration=”250″/>


Now for its usage, all you have to do is add it to your application like any flex component. You would need to specify the image source, so I would use an image source with the assumption that you have your images in your source directory like this assets/images/blink.png. Note that any image png, gif, jpg would do the job. Though with some slight variations.

<widgets:BlinkingImage  id=”blinkeer” source=”assets/images/blink.png” relay=”5000″/>

So I hope this helps somebody. Just note that I have not tested the memory usage of the component and I would like anyone who could help me with that  to send me his/her findings to this blog. I hardly have time for doing this test these days as my hands are full.


Leave a Reply

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

You are commenting using your 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