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:

BlinkImage.as

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Image xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; creationComplete=”init()”>

<mx:Script>
<![CDATA[

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);
fadeTimer.start();
}

public function startBlink():void
{
activeplay.end();
activeplay.play();
}

private function timerFunction(event:TimerEvent):void
{
startBlink();
count++;
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);
relayTime.addEventListener(TimerEvent.TIMER_COMPLETE,restartFadeTimer);
}

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

private function restartFadeTimer(event:TimerEvent):void
{
fadeTimer.stop();
fadeTimer.start();
}

public function get relay():Number
{
return _relay;
}

public function set relay(value:Number):void
{
_relay = value;
}
]]>
</mx:Script>

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

<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″/>
</mx:Parallel>

</mx:Image>

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.

Advertisements

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