Create an Apple Inspired Flash Preloader

Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Activetuts+. This tutorial was first published in July, 2009.

Preloaders are a must have in your Flash applications. They tell the user that the program is running but can't show any contents until they're sufficiently loaded. In this tutorial I'll help you create an Apple inspired preloader MovieClip and teach you how to display some loading information. All this using Flash and ActionScript 3.0.

Final Result Preview

Let's take a look at the final result we'll be working towards:

Step 1: Brief Overview

We're going to create a preloader MovieClip using Flash tools such as the Rectangle Primitive Tool and something very important to get the correct alignment: the Snap To Objects option. The clip will have its movement in the timeline and we'll build the code in two classes. The first class will take care of the preloader and the other will be the Document Class, where we'll start the preloader.

Step 2: Starting

Open Flash and create a new Flash File (ActionScript 3).

Set the stage size to your desired dimensions and add a background color. I've used 600 x 300px in size and added a gray radial gradient (#666666, #333333).

Step 3: Creating the Basic Shape

This preloader is composed of one simple shape which is repeated 12 times.

Select the Rectangle Primitive Tool and set the corner radius to 15, make sure to lock the corner radius control so every corner is equally rounded.

Set the color to white and and draw a 25 x 85px rectangle, don't use a stroke.

That's it, this is the basic shape that will be the main part of our preloader.

Step 4: Positioning the Shapes

Use the Align panel to set the previously created shape in the top-center of the stage.

Duplicate the shape (Cmd + D) and align it to bottom-center.

Duplicate both shapes and then go to Modify > Transform > Rotate 90º.

Here comes the tricky part, select the Free Transform Tool and make sure you've selected the Snap To Objects option (this is the magnet icon in the toolbar or you can go to View > Snapping > Snap to Objects). Start rotating the top and bottom shapes, you'll notice that the rotation stops at every determined angle, we'll use two stops to separate the shapes from each other, ending into something like this:

Step 5: Changing the Alpha

We'll change the shapes' alpha property to get the "follow" effect we're after. There are 12 shapes, that's a little more than 8 but to avoid the use of decimals we'll set 9 in 8 multiples and the for last 3 we'll add 10. This gives us alpha values of 8, 16, 24...72, 80, 90, 100. Take a look at the image to get the idea.

Step 6: Animating

Convert all the shapes into a single MovieClip and name it "Preloader". Check the Export for Actionscript checkbox and write "classes.Preloader" in the class textfield. Double-click the clip to get access to its Timeline. The animation process is very simple; add a new Keyframe and rotate the shapes until the 100% alpha shape is in position where the 8% alpha shape was. Repeat this until you get the full animation. The frames should be in this order:

Since the animation is timeline based, the speed will depend on the Frames per Second of your movie, mine is 25fps and I've used 2 frames per state.

Step 7: Choosing the Size

Our preloader is 300 x 300px in size, normally it wouldn't be so large, but it's good to have the option. Choose an appropiate size for your preloader and center it on the stage. I chose 48 x 48px.

Step 8: Loading Information

Create a Dynamic Textfield and give it the instance name "info". This will display the total KB to load, the amount currently loaded and the percent that it represents. Write some text to get an idea of the size it will use and center it.

Step 9: Creating the Preloader Class

Create a new ActionScript file and start importing the required classes:

package classes
{
	import flash.display.MovieClip;
	import flash.text.TextField;
	import flash.events.Event;
	import flash.events.ProgressEvent;

Step 10: Extending the Class

public class Preloader extends MovieClip
{

Since our preloader is a MovieClip and it's using a timeline, we're going to extend this class using the MovieClip class.

Step 11: Variables

We only need to use one variable in this class. This variable will store the instance name of the textfield we're using to show the loading information.

private var dataTextField:TextField;

Step 12: Start Function

public function start(dataTextField:TextField):void
{
	this.dataTextField = dataTextField; //Sets the dataTextField var to the parameter value

	/* 	The loaderInfo Object is in charge of the loading process, in this code we add
	   	listeners to check the progress and when the movie is fully loaded */
       
		this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
    	this.loaderInfo.addEventListener(Event.COMPLETE, onComplete);
        
}

Step 13: The Progress Function

private function onProgress(e:ProgressEvent):void
{
	/* Here we use some local variables to make better-reading code */
	
	var loadedBytes:int = Math.round(e.target.bytesLoaded  / 1024);
	var totalBytes:int = Math.round(e.target.bytesTotal / 1024);
	var percent:int = (e.target.bytesTotal / e.target.bytesLoaded) * 100;

	/* Sets the loading data to the textfield */
			
	dataTextField.text = String(loadedBytes + " of " + totalBytes + "KB Loaded\n" + percent + "% Complete");
}

Step 14: The Complete Function

private function onComplete(e:Event):void
{
	/* Remove listeners */

	this.loaderInfo.removeEventListener(ProgressEvent.PROGRESS, onProgress);
	this.loaderInfo.removeEventListener(Event.COMPLETE, onComplete);

	//Here you can add a function to do something specific, I just used a trace */
	
	trace("Loaded!");
}

Step 15: Document Class

Create a new ActionScript file and start writing:

package classes
{
	import flash.display.MovieClip;
	
	public class Main extends MovieClip
	{
		public function Main():void
		{
			/* Starts the preloader, "preloader" is the instance name of the clip */

			preloader.start(info);
		} 
	}
}

This code will be the document class, so go back to the .Fla file and add "classes.Main" to the class textfield in the properties panel.

Conclusion

You can always change the color of the preloader to use it with differents backgrounds, an easy way to do that is to change the Tint value in the properties of the clip, try it!

Thanks for reading, feel free to leave comments and questions.