7 Replies Latest reply on Jun 19, 2008 7:20 AM by ChiefRocka00

    Simultaneous fade out and fade in and image

    ChiefRocka00
      I currently have code that fades out on canvas of a view stack and fades in a second canvas of the view stack. However, my desired behavior is that the fade out happens as the fade in happens so it would simulate a tween effect like when making animated gif's. Is there a way to do this, and if so does anyone have any sample code to do this?
        • 1. Simultaneous fade out and fade in and image
          slaingod Level 1
          If you have the showEffect and hideEffect set to fade in and fade out mx:Fade components, then this should happen automatically. The one caveat is you may need to also set the alpha of your fade in component to zero before running fade in, or you will see it blink into place, then fade in.
          • 2. Re: Simultaneous fade out and fade in and image
            ChiefRocka00 Level 1
            this does work, however the first image has to fade out before the next one fades in. Is there any way to have the second image fading in as the first one is fading out?
            • 3. Re: Simultaneous fade out and fade in and image
              slaingod Level 1
              Not sure what you mean. One doesn't *have* to fade out before the other fades in, it all depends on how you want it to work.

              <mx:Fade id="fade_in" alphaTo="1" ...>
              <mx:Fade id="fade_out" alphaTo="0" ...>
              <mx:Canvas id="canvas1" ... showEffect="fade_in" hideEffect="fade_out"/>
              <mx:Canvas id="canvas2" ... showEffect="fade_in" hideEffect="fade_out" visible="false" alpha="0"/>
              ...
              canvas1.visible = false;
              canvas2.visible = true;

              They should both fade in/out simultaneously. Obviously you can use startDelay to change the timing if you need to, or use mx:Sequence and Fade children with effectEnd/effectStart to do more complicated scenarios, such as have one fade out to 50%, make a call, then continue the fade out, etc.



              • 4. Re: Simultaneous fade out and fade in and image
                John Hall Level 4
                And using a parallel effect, instead of sequence doesn't change anything?
                • 5. Re: Simultaneous fade out and fade in and image
                  slaingod Level 1
                  Well, parallel will play 2 effects on a component simultaneously...so if you wanted to do a Fade(out)/WipeLeft you would use Parallel.
                  • 6. Re: Simultaneous fade out and fade in and image
                    ChiefRocka00 Level 1
                    so the fade out and fade in are working like you said, however I want then to be in the same position on the page. I would like each canvas to be at coordinates (0,0). Here is my code, but the canvas' are stacked vertically? Is what I want to do possible?

                    <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" creationComplete="initApp();">
                    <mx:Style>
                    Application {
                    backgroundColor: #ffffff;
                    backgroundGradientColors: #ffffff, #ffffff;
                    }
                    </mx:Style>

                    <mx:Script>
                    <![CDATA[
                    import mx.controls.Alert;

                    [Bindable] private var homePageImageId:int = 0;
                    [Bindable] public var intervalId:uint;

                    [Embed(source="images/3_1813714899.jpg")]
                    [Bindable] public var imgClass3:Class;
                    [Embed(source="images/5_2065488856.jpg")]
                    [Bindable] public var imgClass5:Class;
                    [Embed(source="images/6_717433985.jpg")]
                    [Bindable] public var imgClass6:Class;
                    [Embed(source="images/9_263548684.jpg")]
                    [Bindable] public var imgClass9:Class;

                    function initApp():void {
                    checkDelayCounter();
                    intervalId = setInterval(checkDelayCounter,4000);
                    }

                    function checkDelayCounter():void {
                    if ( homePageImageId == 0 ) {
                    canvas0.visible = false;
                    canvas1.visible = true;
                    homePageImageId = 1;
                    } else if ( homePageImageId == 1 ) {
                    canvas1.visible = false;
                    canvas2.visible = true;
                    homePageImageId = 2;
                    } else if ( homePageImageId == 2 ) {
                    canvas2.visible = false;
                    canvas0.visible = true;
                    homePageImageId = 0;
                    }
                    }
                    ]]>
                    </mx:Script>

                    <mx:Fade id="fade_in" duration="750" alphaFrom="0" alphaTo="1"/>
                    <mx:Fade id="fade_out" duration="750" alphaFrom="1" alphaTo="0"/>
                    <mx:Canvas id="canvas0" showEffect="fade_in" hideEffect="fade_out" visible="true" alpha="0" x="0" y="0">
                    <mx:Image id="homePageImage6" source="{imgClass6}" width="990" height="400" x="0" y="0"/>
                    </mx:Canvas>
                    <mx:Canvas id="canvas1" showEffect="fade_in" hideEffect="fade_out" visible="false" alpha="0" x="0" y="0">
                    <mx:Image id="homePageImage3" source="{imgClass3}" width="990" height="400" x="0" y="0"/>
                    </mx:Canvas>
                    <mx:Canvas id="canvas2" showEffect="fade_in" hideEffect="fade_out" visible="false" alpha="0" x="0" y="0">
                    <mx:Image id="homePageImage5" source="{imgClass5}" width="990" height="400" x="0" y="0"/>
                    </mx:Canvas>

                    </mx:Application>
                    • 7. Re: Simultaneous fade out and fade in and image
                      ChiefRocka00 Level 1
                      I solved my problem, the application needs to have layout="absolute"