2 Replies Latest reply on Jun 18, 2010 5:54 AM by jerry98225

    Animation question

    jerry98225

      Hello..

         I am trying to do the move vertically animation on a button nested in the vertical layout. I am not sure if the Hgroup restricts the button moving vertically. Are there ways to go around it? Thanks for the helps.

       

       

       

      <s:states>

      <s:State name="default"/>

      <s:State name="addRecommend"/>

      <s:State name="seeOther"/>

      </s:states>

       

       

      AS:

       

      protected function add_clickHandler(event:MouseEvent):void

      {

       

      currentState="addRecommend";

      addRecommendMove.play();

      }

       

       

       

       

       

      <s:transitions>

      <s:Transition fromState="default" toState="addRecommend">

      <s:Sequence id="addRecommendMove">

       

      <s:Move yTo="50" target="{add}"/>  // add button doesn't move at all

       

      </s:Sequence>

       

      </s:Transition>

      <s:Transition fromState="addRecommend" toState="seeOther">

      <s:Sequence>

      <s:Move yBy="50" target="{seeOthers}"/>

      </s:Sequence>

      </s:Transition>

      </s:transitions>

       

       

       

       

      <s:layout>

      <s:VerticalLayout paddingTop="15" paddingRight="10" paddingLeft="7"/>

      </s:layout>

       

       

      <button id="add" click=add_clickHandler(event)/>

      <button id="seeOthers"/>

        • 1. Re: Animation question
          David_F57 Level 5

          hi,

           

          With state transitions you don't 'play' them all that work is done for you, when moving things around you can run into issues if you have layout constraints unless you put a lot of thought into the transtion from 1 state to another. The code below is a very basic example of how to use the state transitions. Also have a look at this tutorial by Chet Haase, Adobe's effects/transitions guru.

           

           

           

          <?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">

          <s:states>

          <s:State name="normal"/>

          <s:State name="seeOther"/>

          </s:states>

           

          <s:transitions>

          <s:Transition toState="normal">

          <s:Sequence>

          <s:Fade target="{seeOthers}" duration="250"/>

          <s:AddAction target="{add}"/>

          <s:Fade target="{add}"/>

          </s:Sequence>

          </s:Transition>

          <s:Transition toState="seeOther">

          <s:Sequence>

          <s:Fade target="{add}" duration="250"/>

          <s:AddAction target="{seeOthers}"/>

          <s:Fade target="{seeOthers}"/>

          </s:Sequence>

          </s:Transition>

          </s:transitions>

          <fx:Declarations>

          </fx:Declarations>

          <fx:Script>

          <![CDATA[

           

           

          protected function add_clickHandler(event:MouseEvent):void

          {

          currentState="seeOther";

          }

           

           

          protected function seeOthers_clickHandler(event:MouseEvent):void

          {

          currentState="normal";

          }

           

          ]]>

          </fx:Script>

           

          <s:layout>

          <s:VerticalLayout paddingTop="15" paddingRight="10" paddingLeft="7"/>

          </s:layout>

           

           

          <s:Button id="add" label="add" click="add_clickHandler(event)" includeIn="normal"/>

          <s:Button id="seeOthers" label="remove" click="seeOthers_clickHandler(event)" includeIn="seeOther"/>

          </s:Application>

          • 2. Re: Animation question
            jerry98225 Level 1

            Thank you for the help David.