Preloaders are something that most online flash work will require, as you never know what speed connection any particular visitor will have when visiting your site! In this tutorial I will show you the basic code for a preloader with no fancy graphics (i’ll save that for a future tutorial to create some funky preloaders).
STEP 1
First off, create a new actionscript 2 file, set the framerate to 30 and rename the first layer ‘loader’. Create two new layers, one called actions the other called frames.
Now we will create our preloader ‘graphic’. I use this term loosely, as my graphic in this example is just text!
Select the ‘loader’ layer and draw a text box on stage. Set the font size to about 20, colour to whatever takes your fancy! Type in the word ‘loading’. Select this text box and press f8 to convert to symbol, select movieclip and call it MC_preloader. Double click the movieclip to enter it’s timeline.
Create a new keyframe on frames 2,3 & 4 of the timeline. On frame 2 select the text box and add a full stop to the end of ‘loading’. On frame 3 add another, and a third on frame 4. This will be the basic loading animation for this example.
STEP 2
Return to the main timeline. Select frame 15 on all three layers and press f5 to enter frames, this will give you some space to work with. Add a new keyframe to frame 5 and 15 of the frames layer. Apply a frame label of ‘loop’ to frame 5 on this layer, and ‘complete’ on frame 15 of this layer. (If you are not sure how to do this please read the Frame Labels tutorial). Now we need to add the actionscript to make our pre-loader work.
STEP 3
Put new keyframes on frames 5 & 10 of the actions layer. Select frame 5 on the actions layer and add the following code:
percent = Math.floor(_root.getBytesLoaded()/ getBytesTotal()*100);
This declares the variable ‘percent’ which we will use later on. Math.floor is used at the start of the calculation to return a whole number, as opposed to a decimal. To work out the percentage, we need to take the amount of the file loaded, ( _root.getBytesLoaded() ) divide this by the total file size ( /_root.getBytesTotal() ) then multiply by 100 ( *100 )to return the percentage.
STEP 4
Now we have the variable ‘percent’ we need to put this into action. Select frame 10 on the actions layer and enter the following code:
if (percent == 100){
gotoAndPlay("complete");
}else{
gotoAndPlay("loop");
}
This is basically saying if the percent variable is equal to 100, skip to the frame labelled ‘complete’. This is the frame you would then put/start your movie / image / file on. The next line says if percent is not equal to 100, then go back to the frame called loop and play again. This will continue to loop until percent has reached 100!
Hit CTRL + Enter to watch your preloader in action. Remember you will not see anything happen unless you simulate a download, and of course have something for the flash to load!
Any questions, let me know! I will add another tutorial shortly to show some funky graphics, timebars and other things you can do with your preloaders.
The Dude
Did this tutorial help you? If so, click the bookmark button, stumble me, add me to your twitter and tell your friends! Alternatively, sign up and leave a comment!
Not what you were looking for? Then leave a comment or email me and we’ll get you the tutorials you need.
Did this post help you? If so help us continue to grow and Digg this page or Share on Twitter!
If you haven't already, sign up to our RSS feed or register to recieve updates direct to your email!
You could pass the percent to a textfield:
var percent:Number = Math.floor(_root.getBytesLoaded()/ _root.getBytesTotal()*100);
percent_txt.text = percent+”%”;
So you could have an animation and know how much you have to wait.
Indeed you could, thanks for the comment Fausto :).
This is something I will cover in the more advanced pre-loaders tutorial coming soon, so stay tuned!
Dude… I’m sending a comment because I’ve been quite frustrated in trying to learn how to build a very simple preloader, and now I finally can do it thanks to your tutorial. One would think that examples of this would abound, but most of them are either much less clear, or considerably more complicated. My thanks to you for making this easier for me!
Could this be adapted to load an external swf file into a ocntainer using menu buttons?
Finally something new for me to learn and I am already subscribed. You can contact me if you need to.
i have used a lot of templates and what not in the past (some of which on my site), and i have found tutorials such as this a massive help.
I have some more advanced questions that i would appreciate your knowledge with if you wouldn’t mind contacting me by email
Great tutorial - although I tried putting a simple image tween in the completed frame in the frames layer and it never seems to load.
Am I doing something wrong?
Im very new to flash so any help would be great if you wouldn’t mind dropping me an email.
Cheers.
Hi,
I have create a loader by following your tutorial & paste my movie clip on ‘complete’ frame also but it is continuously blinking
Loader after my movie clip after Loader….
How can I stop this & playing properly
Please help me.
Thanks
Prashsnt