Modern Preloader with ActionScript 3
March 10, 2009 by: smonteIn this tutorial I will show you how you can create a modern preloader with ActionScript 3. It is really easy to change the look of the preloader to fit for your needs!
Note: You need TweenMax to fully complete this tutorial.
Setting up the environment
1. Download an image that you want to load with the preloader.
2. Create a new Flash document that is the same size with your image.
3. Draw a circle without any stroke. Make it size 10×10. I used a grey fill color.
4. Convert the circle to a movie clip. Name it “PreloaderCircle” and set the registration point to the center.
5. Linkage the movie clip to a class named “PreloaderCircle“. If you are unfamiliar with movie clip linkage, please see the “ActionScript 3 External Classes” tutorial.
6. Remove the circle from the stage. We will create and position them with ActionScript 3.
Moving to ActionScript 3
7. Create a new layer for ActionScript and type the following.
//Impor TweenMax import gs.*; //We will add all the preloader circles to a holder movie clip var holder:MovieClip = new MovieClip(); //This array will contain all the preloader circles var circles:Array = new Array(); //This for loop creates and positions 5 preloader circles horizontally for (var i:uint=0; i < 5; i++) { //Create a new preloader circle var circle:PreloaderCircle = new PreloaderCircle(); //Set the x position for the circle circle.x = i * 20; //Set the "tweened" property to false since we haven't tweened the circle yet circle.tweened = false; //Add the circle to the circles array circles.push(circle); //Add the circle to the holder holder.addChild(circle); } //Add the holder to the stage addChild(holder); //Position the holder to the center of the stage var holderWidth:Number = holder.width; var holderHeight:Number = holder.height; holder.x = stage.stageWidth / 2 - holderWidth / 2; holder.y = stage.stageHeight / 2 - holderHeight / 2; //Create a loader which loads the image var loader = new Loader(); //Let's load the image. //You can use your own URL here... loader.load(new URLRequest("my_image.png")); //Listen for the loading progress loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressHandler); //This function is called as the loading progresses function progressHandler(e:ProgressEvent):void { //Check how much has been loaded (in percentages) var loadedPercentage:Number = (e.bytesLoaded / e.bytesTotal) * 100; //If over 20% is loaded, tween the first circle if it hasn't been tweened yet. if (loadedPercentage > 20 && ! circles[0].tweened) { //Tween the circle TweenMax.to(circles[0], 1, {tint:0xff8800, glowFilter:{color:0xff8800, alpha:1, blurX:10, blurY:10}}); } //If over 40% is loaded, tween the second circle if it hasn't been tweened yet. if (loadedPercentage > 40 && ! circles[1].tweened) { //Tween the circle TweenMax.to(circles[1], 1, {tint:0xff8800, glowFilter:{color:0xff8800, alpha:1, blurX:10, blurY:10}}); } //If over 60% is loaded, tween the third circle if it hasn't been tweened yet. if (loadedPercentage > 60 && ! circles[2].tweened) { //Tween the circle TweenMax.to(circles[2], 1, {tint:0xff8800, glowFilter:{color:0xff8800, alpha:1, blurX:10, blurY:10}}); } //If over 80% is loaded, tween the fourth circle if it hasn't been tweened yet. if (loadedPercentage > 80 && ! circles[3].tweened) { //Tween the circle TweenMax.to(circles[3], 1, {tint:0xff8800, glowFilter:{color:0xff8800, alpha:1, blurX:10, blurY:10}}); } //If 100% is loaded, tween the fifth circle if it hasnn't been tweened yet. if (loadedPercentage == 100 && ! circles[4].tweened) { //Tween the circle and call the function circlesTweened() when the tween is complete (this is the last circle). TweenMax.to(circles[4], 1, {tint:0xff8800, glowFilter:{color:0xff8800, alpha:1, blurX:10, blurY:10}, onComplete: circlesTweened}); } } //This function is called when the cirlces have been tweened (the image is loaded) function circlesTweened():void { //Loop through the circles for (var i = 0; i < circles.length; i++) { //Tween the circles to the left side of the stage. //Call the function circleLeft() when the tween is finished TweenMax.to(circles[i], 0.5, {delay: i * 0.1, x: -200, alpha: 0, onComplete: circleLeft, onCompleteParams: [circles[i]]}); } } //This function is called when a circle is animated to the left side. function circleLeft(circle:PreloaderCircle):void { //Remove the circle from the stage holder.removeChild(circle); //Check if the circle is the last one (most right) if (circle == circles[4]) { //Remove the holder from the stage removeChild(holder); //Get the bitmap from the loader var bm:Bitmap = (Bitmap)(loader.content); //Add the bitmap to a movie clip holder var bmHolder:MovieClip = new MovieClip(); bmHolder.addChild(bm); //Add the bitmap holder to the stage addChild(bmHolder); //Animate the bitmap holder TweenMax.from(bmHolder, 1, {alpha: 0}); } }
8. You are done, test your movie! I hope you enjoyed this tutorial and learned something new from it 
Related tutorials:
Comments
17 Responses to “Modern Preloader with ActionScript 3”Leave a Reply
You must be logged in to post a comment.
its works … and perfect tutorial
Thanks for the tutorial, really well done.
Could you explain to me how to use it with SWF. If I jusk link it I got an error.
Thanks for help
It works Perfectly when i play the swf file, but when i put it online i get…
Error #2044: Unhandled IOErrorEvent:. text=Error #2035: URL Not Found.
Any Ideas?
hi smonte.. i need some help.. i change the number of circles to 5 and made the edits to the codings as well..however, i want to change the distance between each of the circles..can i ask, how do i do it? u can reply to my email if you want.. thanks alot in advance!
How do I get the preloader to jump to a section on my timeline, rather than just load an image?
I solved it myself, I just changed it so that it loads another swf.
hello,
how did you change to upload a swf?
Nice tutorial !
Well explained !
____________________
Saguenay-IT, (IT Outsourcing, SOA, PHP, ASP, Flex, ActionScript, JavaScript…)
I really like the way you loaded the content into a movieclip, really good technique.
There is no “PreloaderCircle.as” file. And when we don’t create that file, Flash will create that on runtime. So delete the class if you made it, just do the linkage.
thanks for reply Smonte! It looks like half my post didnt show up here.. Anyways, I did do step 5, but Ive never done linkage before.. The thing is that I just made a constructor with nothing in it, since size and everything gets set in the stage.
Could you send me your PreloaderCircle.as file if you got it?
Regards, Jon
It seems like you missed step # 5 … ?
Hey.
I get the error:
1119: Access of possibly undefined property tweened through a reference with static type PreloaderCircle.
tHANKS a LOT
Nice and simple! Learned a few things, thank you!
i want to use it to preload anew flash not image ,so i replaced the name of the photo with the flash name but appear this error
1046: Type was not found or was not a compile-time constant: PreloaderCircle.
function circleLeft(circle:PreloaderCircle):void {
???
Thanks for this tutorial, learnt new ways to use tweenings. (I’m poorly skilled with arrays, and examples help a lot !)
-Kemipso
[Hey, btw, it's really simple and cool looking.]