How to make a Flash preloader using Actionscript 3
Posted by Andrei Rinciog in Flash Tutorials, Tutorials Jul 24th, 2009 | 17 responsesHi,
This is my first post on the Extend Studio blog as I didn’t have the chance to write until now. I will try to do this more often from now on. I plan to make all my posts helpful and fun. I will post tutorials, links to interesting websites and best practices as well as a more inside look of the Extend Studio company.
We created many tutorials for our products until now and we will continue to increase our tutorial library with new additions each week. But we don’t want to stop and create tutorials for our extensions. We want to be as helpful as we can and we will begin to post various how-to-make tutorials about issues that we noticed that our customers need help with. Also, we are open for tutorial ideas and requests. You can either post them here or our forum and we will take your request into consideration.
While building this tutorial I got the idea that an easy to use pre-build preloader might be helpful if you don’t want or don’t have time to build one yourself. I’ve created a little preloader class that can be used to load your swf’s with. There are some movieclips already built that you can just drag and drop on the stage and then insert the path to your swf and the preloader class will handle the rest. If you want more details about this preloader, download its package from here. You will find a usage manual inside the package. Now, back to the tutorial.
In this tutorial I will teach you how to make a Flash preloader using Actionscript 3. The idea is that we will create a very small swf that we will use to load your main swf file using the Actionscript 3 Loader class. Because the preloader will be a very small swf, you don’t have to worry that it will take much time until the preloader itself is downloaded.
Drawing the preloader symbol
We will start the creation of our preloader with the graphical part, the preloader symbol. We will keep it simple, our preloader will be just a rectangle that will fill up as the download progresses.
- First create a new FLA AS 3 file and save it as “preloader.fla”.
- Select the rectangle tool and draw a rectangle on the stage.
- Double click on the rectangle and then press F8 on your keyboard. This will open the “Convert to symbol” panel. Give it any name you want (e.g. “preloader_mc”) and click on the ok button.
- Edit the symbol by double clicking it. Once inside symbol editing mode you need to click on frame 100 from the timeline and insert a new keyframe there by pressing F6.
- Go back to frame 1 of the timeline and select the only the fill of the rectangle. From the properties panel, give it a width of 1.
- With frame 1 still selected press F9 on your keyboard. This will open up the actions panel. Insert the code “stop();”
- Right click on one of the frames between 1 and 100 and click on “Create Shape Tween”
- This is how the timeline of your preloader symbol should look after all these steps.
Writing the script
Now that we have our preloader symbol ready let’s get back to the main stage and write some Actionscript. Now that we have our preloader symbol ready let’s get back to the main stage and write some Actionscript. Don’t worry if you’re not very familiarized with Actionscript writing, it’s a very small and simple code.
- First of all, select the symbol you’ve just created on the stage and give it an instance name, for example: “preloader”;
- Now select frame 1 and press F9 again to open the script panel;
- First of all, we will create the loader object that will load the main swf movie. To do that write:
- Add event listeners to this object that will tell you the progress of the loading progress and when it finishes
- Tell the loader instance to load your swf
- All that remains to do now is to set the functions that are called on each event:
- “progressHandler”: this function will be executed every time new bytes are downloaded until it finishes the entire movie. We will use this function to calculate the percentage loaded and increase the frame of the preloader movieclip.
- “completeHandler”: this function will be executed only when the movie has fully loaded. Now we can add that movie to the stage and remove the preloader.
You can now test the movie but don’t forget to create the loaded swf first. You’ll have to click on “View” and “Simulate download” when you export the swf locally or else the preloader won’t appear as the loading time is very small.
Thank you for following this tutorial.
There will be more to come, so stay around.
Regards,
Andrei Rinciog, Extend Studio
Facebook comments:
17 Responses to “How to make a Flash preloader using Actionscript 3”
Leave a Reply
Extend feedAbout Us
[...] View Tutorial // [...]
Hi, Im a noob, and this doesnt work for me.
I have my main .swf file, the xtdPreloader.as, and Preloader.swf in the same directory. The actionscript in the Preloader.swf is as per above, including a ‘include xtdPreloader.as’ line.
I have included the ‘main.swf’ in the actions ‘load’ line.
When I test Preloader.swf it simply loops the preloader movieclip, and doesnt go to the main movie. Why is that?
Please help – thank you!
Hi,
Have you inserted an instance name for the preloader movieclip ?
Could you please send me an archive with your documents ? You can send to support at extendstudio.com
Regards,
thanks for this. very helpful.
have not touched code for a while. this was very clear.
Hi, I’ve got a very simple problem : there is absolutely no tutoriel for preloader that indicates how to put preloader between pages, and what’ the code for the loader to go off when we press a button to get to a page (SWF downloaded externaly)… Does someone can help me out here ? Thanks !!
This tutorial insnt working…Something is missing.
Hello guys,
I haven’t had a chance to answer until now, sorry for that.
Guillaume, the Loader class can load external swf files. I don’t understand your question exactly. If you have the pages from your website in different swf files, just load them using that loader instance. When the swf is loaded, the preloader will be removed from the stage automatically. But, please explain the question better.
Sapecato, please tell me where you got stuck.
Regards,
Hello Andrei,
thanks for your nice answer. I understand you don’t understand : I’m just so new to AS3 that I don’t know exactly how to use the loader instance. I can’t find the code that’s going to put a loader instance on my page, call the different swf files and then disappear. Maybe you know a nice tutorial for that… I couldn’t find any…
Thanks a lot !
guillaume
and then : how can I put the bar (or any mc for that matter), on the foreground, because mc tend to get behind all my layers, and therefore invisible….
Silly question but have you tested this?
Can you provide a zip so we can see it working because if I add double quotes around the URLRequest to load my swf I get the following error:
ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller.
at flash.display::DisplayObjectContainer/removeChild()
at preloader_fla::MainTimeline/completeHandler()
Hello,
Yes, I’ve tested it
.
If you follow the steps from the textfield on the stage you won’t get any errors (I just double checked). And you don’t need to add double quotes to the path, actually its better not to as I’m taking the whole text from that field as a string.
Are you sure that this error is not from the loaded swf? If you do stage operations or try to access a parent it might send an error when you load it into another swf. Try with a basic and simple swf file and see if it works.
Regards,
Andrei Rinciog
Hi,
your tutorial works great but I dont know how to insert the URL of the seperate swf file ( loader.load(new URLRequest()); ) Ive tried typing in the full location on my computer, Ive put the swf file in the same folder as the preloader. But its just not picking it up. Could you please maybe give me an examle of how the file path url should look?
Help please, this is for a big project due soon for college
Thanks! it works like a charm…
I’d like to use a preloader on my main page to load all swfs in the site for all pages. Is there a way to use this code to load multiple swfs?
thanks,
Nancy
Hey admin, I have a small request. I was just searching for some information on the topic you wrote and found this blog. Some really cool stuff you wrote here. Can I please link to this post on my new website I am working on? It
I will check back again later to see how you responded. Thanks, Denis .
Yes you can link to this post. Your welcomed !
If someone need to have % of this loading.
Put a text under progress bar and name-it.
After add this line in progressHandler function:
pourcentage.text = String(percent) + ” %”;
Enjoy!