# Create an Apple Inspired Flash Preloader

##### Tutorial Details
• Platform: Flash
• Difficulty: Beginner
• Language: AS3

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.

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

listeners to check the progress and when the movie is fully loaded */

}

## Step 13: The Progress Function

private function onProgress(e:ProgressEvent):void
{
/* Here we use some local variables to make better-reading code */

var totalBytes:int = Math.round(e.target.bytesTotal / 1024);
var percent:int = (e.target.bytesTotal / e.target.bytesLoaded) * 100;

dataTextField.text = String(loadedBytes + " of " + totalBytes + "KB Loaded\n" + percent + "% Complete");
}


## Step 14: The Complete Function

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

//Here you can add a function to do something specific, I just used a trace */

}


## 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 */

}
}
}


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!

• Amar kumar

very very nice from Amar Bangalore(India)

• http://www.blog.aliefrahman.web.id aliefrahman

cool…

very nice…finally

• http://www.niallohara.net niall

source file does not work. I cant open it. The pure action script version looks great but how do i get it to work….

• ALEX

Hi. I followed the tutorial step by step, but in the end, it isn’t working as a loader it just loops the animation. When I test it with the Simulate Download option it will load the page without showing anything and then it shows the preloader looping once the page is loaded. It doesn’t work. What am I missing? Can’t really tell.

• Leo

ARg so simple! I ended up drawing all the rectangles and alpha tweens in AS… 100 lines of code for a simple preloader component that spins..

• John

I need help when i try test movie the two things flash between each other. Like the preloader and my content will just keep swaping if u know what i mean?

• http://pinkid@grazitti.com designer

its kool

I mean can we make this if yes so what is the coding for it.

• George

Hi,

Can anyone please tell me how do i link this file to an external swf please ?

• http://invisiblementevisible.logspot.com Vero

Esta buenisimo el tutorial!!!!!

Saludos =)

• http://www.jordanachaves.com.br Jordana Chaves

I did not use flash to do my site, I only used fireworks and dreamweaver, it is possibel to have a preloader in a site like mine? Thank you very much!

• http://www.webdesigners-hub.com vijendra

wow guys great job … its really nice to have this kind of work…

• Boris

Hi there,

Nice tutorial. Just 1 question: How can i go back to the main class when the loading is done.

@ the ”
//Do something”
i would want a link to a function on the main class.

thanks

• Nimche

In Step 13 – Progress
code should be like this in line 7:

var percent:int = (e.target.bytesLoaded / e.target.bytesTotal * 100);

Basically Loaded should be devided by Total x 100 to get the right percentage, unless you want your percent to goes backward.

You should creat the second frame with your stuff and then make a new layer with actionscript command stop();
then in the preloader where it says put your stuff there, write this code to
gotoAndStop(2);

Goodluck

• Carlos Zambrano

Hey thanks for your help. maybe you can help me with somethink, i dont know why i can see from the begining the preloader, im only see it after 30% Tahnks

• http://audioplayerinformer.com B.Sloan

It looks very good, and by the way, most tutorials for preloaders are videos, so nice with a written tutorial for once

It is a good one, useally i need a video to help me with stuff but this was made well, i can tell that time was put into it.

really good tut :)

• kagui

God sent!

• serg

Thanx from Russia, man;)

• sukumar

wow its cool man

• http://www.bloggertemplateplace.com BTP

Cool…….

• Heinz

Woww DankeShön Lan :D

• kiran

i am using flash cs3 proffesinal this souce say unexpeted file format

• viaria

try to do it from beginning, it is already simple

• Pingback: mac風プリローダー | web製作勉強日記

• Pingback: uberVU - social comments

• Mohan

Hi, Awesome tutorial man…

Is there anyway that I can create this preloader in Flash 8… as m having Flash 8… :(

Plz Help ASAP I wanna make a flash intro for a company where they want a good preloader… n I think this preloader is the perfect one which I was looking for.

• Pingback: 15个Apple设计风格代码指南 | 知更鸟

• Stas.Za

Something went wrong ! Does anybody met this error:
1046: Type was not found or was not a compile-time constant: TextField.

• NArd Dianela

how to put it in a flash website?

• ChaosInc

to utilize in a website you go to the 2nd line in the timeline on the main layer, and hit f9 , enter the following code inthe actionscript pane without the quotes …. “stop()”
then simply start making new layers and make your website . the layers that hold your site info will need to start on frame 3 in your timeline . *Note* the preloader as it stands here will NOT update the percent loaded or the kilobytes of kilobytes remaining bit as the guy who designed this cut and pasted a scripts and didnt edit them to work here, so the loading info will be static.

what is second line in the time line in the main???

• Graham

Error #1056: Cannot create property __id0_ on classes.Main.

When called from another swf..

Any ideas?

• JC

This script is the highest.

However, how should I do for the script that calls other swf movies?

• http://www.techyminds.in Bobn

Wow ! thats nice , i just used it in my project. Thanks dude

• Chris

I think it’s very cool, but for the percentage counter to work, I suggest it is (e.target.bytesLoaded / e.target.bytesTotal) * 100. This way we can have a decimal which can then be multiplied by 100.

• Dennis

This preloader may be great but it really annoys me and all of us intermediate level users of Flash, when it’s not explained just how it intergrates into our Flash application. Please redo and get it right.