Creating Animated Professional Looking Preloader Step-by-step in Flash MX 2004

a. Launch Flash MX 2004

b. Create new Flash file. Click File > New…

c. Select Flash Document in a new window

d. You need to create 2 layers and in the root of your flash movie. The first layer will serve to contain the preloader itself and must be one frame width and the second one will be used to place the movie content and it must be 2 frames width. To make thing clear we will name these layers "preloader" and "content"

e. Now let's select "Rectangle Tool"


and draw shape in the first frame of the layer named "preloader"

f. Select the shape and right click on it. In the menu select "Convert to Symbol..."

g. Now you have included movie in the "preloader" layer. Select the movie you made and press "F9" to get access to "Action" panel.


It consists of 2 windows. We need the right one to continue.
Click on the shape then copy the following code and paste it in the right window:

onClipEvent (load) {
total = _root.getBytesTotal();
}
onClipEvent (enterFrame) {
loaded = _root.getBytesLoaded();
percent = int(loaded/total*100);
text = percent+"%";
gotoAndStop(percent);
if (loaded == total) {
_root.gotoAndPlay(2);
  }
}

h. Now select the "preloader" layer (you must see that the code disappear from the right window) and type:
stop();
in the right window. If you did everything correctly you should get something like this:

i. Now double click the shape to enter the included movie in the "preloader" layer. Now you see the shape as Flash Object. Select "Rectangle Tool" and draw smaller rectangle with a color different then white inside the shape (note: the second rectangle must be within the same layer as our shape)


Now delete the second rectangle and it's border. Select you shape and you will see that now you have a shape with the rectangle hole inside. That's was the purpose of the second rectangle: to make this hole. Through this hole the progress of downloading will be displayed.

j. Now create 2 more layers. Lets call the layer with the shape: "Shape" and "Mask1" and "Mask2" the 2 new layers. (Note: the "Shape" layer must be the first layer in a Timeline!)

k. Now we need to create simple mask to show the progress of downloading. We need to create some more new frames for 3 layers we have. Select all 3 layers, right click and select "Insert Frame" option. You need to make 15 new frames like you may see on the picture.

l. Now select layer named "Mask1", then select "Rectangle Tool", set the background color to black and draw big rectangle under the main shape. Do not worry about it's appearance as it becomes invisible when we create mask effect. It must cover the hole of the main shape completely but smaller then the main shape.

m. Select layer named "Mask2" and draw one more rectangle. On the example picture we disable the big black rectangle so that you could see how the second rectangle must be made:

n. Select the last frame in the "Mask2" layer, right click and select "Insert Keyframe" to convert last frame to keyframe.

o. Select first frame of the "Mask2" layer and drag the rectangle so that it ended just before the hole starts.

p. Now select all frames of the "Mask2" layer, right click and select "Create Motion Tween" You have created the animation to show the download process.

q. Select layer named "Mask1", right click and select "Mask" option.


Now all set for preloader. Double click anywhere outside the working area to return to the root of your movie.

r. Select "content" layer, click "File --> Impotr…--> Import To Stage" and insert any picture you like to be in your content movie.

s. Now select the "content" layer (you must see that the code disappear from the right window) and type
stop();
The Timeline must be like this now:

Click "Ctrl+Enter" to see the flash movie. Upload it and when you access it you will see the preloader you just have created! If you followed the instructions carefully you should get something like the example below (.fla version).



Now when you visitors come to your website they will be able to see how long it will take to load flash. You may use the code and change everything you like in design to match your website.

Click here to download source fla file.

About the Author: Oleg Lazarenko
Production manager of
Metamorphosis Website Design Studio -
Custom design, Website Templates,
Web design Articles and Tutorials.

You may reprint this tutorial for free as long as the content, About the Author sections and all links remain unchanged.