9 Replies Latest reply on Aug 29, 2007 8:12 AM by JoshBeall

    Fade out/fade in transition

    JoshBeall Level 1
      Hi All,

      I'm a newcomer to Flex, and I'm trying to figure out how to do a smooth fade out/in transition from one view state to the other. I've read the docs on transitions, and I copied their MXML and changed the transition effect to Dissolve (MXML at end of post).

      What I'm getting is a transition where the containers immediately go blank, and then the new viewstate fades in. What I would like to happen is for the old viewstate to fade out as the new viewstate is fading in. Is there a way to do this?

      I'd like to do a similar thing the with WipeDown effect -- I'd like the new View State to "unroll" over top of the existing view state. Instead what happens when I use the WipeDown effect is, the containers become blank, and then the WipeDown effect plays, revealing the new View State. I don't want things to go blank, I just want the new View State to paint on top of the existing View State, top to bottom. To the user, it will look as if a new set of controls are being set on top of the existing controls. By subsequently using the WipeUp transition, you give the appearance of the "top" controls being "picked up", revealing the underlying controls.



      <?xml version="1.0" ?>
      <!-- transitions/DefiningTrans.mxml -->
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" width="400" >

      <!-- Define the two view states, in addition to the base state.-->
      <mx:states>
      <mx:State name="One">
      <mx:SetProperty target="{p1}" name="x" value="110"/>
      <mx:SetProperty target="{p1}" name="y" value="0"/>
      <mx:SetProperty target="{p1}" name="width" value="200"/>
      <mx:SetProperty target="{p1}" name="height" value="210"/>
      <mx:SetProperty target="{p2}" name="x" value="0"/>
      <mx:SetProperty target="{p2}" name="y" value="0"/>
      <mx:SetProperty target="{p2}" name="width" value="100"/>
      <mx:SetProperty target="{p2}" name="height" value="100"/>
      <mx:SetProperty target="{p3}" name="x" value="0"/>
      <mx:SetProperty target="{p3}" name="y" value="110"/>
      <mx:SetProperty target="{p3}" name="width" value="100"/>
      <mx:SetProperty target="{p3}" name="height" value="100"/>
      </mx:State>
      <mx:State name="Two">
      <mx:SetProperty target="{p2}" name="x" value="110"/>
      <mx:SetProperty target="{p2}" name="y" value="0"/>
      <mx:SetProperty target="{p2}" name="width" value="200"/>
      <mx:SetProperty target="{p2}" name="height" value="210"/>
      <mx:SetProperty target="{p3}" name="x" value="0"/>
      <mx:SetProperty target="{p3}" name="y" value="110"/>
      <mx:SetProperty target="{p3}" name="width" value="100"/>
      <mx:SetProperty target="{p3}" name="height" value="100"/>
      </mx:State>
      </mx:states>

      <!-- Define Transition array with one Transition object.-->
      <mx:transitions>
      <!-- Define a transition for changing from any state to any state.
      -->
      <mx:Transition id="myTransition" fromState="*" toState="*">
      <!-- Define a Parallel effect as the top-level effect.-->
      <mx:Parallel id="t1" targets="{[p1,p2,p3]}">
      <!-- Define a Move and Resize effect.-->
      <mx:Dissolve alphaFrom="0.0" alphaTo="1.0" duration="2000"/>
      </mx:Parallel>
      </mx:Transition>
      </mx:transitions>

      <!-- Define the Canvas container holdig the three Panel containers.-->
      <mx:Canvas id="pm" width="100%" height="100%" >
      <mx:Panel id="p1" title="One"
      x="0" y="0" width="100" height="100"
      click="currentState='One'" >
      <mx:Label fontSize="24" text="One"/>
      </mx:Panel>

      <mx:Panel id="p2" title="Two"
      x="0" y="110" width="100" height="100"
      click="currentState='Two'" >
      <mx:Label fontSize="24" text="Two"/>
      </mx:Panel>

      <mx:Panel id="p3" title="Three"
      x="110" y="0" width="200" height="210"
      click="currentState=''" >
      <mx:Label fontSize="24" text="Three"/>
      </mx:Panel>
      </mx:Canvas>
      </mx:Application>
        • 1. Fade out/fade in transition
          JoshBeall Level 1
          Here's the compiled app, so you can see what I mean:

          http://www.joshbeall.com/personal/flex/TransitionSandbox.html
          • 2. Re: Fade out/fade in transition
            JoshBeall Level 1
            Any suggestions? I've continued to play around with this, and haven't gotten it to work...
            • 3. Re: Fade out/fade in transition
              scrattis
              quote:

              Originally posted by: JoshBeall

              <!-- Define Transition array with one Transition object.-->
              <mx:transitions>
              <!-- Define a transition for changing from any state to any state.
              -->
              <mx:Transition id="myTransition" fromState="*" toState="*">
              <!-- Define a Parallel effect as the top-level effect.-->
              <mx:Parallel id="t1" targets="{[p1,p2,p3]}">
              <!-- Define a Move and Resize effect.-->
              <mx:Dissolve alphaFrom="0.0" alphaTo="1.0" duration="2000"/>
              </mx:Parallel>
              </mx:Transition>
              </mx:transitions>



              Hi!

              I think you should change that Parallel to Sequence (or something like that, at least you need the sequenze part somewhere). And threre put a transition where you go from alpha 1.0 to 0.0 before going 0.0 to 1.0.
              • 4. Re: Fade out/fade in transition
                JoshBeall Level 1
                quote:

                Originally posted by: scrattis
                quote:

                Originally posted by: JoshBeall

                <!-- Define Transition array with one Transition object.-->
                <mx:transitions>
                <!-- Define a transition for changing from any state to any state.
                -->
                <mx:Transition id="myTransition" fromState="*" toState="*">
                <!-- Define a Parallel effect as the top-level effect.-->
                <mx:Parallel id="t1" targets="{[p1,p2,p3]}">
                <!-- Define a Move and Resize effect.-->
                <mx:Dissolve alphaFrom="0.0" alphaTo="1.0" duration="2000"/>
                </mx:Parallel>
                </mx:Transition>
                </mx:transitions>



                Hi!

                I think you should change that Parallel to Sequence (or something like that, at least you need the sequenze part somewhere). And threre put a transition where you go from alpha 1.0 to 0.0 before going 0.0 to 1.0.



                I tried this:

                <mx:transitions>
                <mx:Transition id="myTransition" fromState="*" toState="*">
                <mx:Sequence id="t1" targets="{[p1,p2,p3]}">
                <mx:Dissolve alphaFrom="1.0" alphaTo="0.0" duration="1000"/>
                <mx:Dissolve alphaFrom="0.0" alphaTo="1.0" duration="1000"/>
                </mx:Sequence>
                </mx:Transition>
                </mx:transitions>

                And what happens is, the state *instantly* changes to the new state (the objects move), then they fade out, then they fade in.

                That's not what I would like. I would like the objects to fade out, while the new objects fade in. Is this not possible?
                • 5. Re: Fade out/fade in transition
                  Karl_Sigiscar_1971 Level 3

                  Look up <mx:ViewStack> in the documentation.

                  I would use a View Stack and programmatically define what the current view is.

                  You can change the current view this way:
                  myViewStack.selectedChild=search

                  Here is what it would look like:

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">

                  <mx:Fade id="fadeOut" targets="{[search, custInfo, accountInfo]}"
                  duration="500" alphaFrom="1.0" alphaTo="0.0"/>
                  <mx:Fade id="fadeIn" targets="{[search, custInfo, accountInfo]}"
                  duration="500" alphaFrom="0.0" alphaTo="1.0"/>

                  <mx:ApplicationControlBar>
                  <mx:Button click="myViewStack.selectedChild=search"/>
                  <mx:Button click="myViewStack.selectedChild=custInfo"/>
                  <mx:Button click="myViewStack.selectedChild=accountInfo"/>
                  </mx:ApplicationControlBar>

                  <mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" y="100">

                  <mx:Canvas id="search" label="Search" width="300" height="200"
                  backgroundColor="white" showEffect="{fadeIn}" hideEffect="{fadeOut}">
                  <mx:Label text="Search Screen"/>
                  </mx:Canvas>

                  <mx:Canvas id="custInfo" label="Customer Info" width="300" height="200"
                  backgroundColor="white" showEffect="{fadeIn}" hideEffect="{fadeOut}">
                  <mx:Label text="Customer Info"/>
                  </mx:Canvas>

                  <mx:Canvas id="accountInfo" label="Account Info" width="300" height="200"
                  backgroundColor="white" showEffect="{fadeIn}" hideEffect="{fadeOut}">
                  <mx:Label text="Account Info"/>
                  </mx:Canvas>

                  </mx:ViewStack>

                  </mx:Application>
                  • 6. Re: Fade out/fade in transition
                    JoshBeall Level 1
                    I think the ViewStack is the right direction, but one thing I noticed is that while the background fades out and then in, any controls that are actually on that page are completely opaque (no fade, they just disappear/appear).

                    http://www.joshbeall.com/personal/flex/TransitionSandbox2.swf

                    So how do I get the child controls to respond to the transitions?
                    • 7. Re: Fade out/fade in transition
                      JoshBeall Level 1
                      Ok, I changed the mx:Fade effects to mx:Dissolve effects, and now it seems to work, *however* after you've clicked from one state to another a few times, you will see the controls pop in immediately (just for a split second), then the fade will take place.

                      http://www.joshbeall.com/personal/flex/TransitionSandbox3.swf

                      I've made the effects last for 2 seconds (2 seconds fade out, 2 seconds fade in), so you can clearly see what I mean.

                      Click all three top buttons at least once (pausing each time for the effects to play), then go back and do it again. You'll see what I mean.
                      • 8. Re: Fade out/fade in transition
                        Karl_Sigiscar_1971 Level 3

                        Why not using the WipeUp and WipeDown effects for hide/show respectively, just as in the Flex Store version 2 ? This will hide what happens behind the scene when the view is switched between the two transitions.
                        • 9. Fade out/fade in transition
                          JoshBeall Level 1
                          quote:

                          Originally posted by: Karl_Sigiscar_1971
                          Why not using the WipeUp and WipeDown effects for hide/show respectively, just as in the Flex Store version 2?
                          Well, because I think that dissolving from one view to the next is a nicer effect :-)

                          Another thing I'd like to see is the new view wiping down on top off the existing view. This could be useful in giving the appearance of a detail view being laid on top of a list view, and then when you're done with the detail view, it's "picked up" and the list view is in focus again.