Displaying a Preloader for External Content - Pg. 1

by kirupa  |  5 October 2010

  Have questions? Discuss this Flash / ActionScript tutorial with others on the forums.

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:

Get Adobe Flash player

[ 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 page, let's go ahead and add our preloader and make everything work.

Onwards to the next page!


1 | 2




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.