4.6 Completing the Box Class

Throughout this chapter we've studied an example Box class. In the real world, our Box class might be purely conceptual (i.e., never displayed on screen) or it might have a visual representation. Because most Flash applications are visual, we'll conclude this chapter with a look at how to display Box instances on screen.

Not all Flash applications display content on screen in the same way. Each application must decide how the screen is drawn, when it is drawn, and which class or classes contain the drawing code. Here are the major issues to consider when designing an application's display system:

• First decide whether the display elements will render themselves or be rendered by a central class. For example, will the Box class provide its own drawBox( ) method, or will there be a drawBoxes( ) or drawScreen( ) method on some other class?

• Decide how often the displayed elements should be updated ”either when some event occurs (such as a mouseclick) or repeatedly (as fast as frames are displayed in the Flash Player).

• Decide on the rendering technique. Each visual element in a Flash movie must be displayed in a movie clip. However, movie clips can be placed manually at authoring time or attached with ActionScript at runtime. The content of a movie clip can also be created from scratch using the MovieClip Drawing API.

• Decide on a screen refresh strategy. Will each visual element be maintained as a single persistent movie clip that is updated regularly, or will the entire contents of the Stage be cleared and re-created each time the display is updated?

In our example, the Box class is responsible for its own screen display. When a box is created, we'll attach an empty movie clip (named container_mc ) into which we'll draw the box. If the box is resized, we'll redraw the contents of the container clip. To move the box, we'll move its container clip rather than move the box within the clip. This saves us from having to redraw the clip's contents.

Our box display strategy is a runtime-only strategy. Each Box instance appears in the Flash Player but can't be placed on the Stage while editing a .fla file in the Flash authoring tool. In Chapter 13, we'll see how to create a visual class that can place instances on stage both at runtime and in the Flash authoring tool.

Example 4-6 gives you a final look at the Box class in its entirety, complete with screen display code. You should recognize the following items from earlier Box class samples:

• The width and height properties (not pseudo-properties)

• The accessor methods getWidth( ) and getHeight( ) (not getter and setter methods)

The following items are completely new to this version of the Box class:

• The container_mc property, which stores a reference to the movie clip in which we'll draw the box graphic

• The accessor methods getX( ) , setX( ) , getY( ) , and setY( ) , which retrieve and assign the position of the container_mc movie clip

• The draw( ) method, which draws the box in the container_mc movie clip

Finally, the following items have changed in this version of the Box class:

• The constructor function takes additional parameters, as follows : x and y specify container_mc 's initial horizontal and vertical position, target specifies the movie clip to which container_mc will be attached, and depth specifies the depth on which container_mc will be attached.

• The setHeight( ) and setWidth( ) methods now call draw( ) after setting the height and width of the box. (Note the flexibility that our accessor methods afford us: we've changed how our class works without changing how it's used.)

The detailed comments will help as you study the code.

Example 4-6. A Box class complete with drawing routines

 class Box {   // Box dimensions. Nothing new here.   private var width:Number;   private var height:Number;   // Movie clip to contain visual representation of the box.   private var container_mc:MovieClip;   /**    * Constructor.    */   public function Box (w:Number, h:Number,                         x:Number, y:Number,                         target:MovieClip, depth:Number) {     // Create the container clip that will hold   Box   visuals.     container_mc = target.createEmptyMovieClip("boxcontainer" + depth,                                                depth);     // Initialize size.     setWidth(w);     setHeight(h);         // Initialize position.     setX(x);     setY(y);   }   /**    * Accessor to retrieve   width   . Nothing new here.    */   public function getWidth ( ):Number {     return width;   }   /**    * Accessor to assign   width   . This version both assigns the new   width   * property value and redraws the box based on the new   width   .    */   public function setWidth (w:Number):Void {     width = w;     draw( );   }   /**    * Accessor to retrieve   height   . Nothing new here.    */   public function getHeight ( ):Number {     return height;   }     /**    * Accessor to assign   height   . This version both assigns the new   height   * property value and redraws the box based on the new   height   .    */   public function setHeight (h:Number):Void {     height = h;     draw( );   }   /**    * Accessor to retrieve   x   . For convenience, the   x   and   y   coordinates     * are stored directly on the container movie clip. If numeric accuracy     * were a concern, we'd store   x   as a separate   Box   property so    * that it wouldn't be rounded by the   MovieClip   class.    */   public function getX ( ):Number {     return container_mc._x;   }     /**    * Accessor to assign   x   .    */   public function setX (x:Number):Void {     container_mc._x = x;   }   /**    * Accessor to retrieve   y   .    */   public function getY ( ):Number {     return container_mc._y;   }     /**    * Accessor to assign   y   .    */   public function setY (y:Number):Void {     container_mc._y = y;   }   /**    * Displays the   Box   instance on screen. Uses the   MovieClip   drawing methods     * to draw lines in   container_mc   . For more information on the Drawing API,     * see   ActionScript for Flash MX: The Definitive Guide   .    */   public function draw ( ):Void {     // Clear the previous box rendering.     container_mc.clear( );     // Use a 1-point black line.     container_mc.lineStyle(1, 0x000000);     // Position the drawing pen.     container_mc.moveTo(0, 0);     // Start a white fill.     container_mc.beginFill(0xFFFFFF, 100);     // Draw the border of the box.     container_mc.lineTo(width, 0);     container_mc.lineTo(width, height);     container_mc.lineTo(0, height);     container_mc.lineTo(0, 0);     // Formally stop filling the shape.     container_mc.endFill( );   } } 

The following code shows how the Box class from Example 4-6 could be used on a frame in a Flash document ( .fla ) timeline:

 // Create a box 250 x 260 pixels, placed at coordinates // (100, 110) in the current movie clip, on depth 1. var b:Box = new Box(250, 260, 100, 110, this, 1); 

After the Box instance is created, we can adjust its position and size as follows:

 b.setX(400); b.setY(400); b.setWidth(10); b.setHeight(20); trace(b.getX( ));       // Displays: 400 trace(b.getY( ));       // Displays: 400 trace(b.getWidth( ));   // Displays: 10 trace(b.getHeight( ));  // Displays: 20