Creating a preloader for your Flash site using the image of a bottle and a rectangular mask - part 2

You will now see how to create the outline for the bottle and add some dummy content to your preloader, just to be able to see if it works correctly.

Drawing the outline for the bottle

19. Make a new layer and call it outline.

20. Select the Line tool (N). Go to the Properties inspector and select hairline as line type (1).

Next, click on the small colored square (2). In the color palette window that will show up, choose black as color - its hex code is #000000 (3). Lower its alpha to 60% (4).

Pure opaque black would be too much of a contrast here. By lowering its alpha (transparency), you make it blend in much better with the overall look of the preloader.

21. Click somewhere near the left bottom part of the bottle - close to it but not inside it, and start dragging upwards. Zoom in if necessary to work more easily and to be more precise.

In case that your line is snapping to some nearby point, just turn off the Snap to objects option. It is the little magnet icon found at the bottom end of the Tools panel . You will be able to draw freely once you have turned it off.

Once you have reached the upper curve of the bottle, release your mouse button. You should have a nice line following the left side of the bottle drawn.

22. Turn on snapping to objects again (remember the little magnet icon), so that you can continue drawing from the last point. Zoom in again. Do the following (the sequence is clearly shown in the image below):

1. Using the Line tool (N), bring your mouse near the end of the line that you have drawn previously.
2. Click and start dragging - the new line will automatically begin at the end of the previous one.
3. Draw a line that goes to the point where the curve of the bottle ends.
4. Choose the Selection tool (V) and bring the cursor somewhere near the middle of the new line. A small curve will appear near the arrow, indicating that this line can be turned into a curve now (see the middle image below).
5. Click and start dragging up and to the left - once you have obtained a good, smooth curve that follows the outline of the bottle, release the mouse button.

You can continue drawing the outline by using the Line and Selection tools, or you can do it with the Pen tool (P). To see a good explanation on the use of the Pen tool, check out the first page of my tutorial on making a camera focus change effect in Flash, steps 11 through 20.

You can stop once that you have drawn half of the outline. Since the bottle in the image is almost symmetrical on its vertical axis, this is sufficient. Just add the curve at the bottom, and you should have a result similar to the onw shown below:

23. Flash offers you numerous ways of doing the same thing in a different manner. So, instead of drawing the complete outline, do the following (the numbers in the list are the same ones on the image below):

1. Select the half of the outline you have drawn so far, using the Selection tool (V).
2. Press Ctrl+C to copy it, then press Ctrl+Shift+V to paste it in place. The new copy of the vector outline will be placed exactly on top of the original. Don't click anywhere, otherwise this new copy will merge with the original. Instead, just hold Shift and press the right arrow key to move the outline to the right.
3. While the outline copy is still selected, select Modify > Transform > Flip Horizontal to make a mirror image of it.
4. Select the Selection tool (V), bring your mouse close to the right outline's top point, click and start moving it until you reach the left half. A small circle will appear, indicating that the two halves are ready to snap into place, becoming one. To do this, you must have the Snap to objects option turned on, of course.

If you are not completely satisified with the merging of the two outlines, use the Selection tool to tweak them where necessary, until it looks good. Also, move the right part of the outline (while it is selected) with the left and right arrow keys until it fits nicely.

Top of page

Adding content to the Flash document to test the preloader

24. Lock the outline layer. Create a new layer and call it site content.

25. Right-click on frame 10 of this new layer and select Insert Keyframe from the contextual menu that will appear.

The content of the site has to come after the first frame in your movie. Why, you may ask? Well, if you place it in the first frame, your web site visitors will see a blank screen instead of the preloader which will indicate that your Flash movie is loading. You will stop your movie from playing via ActionScript later, and thus the preloader will load instantly or in a few seconds (depending on the speed of your visitors' Internet connection). After all, this is the only purpose of the preloader: to show your users that your site isn't dead or malfunctioning, but that they just have to wait a little bit.

26. Select File > Import > Import to Stage (shortcut key: Ctrl+R). Browse your computer and find an image (JPG, GIF or PNG) that has about 100 KB. Select it and click Open. The little circle in the second keyframe you just inserted a few moments before has become black, meaning that some content is present here.

This image that you have inserted inside your Flash document serves for testing purposes only - to see if the preloader works as it should. If you have real content ready you can put it inside, but I recommend that you test your preloader first, and if everything works out fine, replace the dummy content with real one.

Top of page

Adding the ActionScript code that powers the preloader

27. Lock the site content layer. Make a new layer above it and call it actions. Click on its first keyframe to select it for ActionScript input. Actually, this is the layer's only keyframe, all the other ones are simple frames.

You may have noticed that the duration of the actions layer is the same as the one of the site content layer. This is perfectly normal - when you add a new layer in Flash, it has as many frames as the "longest" layer created before it.

28. Select Window > Actions (shortcut key: F9). The Actions panel will show up. Enter the following ActionScript code inside it:

stop();
rectMask_mc._height = 1;
this.onEnterFrame = function():Void {
var loadedData:Number = this.getBytesLoaded();
var allData:Number = this.getBytesTotal();
var percent:Number = Math.round(loadedData/allData*100);
rectMask_mc._yscale = percent;
if (loadedData >= allData) {
gotoAndStop(10);
delete this.onEnterFrame;
}
};

29. Test your movie. You should see the image appear instantly. This is because you are testing your movie locally, meaning on your computer and not on the Web. To see how it would load over the Web, still in the test movie window, select View > Simulate Download. You should now see the movie loading progressively, as it will on the Web.

If you want to select a certain download simulation speed, go to View > Download Settings. You have various options there, ranging from a stone-age 14.4 K modem speed, up to fast broadband connections. Select the standard 56K modem speed to see how a user having that kind of connection would experience your site loading.

During the first two seconds probably nothing will appear because the first frame of this movie weighs about 8 KB. If you are making a full-fledged Flash site that takes some time to load, it is meant for users with a fast link to the Internet, in which case they won't have to wait, because the preloader will appear immediately. If you want to implement this preloader to a site that is built, among others, for users with slower connections, you should lower the quality of the image that is slowly appearing, because lowering its quality (during export in Photoshop or Fireworks) cuts down on its file size.

The size of the first frame of your movie (in kilobytes) is important, because if it is too big, the wait for the preloader alone to appear will take some time, which is bad. Users may just click the back button on their browsers and never come again, thinking your web site isn't alive at all. How can you check how much kilobytes does the first frame of your SWF movie weigh? Easy. While in test movie mode, select View > Bandwidth Profiler. You will see the following graph appear:

The column in the graph marked with 1 is the first frame of your movie. Every frame has its own column, which shows its particular size in kilobytes (KB). The first one weighs 8 KB. This is mostly because of the file size of the image, which weighs around 7 KB. That's why you have to lower the weight of the image if you want the preloader to appear more quickly. Both the ActionScript code and the vector outline you drew weigh no more then 1 KB.

The last keyframe weighs the most, with its size being about 100 KB. Depending on the file size of the image that you have imported in your movie to simulate some content, your column for frame 10 will differ from the one shown above. Every other frame between the first and last ones weighs zero kilobytes, because they are all completely empty.

To understand how the code for this preloader works and to download the source file for it, please proceed to the third page of this tutorial.