Hangin at the Bottom

We’re just psyched to be in a google result page with the likes of James O’Reilly and actionscript.org.

Hooray!  If you haven’t checked out the code yet, by all means please do.

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.

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:

1. Put a listener on your stage, listening for the Event. RESIZE event.  More on this here.  Basically, this could look like so:

stage.addEventListener(Event.RESIZE, floatStuff);

This will call a function you create – in this example, it’s named “floatStuff”.

2. Align your stage to the top left and instruct it not to scale content.  The code is below:

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

Be careful with your publish / export settings using these stage properties – make sure they do not conflict.

3. Instantiate the jsFloat class.  To do this, simply create a new object of type jsFloat, and pass in your intended minimum stage height and minimum stage width.  In this example, we have created a design that requires a minimum stage size of 960 x 600.  Smaller than this, and our elements will start to crash together, so we instantiate the jsFloat class with our values:

var floater:jsFloat = new jsFloat(960,600);

You could also create variables to hold your minimum stage dimensions and pass those in as well, or even write code to destroy the floater object and re-instantiate it with a new minimum size, depending on some user interaction, etc.

Okay, now we’re ready to begin floating our elements.  For this example, we’ll use three made-up, generic variables called “sprite1″, “sprite2″, and “sprite3″ that we want to float.  Now, we need to construct the function that will handle our resize event.

function floatStuff(re:Event):void
{
var sW:Number = stage.stageWidth;
var sH:Number = stage.stageHeight;
floater.floatHorVer(sprite1,”center”,0,0,sW,sH);
floater.floatHor(sprite2,”rightStrict”,20,20,sW,sH);
floater.floatVer(sprite3,”bottomStrict”,100,10,sW,sH);
}

Note: if you are copying the code above, you will have to re-do the double quotes so that Flash recognizes them.

So, what’s going on there?  Let’s take it line by line.  The first line sets up our function (you could make this private, if you like) with the same name as that called by our earlier event listener.  Since it’s called by an event handler, it wants to receive an argument that represents the event, so in the parentheses, we create an event called “re” of type “Event”.  This function is not returning anything, hence, the “:void”.

The next line opens the function with the curly brackets.  In the two lines following that, I have created two variables of type “Number”, which will hold the current stage width and height values.  It’s important that these go inside the resize event handler, so that they will be re-computed every time the user resizes the browser window / stage.

Next, I call the “floatHorVer” method on my floater object, passing in our sprite1 object and using an align mode of “center” (aligning “sprite1″ to the center of the stage), and I’ve given it an xPad and a yPad of 0, which means it will sit right in the middle.  Finally, I pass in the current stage width and stage height, contained in my sW and sH variables.

In the line following, I call the “floatHor” method on my floater object, and I pass in my second sprite.  I want this sprite to always be 20 pixels down from the top of the window and stay 20 px away from the right edge of the window, so I use the “rightStrict” mode, and I pass in a yStick of 20 (sticks the y value at 20) and an xPad of 20 (pads the resized x value by 20 from the edge).  Then I pass in the current stage width and height.

Finally, I call the “floatVer” method on my floater object, passing in my third sprite.  For this sprite, I want an alignment that will always be 100 pixels off of the leftmost window edge, and I want it to always be 10 pixels above the bottom of the window.  I pass in the “bottomStrict” mode, and an xStick of 100 (sticks the x value at 100), then a yPad of 10 (pads the y resized y value by 10 from the bottom).  Then I pass in the current stage width and height.

If you’re wondering why the floater object keeps getting re-used, think of it as a invisible gnome that is called into action when the window resizes – your calls to it represent a list of tasks for it to complete – so, even though we’re floating 3 different sprites, we’re calling the same floater object to accomplish all those tasks.  Also, the floater object will generate an x and a y value for whatever object you pass into it.  Thus, do not attempt to use floatHor and floatVer on the same object, as the second one will over-write the first.  Use floatHorVer instead.

To close our function, we use the closing curly bracket.

Okay, we’re almost there!  We only need one more thing to get this running.  We want to call the resize handler (our floatStuff function) once when the script runs, because otherwise we’ll have to wait for the user to resize the window for any of this to take effect (and we don’t want to do that).

The only difference is that this time, the function is not being called by an event handler, so there’s no event to pass in.  Since we’re not actually using that required event argument within the function, we’ll just pass in nothing instead.  So, we have:

floatStuff(null);

That’s the basics!  For more on the various methods and alignment modes available to you using jsFloater, see the jsFloater API, the jsFloater visual API guide / example, and the jsFloater box model.

Because web browsers are anchored to the top left of the window, you may want to use a combination of these three methods to achieve your desired results.  jsFloater allows you to define a minimum stage size, so that your elements won’t crash together if the user squashes the page size down by dragging the browser window’s bottom right corner to the middle of the screen, for example.  This minimum stage size is passed to the class constructor on instantiation.

There is a visual guide to the API available both in the downloadable zip file and also for browsing on this site.  You can mouse over the various objects in the visual API guide to reveal what method has been used to float them, which align mode they are employing, and what their current pixel x – y coordinates are.

jsFloater allows you several types of floating, in addition to the ability to “pad” or “stick” your floats, as will be expained below.  The types of floating are proportional (based off of the difference between the minimum stage size and current stage size) or Strict, meaning based only on the current stage size.

The methods:

constructor

public function jsFloat(sIW:uint, sIH:uint):void

returns: nothing

parameters:

sIW:uint – stage Initial Width.  This is also the stage minimum width you define based on your designs.
sIH:uint – stage Initial Height.  This is also the stage miniumum height you define based on your designs.

Both of these parameters will be used to calculate values in the proportional float modes and will also set the values for browser window resizes that are smaller than your minimum.

floatHor

public function floatHor(obj:Object, align:String,  yStick:int, xPad:int, sW:Number, sH:Number):void

returns: nothing.

parameters:

obj:Object – the object passed to the method.  Can be sprite or movieclip as well.
align:String – the alignment mode.  Options are:
“left” – aligns left, proportionate to minimum stage size
“leftStrict” – aligns left, based strictly on current window size
“right” – aligns right, proportionate to minimum stage size
“rightStrict” – aligns right, based strictly on current window size
“center” – aligns center (horizontally) in the window
yStick:int – allows you to force the floated object to “stick” to a particular y value.  A horizontal float with a yStick of 0 will align vertically with the top of the browser window.  Negative values can be used, as well as your own math (provided it results in an integer).
xPad:int – allows you to pad your float values.  For example, if you are using an image that always needs to be 20 pixels from the right edge of the window, you would use the “rightStrict” mode and and xPad of 20.  Positive values for pads will move objects toward the center of the window (horiztontally, in this case), except when using the “center” mode, which moves positive values toward the right.  Negative values can be used, as well as your own math (provided it results in an integer).
sW:Number – current stage width.
sH:Number – current stage height.

floatVer

public function floatVer(obj:Object, align:String, xStick:int, yPad:int, sW:Number, sH:Number):void

returns: nothing.

parameters:

obj:Object – the object passed to the method.  Can be sprite or movieclip as well.
align:String – the alignment mode.  Options are:
“top” – aligns top, proportionate to minimum stage size
“topStrict” – aligns top, based strictly on current window size
“bottom” – aligns bottom, proportionate to minimum stage size
“bottomStrict” – aligns bottom, based strictly on current window size
“middle” – aligns middle (vertically) in the window
xStick:int – allows you to force the floated object to “stick” to a particular x value.  A vertical float with a xStick of 0 will align with the left side of the browser window.  Negative values can be used, as well as your own math (provided it results in an integer).
yPad:int – allows you to pad your float values.  For example, if you are using an image that always needs to be 20 pixels from the bottom of the window, you would use the “bottomStrict” mode and and yPad of 20.  Positive values for pads will move objects toward the middle of the window (vertically, in this case), except when using the “middle” mode, which moves positive values to the bottom.  Negative values can be used, as well as your own math (provided it results in an integer).
sW:Number – current stage width.
sH:Number – current stage height.

floatHorVer

public function floatHorVer(obj:Object, stickMode:String, xPad:int, yPad:int, sW:Number, sH:Number):void

returns: nothing.

parameters:

obj:Object – the object passed to the method.  Can be sprite or movieclip as well.
stickMode:String – analogous to the align parameter in the methods above.  Options are:
“center” – aligns to the center (horizontally) and middle (vertically) of the window
“right” – aligns vertically to the middle and horizontally to the right, proportionate to the minimum stage size
“rightStrict” – aligns vertically to the middle and horizontally to the right, based strictly on current window size
“bottom” – aligns horizontally to the center and vertically to the bottom, proportionate to the minimum stage size
“bottomStrict” – aligns horizontally to the center and vertically to the bottom, based strictly on current window size
“bottomright” – aligns to the bottom right, both proportionate to the minimum stage size
“bottomrightStrict” – aligns to the bottom right, both based strictly on current window size
“bottomleft” – aligns to the bottom left, proportionate to the minimum stage size
“left” – aligns vertically to the middle and horizontally to the left, proportionate to the minimum stage size
“topleft” – aligns to the top left, proportionate to the minimum stage size
“top” – aligns horizontally to the center and vertically to the top, proportionate to the minimum stage size
“topright” – aligns to the top right, proportionate to the minimum stage size
Note: because the browser window is anchored to the top left, certain stickMode parameters for this method would be redundant.  For example, there is no topleftStrict, as that effect can be achieved with the floatHor method, taking an align mode of “leftStrict”.
xPad:int – allows you to pad your float values horizontally.
yPad:int – allows you to pad your float values vertically.
xPad and yPad are as described for the methods above.  Either can accept negative values and math that results in an integer, except that both will push objects toward the center (horiztonally) and middle (vertically) of the window when given positive values, unless the “center” mode is used, which will push positive values down and to the right.  For example, if you wanted two objects to float at the center of the screen, with one always offset from the other 20 pixels down and to the right, you would float the first using the floatHorVer method with xPad and yPad of 0 and 0, and float the second using the same method, with an xPad of 20 and a yPad of 20.
sW:Number – current stage width.
sH:Number – current stage height.

For more, see How To Use jsFloater.

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.

jsFloater Vertical align modes

As you can see, one of the objects is floating directly in the middle (vertically), one each is floating at the very top and bottom (strict), and two are floating somewhere that represents the a ratio of difference between the minimum height (height of the dotted box) and the current window height.  Those two are using the proportional modes.

Let’s look at the floats for the floatHor (horizontal) method:

jsFloater Horizontal align modes

Although the left-most horiztonally floating object is currently obscured by the top-most vertically floating object, you should be able to see here how the horizontal mode is analogous to the vertical mode: one object aligned perfectly center, two strictly aligned left and right, and two floating proportionally between the minimum width (width of the dotted box) and current window width.

So, here is what the proportional box looks like, using nine floating modes (including the object at center-middle):

jsFloater proportional box

All of the nine objects being floated in the above box are using the floatHorVer method, width proportional align modes.  This proportional align is based on the difference between the minimum value and the current browser window size, so that elements float out into the browser space proportionally, but to not have to be stuck to the edges of the window, or to a fixed distance from the edges of the window.

Of course, you can combine the different float methods and modes however you like.  One possible use might be using proportional floats of the floatHorVer method for your right- and bottom-most objects, and using other floats for your left- and top-most items, for example.  It’s up to you and your creativity.

Now, let’s look at the strict box:

jsFloater strict box

Notice, in the example above, that we’re now using a combination of the floatVer, floatHor, and floatHorVer methods to achieve a box that goes to the very edges of the current browser window size.  The reason for this can be explained using a simple example: look at the bottom left corner of the box.  That object only needs to float vertically, as the whole browser window is anchored to the top and the left.

Once again, you can assign particular x and y “stick” values to your vertically and horizontally floated objects, respectively.  You can pad the float of any object and also use your own math to create some custom behaviors on browser resize.  Hope you have fun experimenting with the various methods and modes.

Here is a really simple example: it’s a drop shadow that changes its distance based on the size of the window, and as you resize the window the distance changes as well.  Of course, it’s up to your imagination to come up with other uses, but this is a simple example that gets to the point.

To accomplish this, I only needed to add a couple of lines of code to our existing resize event handler from the How To Use jsFloater documentation:

function floatStuff(re:Event):void
{
var sW:Number = stage.stageWidth;
var sH:Number = stage.stageHeight;
var shadW:int = Math.floor(sW/120);
var shadH:int = Math.floor(sH/60);
floater.floatHorVer(rembrandt,”center”,0,0,sW,sH);
floater.floatHorVer(shadow,”center”,shadW,shadH,sW,sH);
}

Note: if you are copying the code above, you will have to re-do the double quotes so that Flash recognizes them.

As you can see, I’ve got two objects that I’m floating, with instance names of “rembrandt” and “shadow” – pretty obvious what’s going on there.  But if you look above, you’ll also see that I’ve added two variables of type integer, which take the stage width and height, divide each by some values that I think work well, and floor each result into an integer.

Both floats are using the floatHorVer method with an alignment mode of “center”, and the only difference between the picture of rembrant and its shadow is that the picture is always floating exactly center, while the shadow is being padded – dynamically – based upon a fraction of what the current browser size is.

The result: a dynamic drop shadow that seems alter its light source throw depending on the size of the window.  One possible use for this is making sure that the drop shadow doesn’t get cut off if the user resizes the browser window really small.

Of course, this is a simple example, but you can get as crazy with it as you like.

Thanks for downloading my code!  Hope it brings you lots of fun and saves you a bunch of work.

If you like it, please spread the word.

If you haven’t already, I strongly encourage you to check out the API and the How-To page.

Thanks!

Josh

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.

Why is there not an AS2 version of jsFloater?

Sorry, I don’t really work in AS2 very much.  I’m seeing someone else now, someone with an incremented version number.

I don’t get this package and class business.  Why can’t I just put the jsFloater code in my timeline?

Having a package and class means better performance and, of course, the ability to instantiate and reuse the jsFloater object – it’s part of what makes jsFloater work.   For a great tutorial on how classes are handled in AS3, see this kirupa tutorial.

Hope you enjoy.