A preloader is a simple animation that is played while the rest of a movie is being downloaded. The animation is made attractive to keep the viewer occupied—especially if the size of the swf. file is substantial.
There are various kinds of preloaders: from simple ones, showing just the loaded percentage, to sophisticated ones, entertaining the viewer with interesting animations.
Because preloaders are a part of the main movie, they should be as small as possible in terms of the file size. That's because the preloader itself needs to be downloaded prior to the rest of the movie.
In this tutorial, I will show you how to create a very simple yet useful preloader.
|
|
Let's begin!
i. Create a new Flash document, 400x500, 30 fps.
ii. Insert 2 layers: one for actions, the other—for the rest of the stuff. Also, create 3 or 4 frames on both layers. To insert frames, just select a given frame and press F5.
iii. Create key frames on the first frame and last frame.
iv. Select the first key frame and press F9. An Actionscript window should pop up. Copy and Paste "stop();" there. Do the same operation with the last key frame.
v. Label the last frame "loaded".
|
vi. Now, this is an odd part of the tutorial. At this point, we have to put something on the last frame that will take a moment to load. This "something" has to be rather substantial in size. Say, around 100kb. Of course, there is no point to do anything like that in normal circumstances :-)
Below you can see how your Timeline should look now
vii. On the first frame of the "stuff" layer, put a textfield using the Text Tool (T). Also, type "percent" in the "Var:" textfield, as shown in the below image.
|
viii. Now, convert the textfield into a symbol (press F9). Call it "loader_mc" or something similar to that. The most important actions will take place inside the very symbol.
|
ix. Double-click on the symbol to get inside it. Once inside, create 2 new layers: "labels", "actions". Name the original layer "objects".
x. Make sure the textfield we have just created is on the "objects" layer.
xi. Next, create another textfield right next to the original one. Double-click on it and type percentage sign into the textfield.
|
The loading bar
Alright, it's time to fix up the loading bar! It's an important component of our preloader, since it shows the progress of downloading. However, it's not a necessary step—you can skip it. After all, your preloader can be limited to showing the precentage loaded only.
xii. First off, create an empty symbol named "bar". Inside the symbol, draw an empty rectangle (to do that keep the fill option off).
You should now have something that might resemble the image below:
|
xiii. Add another layer above the one you were working on. Then, select the Rectangle Tool again, and draw another rectangle, this time without borders, leaving fill only.
Have you got it? If so, now create a small rectangle within the borders of the previous one, place it somewhere on the left, as shown in the image.
|
xiv. The last layer we have to create is the one for Actionscipt. So, insert a new layer, and type "stop();" on its first key frame. A small letter "a" should appear on the key frame if you have done it correctly.
|
Let us now reflect on what we have done and what else we need to do.
Our objective is to create a bar that gets longer as the download progresses. We are going to use a Shape Tween to achieve this effect. How exactly? Read on to find out.
xv. First, insert exactly 100 frames on all 3 layers that we currently have. On the 100th frame, select the rectangle and—most likely by means of stretching—fill the other rectangle with it. This is how the progress bar will look when downloading the movie is complete.
OK, now right-click anywhere between the 1st and 100th frame of the timeline bearing the rectangle that you have just stretched, and go to "Create Motion Tween", and then change the tween type to "Shape".
|
If the area between the two key frames—the starting and ending key frame—is light green, everything went perfectly OK.
|
If you have done everything according to my instructions, testing the symbol within which we worked will give an output similar to this one:
|
This is the end part one of this tutorial. On the next page, we are going to add Actionscript to our preloader so that it works the way it is supposed to.
