A preloader is a usually simple animation that is played during the rest of a file is being downloaded. An animation is made attractive to keep a viewer occupied, especially when the size of a swf file is substantial.
There are various kinds of preloaders; from simple forms showing a loaded percentage to sophisticated animations. However, because preloaders are a part of the main movie, they should be as small as possible in terms of file size since 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 simple yet useful preloader.
|
|
Ready?
1. Create a new Flash document.
2. Insert 2 layers, one for actions, the other for the rest of the stuff. Plus, create 3-4 frames on both layers. Inserting frames can be done by selecting a given frame and pressing F5.
3. Insert keyframes on the first frame and on the last one.
4. Put a stop(); on the first and the last frame.
5. Label the last frame loaded.
|
6. Now put anything you want on the last frame. By anything I mean a file that is at least several kilobytes big, it can be a image or a movieclip, basically anything that will take a moment to load. The main timeline should look similar to this image:
|
7. On the first frame of the stuff layer, put a textfield and type percent in the Var field.
|
8. Convert it into a symbol. Call it loader_mc or something approximate because the main actions will be made inside the very symbol.
|
9. Double-click on the symbol to get inside it. Once inside go ahead and create 3 layers: labels, actions, objects.
10. Make sure the textfield we've created is on the object layer.
11. Now, create yet another textfield right next to the previous one, changing it's value to a percentage sign.
|
Loading bar
It's the turn for a loading bar, a bar which will show the progress of downloading. It's not a necessary step - you can skip it. After all, your preloader can be limited to showing a percentage only.
12. First off, create an empty symbol named bar. Draw an empty rectangle inside it (keep the fill option off). You should now have something that might resemble the image below:
|
13. Add another layer above the one you were working on, choose the rectangle tool once again, and draw another rectangle, this time deselect the stroke option, leaving the fill. Have you got it? Now create a small rectangle within the borders of the previous one, place it somewhere on the left, as shown in the image.
|
14. The last layer you should create is one for Actionscipt. So go ahead and insert a new layer, and put stop() on it's first frame.
|
Now let's reflect on what we have and what we need: our aim is to create a bar that gets longer as the download progresses. So, we need an animation that has all the 100 possible options (from 1% to 100%), how to achieve that? The shape tween comes to the rescue. Here's precisely how:
15. Insert exactly 100 frames in all 3 layers, on the frame one hundredselect the rectangle, and fill the other rectangle with it. Once you're done with that, right-click the timeline bearing the rectangle that you just stretched. Choose the first option which says "Create Motion Tween" and change the tween type to "shape".
|
|
If everything is done correctly, testing the symbol you worked in will give a similar output to this:
|
On the next page, we're going to add some Actionscript to our preloader.
