There are various ways to structure your Flash application. One way that I like is to keep the main application download small, but load all additional content on-demand as the application requires it. This approach is nice because it frees your users from the burden of having to download your entire application initially even if only a small subsection will actually be used.

In this particular tutorial, I will show you how to create a small application that loads an external image and displays a preloader while the image is being downloaded. The following is an example of what you will create:

[ click the green Refresh icon to see the pre-loader in action again ]

The basic structure of the application is taken from the Loading an External Image tutorial. What you will do is extend the application from that tutorial by adding a preloader. Let's get started!

Downloading the Starter Application

Because the focus of this tutorial is to add a preloader, I am going to provide you with a small sample application that already has the code for loading an image provided for you. Download the following Flash CS5 source file and extract its contents to a location on disk:

Don't worry. You will still have to make the modifications to support displaying a preloader yourself. I am just saving you some time, but if you want to learn how to load an external image, do check out the Loading an External Image tutorial tutorial I posted earlier.

Once you have extracted the files, open both loadingimage_tutorial.fla and MainDocument.as in Flash CS5:

[ both your FLA and AS file should be open ]

Go ahead and switch into the loadingimage_tutorial file. This file is pretty empty. All it contains is two layers, and the loadingArea layer contains an empty movie clip called loadArea:

[ your empty movie clip is called loadArea ]

This movie clip is where your image will be loaded into once it has fully downloaded. That's all there is to this file.

The loadingimage_tutorial file has its document class associated with MainDocument, so let's jump on over to that ActionScript file. Once you have that file displayed, you will see the following code:

import flash.display.MovieClip;
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.display.Loader;
import flash.net.URLRequest;
public class MainDocument extends MovieClip
{
  private var imageLoader:Loader;
  public function MainDocument()
  {
  LoadImage("stuff.jpg");
  }
  public function LoadImage(url:String):void
  {
  myPreloader.visible = true;
  // Set properties on my Loader object
  imageLoader = new Loader();
  imageLoader.load(new URLRequest(url));
  imageLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, ImageLoading);
  imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, ImageLoaded);
  }
  private function ImageLoaded(e:Event):void
  {
  myPreloader.visible = false;
  // Load Image
  loadArea.addChild(imageLoader);
  }
  private function ImageLoading(e:ProgressEvent):void
  {
  // Use it to get current download progress
  // Hint: You could tie the values to a preloader :)
  }
}

This code is lifted almost in its entirety from the Loading an External Image tutorial, so I will not describe it in any great detail here. The only thing to note is the line where I specify where to display our downloaded image:

loadArea.addChild(imageLoader);

I am loading our image into the empty loadArea movie clip, which as you saw earlier, lives in our FLA file. Ok, this wraps up what you have to work with.

In the next section, let's go ahead and add our preloader and make everything work.

---

In the previous section, you got an overview of the project you will be modifying to add a preloader to. In this page, let's make it happen.

Adding the Preloader

The first thing we are going to do is add the preloader. There several ways to do this. One way is by creating your own preloader as shown in the Creating a Preloader and Progress Bar tutorial . Another way is by using a Flash Component that simulates progress just like a preloader would. We are taking the second (and easier) route and use a component instead.

Go ahead and make sure your loadingimage_tutorial file is displayed. What we want to do is insert the ProgressBar component to simulate our preloader. First, let's specify which layer it will go into. In your timeline, select the progressBar layer by clicking on it:

[ we want our preloader to live in the progressBar layer ]

Next, go ahead and launch the Components panel by clicking the Components icon in your Properties panel or by going to Window | Components:

[ components work...magically ]

In your Components panel, find the ProgressBar component and drag/drop it onto your artboard. Your component will look as follows once it has been dropped:

[ drag/drop the ProgressBar component into your artboard ]

Select your newly inserted ProgressBar component. It is time to make some property changes on it. First, let's give it a name. Call this preloaderBar, and make sure the Name field in the Properties panel reflects that:

[ give your component the name preloaderBar ]

By giving your component a name, you make it easier for us to reference it via code. Related to making things easier through code,  the final property to change is mode. You can find the mode property somewhere in the Component Parameters category:

[ your component's properties are displayed in the Component Parameters category ]

Change the value of the mode property from the default value of event to manual:

[ set the mode property's value to manual ]

This change allows us to control the progress displayed in the progress bar through code. You will see shortly how it all comes together. Go ahead and Save your changes by pressing Ctrl + S or by going to File | Save.

Adding the Code

You've added your ProgressBar component to simulate your preloader and made some changes so that this component plays will with your code. All that is left is to add the code to make it all work.

Go ahead and switch over to the MainDocument file. We are going to add our one line of code to the ImageLoading function that is triggered each time data is downloaded:

private function ImageLoading(e:ProgressEvent):void
{
  // Use it to get current download progress
  // Hint: You could tie the values to a preloader :)
}

Let's replace the commented line of code with the following:

private function ImageLoading(e:ProgressEvent):void
{
  preloaderBar.setProgress(e.bytesLoaded, e.bytesTotal);
}

This one line calls the setProgress function that lives in our ProgressBar instance - which we all lovingly refer to as the preloaderBar. The setProgress function takes two arguments. The first argument sets the current progress. The second argument sets the total the progress is measured against. Dividing the first argument's values and the second argument's values will give us the percentage we need to show how much progress was made.

For our case, the two values are specified in our ProgressEvent object e's bytesLoaded and bytesTotal properties. The bytesLoaded property tells you how much has been downloaded, and the bytesTotal property tells you how many bytes there are in total to download. Dividing those two values gives you a nice percentage.

Testing the Preloader

When you press Ctrl + Enter to test your preloader, your image will probably just load by default. Press Ctrl + Enter again or go to View | Simulate Download to run your application again while simulating how everything works when viewed over a network connection. If you did not know about about this feature, be sure to read the Simulating Bandwidth article. This feature will change your life.

Hiding the Preloader

Currently, the preloader is displayed at all times. We only want the preloader to display when an image is being loaded, and we want the preloader to disappear when the image has fully loaded. This means we'll need to add one line to the LoadImage and ImageLoaded functions to toggle the preloader's visiblity.

The two lines you need to add are highlighted in yellow below:

import flash.display.MovieClip;
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.display.Loader;
import flash.net.URLRequest;
public class MainDocument extends MovieClip
{
  private var imageLoader:Loader;
  public function MainDocument()
  {
  LoadImage("stuff.jpg");
  }
  public function LoadImage(url:String):void
  {
  myPreloader.visible = true;
  // Set properties on my Loader object
  imageLoader = new Loader();
  imageLoader.load(new URLRequest(url));
  imageLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, ImageLoading);
  imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, ImageLoaded);
  }
  private function ImageLoaded(e:Event):void
  {
  myPreloader.visible = false;
  // Load Image
  loadArea.addChild(imageLoader);
  }
  private function ImageLoading(e:ProgressEvent):void
  {
  // Use it to get current download progress
  // Hint: You could tie the values to a preloader :)
  myPreloader.setProgress(e.bytesLoaded, e.bytesTotal);
  }
}

Once you add these two lines, your preloader will only appear at the appropriate time. Win!

Conclusion

So, there you have it. You learned how to add a preloader that displays when you are loading external content and disappears once the content has been downloaded. While the external content being downloaded was an image in this tutorial, the approach described in this tutorial will work with all kinds of external data.

The reason it will work is that in AS3, downloading external content follows a very similar format where you will always have a function for initiating the download, an event for downloading the content, and an event that gets fired when the content has fully downloaded. You just need to add the appropriate one line of code in the right location to have everything work.

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇