Now that our class is prepared for testing, let’s have a look at the right way to really use it in a Flash film! We’ll begin by acquiring a picture file to load, as follows :

  1. Discover a (nonprogressive format) JPEG picture in your system. If you happen to work in an workplace, make sure that the content material of the JPEG you select is suitable for the workplace atmosphere. If you cannot discover a JPEG picture, obtain one with the finished instance posted at http:// moock .org/eas2/examples.

  2. Title the JPEG picture image.jpg and place it in the identical folder because the file you created earlier.

Subsequent we’ll create a Flash doc ( .fla file) from which we’ll publish a Flash film ( .swf file) containing an occasion of our class. For now, we’ll place the .fla file, .as file, .swf file, and .jpg file all in the identical folder, making it straightforward for every file to entry the opposite information.

When a .fla file and a category file (i.e., an .as file with a category definition) reside in the identical listing, code within the .fla file can confer with the category within the .as file instantly by title. Therefore, the best means to make use of an ActionScript 2.0 class is to position its .as file in the identical folder because the .fla file that makes use of it. The category will mechanically be included within the .swf exported from the .fla (except the .fla file doesn’t reference the category in any respect). In contrast to ActionScript 1.0, no #embrace assertion is required to include an ActionScript 2.0 class right into a .fla file.

When reusing courses throughout many initiatives, class information ought to be saved centrally in a location accessible to every mission. In Chapter 9 and Chapter 14, we’ll discover ways to construction bigger initiatives that reuse courses.

Now let’s create the Flash doc that makes use of the class. Observe these steps:

  1. Within the Flash authoring device, select File New.

  2. Save As to save the Flash document as imageViewer.fla in the same folder as the 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 to scripts (we’ll place all our code on the layer).

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

  1. Use Window Improvement 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("image.jpg"); 

Notice that the 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 class. However, if that loaded .swf file also contains a class by the name , 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.

figs/as1note.gif 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 , we can execute:

 trace(typeof _global.ImageViewer); 

which displays “perform” in the Output panel. For details, see “ActionScript 1.0 and a couple of.0 in Flash Participant 6 and seven” 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    class definition  // with a string disables the    class. _global.ImageViewer = "Goodbye ImageViewer, good realizing 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 .) 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 or (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 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, Management Take a look at Film, 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 class in action? But there’s a minor problem. Right now the 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 class loads. When loading is complete, we’ll advance the playhead to frame 15 where we’ll instantiate (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 layer.

  2. Choose Insert Timeline Keyframe (F6).

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

  1. Select Insert Timeline Layer.

  2. Timeline Keyframe).

  3. With body 4 of the layer chosen, within the Properties panel, underneath Body, change <Body Label> to loading .

  4. With body 15 of the layer chosen, within the Properties panel, underneath Body, change <Body Label> to foremost .

Now we’ll add the preloader script to the layer:

  1. At body 5 of the layer, add a brand new keyframe (utilizing Insert timeline Keyframe).

  2. Select frame 1 of the layer.

  3. 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("image.jpg"); 

  4. With frame 15 of the 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 class loads:

  1. With frame 1 of the 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 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 Obtain Settings.

See also  ATI Catalyst™ Software Suite Version 7.4

Leave a Reply

Your email address will not be published.