Blinking of primitive (lines/rect), images and text in Flex - animation

Question

We are building a visual learning program and need to display the "question content" with highlights. We were considering using blinking text, primitives and images.
We don't want to use timer, given that it leads to a load of pain when there are other timer-driven animation on screen.
Any thoughts on how to achieve this?

Answer 1

Hello :]
One way to achieve the blinking effect is to create a glow filter and then animate it's alpha property.
Then set the effect to the label you want.
If you want the whole text blinking, then just animate the alpha property of the text. Here is some
example code:
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<s:GlowFilter id="myGlowFilter"
color="#00FFAA"
blurX="5"
blurY="5"
quality="8"
/>
<s:AnimateFilter id="myGlowEffect"
bitmapFilter="{myGlowFilter}"
repeatCount="0"
repeatBehavior="reverse"
duration="1000"
>
<s:motionPaths>
<s:SimpleMotionPath property="alpha"
valueFrom="0"
valueTo="1"
/>
</s:motionPaths>
</s:AnimateFilter>
<s:Animate id="myBlinkingEffect"
repeatCount="0"
repeatBehavior="reverse"
target="{backgroundColorOfRect}"
duration="1000"
>
<s:motionPaths>
<s:SimpleMotionPath property="alpha"
valueFrom="1"
valueTo="0"
/>
</s:motionPaths>
</s:Animate>
</fx:Declarations>
<s:layout>
<s:VerticalLayout />
</s:layout>
<s:Label text="How fast can a dragonfly fly?"
creationCompleteEffect="{myGlowEffect}"
fontSize="24"
buttonMode="true"
click="myFadeEffect.play()"
/>
<s:Rect width="200" height="200">
<s:fill>
<s:SolidColor id="backgroundColorOfRect" color="red" />
</s:fill>
</s:Rect>

Answer 2

I suppose you should create a set of components with blinking ability and use them across your application. For better results you can use frame based events. For example a code for a blinking label:
package
{
import flash.events.Event;
import spark.components.Label;
[Style(name="numOfFramesPerBlink", inherit="yes", type="uint")]
public class BlinkingLabel extends Label
{
private static const DEFAULT_NUM_OF_FRAMES_PER_BLINK:Number = 10;
private var _explicitVisibility:Boolean = true;
private var blinkingDirty:Boolean;
private var currentBlinkingPhaseFrames:uint;
private var numOfFramesPerBlinkValue:uint = DEFAULT_NUM_OF_FRAMES_PER_BLINK;
override public function get visible():Boolean
{
return _explicitVisibility;
}
override public function set visible(value:Boolean):void
{
super.visible = value;
_explicitVisibility = value;
}
private var _blinking:Boolean;
[Bindable]
public function get blinking():Boolean
{
return _blinking;
}
public function set blinking(value:Boolean):void
{
if (_blinking == value)
return;
_blinking = value;
blinkingDirty = true;
invalidateProperties();
}
override public function styleChanged(styleProp:String):void
{
super.styleChanged(styleProp);
var allStyles:Boolean = styleProp == null || styleProp == "styleName";
if (allStyles || styleProp == "numOfFramesPerBlink")
{
var newNumOfFramesPerBlink:uint = getStyle("numOfFramesPerBlink");
if (newNumOfFramesPerBlink > 0)
numOfFramesPerBlinkValue = newNumOfFramesPerBlink;
else
numOfFramesPerBlinkValue = DEFAULT_NUM_OF_FRAMES_PER_BLINK
}
}
override protected function commitProperties():void
{
super.commitProperties();
if (blinkingDirty)
{
if (_blinking)
{
addEventListener(Event.ENTER_FRAME, enterFrameHandler);
currentBlinkingPhaseFrames = 0;
}
else
{
removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
setVisibleState(_explicitVisibility);
}
blinkingDirty = false;
}
}
private function setVisibleState(value:Boolean):void
{
super.visible = value;
}
private function enterFrameHandler(event:Event):void
{
currentBlinkingPhaseFrames++;
if (currentBlinkingPhaseFrames > numOfFramesPerBlinkValue)
{
setVisibleState(!super.visible);
currentBlinkingPhaseFrames = 0;
}
}
}
}
The usage is pretty simple:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*">
<s:layout>
<s:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
</s:layout>
<local:BlinkingLabel text="Test Label" id="blinkingLabel" numOfFramesPerBlink="{framesPerBlinkSlider.value}" />
<s:CheckBox label="Blink Label" selected="#{blinkingLabel.blinking}" />
<s:HSlider minimum="1" maximum="100" value="10" id="framesPerBlinkSlider" />
</s:Application>
Hope this helps!