jsFloater is an Actionscript 3 class that allows you to “liquidify” (create liquid layout or liquid GUI for) your Flash site with a minimum of effort.

Objects can be “floated” in a variety of ways, and with a great deal of flexibility: you can assign pads to your objects within the context of their float, and even use simple math to create custom interactive behaviors for your objects.  The package is extremely lightweight and flexible.

jsFloater also computes the centering math on your own objects for you.  Standard movieclip 0,0 top left registration is expected.

For an example, see the jsFloater example swf, which contains an object for each available float method in the jsFloater class.  Mousing over these objects reveals their method, their float mode, and their current pixel x – y coordinates.  The example swf acts as a kind of visual API guide.

To use jsFloater in your projects, download and extract the zip file which contains the example FLA file and the package with the AS script, which is the class itself.  If you want, you can open up the FLA example file and look at that code (and its comments) to get a working idea of how to use the class.

The class is located in the package, com > seagull > jsfloat.   Move the directory “seagull” into your “com” directory, and add the following line of code either in your appropriate package declaration(s) or, if you are using Actionscript 3 within your own FLA file, at the top of your script:

import com.seagull.jsfloat.*;

Before you start floating your elements, several other things must happen:

(more…)

As you may have learned from the API, the jsFloater class gives you a lot of flexibility in your floats, with “stick” values and padding available to add to your floating object x and y values.  I thought it might be useful, however, to break down some of the available methods in terms of a box model, to help explain two different types of floating you can use: what we’re calling proportional and strict.

jsFloater requires you to define a minimum and width and height for your stage, so that you can take a given design comp and figure out how small the browser window can get before the objects begin crashing into each other and/or overlapping in undersirable ways.  This is an issue common to liquid GUIs / layouts, one which jsFloater lets you fix.  But, you may not always want your elements to float based upon the very edges of the current browser window: if, for example, your design comp figures at a minimum window size of 800 x 600, you may want your elements to float somewhere between the minimum value and the edge of the window.  You could accomplish that with typical liquid GUI layout types and a bunch of your own math – or, you could let jsFloater do it for you, using the proportional float modes available.

We’ll examine the basic boxes in a moment, but first let’s recap the horizontal and vertical floats.  The images below are all taken from the jsFloater visual API example, which can also be exported from the FLA file included in the download.  It may help you to have the visual API guide open while you read through this example, so you can experiment and see how the objects move and react.

First, let’s look at the available align modes for the floatVer (vertical) method.

(more…)

How does jsFloater differ from other liquid GUI classes for AS3?

In two main ways: (1) jsFloater requires you to define a minimum area for your floating, so that the objects in your liquid layout will never crash together in undesired ways; (2) jsFloater lets you pad your floating objects, gives you several modes to use, and also lets you use your own math to create enless dynamic effects.

How is jsFloater released?  Can I adapt jsFloater source code?

jsFloater is released under a Creative Commons Attribution 3.0 Unported license – meaning, you may use and/or adapt the source code however you like, provided you give attribution to the author.  Links back to this site are always appreciated.

(more…)