Developing the basics

In this article, we will be developing the application in two ways. The first way will start off as simply as possible, developing directly in Flash CS3 Professional. As the article progresses, I will layer on increased levels of complexity.

Version 1

Using Flash CS3, I start off by creating a movie clip for each of my three sections: header, body and footer. I place each of those clips in separate layers with header the topmost, footer the second, and body the last. I place the body section as the bottom layer so that images loaded larger than the available body size will be clipped by the header and footer sections. These movie clips are each given an instance name by selecting the movie clip while it's on the Stage and typing a name into the box labeled "<instance name>" in the Properties panel so that I can refer to them from ActionScript. I use the names header_mc, body_mc, and footer_mc, as they clearly identify the sections as well as provide code insight by using the suffix _mc.

On a fourth layer named "Actions" (so named purely for readability), I add the following ActionScript:

import flash.display.StageScaleMode;
import flash.display.StageAlign;
import flash.events.Event;

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
stage.addEventListener(Event.RESIZE, resizeHandler);

// initialize sizing
resizeHandler (null);

function resizeHandler (event:Event):void {
  var sw:Number = stage.stageWidth;
  var sh:Number = stage.stageHeight;
  header_mc.width = body_mc.width = footer_mc.width = sw;
  body_mc.height = sh-header_mc.height-footer_mc.height;
  footer_mc.y = sh-footer_mc.height;
}

In the above code I do a couple of things. First, I make sure that Flash isn't going to scale the SWF as the browser resizes because I want to handle all resizing with my own code. Second, I make sure the coordinate system remains intact by pinning the Stage to the upper left corner of the movie. (By default, Flash centers the Stage.) Next, I create a listener object that will execute some code every time the Stage is resized. It knows that the Stage is resized because I add it as a listener to the Stage object's Resize event.

The Resize event can happen many times per second as the user resizes the window. I want to make sure that the event handler runs as efficiently as possible to make the redraws as smooth as possible by keeping the frame rate high. Inside the resizeHandler event handler, I store the Stage object's width and height as local variables to speed up access to them should I need them often. Because all three of the sections are supposed to match the width of the browser at all times, I simply assign the Stage object's width to all three sections. I chain them in one long assignment because this executes faster than if it were three separate assignments. Next, I figure out the height of the body section by subtracting the heights of the header and footer sections. Finally, I move the footer section to always be located at the height of the Stage object minus the height of itself, giving it the appearance of being docked to the bottom of the window.

• Version 1 completed

Version 2

Now that I have the easy version out of the way, let me delve into more complex functionality. Version 2 will be identical to Version 1, except it will be built using the new document class. New for ActionScript 3.0 is the ability to create a class that acts as the entry point for your application.

• Version 2 completed

Starting with a new folder for this version, copy your LiquidGUI_v1.fla into it and rename it as LiquidGUI_v2.fla. Open the FLA in Flash for editing. Delete all the content on the Stage and any layers you may have created; they won't be needed. In the library, set the class for each of the three movie clips to HeaderBG, BodyBG, and FooterBG, respectively. Set the base case for each to flash.display.Sprite (see Figure 5). By default, it will be MovieClip, but since we don't need the Timeline, we'll use Sprite. The linkage identifier will be grayed out because it is not available when publishing to Adobe Flash Player 9 with ActionScript 3.0.

Figure 5. Setting the class and base class for each of your symbols

At this point, your FLA should just be three movie clips in the library and nothing on the Stage. Publish the FLA to a SWF file that's compatible with Flash Player 9 and ActionScript 3.0 (see Figure 6), and leave the SWF file in the assets subfolder.

Figure 6. Flash Player 9 and ActionScript 3.0 compatibility settings in the Publish Settings dialog box

There are two ways to define the document class of your application. One way is by clicking on the Settings button in the Publish dialog box. The other is by using the Properties panel; enter LiquidGUI_v2 in the Document Class text box and click the pencil icon to the right of it (see Figure 7).

Figure 7. Defining the document class as LiquidGUI_v2

Using the File menu, create a new ActionScript file named LiquidGUI_v2.as in the same folder as your FLA. This class will extend the Sprite class to inherit its functionality. Open the class for editing and enter the following code:

package
{
  import flash.display.Sprite;
  import flash.display.StageAlign;
  import flash.display.StageScaleMode;
  import flash.events.Event;
  //
  public class LiquidGUI_v2 extends Sprite
  {
    public static var ow:Number = 550;  // Original Stage Height
    public static var oh:Number = 400;  // Original Stage Width
    public static var hh:Number = 54;   // Static Header Height
    public static var fh:Number = 75;   // Static Footer Height
    public static var hfh:Number = 129; // Static Header + Footer Height
    // Graphic resources
    private var _header:Sprite;
    private var _body:Sprite;
    private var _footer:Sprite;
    /**
     * Constructor
     */
    public function LiquidGUI_v2 ()
    {
      // Tell the player not to scale assets
      stage.scaleMode = StageScaleMode.NO_SCALE;
      // Tell the player to put coords 0,0 to the top left corner
      stage.align = StageAlign.TOP_LEFT;
      // Listen for resizing events
      stage.addEventListener(Event.RESIZE, onResize);
      // Create and add the body resource to the display list
      _body = new BodyBG ();
      addChild (_body);
      // Create and add the footer resource to the display list
      _footer = new FooterBG ();
      addChild (_footer);
      // Create and add the header resource to the display list
      _header = new HeaderBG ();
      addChild (_header);
      // Adjust locations
      _body.y = _header.height;
      // Size everything after creation to insure the app is drawn 
      // properly the first time it is seen prior to any user 
      // initiated resizing
      onResize (null);
    }   
    /**
     * onResize
     * Event handler listening to the Stage for resizing
     * @param   event   Event Object passed by the event
     */
    public function onResize (event:Event):void
    {
      // Get the new stage size
      var sw:Number = stage.stageWidth;
      var sh:Number = stage.stageHeight;
      // Then update the children with this new size
      _header.width = _body.width = _footer.width = sw;
      _body.height = sh-hfh;
      _footer.y = sh-fh;
    }
  }
}

Most of the code should look familiar; it was taken directly from Version 1. The main class and starting point for our application is the LiquidGUI_v2.as class.

Inside the class, I define some constants that I use throughout the lifespan of the application. These values never change, so I create them as static variables to improve performance over accessing the necessary properties of objects to get the same answer.

In my example, I don't want to use a timeline, so I type my objects as Sprite like this:

private var _footer:Sprite;
_footer = new FooterBG ();

After creating a Sprite instance of the FooterBG class, you must add it to the display list for it to be seen. To do that, you would use the addChild() method of the container to which you wish to add the Sprite:

addChild (_footer);

Finally, implement a public method named onResize which accepts an event object as a parameter.

Page 3 of 4

Previous Page

Next Page