Modern Preloader with ActionScript 3

In 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