Simple Bar Preloader Tutorial

Setting up the visual framework

Before you can show your visitors that something is happening while your Flash movie loads, you need a clean, scalable bar and a text label that updates with the percentage. The entire look should be minimal, because any distraction will undermine the effect of the preloader. Follow these steps and the bar will appear sharp and responsive.

1. Create a container movie clip. In the Library, choose New Symbol, set the type to Movie Clip, and give it a name that reflects its purpose - something like preloader. This clip will hold every part of the bar and the text field.

2. Draw the outline. Inside the preloader clip, switch to the drawing layer and create a long rectangle that will serve as the bar's border. Use a solid fill of a light color and set the stroke weight to one pixel. A hairline outline keeps the edges crisp when the clip scales.

3. Align the outline to the registration point. Select the rectangle, open the Align panel, and hit the “To Stage” button. The registration point of the preloader clip is the center of the stage area. Click “Align Left Edge” and then “Align Top Edge” so the rectangle’s top‑left corner sits flush against the registration point. This ensures that any scaling of the bar will happen from the left side.

4. Convert the rectangle into a reusable symbol. With the rectangle still selected, open the Insert menu and choose “Convert to Symbol” (or press F8). Name the new symbol outline and set its type to Movie Clip. Once confirmed, open the Properties panel and rename the instance to outline. This step makes it easier to adjust the border later without affecting the rest of the clip.

5. Add the fill. Inside the same preloader clip, draw a second rectangle that matches the size of the outline. This one should have a darker fill and no stroke. Convert this shape to a symbol, name it fill, and make the instance name fill. After converting, open the Align panel again and place the fill so that its top‑left corner lines up exactly with the outline’s corner. To keep the two symbols tidy, move the outline to its own layer and the fill to another layer.

6. Insert a dynamic text field. Create a new layer above the graphics layers and use the Text tool to drop a dynamic text field onto the stage. Open the Properties panel, set the variable name to txt, and type “100%” into the field. This placeholder ensures the text box is wide enough for the longest percentage you’ll display. Align the text field to sit neatly centered over the bar; you can use the Align panel to center it horizontally and vertically. Adjust the font size until the text fits comfortably within the bar’s bounds.

Once you’ve finished these steps, preview the preloader on its own. You should see a single line of crosshairs - one for the registration point of the preloader clip, and one for the registration point of the fill clip. If you see two sets of crosshairs, return to the Align steps and double‑check that every element sits correctly relative to its container.

At this point the visual skeleton is complete. The next phase involves turning the bar into a live indicator that reflects the actual loading progress of your movie.

Implementing the preloader script

With the visual assets in place, you can attach code directly to the fill movie clip. Open the Actions panel, confirm that the mode is set to Object Actions (not Frame Actions), and paste the following code. Each line has a purpose, and together they control the entire loading process.

onClipEvent(load) {
    _root.stop();
}

When the load event fires - right after Flash starts reading the SWF - this snippet stops the main timeline. The _root reference points to the topmost timeline, so calling stop() prevents any other content from playing until the loader signals it’s ready.

onClipEvent(enterFrame) {

The enterFrame event runs once per frame of the movie’s frame rate. If your movie plays at 18 frames per second, the code inside will execute 18 times every second. This regular cadence is perfect for polling the loading status.

Inside the enterFrame block, first calculate the total file size and how much has already arrived:

var totalk = _root.getBytesTotal() / 1024;
var loadedk = _root.getBytesLoaded() / 1024;

Flash reports file sizes in bytes; dividing by 1024 converts them to kilobytes, making the math easier to read and compare. The getBytesTotal() function returns the entire file size, while getBytesLoaded() reports what has been received so far.

Next, compute the percentage loaded:

var percent = Math.round(loadedk / totalk * 100);

Multiplying by 100 turns the fraction into a percentage. The Math.round() call ensures the displayed number is an integer, avoiding flicker caused by rapid fractional changes. The percent variable now holds a value between 0 and 100.

With the percentage in hand, update the bar’s width and the text label:

fill.scaleX = percent / 100;
txt.text = percent + "%";

Setting scaleX on the fill instance scales the rectangle horizontally. Because the registration point of fill lies at its left side, the bar will extend from left to right, matching the percentage. Updating txt.text instantly reflects the new number on screen.

Finally, determine when the loading is complete and resume the main timeline:

if (loadedk >= totalk) {
    _root.play();
    removeEventListener("enterFrame", enterFrame);
}

When the loaded amount meets or exceeds the total, the preloader knows the SWF is fully downloaded. It then calls _root.play() to jump the entire movie forward to its first frame, allowing all other content to run. Removing the enterFrame listener stops the polling loop, conserving resources.

The full script looks like this:

onClipEvent(load) {
    _root.stop();
}
onClipEvent(enterFrame) {
    var totalk = _root.getBytesTotal() / 1024;
    var loadedk = _root.getBytesLoaded() / 1024;
    var percent = Math.round(loadedk / totalk * 100);
    fill.scaleX = percent / 100;
    txt.text = percent + "%";
    if (loadedk >= totalk) {
        _root.play();
        removeEventListener("enterFrame", enterFrame);
    }
}

This code is concise, but it covers everything you need. It pulls the loading metrics, updates the UI in real time, and hands control back to the rest of your movie. The variables are all scoped locally to the fill clip, preventing accidental interference with other parts of the timeline.

Test the script by placing the preloader clip on a new timeline, then adding any other content on the main timeline after it. When you play the movie, the preloader should stay frozen until the SWF finishes loading, at which point it will reveal the next frame. Observe the percentage values rising from 0% to 100% smoothly. If the numbers jump or the bar stalls, double‑check the frame rate and ensure the stop() call is correctly positioned.

With the script verified, the preloader is now fully functional and ready for deployment in a larger project.

Embedding the preloader in your project

Integrating the preloader is as simple as dropping the preloader movie clip onto the first frame of your main timeline. This ensures that the loading logic starts immediately, even before any other assets are decoded. Drag the preloader symbol from the Library into the first frame, place it on the stage, and make it the only visible element at that moment.

When you package your final SWF, remember that the preloader will be included in the same file. The code inside the fill clip checks the entire file size, so the bar’s progress accurately reflects how long the entire SWF takes to arrive. If you plan to deliver a very large movie - say, 3 megabytes or more - test the loading on a slower network to confirm that the bar reaches 100% reliably. On fast connections, the bar may fill so quickly that users see only the final percent, so choosing a clear, readable font and sufficient width for “100%” prevents the label from clipping.

To avoid a jarring jump when the main content starts, keep the preloader’s background transparent or use a solid color that matches the stage. If you prefer a subtle fade, add a simple tween that fades the entire preloader clip out once _root.play() is called. This gives a smooth transition into the first scene.

Debugging tips: open the Flash debugger, and watch the console output for any errors. A common pitfall is using Object Actions on a frame instead of a symbol, which causes the load and enterFrame events to fire on the wrong timeline. Verify that the preloader’s symbol type remains Movie Clip and that the instance names are consistent (outline and fill).

After the SWF is fully built, test on multiple browsers and devices. Although Flash support has waned on modern browsers, older setups still handle SWFs well. On legacy systems, ensure that the player version matches the SWF’s API calls; older players might not recognize getBytesTotal() if the file is very large. In those rare cases, consider adding a fallback text like “Loading...” that displays while the bar progresses.

Once satisfied, you can distribute the SWF as part of your website’s media library or embed it in an HTML page. The preloader will give users instant feedback, reducing bounce rates and improving the perceived performance of your site.

If you run into trouble or need a ready‑made example of a working preloader, feel free to reach out via the contact information below. Happy loading!