Recipe 16.1. Loading External SWFImage Content

Recipe 16.1. Loading External SWF/Image Content

Problem

You want to load an external .swf or .jpg file into your Flash application during runtime.

Solution

Use the Macromedia v2 Loader component.

Alternatively, for a smaller file size, use the custom Flash 8 Cookbook Loader component.

For the smallest file size, use the MovieClipLoader ActionScript solution.

Discussion

In Flash, you'll find an included Loader component that facilitates loading external content without you having to delve into ActionScript. You can find the Loader component in the User Interface section of the Components panel. To use the Loader component:

Drag an instance of the Loader component from the Components panel to the stage, and name the component instance in the Property inspector. (You are not required to name the component instance for it to work, but doing so is a good practice, and facilitates using the instance in conjunction with other types of components such as the ProgressBar.)
Make sure the new Loader instance is selected, and locate the component instance's parameter settings. You can opt to change the parameter settings either in the Parameters tab of the Property inspector or within the Component Inspector panel. In the case of the Loader component, the Component Inspector panel gives you superfluous parameter settings that you won't likely have any reason to use, so the only practical difference between using the Property inspector or the Component Inspector panel is that of which one you prefer.
Leave the autoLoad parameter set to true. If you set the value to false, the Loader will not load the content until triggered by ActionScript, and that is not a way in which you are likely to use the Loader component. If you want to use Action-Script, it's advisable to use an entirely ActionScript-based solution rather than using the Loader component.
Set the contentPath parameter value to the URL that points to the content you want to load. The URL can be either absolute or relative. For example, if you want to load a JPG from another domain, you should use the absolute URL, such as http://www.rightactionscript.com/samplefiles/image1.jpg. On the other hand, if you want to load something from the same computer as that from which the Flash application is being served, you can specify a relative URL, such as image.jpg.
Set the scaleContent parameter value based on the type of scaling behavior you want. If you want the content to maintain its original dimensions regardless of the width and height of the Loader component instance, then set scaleContent to false. If you want the loaded content to scale to fit within the width and height of the Loader component instance, set scaleContent to true.
If you set scaleContent to true, resize the Loader component instance to the dimensions within which you want the content to scale. Flash will maintain the original aspect ratio of the content, so the scaled content will not always match the exact dimensions of the Loader component instance. For example, if you set the Loader instance's dimensions to 100 x 100 pixels, and the content's original dimensions are 200 x 100 pixels, the scaled content will have dimensions of 100 x 50 pixels. If the aspect ratios of the content and the Loader component instance don't match, the scaled content will center itself within the dimensions of the Loader instance.

One of the issues that you may notice with the Macromedia Loader component is that it alone adds 27KB to an .swf file's size. Depending on the type of project on which you are working, 27KB may or may not be an unacceptable file size increase just for the convenient means of loading external content. If a 27KB increase is not acceptable for your project, then don't worry. There are other options.

You can use an alternative Loader component from the Flash 8 Cookbook component set (downloadable from http://www.rightactionscript.com/fcb). After you've downloaded the component, follow the directions in the Preface to install it. When you've successfully installed the component, you'll find it in the Components panel in the FlashCookbook section. You can use the FlashCookbook Loader component in any situation in which you would use the Macromedia Loader component. And they have the same settings. The primary differences are that the Flash Cookbook Loader aligns the loaded content to the upper left and it only adds 3KB to an .swf file instead of 27KB.

If you are particularly interested in loading external content without the overhead of any component, you can do so using ActionScript. The MovieClipLoader class provides a convenient API (application programming interfacethe properties and methods of the class) for loading content and monitoring the load progress. One of the benefits of using MovieClipLoader is that you can load content completely programmatically without having to rely on a component. Thus your application needn't be bogged down with the overhead of either of the Loader components previously mentioned. The process involved in working with MovieClipLoader is not particularly complicated, but there are two steps, and various options are available. The first step is to create the movie clip object into which the content should be loaded. For reasons that are beyond the scope of this book, it is advisable that should you want to load image content, you create a movie clip nested within another movie clip into which you can load the content. For simplicity, we'll provide the same instructions for both scenarios. Adding a nested movie clip is unnecessary when loading SWF content, but it will not hurt anything.

Additionally, you have the option of creating the movie clips as symbols in the library that you add to the stage at authoring time, or you can create the movie clips programmatically. The latter has the benefit of being fully scripted, and thus facilitates much more dynamic applications, but in many simple cases it is not a necessity.

To create an authoring time movie clip for loading content, complete the following steps:

Create a new movie clip symbol in the library. You can give the symbol a name you choose, but a suggested name is Empty Nested Loading Clip. Select the upper-left corner as the registration point.
Create another new movie clip symbol in the library. A suggested name for this second movie clip symbol is Loading Clip. Select the upper-left corner as the registration point.
Add an instance of Empty Nested Loading Clip (the first movie clip symbol) to Loading Clip (the second movie clip symbol). Make sure that the instance is aligned to 0,0.
Name the instance of Empty Nested Loading Clip that you just created, using the Property inspector. Give it an instance name of mContent.
Add an instance of Loading Clip to the stage at the point in the timeline where you will be issuing the ActionScript statements to load the content.
Give the object an instance name using the Property inspector. You can name the instance as you want, but for the purposes of this example we'll use the instance name mHolder.

If you want to load content with a solution that is entirely ActionScript-based, create a movie clip programmatically. To create a programmatic movie clip for loading content, add the following ActionScript code to the keyframe at which you will be issuing the statements to load the content:

 this.createEmptyMovieClip("mHolder", this.getNextHighestDepth());  this.mHolder.createEmptyMovieClip("mContent", this.mHolder.getNextHighestDepth());

After you've created the movie clipeither at authoring time or by programmatic meansyou have completed the first part. The second part involves a few lines of ActionScript code that instruct Flash to then load the content into the movie clip you created in the first part.

Complete the following steps in order to load content into your Flash application using the MovieClipLoader class:

Select the keyframe on the timeline at which point you want to initiate the loading of the content and open the Actions panel to add ActionScript code. If you created the movie clip from part one programmatically, make sure you move the cursor to the line following that code. You'll want to ensure that the code to load the content comes after the code that creates the movie clip.

Add the following code (making sure to replace URLToContent with the URL to the content you want to load):

 var mlLoader:MovieClipLoader = new MovieClipLoader(); mlLoader.loadClip("URLToContent", this.mHolder.mContent);

The second parameter for the loadClip( ) method is a reference to the movie clip into which you want to load the content. If you named the movie clip instances differently from the examples given in the first part of the recipe, you will need to change the reference in the parameter accordingly.