[flexcoders] Animate Application Background

[Dan Vega]

I am trying to do a simple animation with a flex app skin between 2
backgrounds. Why does this not work? The function changeBG does not get
called as expected. Its really weird though because every now and then it
does. I would expect it to get called every second with the following code.

<?xml version="1.0" encoding="utf-8"?>
<s:Skin
xmlns:fx="http://ns.adobe.com/mxml/2009";
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="init();">

    <fx:Metadata>
        [HostComponent("spark.components.Application")]
    </fx:Metadata>
 <fx:Script>
<![CDATA[
import mx.controls.Alert;
 public function init():void {
var timer:Timer = new Timer(1000);
timer.addEventListener(TimerEvent.TIMER_COMPLETE,changeBg);
timer.start();
}
 public function changeBg(e:TimerEvent):void {
Alert.show("Change BG");
currentState = (currentState = "normal") ? "anotherbg" : "normal";
}
 ]]>
</fx:Script>

    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
<s:State name="anotherbg"/>
    </s:states>
 <s:transitions>
<s:Transition>
<s:Fade target="{backgroundRect2}"/>
</s:Transition>
</s:transitions>

    <s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0"
includeIn="normal">
        <s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="#000000" />
<s:GradientEntry color="#999999" />
</s:LinearGradient>
        </s:fill>
    </s:Rect>
 <s:Rect id="backgroundRect2" left="0" right="0" top="0" bottom="0"
includeIn="anotherbg">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="#999999" />
<s:GradientEntry color="#000000" />
</s:LinearGradient>
</s:fill>
</s:Rect>

    <s:Group id="contentGroup" width="100%" height="100%" minWidth="0"
minHeight="0" />

</s:Skin>