Search

Custom Search
22
Apr
09

Creating a Number Change Effect in Flex

 

It’s tax season here in the US until April 15th.  I decided to get an early start.  I opened up TurboTax(tax software).  After entering some numbers, you will notice the little “Federal Refund” ticker at the top that keeps a running total of the money you will get, or owe, based on all the numbers entered.  The refund ticker also has a cool animation on it when it goes up or down.  I quickly got bored of doing my taxes and instead decided to write the little number changer component in Flex.

 

<?xml version=”1.0? encoding=”utf-8??>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical”>
<mx:Script>
<![CDATA[
[Bindable] private var currentNumber:int = 0;
private var difference:Number;
private function buttonClick():void


{
difference = numberInput.value – currentNumber;
timer.addEventListener(TimerEvent.TIMER, timerExecute);
doTimer();
}
private var timer:Timer = new Timer(1,0);

private function doTimer():void
{

if(currentNumber<numberInput.value && difference >0)
{
if(numberInput.value-currentNumber < difference/350)
{
currentNumber = numberInput.value;
}
else
{
currentNumber+=difference/350;
timer.start();
greenGlow.play();
}
}
else if(currentNumber>numberInput.value && difference <0)
{
if(currentNumber – numberInput.value < difference/-350)
{
currentNumber = numberInput.value;
}
else
{
currentNumber-=difference/-350;
timer.start();
redGlow.play();
}
}
else
{
timer.stop();
greenGlow.stop();
redGlow.stop();
}
setColor();
}
private function setColor():void
{
var newColor:String = currentNumber>=0?’green’:’red’;
if(currentNumber==0)
newColor = ‘black’;
numberLabel.setStyle(’color’, newColor);
}
private function timerExecute(event:TimerEvent):void
{
doTimer();
}
]]>
</mx:Script>
<mx:CurrencyFormatter id=”currencyFormatter” precision=”2? useThousandsSeparator=”true”/>
<mx:Box id=”box” borderThickness=”1? borderStyle=”solid” backgroundColor=”#FFFFFF” borderColor=”#000000? dropShadowEnabled=”true” width=”200? horizontalAlign=”right”>
<mx:Label id=”numberLabel” text=”{currencyFormatter.format(currentNumber)}” fontWeight=”bold” fontSize=”22? creationComplete=”setColor()” fontFamily=”Courier New”/>
</mx:Box>
<mx:Glow color=”red” id=”redGlow” target=”{box}” duration=”1000?/>
<mx:Glow color=”green” id=”greenGlow” target=”{box}” duration=”1000?/>
<mx:Spacer height=”100?/>
<mx:NumericStepper maximum=”10000000? id=”numberInput” value=”20000? minimum=”-1000000? stepSize=”1000?/>
<mx:Button click=”buttonClick()” label=”Render”/>
</mx:Application>

 

Another Great story?

Most Commented Posts

Get Adobe Flash playerPlugin by wpburn.com wordpress themes