Understanding the basics

There are four basic parts to creating a liquid GUI with Flash. In this tutorial, I will create a sample liquid GUI application, going through each of these parts in more detail:

1. Identify the parts of your GUI that resize and how they do so.
2. Set the HTML page to display the application at 100%.
3. Set the Flash movie not to scale its contents automatically.
4. Add intelligence to the application so that it knows how to scale when the browser window resizes.

Identify the parts of the GUI that resize, and how

My image gallery has three clearly identifiable sections, so identifying the parts that resize is easy. All three sections resize, though not in the same way. The header and footer sections resize only in the horizontal direction, while the body resizes in both directions. As for relocation, only the footer relocates vertically to lock itself to the bottom of the window, while the header and body sections each maintain their original x and y location.

The header section is made up of three children: title, button group, and background image. The background image resizes its width to match that of the window. The title and button group components are unaffected by the resizing.

The body section is made up of two children: an empty movie clip, which acts as a container for the loaded image, and a background fill. The background fill resizes itself to match the width of the window, and the image holder runs a series of calculations to maintain the center of the background fill depending on the size of the image loaded and the actual or best-fit preference chosen by the user.

Finally, the footer section is made up of two children: the group of image thumbnails and a background fill. The background fill resizes itself to match the width of the window, while the thumbnails group is unaffected. (In a real-world application, the thumbnails container might behave like Microsoft Word and display arrow buttons should the window get too small. Since this is a tutorial, I kept the features to a minimum so I wouldn't stray too far from my focus.)

Set the HTML page to display the application at 100%

The point of the liquid application is to fill the browser window 100% vertically and horizontally so that it takes up the entire window.

To ensure that the application fills the entire browser window, the margin needs to be set to zero. Otherwise, a default width of 10 pixels will surround the application:

<style type="text/css">
  body, html {margin:0;}
</style>

Making the SWF fill the browser window is very simple—just a matter of configuring the SWF file's publish settings.

Open the FLA file in Flash CS3 Professional. Choose File > Publish Settings. Make sure you have the HTML (.html) checkbox checked; then click the HTML tab. Select Percent from the Dimensions drop down list; then enter 100 for both the width and height properties. This setting will make the SWF fill the entire browser window.

The next two publish settings can be done through parameters of the object and embed tag, but it's not my preference to do so. They are on the same HTML tab:

1. Select "No scale" from the Scale pop-up menu.
2. Under Flash Alignment, select Left for horizontal and Top for vertical alignment. This pins the (0,0) coordinates of the Stage to the upper left pixel of the browser window.

My preference for these last two settings is to do it in ActionScript so that the values are used by the player when I test my movie inside of the Flash authoring environment. Otherwise, you can't properly test your movie.

Set the Flash movie not to scale its contents automatically

To handle the last two settings with ActionScript, I set two of the Stage object's properties to equivalent values of that found on the HTML settings tab.

The first property is Stage.scaleMode, which I set to noScale, and the second property is Stage.align, which I set to TL.

import flash.display.StageScaleMode;
import flash.display.StageAlign;

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

These four ActionScript lines, accompanied by the object and embed parameters for 100% width and height, are all the settings needed to start writing liquid GUIs.

Add intelligence to the application so that it knows how to scale when the browser window resizes

Using ActionScript to prevent automatic scaling of the SWF means that the SWF will not scale at all; unless, of course, I manually scale every movie clip, which is exactly what I will do.

The remaining portion of this tutorial will take you through the process of building the gallery application. I have broken up the gallery into four progressive versions that add features and complexity to the application.

• Version 1: I create a bare-bones shell that demonstrates how to listen for resize events and manually scale the movie's parts accordingly
• Version 2: I show you how to create a container for your GUI and how to extend the MovieClip class with a custom GUI class that handles resizing
• Version 3: I show you how to make the app scalable using polymorphism by implementing a custom IResizable interface for all sections
• Version 4: I briefly talk about the other features in the gallery and how they were implemented

Page 2 of 4

Previous Page

Next Page