Creating Fluid Layouts in Flash - Part 1: The Basics

By: Joseph Balderson

Page 1 of 8

Set for printing

Next

Ever wonder how some Flash applications "break free" of the constraints of a fixed stage size, flowing from one size to another depending on browser size or application state? Creating these fluid layouts in Flash is considered by some to be one of those hidden mysteries of Flash coding. By others it is regarded as a milestone to be achieved on the path of ActionScript mastery. For me, it is both.

We will take you through the steps, from intermediate to advanced, necessary to create application layouts in Flash which can exhibit "full-size" or "fluid" functionality. In this series we will explore the basic principles of creating fluid layouts in Flash, build a sample application with a class architecture using components, finishing off with an exploration of the new fullscreen feature available in Flash Player 9.

This tutorial will explore the basics of creating a flexible stage application.


Image 1: Intelligent object positioning on the flexible stage

Flexibility is Fluid

A fluid layout is considered to be a layout where the total application size adapts to the dimensions of its display container, which in our case is the Flash player shown in the browser window. An additional requirement of a fluid layout is that its parts scale intelligently. Which means that not all objects scale in proportion to the browser size, if at all. There is a control, a logic to how the application adapts to the display container.

For example, in HTML sites with certain CSS rules applied to its containers, some DIVs will "float", while others will "stretch" according to the browser size. And while text may wrap according to the width and height of its container, it does not stretch indiscriminately. A logic is obeyed, and a dance of object positioning ensues when the browser size is changed.

One example of a Flash application with a fluid layout is Adobe JamJar. Actually, it was created in Flex, but we won’t split hairs just now. ;) Try resizing the browser window. Notice that the element sizing and positioning intelligently adapt to the browser size. In this series we will cover the basics of building Flash applications with this kind of flexibility.

Page 1 of 8 1 2 3 4 5 6 7 8 Next


download
Download Support Files


Downloads are disabled during your trial period.


Keywords
fluid, layout, fluid layout, scale, fullscreen, full screen, fullsize, full size, full browser, flexible, fixed, Stage, stage, scaleMode, delegate, onResize, document, proportional, panel