8 Replies Latest reply on Aug 7, 2009 1:58 PM by Flex harUI

    blank screen for long time before preloader appears

    released87

      Hi,

       

      I've been trying to disect the flex preloader to understand the load time. I have an application that shows a blank screen for quite some time before displaying the preloader. When the preloader does show it doesn't say 'Loading...' but skips straight to 'initializing' for a short time, then straight into the app.

       

      I am not sure what is going on and why it takes such a long time for the preloader to pop-up. i don't want visitors to think there is nothing there, because it says 'Done' in the bottom of the browser when it is blank; it could seem it is just a blank page to a visitor.

       

      can someone explain or point me in a direction where i can learn 1) when the 'preloader/loading' pops up 2) when 'initializing' pops up, and when the actual app loads. it seems it is skipping the first step, going straight to initiliazing for a short time and then loading the app.

       

      examples:

      www.encoemall.com

      demo.phourus.com

       

      better load time example:

      www.smartbizrecycling.com

       

      Thanks,

      Jesse

        • 2. Re: blank screen for long time before preloader appears
          released87 Level 1

          I guess what I need to know is this:

           

          What exactly is loading before the flex preloader loads? when it is a blank screen is it loading 1) the entire swf (so blank screen duration would be directly proportional to the size of the swf) 2) the preinitiliaze/initialize phase

           

          here is my main app file:

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

          <?xml version="1.0" encoding="utf-8"?>

          <mx:Application

           

           

          xmlns:mx="http://www.adobe.com/2006/mxml" preinitialize="loadUser()" layout="vertical" xmlns:progress="reseller.master.preloader.*" xmlns:master="reseller.master.*" width="100%" height="100%" xmlns:forms="reseller.master.forms.*"

          >

           

           

          <mx:Script>

          <![CDATA[

           

           

          //Import

           

           

          import

          mx.controls.Alert;

           

           

          import

          flash.events.*;

           

           

          import

          flash.net.*;

           

           

          import

          mx.rpc.http.*;

           

           

          import

          mx.rpc.events.ResultEvent;

           

           

          import

          mx.managers.BrowserManager;

           

           

          import

          mx.managers.IBrowserManager;

           

           

          import

          mx.utils.URLUtil;

           

           

           

          //Objects

           

           

          public var variables:Object= new

          Object();

           

           

          private var

          browser:IBrowserManager;

           

           

           

          //Globals

          [

           

          Bindable] public var

          global_ID:int;

          [

           

          Bindable] public var

          global_Email:String;

          [

           

          Bindable] public var

          global_Recipient:String;

          [

           

          Bindable] public var

          global_Company:String;

          [

           

          Bindable] public var

          global_Site:String;

          [

           

          Bindable] public var

          global_Style:String;

          [

           

          Bindable] public var

          global_Header:String;

          [

           

          Bindable] public var

          global_Directory:String;

          [

           

          Bindable] public var global_Type:String= 'fdi_site'

          ;

          [

           

          Bindable] public var global_Multi:Boolean= true

          ;

          [

           

          Bindable] public var

          title_Home:String;

          [

           

          Bindable] public var

          title_About:String;

          [

           

          Bindable] public var

          title_Blog:String;

          [

           

          Bindable] public var

          title_Contact:String;

          [

           

          Bindable] public var

          title_FDI:String;

          [

           

          Bindable] public var

          title_Multimedia:String;

          [

           

          Bindable] public var

          title_Store:String;

          [

           

          Bindable] public var

          disable_Header:String;

          [

           

          Bindable] public var

          disable_Menu:String;

          [

           

          Bindable] public var

          disable_Content:String;

          [

           

          Bindable] public var

          url_Header:String;

          [

           

          Bindable] public var

          url_Menu:String;

          [

           

          Bindable] public var

          url_Content:String;

          [

           

          Bindable] public var

          user_Username:String;

          [

           

          Bindable] public var

          background_Color:uint;

          [

           

          Bindable] public var

          primary_Color:uint;

          [

           

          Bindable] public var

          secondary_Color:uint;

          [

           

          Bindable] public var

          border_Color:uint;

          [

           

          Bindable] public var

          primary_Text:uint;

          [

           

          Bindable] public var

          secondary_Text:uint;

          [

           

          Bindable] public var user_Admin:Boolean= false

          ;

           

           

           

          //Parameters

           

           

          private var

          _user:String;

           

           

           

          private function loadUser():void

          {

          browser= BrowserManager.getInstance();

          browser.init(

           

          "", "Welcome!"

          );

          parseURL();

          }

           

           

          private function parseURL():void

          {

           

           

          var fragment:Object = URLUtil.stringToObject(browser.fragment, "&"

          );

          _user = fragment.user;

           

           

          if(global_Multi== false

          ){

          global_Directory=

           

          ''

          ;

          }

           

          else

          {

          global_Directory=

           

          'user/'+_user+'/'

          ;

          }

          initPage();

          }

           

           

          public function initPage():void

          {

           

           

          var settingsRequest:HTTPService = new

          HTTPService();

          settingsRequest.url= global_Directory+

           

          "XML/settings.xml"

          ;

          settingsRequest.resultFormat=

           

          "e4x"

          ;

          settingsRequest.send(variables);

          settingsRequest.addEventListener(ResultEvent.RESULT, settingsLoaded);

           

           

          var contactRequest:HTTPService = new

          HTTPService();

          contactRequest.url= global_Directory+

           

          "XML/contact.xml"

          ;

          contactRequest.resultFormat=

           

          "e4x"

          ;

          contactRequest.send(variables);

          contactRequest.addEventListener(ResultEvent.RESULT, contactLoaded);

          }

           

           

          public function settingsLoaded(event:ResultEvent):void

          {

           

           

          var settingsXML:XML= event.result as

          XML;

          global_Company= settingsXML.company;

          global_Site= settingsXML.site;

          global_Header= settingsXML.header;

           

           

          //global_Style= "CSS/"+settingsXML.style+".swf";

          title_Home= settingsXML.homeTitle;

          title_About= settingsXML.aboutTitle;

          title_Blog= settingsXML.blogTitle;

          title_Contact= settingsXML.contactTitle;

          title_FDI= settingsXML.fdiTitle;

          title_Multimedia= settingsXML.multimediaTitle;

          title_Store= settingsXML.storeTitle;

          disable_Header= settingsXML.headerDisable;

          disable_Menu= settingsXML.menuDisable;

          disable_Content= settingsXML.contentDisable;

          url_Header= settingsXML.headerURL;

          url_Menu= settingsXML.menuURL;

          url_Content= settingsXML.contentURL;

          background_Color= settingsXML.background_Color;

          primary_Color= settingsXML.primary_Color;

          secondary_Color= settingsXML.secondary_Color;

          border_Color= settingsXML.border_Color;

          primary_Text= settingsXML.primary_Text;

          secondary_Text= settingsXML.secondary_Text;

          loadComplete();

          }

           

           

          public function contactLoaded(event:ResultEvent):void

          {

           

           

          var contactXML:XML= event.result as

          XML;

          global_Recipient= contactXML.recipient;

          }

           

           

          private function loadStyle(style:String):void

          {

          StyleManager.loadStyleDeclarations(style);

          }

           

           

          private function loadComplete():void

          {

           

           

          if(disable_Header== "true"

          ){

          header.visible=

           

          false

          ;

          }

          text_header.htmlText= global_Header;

           

           

          var application:CSSStyleDeclaration= StyleManager.getStyleDeclaration('Application'

          );

          application.setStyle(

           

          'backgroundColor'

          , background_Color);

          application.setStyle(

           

          'themeColor'

          , primary_Color);

           

           

          var linkButton:CSSStyleDeclaration= StyleManager.getStyleDeclaration('LinkButton'

          );

          linkButton.setStyle(

           

          'color'

          , primary_Text);

          linkButton.setStyle(

           

          'textRollOverColor'

          , secondary_Text);

          linkButton.setStyle(

           

          'rollOverColor'

          , primary_Text);

           

           

          //loadStyle(global_Style);

          current_master.selectedChild= master_main;

          }

          ]]>

           

           

          </mx:Script>

           

           

          <mx:Style>

           

           

          Application

          {

           

           

          backgroundGradientColors: #666666, #333333

          ;

           

           

          backgroundGradientAlphas: 0.04, 0.21

          ;

           

           

          color: #222222

          ;

          }

           

           

          .box

          {

           

           

          borderStyle: solid

          ;

           

           

          cornerRadius: 5

          ;

           

           

          backgroundColor: #eeeeee

          ;

           

           

          backgroundAlpha: 1

          ;

           

           

          padding-top: 10px

          ;

           

           

          padding-right: 10px

          ;

           

           

          padding-left: 10px

          ;

           

           

          padding-bottom: 10px

          ;

          }

           

           

          LinkButton

          {

           

           

          font-size: 11px

          ;

          }

           

           

          RichTextEditor

          {

           

           

          borderColor: #fefefe

          ;

           

           

          borderAlpha: 1

          ;

           

           

          highlightAlphas: 0.32, 0.1

          ;

           

           

          headerColors: #dddddd, #cccccc

          ;

           

           

          titleStyleName: "mypanelTitle"

          ;

          }

           

           

          Alert

          {

           

           

          borderColor: #fefefe

          ;

           

           

          borderAlpha: 1

          ;

           

           

          backgroundColor: #ffffff

          ;

           

           

          color: #000000

          ;

           

           

          highlightAlphas: 0.32, 0.1

          ;

           

           

          headerColors: #dddddd, #cccccc

          ;

           

           

          titleStyleName: "mypanelTitle"

          ;

          }

           

           

          .mypanelTitle

          {

           

           

          font-weight:bold

          ;

          }

           

           

          ApplicationControlBar

          {

           

           

          highlightAlphas: 0.2, 0.16

          ;

           

           

          fillAlphas: 0, 0

          ;

           

           

          dropShadowEnabled: true

          ;

          }

           

           

          TextInput

          {

           

           

          color: #000000

          ;

           

           

          borderColor: #000000

          ;

           

           

          backgroundColor: #ffffff

          ;

          }

           

           

          Button

          {

           

           

          fillAlphas: 1, 1

          ;

           

           

          color: #000000

          ;

           

           

          textRollOverColor: #333333

          ;

          }

           

           

          .copyright

          {

           

           

          color: #000000

          ;

          }

           

           

          ComboBox

          {

           

           

          color: #000000

          ;

           

           

          borderColor: #ffffff

          ;

           

           

          iconColor: #000000

          ;

           

           

          highlightAlphas: 0.16, 0.28

          ;

           

           

          fillAlphas: 1, 1, 0, 0

          ;

           

           

          fillColors: #ffffff, #cccccc, #ffffff, #eeeeee

          ;

           

           

          arrowButtonWidth: 22

          ;

           

           

          backgroundAlpha: 1

          ;

           

           

          selectionColor: #ffffff

          ;

           

           

          textSelectedColor: #333333

          ;

           

           

          useRollOver: true

          ;

           

           

          themeColor: #000000

          ;

           

           

          alternatingItemColors: #ffffff, #cccccc

          ;

           

           

          dropdownStyleName: "myComboBoxDropDowns"

          ;

          }

           

           

           

          .myComboBoxDropDowns

          {

           

           

          borderThickness: 0

          ;

           

           

          borderColor: #ffffff

          ;

          }

           

           

          DataGrid

          {

           

           

          color: #000000

          ;

          }

           

           

          .play

          {

           

           

          skin: Embed(source="Icons/Play_Normal.png"

          );

           

           

          over-skin: Embed(source="Icons/Play_Over.png"

          );

          }

           

           

          .pause

          {

           

           

          skin: Embed(source="Icons/Pause_Normal.png"

          );

           

           

          over-skin: Embed(source="Icons/Pause_Over.png"

          );

          }

           

           

          .stop

          {

           

           

          skin: Embed(source="Icons/Stop_Normal.png"

          );

           

           

          over-skin: Embed(source="Icons/Stop_Over.png"

          );

          }

           

           

          .previous

          {

           

           

          skin: Embed(source="Icons/Previous_Normal.png"

          );

           

           

          over-skin: Embed(source="Icons/Previous_Over.png"

          );

          }

           

           

          .next

          {

           

           

          skin: Embed(source="Icons/Next_Normal.png"

          );

           

           

          over-skin: Embed(source="Icons/Next_Over.png"

          );

          }

           

           

          </mx:Style>

           

           

          <mx:Canvas width="850" height="150" backgroundImage="{url_Header}"

          >

           

           

          <progress:Progress id="progress"

          />

           

           

          <mx:ApplicationControlBar id="header" width="850" height="150" paddingBottom="0" x="0" y="0" backgroundColor="{primary_Color}"

          />

           

           

          <mx:Text id="text_header" fontSize="18" fontWeight="bold" textAlign="left" x="25" y="25"

          />

           

           

          <forms:Authorize id="form_login" x="550" y="10"

          />

           

           

          </mx:Canvas>

           

           

          <mx:Box id="container_main" horizontalAlign="center" width="100%" height="100%"

          >

           

           

          <mx:ViewStack id="current_master"

          >

           

           

          <mx:Box id="master_init"

          >

           

           

          </mx:Box>

           

           

          <mx:Box id="master_main"

          >

           

           

          <master:Main id="Main_Section"

          />

           

           

          </mx:Box>

           

           

          <mx:Box id="master_editor"

          >

           

           

          <master:Editor

          />

           

           

          </mx:Box>

           

           

          </mx:ViewStack>

           

           

          </mx:Box>

           

           

          <mx:Label styleName="copyright" text="Copyright 2009 {global_Company}. All rights reserved."

          />

           

           

          <mx:Text styleName="copyright"

          >

           

           

          <mx:htmlText>

          <![CDATA[

          <p align="center"><i>Site Designed by <a href="http://www.quick-sites.biz" target="_blank">Jesse Drelick</a>.</i></p>

          ]]>

           

           

          </mx:htmlText>

           

           

          </mx:Text>

           

          Do you think it has something to do with the Browser Manager or the preinitialize?

          • 3. Re: blank screen for long time before preloader appears
            Flex harUI Adobe Employee

            Flex SWFs are two-frame SWFs  The preloader is the first frame, the app is the second frame.  As soon as the bytes of the first frame are downloaded, the preloader shows up and the rest of the SWF downloads then the app is initialized.

             

            If you are using "#" in the URL, you might be hitting this bug: https://bugs.adobe.com/jira/browse/FP-2332

             

            Otherwise, if you're using a custom preloader, make sure it doesn't drag lots of code into the first frame.

            Also try your app using a non-debugger player.

             

            Alex Harui

            Flex SDK Developer

            Adobe Systems Inc.

            Blog: http://blogs.adobe.com/aharui

            • 4. Re: blank screen for long time before preloader appears
              released87 Level 1

              so the preloader should be loaded before the rest of the .swf? this would mean it should be a relatively standard load time when using the standard preloader, considering the preloader loads first, then the 2nd frame is loaded. it seems like the first frame is taking much longer to load

               

              if using the standard flex preloader, should the blank screen be the same duration regardless of .swf size? so if i have a 10 mb swf it will take the same time until the preloader shows up from the blank screen, but will take much longer to get to the app when the preloader is showing?

               

              i tried the # issue, not sure if it made a difference, though i wouldn't be surprised if the Browser Manager has something to do with it.

               

              thanks for your help

              • 5. Re: blank screen for long time before preloader appears
                released87 Level 1

                it seems .swf size has no effect on the blank screen duration, as you have mentioned. i have embedded a large file making the file size 3.5mb instaed of 350kb, and the blank screen duration was the same, though the 'loading' phase of the preloader was much longer, as expected. so apparently the file size is not the culprit (considering i have a small file size anyway it really wouldn't make sense for that duration)

                 

                i am now curious if the browser manager is part of the problem as you have mentioned about the #, otherwise i can't think of anything else

                • 6. Re: blank screen for long time before preloader appears
                  Flex harUI Adobe Employee

                  If your URL you used to start the app doesn't have a # in it, then that problem is not affecting you, even if you use BrowserManager in your app and later URLs have #

                   

                  Can you post your SWF?  It doesn’t have to run.  I'll just download it and see how big frame1 is.

                   

                   

                   

                  Alex Harui

                  Flex SDK Developer

                  Adobe Systems Inc.

                  Blog: http://blogs.adobe.com/aharui

                  • 7. Re: blank screen for long time before preloader appears
                    released87 Level 1

                    i have attached the .swf (note i use a rsl for the flex framework) anyway i have it setup so if a user goes to http://professional.phourus.com/user/phourus, a php script uses header('Location: http://professional.phourus.com/index.html#user=phourus') to load the user's page, as sort of an alias.

                     

                    You can try both of those urls...

                     

                    thank you for your help

                    • 8. Re: blank screen for long time before preloader appears
                      Flex harUI Adobe Employee

                      This url: http://professional.phourus.com/index.html#user=phourus has the '#' in it, so you are definitely going to experience the dead-air problem I mentioned earlier.  It did load quickly for me though.

                       

                      Alex Harui

                      Flex SDK Developer

                      Adobe Systems Inc.

                      Blog: http://blogs.adobe.com/aharui