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:
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.