Flex 4 - Jerky animation issue

Question

I have created my first animation effect in flex 4. Its a very simple animation within my custom component which moves a label component left to right to left 3-5 times and then fades out gradually.

Every thing works fine but the problem is that when I run the animation first time, it plays jerky animation and perfect smoother after wards. I dont know why.

Can some one tell whats wrong with this?

This is the full source code of my custom component. After adding it to the stage, calling the showProgressEffect() will play the animation.

Notice that I have made the label "cacheAsBitmap" to avoid flickers while moving the label and call to stop() before play() methods of each of the animations/effects.

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" width="274" height="72"
         click="onClick()" xmlns:components="ui.hud.components.*" cacheAsBitmap="true">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
        <s:Sequence id="tween" repeatCount="5" effectEnd="onEffectEnd()" >
            <s:Move xBy="20" duration="500" />
            <s:Move xBy="-20" duration="500" xFrom="50"/>
        </s:Sequence>
        <s:Fade id="fadeEffect" alphaTo="0" duration="2000" />
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            [Bindable]
            public var questId:int;
            [Bindable]
            public var questTitle:String;
            [Bindable]
            public var iconUrl:String;

            private function onClick():void{

                Globals.questCtr.showQuest(questId);

            }
            private function onEffectEnd():void{

                fadeEffect.stop();
                fadeEffect.play([lblStatus]);
            }

            public function showProgressEffect():void{

                tween.stop();
                lblStatus.alpha = 1;
                tween.play([lblStatus]);
            }

        ]]>
    </fx:Script>

    <mx:Image source="{iconUrl}" width="75" height="75"/>
    <s:Group x="77" y="24" width="197">
        <s:Label id="lblStatus" text="Task Complete" fontWeight="bold" fontSize="25" alpha="0" cacheAsBitmap="true" hideEffect="" mouseEnabled="false"/>        
    </s:Group>

</s:Group>

Answer 1

This happens because before animation start your label is in different position, than after it. I don't know what exactly you trying to achieve, but there are two choices:

• You can change xFrom="50" to xFrom="20"in second move effect;
• You can change lblStatus x coordinate to 30;