Page 1. Loading Files

Before we learn how to control external clips and videos, we must be sure we understand a couple of issues about loading files. Here is the basic syntax to load the file "clip1.swf" located in the same directory as the file containing the script below:

 

// Loading an external swf file (in a not-entirely-useful way)

 

var thisRequest:URLRequest = new URLRequest("clip1.swf");

var thisLoader:Loader = new Loader();

thisLoader.load(thisRequest);

stage.addChild(thisLoader);

 

You will see the behavior shown below, which is exactly what you would see if you looked at "clip1.swf" itself since we added nothing else to our managing fla file.

Since "clip1.swf" is a timeline-based animation with no additional AcrionScript, it plays in a loop as soon as it is loaded, so it makes sense that we should want the managing file to control it. Perhaps we would like it to show up now and not play until a button is pressed, for example. It seems simple enough to add the following lines to the code above:

 

thisLoader.stop();

 

However, if you add this line and test your movie again, you will get an error message like "1061: Call to a possibly undefined method stop through a reference with static type flash.display:Loader." The message is complaining that by using the stop method, we are treating thisLoader as if it is a movie clip. We know in our heart this is true, but the compiler has no idea, so we take care of this by type-casting thisLoader.content as a MovieClip. So we change our additional line to say

 

MovieClip(thisLoader.content).stop();

 

and now we get the entirely different (runtime) error message, "TypeError: Error #1009: Cannot access a property or method of a null object reference." Hooray? This message is quite a bit more mysterious until you realize something fundamental about loading files with ActionScript. Your ActionScript code does not wait for a load command to "finish" before continuing to the next line of your script. Even though it takes only a blink of the eye for Flash to load the "clip1.swf" file, it takes only a milliblink to move on and try to execute the next line MovieClip(thisLoader.content).stop(); which makes no sense since thisLoader is still null when this line is executed.

The solution is applicable to many situations where an external file is loaded and then immediately accessed (like XML data files, for example). We need to postpone access to the external object until the load is complete.

Waiting until loading is complete

The code below fixes the problem. (Notice that to streamline the code a bit we delete the thisRequest variable and simply pass the URLRequest directly to the load method of thisLoader.) To wait until loading is complete, we simply have the contentLoaderInfo property of our Loader listen for the INIT event. This event signals that the loaded file is "Initialized" and hence ready to be used. There is also a "COMPLETE" event which is more appropriate when loading external data files. See the help files for the Loader class for more information.

Note that when the loaded swf file is INITialized, we cast it as a MovieClip, add the MovieClip to the stage, and tell the MovieClip to stop. If you test this movie, it will function as loading a clip that then is told not to run. This seems pretty pointless. In order to add additional controls, we have made thisMovieClip a global variable so we can reference it later.

 

// Part I -- Loading an external swf file and casting it as a useable movie clip

 

var thisMovieClip:MovieClip;

 

var thisLoader:Loader = new Loader();

thisLoader.contentLoaderInfo.addEventListener(Event.INIT, doneLoading);

 

thisLoader.load( new URLRequest("clip1.swf") );

 

function doneLoading(evt:Event):void {

thisMovieClip = MovieClip(thisLoader.content);

stage.addChild(thisMovieClip);

thisMovieClip.stop();

}

By adding a play button and a stop button from the Common Button Library and including the code below at the end of our file, we can now start and stop the loaded swf file from the main "manager" movie.

 

// Part II -- Adding additional controls

 

btnStart.addEventListener(MouseEvent.CLICK, startMotion);

 

function startMotion(evt:MouseEvent):void {

thisMovieClip.play();

}

 

btnStop.addEventListener(MouseEvent.CLICK, stopMotion);

 

function stopMotion(evt:MouseEvent):void {

thisMovieClip.stop();

}

 

The final version is shown below and is available as the file manager1.fla at the link below. Don't forget that you also must have the clip1.swf file available in the same directory.

Download

  • Flash CS3 file manager1.fla is the final functioning file shown above.
  • The Flash Player file clip1.swf is required to be in the same directory as the manager1.fla file.
  • If you want to see it, the Flash CS3 file clip1.fla contains the source code for the timeline-based (tweening) animation used in these examples. By design, clip1.fla has no ActionScript code at all.

Notes

  • This approach can be used indefinitely as long as loading and unloading movies is to be done by mouseclicks. We will illustrate this idea on the next page. A bit trickier is the ability to load and unload the external clips automatically when the one before has completed. This too is addressed on the next page.

Back to Intermediate Tutorials              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.