Posted on Saturday 12 November 2005
Here's a little treat: a component set which allows easy alignment to create fluid layouts, from Elvis Mehmedovic. The examples shown are quite tantalizing, and there are some other nice components for download there. You can drop the components on stage or use the Actionscript classes as standalone.
Here's a wrapper class to make the components even easier to use:
/**
* This software is copyleft: use as wanted
* @author Patrick Mineault
*/
class clib.Alignment extends Object
{
var hAlign:Boolean = false;
var vAlign:Boolean = false;
var hPosition:Number = 0;
var vPosition:Number = 0;
var hPositionMargin:Number = 0;
var vPositionMargin:Number = 0;
var hPositionOffset:Number = 0;
var vPositionOffset:Number = 0;
var hCenterPointCalculated:String = "none";
var vCenterPointCalculated:String = "none";
function Alignment(loc:String, xOffset:Number, yOffset:Number)
{
if(loc.indexOf('T') != -1 || loc.indexOf('B') || loc.indexOf('M'))
{
vAlign = true;
vPositionOffset = yOffset;
if(loc.indexOf('M') != -1)
{
vPosition = 0.5;
vCenterPointCalculated = "center";
}
else if(loc.indexOf('B') != -1)
{
vPosition = 1;
vCenterPointCalculated = "bottom";
}
}
if(loc.indexOf('L') != -1 || loc.indexOf('R') || loc.indexOf('C'))
{
hAlign = true;
hPositionOffset = xOffset;
if(loc.indexOf('C') != -1)
{
hPosition = 0.5;
hCenterPointCalculated = "center";
}
else if(loc.indexOf('R') != -1)
{
hPosition = 1;
hCenterPointCalculated = "right";
}
}
}
}
Use like this:
import clib.Alignment;
import xm.corpus.aligner;
_aligner = new aligner();
_aligner.register(myMc, new Alignment('BR', -20, -20));
This has the effect of aligning myMC to the bottom right of the screen, with an offset of (-20, -20). The width of the movieclip is taken into account. Perhaps the coolest thing about the components is that they will work with vanilla MovieClips as well as with anything that extends mx.core.UIObject, so if you use mx.screens.forms it will work with width and height instead of _width and _height and will tap into the draw and resize events. Nice!
