2 Replies Latest reply on Jul 5, 2010 12:35 PM by jerry98225

    Animation question...

    jerry98225

      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)"/>

        • 1. Re: Animation question...
          David_F57 Level 5

          hi,

           

          you could try something like this, obviously setting the properties you want to use

           

          David.

           

          <?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" creationComplete="application1_creationCompleteHandler(event)">

          <fx:Script>

          <![CDATA[

          import mx.collections.XMLListCollection;

          import mx.events.FlexEvent;

          import mx.rpc.events.FaultEvent;

          import mx.rpc.events.ResultEvent;

           

          [Bindable] private var empArr:XMLListCollection = new XMLListCollection();

           

          protected function getdata_faultHandler(event:FaultEvent):void

          {

          // TODO Auto-generated method stub

          }

           

           

          protected function getdata_resultHandler(event:ResultEvent):void

          {

          EmpXMLCollection.source = event.result.children();

          fader.play();

          }

           

           

          protected function application1_creationCompleteHandler(event:FlexEvent):void

          {

          getData.send();

          }

           

          ]]>

          </fx:Script>

          <fx:Declarations>

          <s:Parallel id="fader" target="{lst}" duration="3000">

          <s:Animate>

          <s:SimpleMotionPath property="alpha" valueTo="1.0"/>

          <s:SimpleMotionPath property="width" valueTo="300"/>

          <s:SimpleMotionPath property="height" valueTo="500"/>

          </s:Animate>

          </s:Parallel>

          <s:HTTPService id="getData" url="info.xml" resultFormat="e4x" fault="getdata_faultHandler(event)" result="getdata_resultHandler(event)"/>

          </fx:Declarations>

          <s:List id="lst" width="10" height="10" labelField="name" alpha="0" verticalCenter="0" horizontalCenter="0">

          <s:dataProvider>

          <mx:XMLListCollection id="EmpXMLCollection"/>

          </s:dataProvider>

          </s:List>

          </s:Application>

          • 2. Re: Animation question...
            jerry98225 Level 1

            thanks David...SimpleMotionpath is a good solution...:D