Comments on “AS3 for developers and designers– Part 1: Creating a preloader”

1. Thanks Jamie, I’m still trying to get my head around Classes so this tutorial helped a lot. Just wondering: is there a way to skip the preloader animation if the user has already loaded the movie/site/whatever?

   Brian on October 16th, 2007 at 6:07 am

2. Awesome Jamie! I know this is going to be very useful and helpful.

   JGP on October 16th, 2007 at 8:51 am

3. @Jamie,

   Sorry for the double post. I took a look at your classes and was wondering how would you go about making a preloader without using a loader swf but just use your site swf?

   I am not even sure if that is a best practice in flash.

   JGP on October 16th, 2007 at 9:04 am

4. Glad to hear this tutorial is helpful to some. To answer the questions so far:

   Brian: Sure! But you’d have to be clever with how you do your loading. Store your loaded items in a Dictionary (or an array if you’re not comfortable with the Dictionary class yet). Every time the user clicks, check and see if the item(s) they want are in the array. If not, time to show the loader. :)

   JGP: Certainly. You can actually have multiple PreloaderClips per site as well. You could have a uniquely skinned loader for each loaded piece of content if such was your desire. Just set com.bigspaceship.frameworks.site.PreloaderClip as the base class.

   Jamie on October 16th, 2007 at 5:00 pm

5. Great, I’ll give that a shot. Thanks again!

   Brian on October 18th, 2007 at 3:44 am

6. Awesome Jamie! I know this is going to be very useful and helpful.

   Oyun on October 19th, 2007 at 11:33 am

7. Great, I’ll give that a shot. Thanks again!

   Oyunu on October 19th, 2007 at 11:34 am

8. great work.

   Oyun indir on October 19th, 2007 at 11:35 am

9. @Jamie,

   I have been pondering over this for a few days and I cannot seem to get your preloader to work. Instead of having a loader swf. I want to have a main swf and have that swf preload itself. I cant use URLRequest because that needs to be a string and not mc. Not sure if I am approaching this correctly.

   JGP on October 19th, 2007 at 2:23 pm

10. @JGP:
    Every DisplayObject has a loaderInfo property, which will tell you the progress of it’s load. You can listen to this.loaderInfo’s ProgressEvent.PROGRESS event for the bytes loaded and bytes total of the main SWF. If it’s the only swf you’re loading, you simply need to tell the loader that you’re on file 1 of 1.

    Jamie on October 19th, 2007 at 3:08 pm

11. @Jamie:

    Since PreloaderClip.as is linked to a mc in the library. Can you call it like:

    var preloaderClip:PreloaderClip = new PreloaderClip();
    preloaderClip.animateIn(); ?

    I tried doing it that way but kept getting errors saying the object is null.

    Tron on October 21st, 2007 at 8:45 pm

12. @Tron:
    You should be able to create a new PreloaderClip that way. I’m not sure what the issue is there.

    Jamie on October 22nd, 2007 at 3:32 pm

13. Great tutorial!

    The only problem I had was my flex builder kept giving me an error for not having progress_mc defined in the PreloaderClip class. (1120: Access of undefined property progress_mc). It still works fine, just an annoying error. So I spent some time and figured out.

    If you just define it as a class variable you get the error: 1151: A conflict exists with definition progress_mc in namespace internal.

    The solution I found was to change the instance name of the loader_progress MC on the timeline to loaderbar. Define progress_mc as a private class var and add this.progress_mc = this.getChildByName(”loaderbar”) as MovieClip; to the PreloaderClip class constructor. Also you now have to make sure that an instance of the “loaderbar” is on the first frame of your PreloaderClip MC.

    Let me know if anyone has an easier way to remove the error in flex builder.

    Jesse on October 30th, 2007 at 10:57 pm

14. @Tron:

    I had a similar problem. It should work if you rename the loader_mc MC in your library to PreloaderClip.

    //Define class property
    private var preloader_mc:PreloaderClip;

    //Add preloader to stage
    this.preloader_mc = new PreloaderClip();
    this.preloader_mc.x = stage.stageWidth/2;
    this.preloader_mc.y = stage.stageHeight/2;
    this.addChild(this.preloader_mc);

    Jesse on October 30th, 2007 at 11:03 pm

15. @Jesse: Great support. Thanks for that. :)

    In Flash Authoring there’s a publish setting — “Automatically declare stage instances.” This is great for transitioning from AS2 to AS3, as you don’t need to strictly specify every item that already exists on the timeline in a class.

    However, it does get rather confusing and irritating in stricter environments, like Flex. Sorry about that. :)

    Jamie Kosoy on November 1st, 2007 at 10:35 am

16. Hi Jamie…

    First off, thanks for the great tutorial. I really appreciate the time you put into this!

    Quick question regarding this AS snippet from PreloaderClip.as: pct_mc.tf.text = totalPct.toString()

    I have created an mc within the main timeline of your sampleLoader.fla. I named the instance of the mc: pct_mc. Inside pct_mc I created a text field (dynamic) and named the instance: tf. I then test the movie & nothing!

    Am using Flash CS3, AS3 and your unmodified tutorial files (except the changes above to sampleLoader.fla).

    When previewed & published the text field is not being populated. No compiler errors either.

    Any other ideas on how I can report the current % loaded to the viewer?

    Thanks for you help.

    Greg

    Greg on November 2nd, 2007 at 3:51 pm

17. @Greg: I’ll be honest — I hate my implementation of % loaded. I think I’m going to change it to a getter, so you can have your % loaded text anywhere instead of specifically in the preloader clip.

    But to answer your question, it should be nested INSIDE of preloader_mc — the PreloaderClip itself. preloader_mc.pct_mc.

    Jamie Kosoy on November 3rd, 2007 at 5:23 pm

18. _
    I nested pct_mc under preloader_mc and I get this compiler error…
    _
    ————–
    Location: PreloaderClip.as, Line 42
    ————–
    Description: 1151 A conflict exists with definition pct_mc in namespace internal
    ————–
    Source: public var pct_mc
    ————–
    _
    Any idea why this isn’t working? I am just lost w/ new AS 3.0. Thanks again!

    Greg on November 3rd, 2007 at 6:04 pm

19. @Greg
    You are getting that error because var pct_mc is defined as a class variable and you have a movieclip on your timeline with the same name, pct_mc. Just change the name of percentage MC on your stage and define pct_mc as a private class var. Then add pct_mc = this.getChildByName(”The name of your stage MC”);.

    Jesse on November 5th, 2007 at 12:51 pm

20. What can I say… noob! Thanks Jesse…

    Greg on November 6th, 2007 at 5:52 pm

21. Jamie, just wanted to say thanks for a fantastic tutorial!! Its really helped me understand AS3 better!

    Btw I think you may need to add _targetFrame = progress_mc.totalFrames to the setComplete() function in case you load 3 items over 100 frames - i.e 33 frames each would total 99 and never end :)

    Jarrod on December 11th, 2007 at 9:25 pm

22. Great - no comment ! Thanks Jamie

    Mielno on December 28th, 2007 at 6:59 pm

23. could someone teach me how to use this preloader class for loading multiple swf´s and access/controll them with a navigation?

    for e.g, how to load 4 different swf´s (1.swf, 2.swf, 3.swf, 4,swf) and build a simple navigation to load and unload them ?

    an example for something like this would be really helpfull to me, or some advices too, i am happy if you could hook me on with that..tnx so much!

    Roman on March 14th, 2008 at 1:14 pm

24. I would also like to know how to use this with multiple swf’s and a nav. I’m new to Actionscript 3 and am having a hard time getting a handle on it.

    Any help would be awesome!

    Steve Ariss on May 1st, 2008 at 1:03 am

25. @Jamie;
    Excellent tutorial also a greast example of how to properly load an xml file in actionscript 3.0. It’s all there and I’m wrapping my head around the concepts that seem to be all there to put together a full site with multiple preloaders loading content into a main swf. with a navaigation mc using event handlers to call and load the swf’s. You even added the codes to cancel or reset the loaders. What I’m missing is a
    few little pieces to make it all work. I’m trying an event listener that will listen for a mouseclick from the nav mc clip that will call the animate out event in the loaded content movie clip. it animates in using this method and figured it could animate the loaded content out and remove itself then load the preloader. such code could also include the cancel function if a user clicked a different link before the content loaded. Is there an example I could see or be shown I’m very close to getting it I believe.

    Terry on September 5th, 2008 at 11:24 pm