5.3 ImageViewer Implementation (Take 1)

 <  Day Day Up  >  

Every ActionScript 2.0 class must reside in an external text file with the extension .as . Hence, the first step in authoring our ImageViewer class is to create a text file named ImageViewer.as . If you're working in Flash MX Professional 2004, you can create and edit ImageViewer.as using its external-script editor. If you're working in Flash MX 2004 (not the Professional edition), you must use a third-party text editor to create your .as text file. Even if you are using Flash MX Professional 2004, you may appreciate the additional features offered by some external editors (such as file management, syntax highlighting, and code hinting).

Popular choices are:


SciTEFlash

http://www.bomberstudios.com/sciteflash


UltraEdit

http://www.ultraedit.com


Macromedia HomeSite

http://www.macromedia.com/software/homesite


TextPad

http://www.textpad.com


PrimalScript

http://www.sapien.com

Whichever editor you're using, create a new folder on your hard drive named imageviewer . We'll place all the files for this tutorial in that folder.

To create the ImageViewer.as file using Flash MX Professional 2004, follow these steps:

  1. Choose File New.

  2. In the New Document dialog box, on the General tab, for the document Type, choose ActionScript File.

  3. Click OK. The script editor launches with an empty file.

  4. Choose File Save As.

  5. In the Save As dialog box, specify ImageViewer.as as the filename (using upper- and lowercase as shown) and save the file in the imageviewer folder you created.

Now let's put a little code into our ImageViewer.as file. We know that the name of our class is ImageViewer , so we can already sketch out a bare class skeleton. Enter the code from Example 5-1 into your script editor.

Example 5-1. The ImageViewer class skeleton
 class ImageViewer { } 

Notice that the class name, ImageViewer , and the filename, ImageViewer.as , must match exactly (apart from the .as file extension).

A class's name and the name of the external .as text file that contains the class must be identical (apart from the .as file extension). Likewise, the file extension must be .as . Do not use a text editor that saves extra formatting information, such as in Microsoft Word format. Save the file as plain text. Whenever possible, use Unicode format (UTF-8 encoding). If your editor doesn't support Unicode, use ANSI, ASCII, or Latin 1.


If you named your class ImageViewer (with an uppercase "V") but mistakenly named your .as file Imageviewer.as (with a lowercase "v"), Flash won't be able to find the ImageViewer class. In that case, when you attempt to use the ImageViewer class, you'll see the following error in the Output panel:

 The class 'ImageViewer' could not be loaded. 

Conversely, if you mistakenly named your class Imageviewer (with a lowercase "v") but named your .as file ImageViewer.as (with an uppercase "V"), Flash will find the ImageViewer.as file but will complain that it can't find a class in that file that matches the filename. In such a case, when you attempt to use ImageViewer , you'll see the following error:

 The class 'Imageviewer' needs to be defined in a file whose  relative path is 'Imageviewer.as'. 

If, down the road, you decide to change the class name, you must also change the filename, and vice versa.

Before we put some meat on the bones of our class, you may want to take a minute to customize your editing environment. If you're using Flash MX Professional 2004, you'll probably want to turn on line numbers (View View Line Numbers) and customize your font styles, code hint timing, and autoindentation rules (Edit Preferences ActionScript). You can even tell Flash how to autoformat your code (Edit Auto Format Options). The autoformat feature itself is accessed via Tools Auto Format.

Okay, where were we? The class skeleton ”right. Your current ImageViewer.as file should contain:

 class ImageViewer { } 

Now recall our earlier class design:

 ImageViewer(target:MovieClip, depth:Number) ImageViewer.loadImage(URL:String):Void 

That design shows the basic structure of the ImageViewer class's constructor and loadImage( ) method. Let's fill in those items now. Update your ImageViewer.as file to match Example 5-2.

Example 5-2. The ImageViewer class with constructor and loadImage( ) method roughed in
 class ImageViewer {   // The constructor function   public function ImageViewer (target:MovieClip, depth:Number) {   }   // The   loadImage( )   method   public function loadImage (URL:String):Void {   } } 

Now that we have our class's constructor and loadImage( ) method roughed in, we can move on to coding the constructor function body. We decided earlier that the ImageViewer class constructor should create an empty movie clip to hold the loaded image. That empty clip should be attached to the target clip at the depth specified, as follows :

 public function ImageViewer (target:MovieClip, depth:Number) {   target.createEmptyMovieClip("container_mc" + depth, depth); } 

Notice that the empty clip name starts with "container_mc" and ends with the supplied depth . That gives each empty container clip a unique name. For example, if depth is 4, the empty clip's name will be container_mc4 . Only one clip can occupy each depth at a given time, and each empty clip's name must be unique (a clip whose name and parent is the same as a preexisting clip is inaccessible via ActionScript). So by generating a unique name based on the specified depth, more than one empty clip can reside in target without conflicts.

We needn't worry if we hadn't thought of this necessity in our original design. For brevity, we skipped some iterations of the typical design process. In a typical first rough pass for the constructor function, many developers probably would have not remembered to create a unique name for each image-holding clip.

In the simplest case, in which you are loading only one image in one ImageViewer instance, this wouldn't be a problem. However, once you started creating multiple instances to load multiple images (each in its own clip), you'd have realized the deficiency (a.k.a. bug) in your code and made the necessary adjustments. With practice, you'll learn to anticipate likely design problems.

In almost all cases, your class design should allow for multiple instances of the same class to coexist peacefully. One exception would be if you define a class that is never instantiated (i.e., implements only class methods and class properties, not instance methods or instance properties). Another exception is the Singleton design pattern discussed in Chapter 17.


In this case, peaceful coexistence means creating movie clips with unique names and putting them on unique depths. Note that, as written, our current code requires the user of the ImageViewer class to pass in a unique depth (the code doesn't try to automatically determine a unique depth). Therefore, the user must ensure that the depth passed to the ImageViewer constructor does not overwrite an existing asset; document this in the comments for the constructor, as done in Example 5-3.

Moving right along, our constructor is done, so let's implement the loadImage( ) method so that it loads a JPEG file into the empty clip. The image-loading code looks generally like this:

   theEmptyClip   .loadMovie(   URL   ); 

Hmm. That brings up a problem: the loadImage( ) method has no way to access the empty clip created by the constructor. We must alter the constructor so that it stores a reference to the empty clip in an instance property. We'll name that instance property container_mc . Example 5-3 shows the new property and the adjusted constructor function, with additions shown in bold. Update your ImageViewer.as file to match Example 5-3 (you don't have to include the comments, but it is a good habit to get into). Now we can use the container_mc property to access the empty clip from within the loadImage( ) method.

Example 5-3. The ImageViewer class with its new property
 class ImageViewer {   // Here's the new property.   private var container_mc:MovieClip;   // The constructor function.   // The caller is responsible for specifying a unique depth   // within the target clip.   public function ImageViewer (target:MovieClip, depth:Number) {     // Store a reference to the new, empty clip in     // the   container_mc   property.  container_mc =  target.createEmptyMovieClip("container_mc" + depth,                                                depth);   }   public function loadImage (URL:String):Void {     container_mc.loadMovie(URL);   } } 

Notice that the loadImage( ) method simply calls Flash's built-in loadMovie( ) method. When one method simply calls another method, it is known as wrapping or creating a wrapper ; the loadImage( ) method is said to wrap the loadMovie( ) method. Typically, functions, methods (or even entire classes) are wrapped in order to adapt them to a particular situation. In our case, by wrapping loadMovie( ) in the loadImage( ) method, we:

  • Make our class more intuitive ( loadImage( ) describes the method's behavior better than loadMovie( ) )

  • Make our class more convenient to use ( someViewer.loadImage( ) is more convenient than someViewer.container_mc.loadMovie( ) )

  • Make our class more flexible and future-proof; we can easily add or change code in the loadImage( ) method later without affecting the way that the method is used

Example 5-4 shows the completed code for the first version of our ImageViewer class with the comments stripped out. Make sure your ImageViewer.as file matches the code in Example 5-4.

Example 5-4. The ImageViewer class, version 1
 class ImageViewer {   private var container_mc:MovieClip;   public function ImageViewer (target:MovieClip, depth:Number) {     container_mc = target.createEmptyMovieClip("container_mc" + depth,                                                depth);   }   public function loadImage (URL:String):Void {     container_mc.loadMovie(URL);   } } 

 <  Day Day Up  >  


Essential ActionScript 2.0
Essential ActionScript 2.0
ISBN: 0596006527
EAN: 2147483647
Year: 2004
Pages: 177
Authors: Colin Moock

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net