So, in other posts, we’ve talked about jsFloater being able to take your computed integer values and use them to create some dynamic effects based on the browser resizing.
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.