37 Responses to “Flex 2 Preloaders - SWF, PNG, GIF Examples”

1. #  Kevin Hoyt July 24, 2006 12:09 PM

   Very nice, Ted! Looking forward to the next iteration with progress indication.  

2. #  Danny Patterson July 24, 2006 4:44 PM

   Great stuff Ted. I'm sure I'll use this in my work.  

3. #  Jeremy July 28, 2006 3:46 PM

   I got one for you ted, how would you create a preloader that had multiple progress bars. IE
   
   Loading... Secruties Settings
   Loading... Ice Sammiches
   Loading... Loading Something else
   
   But they are all contained in the same preloader, and after the first one loads the second one is trigggered, and then the third one, etc....  

4. #  Anonymous July 29, 2006 11:51 AM

   Just one question :
   
   Why use in the code mp3 file???  

5. #  Ted Patrick July 29, 2006 11:57 AM

   I embedded some MP3 files in the base application to make the SWF file much larger. This was done so that I could test out the loading progress, RSL loading and other features. Without the MP3 files embedded, the app loads instantly and is hard to test.
   
   It is sort of like adding bricks into cart to test it out. The bricks are irrelavant but it helps load test the cart under abusive conditions. In this case it bloated the SWF file to 1MB in file size. The total preloader is about 3Kb in additive size to the SWF and loads instantly.
   
   The MP3's are just bricks for testing.
   
   Cheers,
   
   Ted :)  

6. #  Ted Patrick July 29, 2006 12:10 PM

   Jeremy,
   
   This would be a good addition. There is a feature of Flash Player 9 to allow loading of SWF via URLStream as binary data. Assuming you have 4-5 distributed components/modules/screens, the preloader could load them into memory as binary and then instanciate them into the displayList via Loader.
   
   Say you loaded a mapping component distributed as binary, then instanciate it within your application as if it was part of the base app via Loader wrapped in a nice Flex 2 UIComponent API.
   
   Distributed Flex components???
   
   hmmmmm....
   
   Sounds allot like the old PowerSDK framework circa 2000 in Flash 5-6.
   
   More to come.
   
   Ted :)  

7. #  carlos garza August 9, 2006 10:07 AM

   all the example are realy helpful, thaks!!! i cant wait no more to see the next level of your example. when you plan to upload?
   
   the function called on the FlexEvent.INIT_PROGRESS run pallalel with the initialize="initApp()" ???
   
   Best regards  

8. #  David Coletta September 1, 2006 12:15 PM

   I used this code to get a jump-start on our custom preloader, which is a Flash 8 animation of an old-fashioned typewriter typing out a message, which runs about six seconds. I ran into a really interesting wrinkle.
   
   Say you only want the animation to play if there's enough time for it to play. In other words, if the app is going to load in considerably less than six seconds, don't bother to play the animation.
   
   What I ended up doing was, on every progress event starting with the third one, calculating the average download rate, estimating the amount of time left to download, and then checking to see if we had enough runway to play the animation. The amount of runway I determined experimentally as how long I felt it was ok to leave a blank screen, which ended up being about 1.5 seconds.  

9. #  Anonymous September 5, 2006 7:32 AM

   Are you planning on doing the update to this article ? I think that I and many others were hoping that you would be finishing it sooner rather than later.
   
   Many thanks
   
   BOb  

10. #  Anatole Tartakovsky September 20, 2006 4:59 PM

    Hello Ted. Just blogged variation on your code - with generic login functionality. Here is the link in case if you are still updating the code:
    http://flexblog.faratasystems.com/?p=88  

11. #  Anonymous November 29, 2006 7:34 AM

    What happened to adding the download progress? Any plans to still offer an update? Thanks!  

12. #  Anonymous February 2, 2007 10:16 AM

    An entire tutorial for custom progress bars can be found in livedocs.
    http://livedocs.macromedia.com/flex/2/docs/wwhelp/wwhimpl/js/html/wwhelp.htm?href=00000647.html  

13. #  Ted Patrick February 8, 2007 9:41 AM

    I did add stubs into the classes for custom progress events. The issue is that folks want to show progress in different ways and I didn't want to dictate that within the example.
    
    Right now it covers the 80% use case and I add more, folks will have to do work to use this. It is a catch 22 of posting example code, whose requirements win?
    
    Plus there is a well documented example of this in the docs!
    
    Cheers,
    
    ted :)  

14. #  Philip Carlin March 1, 2007 12:53 AM

    Hi Ted, Many thanks for the excellent example, which I have found very helpful as a starting point.
    
    For anyone thinking about adding a progress bar, one of the easiest things to do is just draw [drawRect] one in the WelcomeScreen class (checking in the updateView method, using the root.loaderInfo.bytesLoaded / root.loaderInfo.bytesTotal to work out sizing).
    
    1st March 2007.  

15. #  Anonymous March 14, 2007 1:13 AM

    I have a problem trying to center the progress textfield. I was planning on using Stage.width, but this gives a null pointer error. Also, added an image seems not possible (using theImage= new Image(); addChild(theImage); theImage.load("http://server.com/image.jpg");
    
    Any help on this please?  

16. #  shawn gibson March 18, 2007 2:39 AM

    Hi Ted, this is awesome, thanks. I have a huge app that uses a lot of event-loaded XML db files, and a lot of image assets, and modules. I'd like to use your preloader as I've changed it (just the visual to fit my app) but to also include the inaugural data and assets that are loaded in a progressbar that sits in the .swf/image. I've tried combining your code with the livedocs help, but I'm not getting anywhere (http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=dpcontrols_062_07.html)
    .
    
    If what I ask is clear as mud, I've stripped out the .swf and use it temporarily as eye-candy at my site at www.shawngibson.com
    
    I just want users to see that they are about to enter a very cool site, but I also want the initial couple of large intro images and the initial data/XML feeds to be preloaded, and that to be indicated by a progressbar over the splash swf/image. Is this possible?
    
    Shawn  

17. #  Ben April 3, 2007 6:18 PM

    I have the same issue as Shawn. Any help? :-)  

18. #  Ben April 7, 2007 9:25 AM

    I answered my own question.
    
    Here's the answer: http://tech.groups.yahoo.com/group/flexcoders/message/58995  

19. #  Zdravko June 25, 2007 1:22 PM

    Help, download progress needed :(  

20. #  Tiaan July 7, 2007 10:32 AM

    I used the SWF example as a template to add my own SWF file as preloader but for some reason I cannot figure out it jumps left and right while playing. Anyone perhaps willing to lend me a hand ?  

21. #  FLEXibleMySelf October 6, 2007 6:32 AM

    Hi Ted,
    Thank you for your post. It was very helpfull.
    I updated your code to have a progress bar and a logo at the same time.
    
    http://flexiblemyself.blogspot.com/2007/10/custom-preloader.html
    
    Tibo  

22. #  Anonymous October 15, 2007 2:42 AM

    to center my preloader i use
    function centerPreloader():void
    {
    if(Application.application)
    {
    clip.x = Application.application.width/2;
    clip.y = Application.application.width/2;
    clip.visible = true;
    }
    else
    {
    setTimeout(centerPreloader,200);
    }
    
    
    
    
    }  

23. #  Timo October 18, 2007 4:19 AM

    ^
    
    does not work for me... Application is not known on that moment.  

24. #  Anonymous November 19, 2007 4:16 PM

    is there a way to make it play my gif animation? great blog btw.. bookmarked :)  

25. #  Uttam December 11, 2007 4:22 AM

    Hi Ted!
    
    Awesome blog I must say that! I am involved in development using flex and I wanted to replace the loading bar that appears while the flash content is being loaded. When I tired the illustration mentioned in this blog although the intended GIF does appear before loading of the content but the original bar still continues to appear and is infact the first that is appearing. Can you please suggest what is going wrong here?
    
    Thanks a ton!!!  

26. #  Anonymous December 16, 2007 1:29 PM

    @FLEXibleMySelf
    
    yours doesnot work in flex 2 even when you update all classes  

27. #  Anonymous February 27, 2008 2:33 AM

    Hi Ted.
    
    I use CustomPreloader with Flex 3 beta 3 but in Firefox it's works perfect but in explorer i I don't see nothing.
    
    Please, help me!!
    
    Thanks  

28. #  surag March 16, 2008 8:17 AM

    Can i change the word "Loading" to something else from the default loading screen in flex?? Please help me  

29. #  John Daharsh May 6, 2008 2:31 PM

    Stage works for centering. I have a custom animation that I needed to play and have centered, and by the time the application initialized so it could center, there wasn't enough time to show the loading animation.
    
    Here is where I found the way to do this:
    http://blog.preinvent.com/node/6
    
    the key is to add an event handler when the constructor is called:
    addEventListener(Event.ADDED_TO_STAGE, theFunctionThatWorks);
    
    then in theFunctionThatWorks:
    
    private function theFunctionThatWorks(event:Event):void{
    addChild(animatedPreloader);
    preloaderScreen.x = (stage.stageWidth-animatedPreloader.width)/2;
    preloaderScreen.y = (stage.stageHeight-animatedPreloader.height)/2;
    }
    
    HTH  

30. #  John Daharsh May 6, 2008 4:46 PM

    Sorry, in my haste I didn't copy and paste from my code so there was an error. The method should have been:
    
    private function theFunctionThatWorks(event:Event):void{
    addChild(animatedPreloader);
    animatedPreloader.x = (stage.stageWidth-animatedPreloader.width)/2;
    animatedPreloader.y = (stage.stageHeight-animatedPreloader.height)/2;
    }  

31. #  SoftwareEngineer May 15, 2008 12:40 PM

    Ted,
    
    Cool. It would be nice if you provided a link to that great example in the docs you mention.
    
    And it would also be nice if you would give us some examples, even if it does not fit all use cases.
    
    Thanks,
    W  

32. #  raghu August 11, 2008 4:22 AM

    hi friend,
    
    I am raghavendra here i wanted to know how to do this without the action script is that necessary to do using actionscript......let me know....
    
    
    Regards
    Raghavendra  

33. #  Anonymous August 29, 2008 8:19 AM

    Hi Ted,
    
    I've been trying to use a custom SWF animation as a preloader.
    
    The animation consists of a speedometer that displays the percentage loaded. The SWF has a function in the first frame of the movie called setPercentageLoaded which rotates the dial of the speedometer.
    
    I would like to load the loader animation dynamically and use it as a preloader.
    
    However, when embedding the SWF, the setPrecentageLoaded can no longer be called.
    
    Is this approach possible?
    
    Regards,
    Alex  

34. #  chris li January 21, 2009 2:02 PM

    HI Ted, I have a weird finding....and cannot figure out...can you help?
    
    i tried your gif loader example and sees that the preloader shows up right away.
    
    I then copied your EXACT source and my preloader always takes 2 seconds to show up. Try this page and click on reload and each time you'll see the preloader takes a couple of secs to load http://www.dimiour.com/test/test.html)
    
    however, I downloaded your swf file and used the same html wrapper and find preloader in your swf file loads instantly http://www.dimiour.com/test/testtheirs.html
    
    so I am all confused as to why my binary generated from the same source code as yours always has 2 sec delay for preloader to show up while yours doesn't. I am using flex builder as3. what did you use to build? I have exhausted all possibility and I think it may be the compile tool that's causing the problem.
    
    please hit me back at wcl_2000@yahoo.com when you post a reply. thanks.  

35. #  aYo ii March 30, 2009 1:20 AM

    Chris,
    Not my experience, your Preloader came up immediately  

36. #  Erik April 8, 2009 4:25 AM

    Nice!! This is very useful for me!  

37. #  Andrew May 19, 2009 1:56 PM

    I'm using FLex 3 and I have the same problem as Chris... doesn't show up right away.
    
    I also still have that aqua blue/background.
    
    Is this a Flex 3 thing maybe?