18 Replies Latest reply: Jun 25, 2012 5:36 AM by Anouka31 RSS

    Preloader plays swf before load complete

    Anouka31

      My Flash (CS4/AS3) website has turned out to be pretty huge- it's my first site and I'm ok with it taking a while to load at this time.. planning to clean things up later but need it running in the meantime. I needed a preloader at the beginning, but as so many actions in the site were tied to frame numbers, I decided to make the index.html a swf containing only the preloader and a UI loader, which loads the main swf. This works ok, except the site appears to load before the preloader is finished, so the loading bar overlaps the site and the site is only half functional during these few seconds. Anyone have any advice to keep the site from loading until the preloader finishes? The website is www.bespokeglasstile.com

      and the code I'm using for the preloader is below.

       

      var imageURL:String = "bespoke_glass_tile.swf";
      var request:URLRequest = new URLRequest(imageURL);
      bgtUI.load(request);

       

      progressBar.source = bgtUI;
      progressBar.addEventListener(ProgressEvent.PROGRES S, progressHandler);
      progressBar.addEventListener(Event.COMPLETE, completeHandler);

       

      function progressHandler (event:ProgressEvent):void {
      status_txt.text = int(event.currentTarget.percentComplete) + "%";
      }

       

      function completeHandler (event:Event): void {
      progressBar.removeEventListener(ProgressEvent.PROG RESS, progressHandler);
      progressBar.removeEventListener(Event.COMPLETE, completeHandler);
      removeChild(progressBar);
      status_txt.text = "";
      }

       

      After searching several forums, I came across others with the same issue and I tried to extrapolate from advice given to them by trying the following:

      adding addChild(bgtUI); to the completeHandler function

      making the bgtUI.alpha  = 0; and then changing it to 100 in the completeHandler function

      and there is a stop(); on the first frame of the loaded swf.

       

      Thanks in advance!

        • 1. Re: Preloader plays swf before load complete
          Ned Murphy CommunityMVP

          Using the addChild(bgtUI) in the completeHandler function should be sufficient.  If it is not working for you, show all of the code relative to it.

          • 2. Re: Preloader plays swf before load complete
            Anouka31 Community Member

            Hi Ned,

             

            This is the full code with the addChild, it didn't seem to fix anything but I wouldn't be surprised if I've missed a step somewhere...

             

            var imageURL:String = "bespoke_glass_tile.swf";
            var request:URLRequest = new URLRequest(imageURL);
            bgtUI.load(request);

             

            progressBar.source = bgtUI;
            progressBar.addEventListener(ProgressEvent.PROGRES S, progressHandler);
            progressBar.addEventListener(Event.COMPLETE, completeHandler);

             

            function progressHandler (event:ProgressEvent):void {
            status_txt.text = int(event.currentTarget.percentComplete) + "%";
            }

             

            function completeHandler (event:Event): void {
            progressBar.removeEventListener(ProgressEvent.PROG RESS, progressHandler);
            progressBar.removeEventListener(Event.COMPLETE, completeHandler);
            removeChild(progressBar);
            status_txt.text = "";

            addChild(bgtUI);
            }

            • 3. Re: Preloader plays swf before load complete
              Ned Murphy CommunityMVP

              I don't see how you get bgtUI into the picture.  What do you do to create it?

              • 4. Re: Preloader plays swf before load complete
                Anouka31 Community Member

                Oh, bgtUI is the instance name of the UI loader which loads the swf.  I cast the UI loader as a Movieclip.  I'm sorry, I should have mentioned that.

                • 5. Re: Preloader plays swf before load complete
                  Ned Murphy CommunityMVP

                  If the UILoader is added manually to the stage, it is already in the 'addChild' state - you would have had to remove it first before adding it.   You are probably better off making it invisible/visible instead... bgtUI.visible = false; at the start, and bgtUI.visible = true; after loaded.

                  • 6. Re: Preloader plays swf before load complete
                    Anouka31 Community Member

                    Thanks Ned.  I tried it and the swf is still appearing when the loader is about 10% (this version is currently online now www.bespokeglasstile.com).  I tried changing the visibility to =false in the completeHandler function to check if I'd made some mistake, and it did indeed remain false, but when I make it =true, it continues to be visible before loaded.

                    Code below...

                     

                    var imageURL:String = "bespoke_glass_tile.swf";

                    var request:URLRequest = new URLRequest(imageURL);

                    bgtUI.load(request);

                    bgtUI.visible = false;

                     

                    progressBar.source = bgtUI;

                    progressBar.addEventListener(ProgressEvent.PROGRESS, progressHandler);

                    progressBar.addEventListener(Event.COMPLETE, completeHandler);

                     

                     

                    function progressHandler (event:ProgressEvent):void {

                              status_txt.text = int(event.currentTarget.percentComplete) + "%";

                    }

                     

                    function completeHandler (event:Event): void {

                              progressBar.removeEventListener(ProgressEvent.PROGRESS, progressHandler);

                      progressBar.removeEventListener(Event.COMPLETE, completeHandler);

                      progressBar.parent.removeChild(progressBar);

                              status_txt.text = "";

                              bgtUI.visible = true;

                    }

                    • 7. Re: Preloader plays swf before load complete
                      Ned Murphy CommunityMVP

                      If you are testing in a browser, I recommend clearing your cache each time you test.  You should put a trace in the in the functions to see what the percentComplete property looks like during and when the completeHandler function gets triggered.

                      • 8. Re: Preloader plays swf before load complete
                        Anouka31 Community Member

                        I've been testing in Chrome & Safari, clearing cache each time.

                        Looked at a quick tutorial on tracing variables and tried adding trace ("imageURL is "+ imageURL);

                        to both the percentComplete and the completeHandler functions.  When added to percentComplete, it traced imageURL is bespoke_glass_tile.swf several hundred times; when added to completeHandler, it only traced the same output only once.  I don't know what to make of that, does it give you any insight?  Or am I using the wrong trace command entirely?

                         

                        ps, sorry for a few days delay.. work interferance - but I'm working diligently on this problem today

                        • 9. Re: Preloader plays swf before load complete
                          Ned Murphy CommunityMVP

                          What you say you see sounds rright but you are not tracing what I suggested you should.

                          • 10. Re: Preloader plays swf before load complete
                            Rob Dillon CommunityMVP

                            The way that loading .swf files display is different and unique to each browser/platform. What you are seeing is result of the loading process. When some visual content in the loading .swf is available, the Flash plugin will display it. Some browser/platform combinations won't display the .swf until it's fully loaded. You have no control over this arbitrary process. If you don't want the .swf to be available until it is completely loaded, then you need to "hide" it in some way from the user.

                             

                            Using the visible property may not work as expected because the Loader object may not react to that property's values as you expect. In other words, try something else. The alpha property may be more useful.

                             

                            I usually use the position of the loading object. I set the y property of the loader to -1000, or something like that. This pushes the loader up above the actual stage area. When the loading is finished you can then move the object down to the stage.

                             

                            Another useful method is to draw a stage sized sprite and fill it with a color. Add the sprite to the stage. Then you can add the loader to the stage behind this sprite. When it is loaded, or when you want the user to be able to use it, just change its position in the display list.

                            • 11. Re: Preloader plays swf before load complete
                              Anouka31 Community Member

                              Thanks Rob, that makes a lot of sense.  I'm not really familiar with sprites, going to see what I can figure out on that now, but I tried changing the y position of my loader and had the same result.. code is below in case I've made a mistake....

                               

                              var imageURL:String = "bespoke_glass_tile.swf";

                              var request:URLRequest = new URLRequest(imageURL);

                              bgtUI.load(request);

                              bgtUI.visible = false;

                              bgtUI.y = -1000;

                               

                              progressBar.source = bgtUI;

                              progressBar.addEventListener(ProgressEvent.PROGRESS, progressHandler);

                              progressBar.addEventListener(Event.COMPLETE, completeHandler);

                               

                              function progressHandler (event:ProgressEvent):void {

                                        status_txt.text = int(event.currentTarget.percentComplete) + "%";

                                        //trace ("imageURL is "+ imageURL);

                              }

                               

                              function completeHandler (event:Event): void {

                                        progressBar.removeEventListener(ProgressEvent.PROGRESS, progressHandler);

                                progressBar.removeEventListener(Event.COMPLETE, completeHandler);

                                progressBar.parent.removeChild(progressBar);

                                        status_txt.text = "";

                                        bgtUI.visible = true;

                                        bgtUI.y = 0;

                                        //trace ("imageURL is "+ imageURL);

                              }

                              • 12. Re: Preloader plays swf before load complete
                                Anouka31 Community Member

                                Thanks, that's why I was asking if I was using the wrong command entirely...

                                • 13. Re: Preloader plays swf before load complete
                                  Rob Dillon CommunityMVP

                                  Try this simplified version of your code:

                                   

                                   

                                   

                                  import flash.display.Loader;

                                  import flash.events.*;

                                  import flash.net.URLRequest;

                                   

                                   

                                  var bgtUI:Loader = new Loader();

                                  var imageURL:String = "moveImage.swf";

                                  var urlReq:URLRequest = new URLRequest(imageURL);

                                  bgtUI.load(urlReq);

                                  configureListeners(bgtUI.contentLoaderInfo);

                                  addChild(bgtUI);

                                   

                                   

                                  progressBar.source = bgtUI;

                                  progressBar.addEventListener(ProgressEvent.PROGRESS, progressHandler);

                                  progressBar.addEventListener(Event.COMPLETE, completeHandler);

                                   

                                   

                                  function progressHandler(event:ProgressEvent):void

                                  {

                                            status_text.text = "bytesLoaded=" + event.bytesLoaded + " bytesTotal=" + event.bytesTotal;

                                  }

                                   

                                   

                                  function completeHandler(event:Event):void

                                  {

                                            progressBar.removeEventListener(ProgressEvent.PROGRESS, progressHandler);

                                            removeChild(progressBar);

                                            removeChild(status_text);

                                  }

                                   

                                   

                                  function configureListeners(dispatcher:IEventDispatcher):void

                                  {

                                            dispatcher.addEventListener(Event.COMPLETE, completeHandler);

                                            dispatcher.addEventListener(ProgressEvent.PROGRESS, progressHandler);

                                  }

                                   

                                  There were a number of things that I needed to change in order to get the loader working:

                                  1. Don't name a URLRequest or any other object with a reserved word. "Request" is such a reserved word. It may or may not throw an error at runtime, but it will most likely cause havoc.

                                  2. You can't attach a progress event directly to a component. You need to use an event dispatcher.

                                  3. While blanking the text property of the textfield on the stage will make the text go away, you really want the text field to go away. You can just use removeChild() to do that.

                                  4. Likewise with the progress bar. Just use a simple removeChild().

                                  • 14. Re: Preloader plays swf before load complete
                                    Anouka31 Community Member

                                    Thanks so much for helping with my code.  I tried your version (just changed the status_text to status_txt to match my instance names) & got the following errors, which are all parameters in the component inspector of the UI loader.  What step am I missing?

                                     

                                    1119: Access of possibly undefined property autoLoad through a reference with static type flash.display:Loader. 

                                    Source: bgtUI.autoLoad=(true);

                                     

                                    1119: Access of possibly undefined property enabled through a reference with static type flash.display:Loader.

                                    Source: bgtUI.enabled=(true);

                                     

                                    1119: Access of possibly undefined property maintainAspectRatio through a reference with static type flash.display:Loader.

                                    Source: bgtUI.maintainAspectRatio=(true);

                                     

                                    1119: Access of possibly undefined property scaleContent through a reference with static type flash.display:Loader.

                                    Source: bgtUI.scaleContent=(false);

                                     

                                    1119: Access of possibly undefined property source through a reference with static type flash.display:Loader.

                                    Source: bgtUI.source="bespoke_glass_tile.swf";

                                     

                                    Again, thanks very much for helping me through this, I'm completely self-taught and my AS coding is so piecemeal that I know I'm missing a lot of broad info.

                                    • 15. Re: Preloader plays swf before load complete
                                      Ned Murphy CommunityMVP

                                      Those errors all appear to involve properties of a UILoader.  For what Rob has offered there is no longer a UILoader component, but instead a coded Loader object.  I don't see that code in anything that is shown, so do you have code somewhere else for the UILoader you had originally?

                                      • 16. Re: Preloader plays swf before load complete
                                        Anouka31 Community Member

                                        AHHH I see.  I'm still using the UILoader component, I didn't realize that I'd need to change that.  Loader objects is an area I'm sketchy on, but after a cursory tutorial search I think I may be able to figure it out... will spend some time on this tonight and update with results.  Thanks Ned!

                                        • 17. Re: Preloader plays swf before load complete
                                          Anouka31 Community Member

                                          Ok, I've had a closer look.  I deleted the UI Loader from the stage, and that took care of the errors.  Beyond that, I've no other ideas- the code Rob provided loads everything fine but the same problem persists.  I don't have any other code in this movie, there's just the above code in frame 1 to load the main movie, and the loader bar components on the stage.

                                          • 18. Re: Preloader plays swf before load complete
                                            Anouka31 Community Member

                                            Just wanted to update this in case others are having the same problem.  Since there was no fix that seemed like something I was capable of figuring out (even with all the helpful suggestions given), I had to find another way to solve this problem.  Instead of using a movie with only the preloader attached to a loader that loaded my main swf, I scrapped that and went back to the main movie.  I'd thought since so much of my Actionscript was tied to keyframe numbers that I wouldn't be able to dump a preloader in the beginning of the movie, but I realized that I'd been wrong- the first scene of my movie was 5 keyframes long so I just added one keyframe at the beginning, deleted the graphics, and made some minor adjustments to the buttons, etc.  The AS on this first frame has a stop(); at the beginning and a gotoAndPlay(2); in the load function; the second keyframe has a stop();.  Anyway, I hope all that is helpful to anyone else who has trouble finding a solution to this, I know that I've done things in a slightly backwards way and made it harder for myself, but live & learn!

                                            Thanks again for all advice given.