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

An ImageButton with border on mouseover

I thought I should share this with you. I was working on a project where I needed to set focus on an image which is a button. So I decided to create a border around it when it is moused over and remove it when the mouse is out.

Here is the code. I hope it helps someone. Note that it is developed in Actionscript, you can use any langauge once you get the simple logic.

/**
* This class draws a border around an image when the mouse roll over event occurs,
* and removes the border on a mouse roll out event
*
* Developed By Oluwaseun Ladeinde.
*/
package mycustoms
{
import flash.events.Event;
import flash.events.MouseEvent;

import mx.controls.Image;

//add sytyle meta tags to the class. This enables a control of these properties from the css file
[Style(name=”borderColor”, type=”uint”, format=”Color”, inherit=”no”)]
[Style(name=”borderThickness”, type=”Number”, format=”Length”, inherit=”no”)]
[Style(name=”borderAlpha”, type=”Number”, format=”Length”, inherit=”no”)]

public class BorderedImage extends Image
{
public function BorderedImage()
{
super();

//add event listeners to the roll over and roll out events
this.addEventListener(MouseEvent.MOUSE_OVER, drawBorder);
this.addEventListener(MouseEvent.MOUSE_OUT, clearBorder);
}

// Handler the mouse roll over event
private function drawBorder(event:Event):void
{
// get the border artifacts and set to false
graphics.lineStyle(getStyle(‘borderThickness’), getStyle(‘borderColor’), getStyle(‘borderAlpha’),false);

// then redraw the border
graphics.drawRect( -(getStyle(‘borderThickness’)/2), -(getStyle(‘borderThickness’)/2),
contentWidth+getStyle(‘borderThickness’), contentHeight+getStyle(‘borderThickness’));
}

// Handler the mouse roll out event
public function clearBorder(event:Event):void
{
//simply clear the graphics
graphics.clear();
}

public function enable(_enabled:Boolean):void
{
if(_enabled == false)
{
this.enabled = _enabled;
this.buttonMode = _enabled;
this.useHandCursor = _enabled;
this.removeEventListener(MouseEvent.MOUSE_OVER, drawBorder);
}
else
{
this.enabled = _enabled;
this.buttonMode = _enabled;
this.useHandCursor = _enabled;
this.addEventListener(MouseEvent.MOUSE_OVER, drawBorder);
}
}
}
}

*********************************

I hope it helps you somewhere in your flex project.

Debug JavaScript in Adobe AIR apps

I read online recently that using Aptana Studio 1.2.1, you could use JavaScript to create desktop installed HTML and Ajax apps. Its not news anyway that Adobe AIR lets you use JavaScript to create desktop installed HTML and Ajax apps.

With the new era of JavaScript today, you cannot talk about web 2.0, RIA, Ajax etc without Javascript taking center stage. Take a good look at Dojo (http://www.dojotoolkit.org). It suffices to say that having a great JavaScript debugging tool cannot be overlooked like was done in the past.

One beautiful shocker is that it is free. Visit http://www.aptana.com/studio/download.

I hope this helps someone has it has been of immense relief to my team.