Creating Liquid GUIs with Flash - Part 1
With user experience expectations on the rise, developers more and more are looking for ways to bring the rich experience of a desktop application to the web. This tutorial is about developing dynamic graphical user interfaces (GUI) that intelligently mold themselves to an end-user’s expectation.
Literally, a liquid is a group of molecules who move about each other freely and tend not to separate. In the web developing circle, liquid mostly refers to a web page whose design intuitively moves about freely to fit any width web browser and still look as the designer intended. This is contrasted by web pages designed to fit a predetermined width which normally fill the remaining space, if any, with a solid or tiled background. While all the rage at one point, today liquid pages 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 pages, users still expect their desktop applications to have a 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 useable interface.
Example of a Liquid GUI
To illustrate my point, below are a two screen captures of the Gaim instant messenger window.
In the above example, you can see how Gaim intelligently resizes the GUI controls to fit the size of the window. Users have grown accustom to intelligent desktop application design. More and more applications are making their way to the web and user expectation is increasing every day. Users want rich internet applications that look and feel like their desktop counterparts.
In this tutorial we’ll explore an underutilized property of the Stage object to create a liquid application interface.
Understanding the Basics
There are four basic parts to creating a liquid GUI with Flash, and in this tutorial, I will create a sample application, going through each of these parts in more detail.
- Identifying the parts of your GUI that resize and how they do so
- Setting the HTML page to display the application at 100%
- Setting the Flash movie to not automatically scale it’s contents
- Adding intelligence to the application so that it knows how to scale when the browser window resizes
A sneak peek at the final product
In the sample application I am going to create a typical image gallery that you might see on a web site. 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: a header, a 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.
Typical Static Size Implementation:
If you open the above application and scale the window you’ll notice that this gallery remains a static size. This is typical for flash-based popup applications because if the browser window was scaled to a size not respectful of the original aspect ratio, the SWF will become distorted like it does in the following example.
Non-uniform Scaling distorts the application:
This version is just unacceptable. The first version might disappoint a user who has a large monitor because they cannot make the window any bigger than it is. A user with a 1600×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 scaled to any size but distorted the proportions of the graphics.
A Liquid GUI correctly scales the application:
Now 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. The user will quickly forget they are using a web based application as they resize it to fit their needs.
Side-by-Side Comparisons of the three examples:
to be continued…
October 12th, 2006 at 10:35 pm
Creating Liquid GUIs with Flash - Part 2
With user experience expectations on the rise, developers more and more are looking for ways to bring the rich experience of a desktop application to the web. This is part two of the tutorial about developing dynamic graphical user interfaces (GUI) th…
December 18th, 2006 at 4:34 pm
[…] I’ve rewritten my LiquidGUI tutorial for use on Adobe’s developer center. The new tutorial was revamped using ActionScript 3.0 and Flex Builder 2.0. The original tutorial I wrote using ActionScript 2.0 and Flash 8 can still be found on my site. […]
February 5th, 2007 at 12:15 pm
James -
This stuff is great it really helped me to design the LGUI I was looking for. I’m having an issue with the movie resizing right away though… I’m only a beginning-intermediate programmer, and I know that this resizing script is run “onResize”. I’ve tried a few different approaches to add the same function for an “onLoad”, but I can’t seem to get it to work… was wondering if you’d be able to point me in the right direction? or maybe the answer is here but in a different version? I used version 1.
Thanks for the Tutorial!
-Tom
February 9th, 2007 at 9:19 am
[…] Creating Liquid GUIs with Flash - Part 1 Creating Liquid GUIs with Flash - Part 2 Creating Liquid GUIs with Flash - Part 3 […]