5.4 Using ImageViewer in a Movie

Now that our ImageViewer class is ready for testing, let's see how to actually use it in a Flash movie! We'll start by obtaining an image file to load, as follows :

1. Find a (nonprogressive format) JPEG image on your system. If you work in an office, ensure that the content of the JPEG you choose is appropriate for the office environment. If you can't find a JPEG image, download one with the completed ImageViewer example posted at http:// moock .org/eas2/examples.

2. Name the JPEG image picture.jpg and place it in the same folder as the ImageViewer.as file you created earlier.

Next we'll create a Flash document ( .fla file) from which we'll publish a Flash movie ( .swf file) containing an instance of our ImageViewer class. For now, we'll place the .fla file, .as file, .swf file, and .jpg file all in the same folder, making it easy for each file to access the other files.

When a .fla file and a class file (i.e., an .as file with a class definition) reside in the same directory, code in the .fla file can refer to the class in the .as file directly by name. Hence, the easiest way to use an ActionScript 2.0 class is to place its .as file in the same folder as the .fla file that uses it. The class will automatically be included in the .swf exported from the .fla (unless the .fla file does not reference the class at all). Unlike ActionScript 1.0, no #include statement is required to incorporate an ActionScript 2.0 class into a .fla file.

When reusing classes across many projects, class files should be stored centrally in a location accessible to each project. In Chapter 9 and Chapter 14, we'll learn how to structure larger projects that reuse classes.

Now let's create the Flash document that uses the ImageViewer class. Follow these steps:

1. In the Flash authoring tool, choose File New.

2. Use File Save As to save the Flash document as imageViewer.fla in the same folder as the ImageViewer.as file. (By convention, we name .fla files starting with a lowercase letter. The .fla file's name need not match the case of the class. Usually, a .fla file makes use of multiple classes and its name has no relation to the class names or .as filenames.)

3. In imageViewer.fla 's main timeline, rename Layer 1 to scripts (we'll place all our code on the scripts layer).

We're now ready to use the ImageViewer class from within imageViewer.fla . Follow these steps to instantiate ImageViewer on frame 1 of imageViewer.fla 's main timeline:

1. Use Window Development Panels Actions (F9) to open the Actions panel.

2. Select frame 1 in imageViewer.fla 's main timeline.

3. Into the Actions panel, enter the following code:

    var viewer:ImageViewer = new ImageViewer(this, 1); viewer.loadImage("picture.jpg"); 

   
   

Notice that the ImageViewer class is globally available and can be referred to directly by name from any code on any frame, button, or movie clip in imageViewer.fla . In fact, if the exported imageViewer.swf loads another .swf file, that loaded .swf can also access the ImageViewer class. However, if that loaded .swf file also contains a class by the name ImageViewer , the loaded .swf 's version will not overwrite the imageViewer.swf version. For more information on using classes at runtime across multiple .swf files, see Chapter 14.

Through the magic of the Flash compiler, ActionScript 2.0 classes are literally defined on _global , in the style of ActionScript 1.0 classes. To prove it, after defining our ImageViewer class , we can execute:

 trace(typeof _global.ImageViewer); 

which displays "function" in the Output panel. For details, see "ActionScript 1.0 and 2.0 in Flash Player 6 and 7" in Chapter 1.

Once an ActionScript 2.0 class of a given name is defined, it cannot be redefined by another ActionScript 2.0 class definition. The only way to change a class definition at runtime is to directly overwrite the corresponding global variable, as in:

 // Replacing the   ImageViewer   class definition  // with a string disables the   ImageViewer   class. _global.ImageViewer = "Goodbye ImageViewer, nice knowing you."; 

Using an analogous technique, an ActionScript 2.0 class can be overwritten by an ActionScript 1.0 class as follows:

 _global.ImageViewer = function ( ) {   // ActionScript 1.0 constructor function body goes here } 

Finally, the moment we've been waiting for! Let's export our imageViewer.swf file and test it in Flash's Test Movie mode, as follows:

1. Choose Control Test Movie. The .swf file should play, and your image should load and appear.

2. When you're finished marveling at your work, choose File Close to return to the imageViewer.fla file.

How the Compiler Exports SWF Files

When you export a .swf file, the ActionScript 2.0 compiler makes a list of all the classes that the .swf requires. Specifically, the list of required classes includes all classes referenced by the .swf 's source .fla file and all classes that are referenced within those classes. (In our case, the list of required classes is simply ImageViewer .) The compiler then searches the filesystem for the corresponding source .as files and compiles each source file into the .swf , in the form of bytecode that the Flash Player can understand. By default, the compiler searches for .as files in the directory that contains the .fla file, but it will also search any directories that are listed by the developer in the so-called document classpath or global classpath (we'll cover classpaths in Chapter 9). Class files that exist on the filesystem but are not required by the .swf are not compiled into the .swf . And classes that are required but not found cause a compile-time error.

You can export imageViewer.swf for playback in a web browser using the File Publish command. However, if you have Flash Player 6 installed in your browser, you'll notice that the picture.jpg file doesn't load.

Even though ActionScript 2.0 is compiled to the same bytecode as ActionScript 1.0 and nearly 100% of ActionScript 2.0 constructs are supported by Flash Player 6, .swf files must be exported in Flash Player 6 format to work properly in Flash Player 6. See Chapter 1.

To change imageViewer.fla 's export settings to support playback in Flash Player 6, follow these steps:

1. Choose File Publish Settings.

2. On the Flash tab of the Publish Settings dialog box, select Flash Player 6 as the Version option.

3. Click OK.

Once the version is set to Flash Player 6, any .swf file exported from imageViewer.fla (via File Publish, Control Test Movie, or File Export Export Movie) will work in Flash Player 6. ActionScript 2.0 is not supported in Flash Player 5 or older, no matter what the format of the .swf file.

5.4.1 Preloading the ImageViewer Class

Wasn't it great to see the ImageViewer class in action? But there's a minor problem. Right now the ImageViewer class is so tiny you'll hardly notice it loading. However, if it were, say, 50 KB or 100 KB, you'd notice a delay when loading it over a slow connection. By default, all classes load before frame 1 is displayed, causing a delay before a movie can start. If the load time is long enough, a movie will appear broken or hung. Most individual classes won't be large, but in some applications the total size of all classes will exceed 100 KB. Fortunately, Flash lets us specify precisely when a movie's classes are loaded.

Let's change our imageViewer.fla file so that the classes it uses aren't loaded until frame 10:

1. Choose File Publish Settings.

2. In the Publish Settings dialog box, on the Flash tab, next to the ActionScript Version, click Settings.

3. In the ActionScript Settings dialog box, for Export Frame for Classes, enter 10 .

4. Click OK to confirm the ActionScript Settings.

5. Click OK to confirm the Publish Settings.

Now let's add a very basic preloader to our imageViewer.fla file so load progress is reported while the ImageViewer class loads. When loading is complete, we'll advance the playhead to frame 15 where we'll instantiate ImageViewer (as we previously did on frame 1).

First, we'll make the timeline 15 frames long, as follows:

1. In the main timeline of imageViewer.fla , select frame 15 of the scripts layer.

2. Choose Insert Timeline Keyframe (F6).

Next, we'll add a labels layer with two frame labels, loading and main . The labels designate the application's loading state and startup point, respectively.

1. Choose Insert Timeline Layer.

2. At frames 4 and 15 of the labels layer, add a new keyframe (using Insert Timeline Keyframe).

3. With frame 4 of the labels layer selected, in the Properties panel, under Frame, change <Frame Label> to loading .

4. With frame 15 of the labels layer selected, in the Properties panel, under Frame, change <Frame Label> to main .

Now we'll add the preloader script to the scripts layer:

1. At frame 5 of the scripts layer, add a new keyframe (using Insert timeline Keyframe).

2. 
   

Next, we'll move the code that creates our ImageViewer instance from frame 1 to frame 15 of the scripts layer:

1. Select frame 1 of the scripts layer.

2. In the Actions panel, cut (delete using Ctrl-X or Cmd-X) the following code from frame 1:

    var viewer:ImageViewer = new ImageViewer(this, 1); viewer.loadImage("picture.jpg"); 

   
   

3. With frame 15 of the scripts layer selected, paste (using Ctrl-V or Cmd-V) the code you deleted in Step 2 into the Actions panel.

Finally, we'll add a loading message that displays while the ImageViewer class loads:

1. With frame 1 of the scripts layer selected, enter the following code into the Actions panel:

    this.createTextField("loadmsg_txt", 0, 200, 200, 0, 0); loadmsg_txt.autoSize = true; loadmsg_txt.text = "Loading...Please wait."; 

   
   

2. With frame 15 of the scripts layer selected, enter the following code at the end of the Actions panel (after the code entered in Step 2 of the previous procedure):

    loadmsg_txt.removeTextField( ); 

   
   

That's it! Test your movie using Control Test Movie. Once in Test Movie mode, you can watch a simulated download of your movie by enabling the Bandwidth Profiler (View Bandwidth Profiler) and then choosing View Simulate Download. Because our class is so small, you may have to select a very slow download speed to see the preloading message. To change the download speed, choose View Download Settings.