1 The simplest way to load an image is to use the Loader class. Three short lines will do it. The variable photo is set to an instance of Loader. The Loader.load() method is invoked on the photo instance, with a URLRequest instance provided as the parameter. If you wanted to, you could certainly create a separate variable just for the URLRequest instance and pass in that instead, but it’s shorter to drop the new URLRequest() expression inside the parentheses of the load() method. The quoted string is the name (and path, if needed) of a JPG file. Finally, invoke the addChild() method and pass it the photo instance in order to actually display the loaded image. Without that third line, the image will load, but you’d never see it.

2 The addChild() line happens to give you some leeway. For example, create an empty movie clip and drag an instance of it to the stage. Position it at 50 pixels in and 50 pixels down from the upper-left corner of the movie. Give this movie clip the instance name holder, and change that last line to holder. addChild(photo). This time, the image loads into the empty movie clip, which means you can easily position it where you like.

3 If you want to change the scale of the imported image, or manipulate it in any other way, you’ll have to wait until its fully loaded before you do. An event handler makes this easy. Handling Loader class event handlers is a bit different from previous examples in this chapter. Instead of applying addEventListener() directly to the Loader instance, you have to apply it, instead, to the contentLoaderInfo property of that instance. After that, it’s business as usual. Here we’re listening for an Event.COMPLETE event and adjusting the scaleX and scaleY properties of the holder movie clip to 45%. Again, this only works because the adjustment occurs after the image has loaded.

4 If you want to display load progress while an image loads, it’s easy to do with the ProgressBar Component. Instead of the Loader class, we’ll let the UILoader Component take over loading duties, which means you can also drop the holder movie clip. Starting with a new document, drag an instance of the UILoader Component to the stage and give it the instance name photo. Create a new layer and drag an instance of the ProgressBar Component to the new layer. Give it the instance name progressBar. Select the progressBar instance and flip to the Parameters tab of the Property Inspector. Set the source parameter to photo. This associates the loading mechanism of the UILoader Component instance, photo, with the visual display of the progress bar.

5 Create a third layer, name it scripts, and type the following ActionScript (top, right). Pretty familiar, huh? This line is identical to the corresponding line from the Loader example. The UILoader Component makes things a bit easier for you in that it turns the earlier three lines into one line of code. At this point, you’re set, but you’ll probably want the progress bar to disappear after its work is done. You can take care of this with an event handler (bottom, right).

6 You can test and simulate your movie by going to Control > Test Movie or using Ctrl + Enter on your keyboard. A new window containing your compiled SWF will open. Go to View > Bandwith Profiler to show a graph of the downloading performance. Go to View > Download Settings to select the bandwidth profile you wish to test with. Once you’ve made your selection, go to View > Simulate Download to emulate how fast your image will most likely load under these conditions. Keep in mind Flash can only estimate typical Internet performance and not exact modem speeds.