Flash Explained

Learn Flash easily.

Making the complete internal preloader in Flash 8, with a loading bar and mathematical preloaders – part 1 of 3

October 14th, 2008 | Author: Luka | Category: Preloaders

In this tutorial, you will see how easy it is to create an internal preloader for your Flash site, complete with:

  • A graphical loading bar,
  • An animated text field showing the percentage of your Flash movie loaded so far and,
  • A dynamic text field showing the amount of bytes loaded and total bytes.

Moreover, you are going to learn:

  • What are functions
  • What are function calls and how to implement them
  • How to display text in a dynamic text field
  • How to move a movie clip via ActionScript

You will also see how to make your preloader disappear and proceed onto the site once it has been loaded completely. The example below shows what you are going to learn to make with this tutorial (it is a rough animated representation of the real preloader you are going to create).

Creating the loading bar and the dynamic text field

1 Open a new Flash document. Call the first layer loading bar.

Giving the first layer a name.

2 Select the Rectangle tool (R) and block the Outline color. You can see a detailed explanation on how to do this in step 2 of my tutorial on making a mirror menu.

Draw a 150 by 5 pixel rectangle and center it on stage.

A thin and long rectangle on stage.

Making a rectangle with these precise dimensions can be difficult with free hand drawing, so I suggest that you adjust these values manually by entering them in the appropriate fields in the Properties panel (with the rectangle selected, of course). You'll find the width (W) and height (H) input fields in the bottom left part of the aforementioned panel.

The dimensions and stage coordinates for an object in the Properties panel.

3 Select the rectangle by clicking on it with the Selection tool (V). Select Modify > Convert to Symbol to make a movie clip out of your rectangle.

In the dialog window that appears, select Movie clip as type and call it blue loading bar. Well, you can call it anyway you like, I called it like that because I used blue as the color for the rectangle. Just don't make it white if your movie background is white too 🙂

Now, one important thing! In the registration portion of the Convert to Symbol window, click the middle left rectangle (see it on the image below). This will be the movie clip's registration point. You may click OK now.

Setting the options for a new movie clip symbol.

Why is this necessary, you may wonder? Well, the loading bar shows how much of your Flash website remains to be loaded. And it makes sense that it stretches from left to right, right?

You may eventually choose to make your loading bar stretch to both sides, or from right to left, but I will stick with the standard left-to right in this lesson.

To see what difference makes the selection of left and central registration points for a movie clip, just look at the flash example below.

4 Fine. With your newly made movie clip still selected on stage, go to the left side of the Properties panel below the scene and assign it an Instance name. Call it loadingBar.

The Instance name field in the Properties panel.

5 Lock this layer. Make a new one and call it bytes info.

Adding a second layer to the timeline.

6 Select the Text tool (T). Go to the Properties panel once again, and select the following properties for your text field:

  1. Set the type to Dynamic text (see 1 in the image below).
  2. Select _sans as font type (it should be on top of the fonts list). This means that once a visitor comes to your site, his computer will automatically select its system's default sans serif font - Arial for Windows and Helvetica for Mac.
  3. Select the central alignment for your text field (you can choose some other type of alignment, but central is nice since your text field will thus be centrally aligned with the loading bar above it).
  4. Select the Use device fonts option. Why? Simple:
    • In this way, you don't have to embed the characters in your text field (because the font will be read directly from the user's machine) and this makes your SWF smaller in filesize.
    • You're also making the first frame of your movie lighter, which is important, because you want it to load immediately. If a user sees a blank screen (suppose the first frame with your preloader is heavy with font characters and graphics)
  5. Leave the "selectable text" option turned off. Why would anyone want to select (and even copy) the text which tells how much bytes remain to be loaded?

All the properties for the dynamic text field.

7 Click and drag out a text field just below the loading bar.

Creating a text field on the stage.

Hit Esc to exit text editing mode.

8 Set the position coordinates of your text field to round numbers (see 6 in the big image above). This will make the text in the field render properly, you will avoid any blurry characters.

9 Give this field an Instance name, otherwise you won't be able to tell it what to display via ActionScript commands. Call it bytesDisplay.

The Instance name of the text field.

Lock this layer.

Top of page

Creating the text field with percentage information that is going to be animated

10 Make a new layer and call it arrow indicator.

Adding a layer for the animated textfield.

11 Draw a nice small triangle just above the loading bar's left edge. NOTE: Once you locked its layer, the dynamic text field isn't visible. But don't worry - it is still there 🙂

Adding a small triangle above the loading bar.

If you don't know how to create a precise little triangle like the one in the image above, I'll show you quickly how to do it here:

  1. Draw a borderless square with the Rectangle tool (R) by holding Shift while clicking and dragging your mouse.
  2. Rotate the square by 45 degrees with the Free Transform tool (Q).
  3. Select the Line tool (L) and draw a line from the square's left to its right point. To do this exactly from edge to edge, be sure to have the Snap to objects option turned on (the small magnet icon at the bottom of the Tools panel).
  4. By using the Selection tool (V), select the upper portion of the rectangle and hit Delete.
  5. Select the line and erase it too.

The following figure displays the sequence of these steps:

Creating a triangle out of a square in Flash.

To make life easier, draw a big square and once you have obtained the triangle, just make it smaller either with the aid of the Free Transform tool (Q) or by entering its dimensions manually in the Properties panel.

Also, be sure that the triangle is positioned on round coordinates (like you did with the text field previously) so that it renders sharply. After you did that, move it to its final position with the aid of the arrow keys on your keyboard. By doing that, you can move the triangle around and it will stay on round coordinates - the arrow keys move your objects exactly by 1 pixel at a time.

12 With the triangle still selected, press F8 (or select Modify > Convert to Symbol) to convert it to a movie clip.

Call it moving percentage field and make sure that the registration point is on its left middle side.

Converting the triangle to a movie clip symbol.

13 Double-click on the newly made movie clip on stage to enter inside it. You know that you are inside the movie clip now (working on its timeline and not the main scene) if you look above the layers.

Icons showing the timeline you are working on right now.

14 Call this layer (inside the movie clip, yes) arrow.

15 Select the triangle drawing and move it so that its bottom point is centrally aligned below the movie clip's registration point.

The line seen in the image below is the loading bar on the main scene, which is seen as faded because you entered inside the movie clip - everything on the main scene is a little bit faded, to make the distinction between these objects and the ones inside the movie clip, so don't let that confuse you.

Aligning the triangle with the movie clip registration point.

Why you must make this so? Because the percentage text field and the arrow will move as the loading bar progresses. To be able to have the arrow always placed at the loading bar's right edge, you are making these adjustements now.

16 Lock this layer. Make a new layer above it and call it text field.

Adding a layer inside the movie clip.

17 Select the Text tool (T), click and drag to create a small text field just above the triangle.

Making a new dynamic text field, this time inside the movie clip.

18 Leave all the properties for the dynamic text field the same as they were for the first one you created. Just make a small adjustement: set the alignment for the text field to left.

Setting the text alignment to left.

The left aligned text will stretch to right as the movie loads and the information changes (for example 3%, 15% and 100%), instead of stretching to both sides if it were centrally aligned. This wouldn't look so good while the movie clip is moving parallelly with the loading bar, hence this change.

19 Give this text field an Instance name: call it percentDisplay.

The Instance name to be used by ActionScript later.

20 Lock this layer. Click on the Scene 1 link above the layers to return to the main scene.

Returning to the main scene in Flash.

21 Use the arrow keys to adjust the position of the moving percentage field movie clip. Place it so that the blue triangle points at the loading bar's left edge.

The final position of the movie clip in relation to the loader bar.

22 Finally, give this movie clip an Instance name: call it percentClip.

Lock this layer.

Continue onto the second part of this lesson to see
how to insert website contents and write the ActionScript code that powers the preloader.

Top of page

Be Sociable, Share!

Comments

Submit a comment

  • bardakta m?s?r Aug 24, 2011 at 11:16 pm

    thank you 😀

  • nidia Mar 20, 2012 at 10:06 pm

    queridos amigos, la verdad he buscado ejemplos de proloader y no conseguia algo que funcionara, y ademas bien explicado..gracias por el aporte..nos vemos

  • vinu May 30, 2012 at 5:59 am

    very nice and excellent explanations and i finished it without any bugs in first try…. Thanks…

  • pratibha pawar Jun 28, 2012 at 12:09 pm

    you explained it step by step and i like this thing .

  • Rajat Gupta Aug 14, 2014 at 1:03 pm

    thanks for the step by step tutorial. kindly guide that i case i export the preloader as flash swf file, can it be used in swishmax ?

  • […] Making the complete internal preloader in Flash 8 […]

You must log in to post a comment.