jump to navigation

Basics of URLLoader & Loader Class in Flash September 3, 2010

Posted by Tournas Dimitrios in Flash.

Loading external assets at runtime creates loosely coupled applications . Using such technique makes our Flash movie more efficient as you load specific files only when needed instead of embedding them regardless of whether the user ends up watching them or not. Separating our movie into distinct sections loaded at run time makes the website easier to update as you can update the external assets without going back to the main FLA. This article demonstrates the use of two Classes for loading assets at runtime :

  • URLLoader Class : This Class is responsible for loading all textual content and that include in addition to regular text files, XML, HTML, and CSS.
  • Loader Class : This Class class  lets us load external assets (such as images and Flash files) at run time onto a Flash movie.

Loading External Text in Flash Using AS3 URLLoader :

The first step in loading an external file is to create it! Loading an external file is dead easy as long as both the external file and the Flash movie that calls it reside on the same server. To make it even much simpler and not care about the actual URL, we are going to place both the text file and the Flash movie in same folder.

Create a new folder to host all the files to be used in this project. Create in this folder a text file named myText, type any text in this text file and then save it.

We are going to start coding right away

var myTextLoader:URLLoader = new URLLoader();

myTextLoader.addEventListener(Event.COMPLETE, onLoaded);

function onLoaded(e:Event):void {

myTextLoader.load(new URLRequest("myText.txt"));

That was a quick test just to show you how easy it is to load an external text file.  In order to use the URLLoader Class you must follow the procedure described below:

  1. Create an instance of the URLLoader Class.
  2. Use an Event Listener to know when the file finishes loading.
  3. Create the Event Listener function to take action when notified by the Event Listener.
  4. Use the .load() method to load the actual text file.

Displaying the Text in a Text Field :

A quick example on how to display the content in a text field that we create dynamically is shown below. It is the same exact procedure, but we also have (1) to create an instance of the TextField Class, (2) set its .text property once the file is loaded and finally (3) display it on the screen by adding it to the display list.If you are loading a string of text that exceeds one line you will also need to set the TextField properties .wrapText and .autoSize to make sure that you field is automatically stretched to show your entire text:

var myTextLoader:URLLoader = new URLLoader();
var myTextField_txt:TextField = new TextField();

myTextLoader.addEventListener(Event.COMPLETE, onLoaded);

function onLoaded(e:Event):void {
myTextField_txt.text = e.target.data;

myTextLoader.load(new URLRequest("myText.txt"));

Loading Variables From a Text File :

In addition to the possibility of loading a whole chunk of text in Flash from a text file, it is possible to divide up this textual content into logical pieces using variables. So for example, if you have a string of text as a title, a block of text as the body text, and a string containing a URL. You have all these in a single text file, yet have each of them stored in a variable of its own.

This can be done by using the equals sign operator = to specify the value of a variable and the ampersand sign & to identify a new variable. If you open our original text file myText, you can replace its original content with the following to see some variables in action:


So how can we retrieve these variables using ActionScript? We first need to tell the Flash Player that we are loading variables and not simple text. This is done by setting a property of the URLLoader Class called URLLoaderDataFormat. We simply set its value to URLLoaderDataFormat.VARIABLES . And instead of retrieving the entire content of the .data property of our target we drill deeper into the actual variables of the .data property which we have defined in our text file:

var myTextLoader:URLLoader = new URLLoader();

myTextLoader.addEventListener(Event.COMPLETE, onLoaded);

function onLoaded(e:Event):void {

myTextLoader.load(new URLRequest("myText.txt"));

Using the Loader Class in AS3 :

The Loader Class can be used to load a JPEG, a GIF, a PNG, or an SWF file into another Flash movie during runtime. Using the Loader Class to do this simple task is quite easy as all it requires is merely creating an instance of the class and then using its .load() method to load the external asset. Showing the asset on the screen would obviously also require using the addChild() method to it to display the list.

For a quick practical example, create a new Flash movie in ActionScript 3.0 format, save the movie somewhere on your computer, then make sure that your external asset (for example, an image named myPhoto.jpg) is located in the same folder as your FLA file. The code is :

var my_loader:Loader = new Loader();
my_loader.load(new URLRequest("myPhoto.jpg"));

The common usage of the Loader Class will require greater functionality involving tracking the downloading progress and performing specific actions when the loading progress completes. The next section will show you how to track the downloading progress of the Loader Class by using the various events available through its contentLoaderInfo.

Using the LoaderInfo Events with the Loader Class :

It is possible to track the downloading progress of an instance of the Loader Class by reacting to the various events available through a property called contentLoaderInfo. This property is basically an instance of another class called LoaderInfo which can provide information for tracking the downloading progress of any asset. The contentLoaderInfo providers several events such as Event.COMPLETE, Event.INIT, and ProgressEvent.PROGRESS. To take a specific action at any of the stages identified by these events we simply attach a listener function to take care of the job.

var my_loader:Loader = new Loader();
my_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, startListener);
my_loader.contentLoaderInfo.addEventListener(Event.INIT, initListener);
my_loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressListener);

my_loader.load(new URLRequest("myPhoto.jpg"));

function startListener (e:Event):void{
trace("Loading Completed");

function initListener (e:Event):void{
trace("Object Initialized");

function progressListener (e:ProgressEvent):void{
trace("Downloaded " + e.bytesLoaded + " out of " + e.bytesTotal + " bytes");

Another property that is not really related to events but worth talking about. It is the .content property which refers directly to the externally loaded asset. This asset is to be used when you need to pass a command to an SWF file that you have loaded as you cannot pass that code to the instance of the Loader class instead:

my_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, startListener);
function startListener (e:Event):void{

Creating a simple preloader for the Loader Class using the ProgressBar Component

We can use the events and properties of the LoaderInfo to create a graphical preloader .Start off with a new Flash movie in ActionScript 3.0 format, save it in the same folder as your image (name the image “myPhoto.jpg”). We must have graphical instances of the components we need in our library to be able to use them in ActionScript. Go back to the Flash movie and drag and drop and instance of the Button Component and the ProgressBar Component onto the stage.We said that we need these in our library and not really on stage, dragging an instance to the stage once at least puts them automatically in our library (Ctrl+L), we do not need them anymore on the stage, so just delete both of them now from the stage. We are ready to script

import fl.controls.ProgressBar;
import fl.controls.Button;

var my_loader:Loader = new Loader();

var my_btn:Button = new Button();
my_btn.label = "Load Image";
my_btn.x = 100;
my_btn.y = 200;
addChild (my_btn);

var my_pb:ProgressBar = new ProgressBar();
my_pb.source = my_loader.contentLoaderInfo;
my_pb.x = 100;
my_pb.y = 200;

my_btn.addEventListener(MouseEvent.CLICK, startLoading);
function startLoading(e:MouseEvent):void{
my_loader.load(new URLRequest("myPhoto.jpg"));

my_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, finishLoading);
function finishLoading(e:Event):void{
my_pb = null;



No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s