Flex animation question.

Question

Hi guys. I am trying to do a simple animation. I want to fade in and resize a List inside creationcomplete. My problem is that I can alway see the element flash in before the element animation begin. On the other word, the user will see the element appear for 1 second->then fade in and resize animation. I was hoping anyone here could help me about it. thanks...

my code.

AS:

protected function compList_creationCompleteHandler(event:FlexEvent):void
{

     compinfoResult.token = getCompList.compinfo();
     compinfoResult.addEventListener(ResultEvent.RESULT, completeLoading);

     function completeLoading(event:ResultEvent):void{

     fadeList.play();   //the animation will fire when the List get the result from the server...
     scaleList.play();

}
}

mxml


    <s:Scale id="scaleList" scaleXFrom="0" scaleXTo="1" scaleYFrom="0"
    scaleYTo="1" duration="500" target="{compList}" />
    <s:Fade id="fadeList" alphaFrom="0" alphaTo="1" target="{compList}" />


    <s:List id="compList"
    width="280"
    height="560"
    x="0"
    y="0"
    alpha="0"
    creationComplete="compList_creationCompleteHandler(event)"
    itemRenderer="itemRenderer.compListItemRenderer"
    change="compList_changeHandler(event)"/>

Answer 1

First off, I would combine these into a single transition, either in parallel or in sequence at your preference:

<s:Sequence id="effectSequence">
  <s:Scale id="scaleList" scaleXFrom="0" scaleXTo="1" scaleYFrom="0"
scaleYTo="1" duration="500" target="{compList}" />
  <s:Fade id="fadeList" alphaFrom="0" alphaTo="1" target="{compList}" />
</s:Sequence>

Then, I would not try to trigger this manually with an event. Use an effect instead, in this case I'd recommend the creationCompleteEffect.

 <s:List id="compList"
    width="280"
    height="560"
    x="0"
    y="0"
    alpha="0"
    creationComplete="compList_creationCompleteHandler(event)"
    itemRenderer="itemRenderer.compListItemRenderer"
    change="compList_changeHandler(event)"
    creationCompleteEffect="{effectSequence}"`/>