1 Reply Latest reply on Dec 25, 2007 9:20 AM by John Hall

    More transition questions

    John Hall Level 4
      Something simple, but has me frustrated. Here's a simple little app. The panel slides to the right and what will eventually be a tree on the left panel fades in. However, I can't get it to do the reverse to go to the base state. I've tried sequences, parallel etc but not hitting it. Any help greatly appreciated:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:WindowedApplication xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" width="1024" height="768" title="Schedule Test" backgroundGradientAlphas="[1.0, 1.0]"

      backgroundGradientColors="[#605D5D,#FFFFFF]">
      <mx:Fade id="fadeOut" duration="500" alphaFrom="1.0" alphaTo="0.0"/>
      <mx:transitions>
      <mx:Transition id="goRight" fromState="*" toState="rightSide">
      <mx:Parallel id="t1">
      <!-- Define a Move and Resize effect.-->
      <mx:Move targets="{[tabbar1,panel1]}" duration="500"/>
      <mx:Resize targets="{[tabbar1,panel1]}" duration="500"/>
      <mx:Fade target="{treePanel}" alphaFrom="0" alphaTo="1" duration="500"/>
      <mx:WipeRight target="{treePanel}" duration="500" />
      </mx:Parallel>
      </mx:Transition>
      <mx:Transition id="goLeft" fromState="rightSide" toState=''>
      <mx:Parallel>
      <mx:Fade target="{treePanel}" alphaFrom="1" alphaTo="0" duration="500" />
      <mx:WipeLeft target="{treePanel}" duration="500" />
      <mx:Move targets="{[tabbar1,panel1]}" duration="500"/>
      <mx:Resize targets="{[tabbar1,panel1]}" duration="500"/>
      </mx:Parallel>
      </mx:Transition>
      </mx:transitions>
      <mx:states>
      <mx:State name="rightSide">
      <mx:SetStyle target="{panel1}" name="left" value="327"/>
      <mx:SetProperty target="{tabbar1}" name="x" value="336"/>
      <mx:AddChild position="lastChild">
      <mx:Panel id="treePanel" backgroundColor="#D7D4D4" width="294" layout="absolute" bottom="25" left="25" cornerRadius="8" top="25" hideEffect="{fadeOut}">
      </mx:Panel>
      </mx:AddChild>
      </mx:State>
      </mx:states>

      <mx:Panel layout="absolute" bottom="25" top="25" left="25" right="25" cornerRadius="8" horizontalScrollPolicy="off" verticalScrollPolicy="off" backgroundColor="#D7D4D4" id="panel1">
      <mx:ViewStack id="views" x="0" y="0" width="952" height="676">
      <mx:Canvas id="a" label="A" width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off">
      <mx:Text x="59" y="78" text="A"/>
      </mx:Canvas>
      <mx:Canvas id="b" label="B" width="100%" height="100%">
      <mx:Text x="59" y="78" text="B"/>
      </mx:Canvas>
      <mx:Canvas id="c" label="C" width="100%" height="100%">
      <mx:Text x="59" y="78" text="C"/>
      </mx:Canvas>
      <mx:Canvas id="d" label="D" width="100%" height="100%">
      <mx:Text x="59" y="78" text="D"/>
      </mx:Canvas>
      </mx:ViewStack>
      </mx:Panel>
      <mx:TabBar x="35" y="31" dataProvider="views" height="25" id="tabbar1" />

      <mx:Button x="700" y="25" label="Slide Right" click="currentState='rightSide'"/>
      <mx:Button x="623" y="25" label="Slide Left" click="currentState=''"/>
      </mx:WindowedApplication>

        • 1. Re: More transition questions
          John Hall Level 4
          Here's the latest I've tried, still with no luck. The left panel still disappears immediately. Is this really intuitive for most?

          <?xml version="1.0" encoding="utf-8"?>
          <mx:WindowedApplication xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" width="1024" height="768" title="Schedule Test" backgroundGradientAlphas="[1.0, 1.0]"

          backgroundGradientColors="[#605D5D,#FFFFFF]">
          <mx:Fade id="fadeOut" duration="500" alphaFrom="1.0" alphaTo="0.0"/>
          <mx:transitions>
          <mx:Transition id="goRight" fromState="*" toState="rightSide">
          <mx:Parallel id="t1">
          <!-- Define a Move and Resize effect.-->
          <mx:Move targets="{[tabbar1,panel1]}" duration="500"/>
          <mx:Resize targets="{[tabbar1,panel1]}" duration="500"/>
          <mx:Fade target="{treePanel}" alphaFrom="0" alphaTo="1" duration="500"/>
          <mx:WipeRight target="{treePanel}" duration="500" />
          </mx:Parallel>
          </mx:Transition>
          <mx:Transition id="goLeft" fromState="rightSide" toState=''>
          <mx:Sequence>
          <mx:Parallel>
          <mx:Fade target="{treePanel}" alphaFrom="1" alphaTo="0" duration="500" />
          <mx:WipeLeft target="{treePanel}" duration="500" />
          <mx:RemoveChildAction target="{treePanel}" />
          </mx:Parallel>
          <mx:Parallel>


          <mx:Move targets="{[tabbar1,panel1]}" duration="500"/>
          <mx:Resize targets="{[tabbar1,panel1]}" duration="500"/>
          <mx:AddChildAction targets="{[tabbar1,panel1]}" />
          </mx:Parallel>
          </mx:Sequence>
          </mx:Transition>
          </mx:transitions>
          <mx:states>
          <mx:State name="rightSide">
          <mx:SetStyle target="{panel1}" name="left" value="327"/>
          <mx:SetProperty target="{tabbar1}" name="x" value="336"/>
          <mx:AddChild position="lastChild">
          <mx:Panel id="treePanel" backgroundColor="#D7D4D4" width="294" layout="absolute" bottom="25" left="25" cornerRadius="8" top="25" hideEffect="{fadeOut}">
          </mx:Panel>
          </mx:AddChild>
          </mx:State>
          </mx:states>

          <mx:Panel layout="absolute" bottom="25" top="25" left="25" right="25" cornerRadius="8" horizontalScrollPolicy="off" verticalScrollPolicy="off" backgroundColor="#D7D4D4" id="panel1">
          <mx:ViewStack id="views" x="0" y="0" width="952" height="676">
          <mx:Canvas id="a" label="A" width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off">
          <mx:Text x="59" y="78" text="A"/>
          </mx:Canvas>
          <mx:Canvas id="b" label="B" width="100%" height="100%">
          <mx:Text x="59" y="78" text="B"/>
          </mx:Canvas>
          <mx:Canvas id="c" label="C" width="100%" height="100%">
          <mx:Text x="59" y="78" text="C"/>
          </mx:Canvas>
          <mx:Canvas id="d" label="D" width="100%" height="100%">
          <mx:Text x="59" y="78" text="D"/>
          </mx:Canvas>
          </mx:ViewStack>
          </mx:Panel>
          <mx:TabBar x="35" y="31" dataProvider="views" height="25" id="tabbar1" />

          <mx:Button x="700" y="25" label="Slide Right" click="currentState='rightSide'"/>
          <mx:Button x="623" y="25" label="Slide Left" click="currentState=''"/>
          </mx:WindowedApplication>