Custom Flex preloader video tutorial

This week I set out to try and create five new tutorials in five days. Well I have just uploaded the fifth tutorial that shows you how to create a completely customized Flex preloader using Flash CS4. One thing that really bugs me about most Flex applications is the standard aqua loading screen. This video shows how simple it is to customize that experience so there is no longer any excuse for aqua .

Lee

Comments

  1. April 12th, 2009 | 10:12 pm

    Hi Lee,

    Good tute. But the link in the blog post is linking to the SWFAddress tute and not the custom preloader one.

  2. kaiserkingkaiser
    April 12th, 2009 | 10:19 pm

    lee, i think the link is for the previous tutorial which is swfaddress

  3. April 12th, 2009 | 10:55 pm

    Link to fifth tutorial is incorrect. Should be http://www.gotoandlearn.com/play?id=108

  4. April 12th, 2009 | 11:23 pm

    [...] is the original post: The Flash Blog » Custom Flex preloader video tutorial Categories : Tutorials, [...]

  5. April 12th, 2009 | 11:26 pm

    looks like your linking to the incorrect tutorial

  6. April 12th, 2009 | 11:32 pm

    Correct link : http://www.gotoandlearn.com/play?id=108
    Great tutorial Lee!

  7. April 13th, 2009 | 3:15 am

    Nice tut !
    Just a question, when you center your preloader, why didn’t you used “cp.width” and “cp.height” ? I’m not very fond of “static” values actually :x

  8. Dan
    April 13th, 2009 | 4:05 am

    Excellent stuff! I’m sure devs with a design background embrace Flex more once they find out how to get away from that standard look.

  9. Nabeel
    April 13th, 2009 | 4:19 am

    Allows Doing Great Work Man

    Thanks Lee

  10. Bjarne Hedén
    April 13th, 2009 | 7:18 am

    Great tutorial. I did not expect it to be as easy as that ;-)

  11. Michael
    April 13th, 2009 | 7:22 am

    I’m not sure that color is aqua, more like “soul-dead-steel-blue-gray”. There’s definitely more gray than aqua.

  12. April 13th, 2009 | 8:09 am

    I wrote a blog entry on this here : http://blog.lyraspace.com/2009/02/19/customise-your-flex-preloader-the-easy-way/

    Lee’s is much slicker. I didn’t think to create the SWC. This is definitely the best way to create a custom preloader. Flex purists will say you should draw everything in Flex but why if you can do it like this?!

  13. hicham
    April 13th, 2009 | 11:40 am

    Hi Lee,
    thanks so much for all that you do.

  14. April 13th, 2009 | 12:26 pm

    in one of your tutorials (not so recent), you recommended a book as a guide for math in flash, what was the name of the book?

  15. Christian
    April 13th, 2009 | 12:57 pm

    5 Days = 5 Tutorials!

    Thank you very much!

  16. April 13th, 2009 | 1:39 pm

    08:34

    Hardcoding the numbers for the width and height means that this is less dynamic. i.e. in theory if you gave the Class a generic name (Note: class and therefore the asset should be capiltalized), and calculated its width and height instead of hardcoding those numbers, you could hand that FLA out to any designer to customize and know that it will work in your application as expected.

    Hard coding any values means it’s likely you’ll need to update the code as the designer makes changes.

  17. April 14th, 2009 | 12:35 am

    Hey Lee! I always wonder if you’re using eclipse or flexbuilder ?
    do a tutorial on configuration. I want snippets (you type pv and it says private var etc )
    and how you changed the interface to be more rounded and clean than flexbuilder.

    Thanks mate!

  18. Len
    April 14th, 2009 | 8:24 pm

    Great tut! Thanks so much for your work!

    As Martin Lindelöf said ,Could? Im also expected!

  19. April 15th, 2009 | 6:02 am

    Thank god for these tutorials.

  20. April 16th, 2009 | 2:22 am

    @Martin Lindelöf & @len yes it looks like he’s using eclipse.

    @Lee: Nice tutorial lee, but the one thing what bothers me, would it be possible to set up a gradient in the compiler arguments as well?

  21. carrrramba
    April 16th, 2009 | 2:13 pm

    @Dallas

    i believe the book is called: “Foundation Actionscript Animation – Making Things Move!” by Keith Peters …it’s a great read ;-) )

    oh …and there’s an AS3 and an AS2 Version available.

    all the best
    carrrramba

  22. Jason
    April 19th, 2009 | 8:48 am

    As you said, Flex people will have to jump into the flash IDE. Any chance we could get the source code for this? I’ve been tinkering with it in Flash, but I don’t know what the hell I’m doing.

    Awesome tutorial though, thanks.

  23. Kp
    April 19th, 2009 | 3:17 pm

    Great tutorial thanks a bunch. Good push, 5 in 5days not bad at all. Thank you for all the hard work.

  24. April 19th, 2009 | 4:13 pm

    thanks for this link to the new tutotial ..

    very helpful!

  25. April 20th, 2009 | 5:58 pm

    hi, great tutorial. but i have one problem.
    when I use this custom preloader in my flex app, i can’t see the my embed font placed in external style sheet

  26. John Spatt
    April 22nd, 2009 | 12:38 am

    thanks for the tutorial can i use this to replace flex preloader . However i m trying this code :
    http://askmeflash.com/article_m.php?p=article&id=7

  27. mrm
    April 22nd, 2009 | 9:04 am

    PRO TIP: If you write “override public etc” you’ll get code hinting for the method you’re trying to override.

  28. eme
    May 4th, 2009 | 4:58 am

    tou want to write different names for the flash symbol exported in the swc and the class extending the DownloadProgressBar, so that flex knows who is who.

  29. Rashmi
    June 8th, 2009 | 4:31 am

    Excellent Tutorial.

  30. August 14th, 2009 | 4:38 am

    Is it posissible to use Catalyst for styling Flah Builder Video component?
    In the Catalyst options, there is only few to choice.
    - button
    - vscrollbar
    - hcrollbat
    - textinput
    - repeated list
    and mybe one more i dont remember. Am I right?

  31. August 14th, 2009 | 4:53 am

    sorry lee my prev comment supposto go on in here:
    http://theflashblog.com/?p=1027
    “Two-part tutorial on Flash Catalyst and Flex 4″

Leave a reply