James O'Reilly
With user experience expectations on the rise, developers increasingly are looking for ways to bring the rich experience of a desktop application to the web. This article is about developing dynamic graphical user interfaces (GUIs) that mold themselves intelligently to the size of the screen to meet users' expectations.
A liquid is a collection of molecules that move about each other freely and tend not to separate. In web development circles, "liquid" mostly refers to a web page whose design intuitively moves about freely to fit a web browser window of any width and still looks as the designer intended. This is in contrast to fixed-width web pages, which are designed to fit a predetermined width and normally fill the remaining space, if any, with a solid or tiled background. While all the rage at one point, liquid pages today have mostly been abandoned for fixed-width pages. I can only speculate as to why liquid pages became unfashionable.
Regardless of the demise of liquid web pages, users still expect their desktop applications to have liquid interfaces—and the better ones do. When you open up an application and resize it, you expect that it will repaint itself to accommodate the new size while still providing a usable interface.
To illustrate liquid GUIs, Figure 1 shows two screen captures of the Gaim instant messenger window. You can see how Gaim resizes the GUI controls intelligently to fit the size of the window. Users have grown accustomed to this type of intelligent design in desktop applications. More and more such applications are making their way to the web, increasing user expectations every day. People want rich Internet applications that look and feel like their desktop counterparts.
Figure 1. Gaim instant messenger window shown at two different sizes.
Sneak peek at the final product
In this tutorial I'll explore an underutilized property of the Stage object in Flash to create a liquid application interface. In the sample application I am going to create a typical image gallery that you might see on a website—well, maybe not typical because this one will kick ass! This version of the gallery will open up in a new window and behave more like a desktop application.
The gallery will contain three main sections: header, body, and footer. The header will contain the title of the application as well as some buttons for user preferences. The buttons will enable the user to switch back and forth between actual size images and best-fit images. The body will contain the image chosen for viewing by the user. Finally, the footer will contain an array of thumbnail images representing each of the full images available to the user for viewing. So far, this is nothing you haven't either seen or implemented already.
Figure 2. Example of a non-scaling application inside a resizable window
You'll notice that this gallery is in a non-resizable window. This is typical for Flash-based pop-up windows because, if the browser window is scaled to a size not respectful of the original aspect ratio, the SWF becomes distorted (see Figure 3).
Figure 3. Example of an application set to match the width and height of a browser window
This version is just unacceptable. The first version might disappoint users who have large monitors because they cannot make the window any bigger than it is. A user with a 1600 x 1200 or larger desktop might be a bit annoyed to see such small images. On the other hand, they would probably be less impressed with a window that scales to any size and distorts the proportions of the graphics.
Now look at Figure 4. This is what I'm talking about! Finally, an application that provides desktop-like behavior as it intelligently scales to accommodate any size browser window. Users will quickly forget that they are using a web-based application as they resize it to fit their needs.
Figure 4. Example of an application which properly scales to fit the browser window
Requirements
In order to make the most of this article, you need the following software and files:
Flash CS3 Professional
Sample files:
Prerequisite knowledge
Understanding of ActionScript 3.0 and its syntax.
Download the English Windows Update
