24 Responses to “Flex 2 Custom Preloaders”

1. #  Matt Voerman July 21, 2006 5:04 PM

   Great work Ted.
   
   I'd say if you want to make it more application-like display/output the preinitialize, initialize and creationComplete events.
   
   Matt :-)  

2. #  Rich Tretola July 22, 2006 5:10 AM

   Very nice Ted. I hadn't thought much about the preloader (too busy with the guts of the apps I am working on) but I will probably use something like this.
   
   Rich Tretola
   EverythingFlex.com  

3. #  Mike July 22, 2006 4:56 PM

   the transparent pngs sound interesting. Great stuff, Ted!  

4. #  Ted Patrick July 22, 2006 7:39 PM

   I will post a demo of SWF support. It allows really rich pre-loaders in Flex. The cool thing is that if you use AVM SWF files( Flash 8- ) the SWF files esentially run in a separate VM thus they do not affect instanciation time for Flex SWF files. Flash 9 has 2 brains but in this case you can use them in parallel for a preloaded advantage.
   
   Cheers,
   
   Ted :)  

5. #  Big Will... July 23, 2006 8:11 AM

   Finally Ted. And thanks for the effort. I for one appreciate it, especially when it seemed I was on your neck for this flex preloader tutorial.
   
   Great work.  

6. #  judah July 23, 2006 9:18 AM

   that is frickin sweet. :)
   
   i was expecting a flashy preloader and what i got was a feel that i was opening an application. it accomplished its goal. :)  

7. #  Anatole Tartakovsky July 23, 2006 10:54 AM

   Very nice. I am sure that the feature I am (constantly) asking for - automatic preloading in the application domain crossdomain framework libraries - is already on your list.
   Thank you,
   Anatole  

8. #  Ted Patrick July 24, 2006 8:02 AM

   William,
   
   I am glad I could help here. It wasn't as simple as it seems as it took some time to fully understand the instanciation/preloading phase of Flex.
   
   I plan to post on the logic flow of preloaders in Flex to make what I did a bit more obvious. These parts of a Flex application need to work perfectly so they are a big sensitive to change.
   
   More to come!
   
   Ted :)  

9. #  Anonymous July 24, 2006 11:54 AM

   That's flippin' sweet, nice work Ted.  

10. #  Anonymous October 17, 2006 12:22 PM

    This is some more great work Ted, thanks!
    
    I'm very much looking forward to the download progress and initialization progress features.
    
    I tried getting a .swf to load by changing the Embed line to point to the swf and the mimeType to shockwave but I couldn't get it to show me the swf. :(
    
    Great work nonetheless!  

11. #  Anonymous January 11, 2007 9:10 AM

    Any updates on this? A lot of people are really looking forward to an advanced customized preloader!  

12. #  Joel March 6, 2007 12:34 PM

    Thanks for the great post Ted! I ran into some trouble embedding my own swf though. It just showed up as a white sq. Would you happen to know why that would be?
    
    Joel  

13. #  fahrulazmi June 28, 2007 10:49 PM

    GREAT!  

14. #  KhaledK June 30, 2007 8:41 AM

    First of all, I would like to thank you about your helpful custom preloader.
    
    I found that it did not rely on the
    contents begin downloaded,. In other word, if you refresh the page the application would be ready and the custom preloader will still visible.
    
    I am waiting for your modification in terms of adding the progress bar to the preloader.
    
    Thanks again.  

15. #  shawn gibson July 6, 2007 4:20 PM

    I will give you 7 bananas and many, many kudos on my application if you add a progressbar:)
    
    Heck, I've no aversion to begging, either:)
    
    Shawn  

16. #  Justin October 20, 2007 2:00 PM

    Ted,
    Great work! I had a question regarding the loader. I noticed you used a button as your applications main element. What I've also noticed is that if more objects/components are used, they appear in the background as if the loader is just being displayed, and not actually loading. What would you recommend as a work around for this issue? Im thinking about using a button and having it removed when the FLEX.event.complete is initiated.  

17. #  Chris January 8, 2008 10:41 AM

    I have been playing with your examples and I am running into an IE7 issue.
    
    The swf preloader is appearing when the parent app is loaded, not prior like the default.
    
    What's up?  

18. #  Abu June 11, 2008 3:54 PM

    how would you add multiple files to a preloader. For example if you wanted the preloader to display both swf and a gif? The issue i run into is when i update the progress of the application load and trying to keep both files types displayed.  

19. #  matt July 23, 2008 10:06 AM

    If for whatever reason you just want to show the default progress bar minus the "initializing" and downloading, and want to resize the border rectangle, this code works:
    
    package preloader
    {
    import flash.geom.Rectangle;
    import mx.graphics.RoundedRectangle;
    import mx.preloaders.DownloadProgressBar;
    
    
    public class MyPreloader extends DownloadProgressBar
    {
    public function MyPreloader()
    {
    super();
    // Set the downloading and initializing label text
    // to a blank string.
    downloadingLabel = "";
    initializingLabel = "";
    }
    
    // Override the function that gets the border rectangle so that
    // the area dedicated to the text label is removed.
    override protected function get borderRect():RoundedRectangle
    {
    //The flex default settings are: RoundedRectangle(0, 0, 182, 60, 4);
    return new RoundedRectangle(0, 20, 182, 40, 4);
    }
    
    }
    }  

20. #  Waqas September 22, 2008 10:15 PM

    The problem is that, When the proloader starts it still gives the default greeny background no matter you have changed the application colors. Is there any way to change the screen colors when it is preloading?  

21. #  CADDCreativity December 30, 2008 6:03 AM

    Ted,
    
    Thanks a trillion for posting this, it's super sweet!
    
    The only problem I have now is my page loads too fast and the splash gets in the way of the mail.xmxl =/
    
    Is there a way to hardcode a time to play the splash screen?
    
    Thanks again for sharing your hard work.
    
    Troy
    
    P.S. Waqas > right-click the project > properties > flex compiler > add "-default-background-color #000000" (without the quotes)  

22. #  alen April 23, 2009 1:11 AM

    I see a blank screen for more than ten seconds and then a preloader. Knowing that the users leave in 8 seconds after not seeing anything, this is not acceptable. Place Google Analytics on your Flex apps if you want to see it.
    
    In Flash this was also a big problem but it was solvable by having a really small swf acting as preloader and then loading the app into it. In Flex, I've yet to come across similar solution. Any ideas?  

23. #  Anonymous August 24, 2009 12:42 PM

    I face a similar situation of blank screen when a swf file is used as preloader.
    
    any working examples?  

24. #  Vijay October 6, 2009 4:13 AM

    This is not a working copy of src i feel.
    Because my screen standstill at the first frame of my gif image. No play is performed by this code on my gif image. Any other code to play gif files.