3 Replies Latest reply on Aug 3, 2010 7:19 AM by hdave123

    Fade in application

    hdave123 Level 1

      Whats the best approach to have my application fade in (say 2-3 seconds) when it starts rather than just

      suddenly appearing?


        • 1. Re: Fade in application
          Subeesh Arakkan Level 4

          Hi,

           

          I am not sure if this is the best approach, but this works. The idea is to set the main component's visibility to false initially and turn it on in the application complete event with an effect

           

          <?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"
                            applicationComplete="application1_applicationCompleteHandler(event)"
                           >
               <fx:Script>
                    <![CDATA[
                         import flash.utils.setTimeout;
                         
                         import mx.events.FlexEvent;
          
                         protected function application1_applicationCompleteHandler(event:FlexEvent):void
                         {
                              setTimeout(function():void{
                                   fade.play([mainContent]);
                              },2000);
                         }
          
                    ]]>
               </fx:Script>
               <fx:Declarations>
                    <s:Fade id="fade" alphaFrom="0" alphaTo="1"/>
               </fx:Declarations>
               
               <s:Group id="mainContent" 
                          width="100%" height="100%"
                          visible="false">
                    <s:Button label="Test" verticalCenter="0" horizontalCenter="0"/>
               </s:Group>
          </s:Application>
          
          1 person found this helpful
          • 2. Re: Fade in application
            aktell2007 Level 1

            Use the Application as a invisible container for a invisible module, and 'FadeIn' the content of the module e.g HBox, Vbox Canvas etc. including an Bg Image or just an Image, or else with some simple code as this. You could use a delayed Timer there are just so many ways - Search for it and you will find stuff somewhere.

             

            <mx:Fade 
            id="fadeIn" 
            alphaFrom="0"
            alphaTo="1" 
            duration="2000"/>
            
            <mx:HBox
            creationCompleteEffect="fadeIn"/>
            

             

            I'm sure there are other ways but this would be very strait forward

            1 person found this helpful
            • 3. Re: Fade in application
              hdave123 Level 1

              Great stuff -- thanks all!