AlignUtil – align objects easily



12 Comments

Share




Recently i had to align tons of UIComponents with scale and even rotation defined. And so, i decided to write a small static class that would really facilitate my life. I called it AlignUtil. That’s it for now. All links are listed bellow. Hope it helps someone. Cheers ^_^

ps: btw i decided to switch my devs license to MIT, so from now on u r free to use the source codes for whatever u want purpose.

Online demo
Download the AlignUtil class

UPDATE: class updated to v.1.3

And here’s the source code (in case u r 2 lazy to download the archive):


////////////////////////////////////////////////////////////////////////////////
//
//  (c) 2011 Julius Loa | jloa[u know wha]chargedweb.com | http://chargedweb.com/labs/
//  All Rights Reserved.
//  license:	MIT {http://www.opensource.org/licenses/mit-license.php}
//  notice: 	just keep the header plz
//
////////////////////////////////////////////////////////////////////////////////

package com.chargedweb.utils
{
/** fp api **/
import flash.display.DisplayObject;
import flash.text.TextField;
import flash.geom.Rectangle;
import flash.geom.Point;

/**
* <p>AlignUtil class - vertical/horizontal align DisplayObjects</p>
* @availability 	fp9 (flash/flex, as3)
* @version 		1.3
*
* <p>Class usage:</p>
* @example using parentalRelation set to "true" (aligning children inside the "parent")
* <listing version="3.0">
* import com.chargedweb.utils.AlignUtil;
*
* var btn:Button = new Button();
* btn.x = 100;
* btn.y = 100;
* btn.width = 100;
* btn.height = 30;
* btn.rotation = 30;
* addChild(btn);
*
* AlignUtil.setAlign(AlignUtil.H_CENTER, btn, this);
* AlignUtil.setAlign(AlignUtil.V_MIDDLE, btn, this);
* </listing>
*
* @example using parentalRelation set to "false" (aligning children according to another child on the same level)
* <listing version="3.0">
* import flash.display.Shape;
* import com.chargedweb.utils.AlignUtil;
*
* function createBox(w:Number, h:Number, r:Number):Shape
* {
* 	var sp:Shape = new Shape();
*	sp.graphics.beginFill(Math.random()*0xffffff);
*	sp.graphics.drawRect(0, 0, w, h);
*	sp.graphics.endFill();
*	sp.rotation = r;
*	return sp;
* }
*
* var a:Shape = createBox(200, 200, 45);
* a.x = 200; a.y = 100;
* addChild(a);
*
* var b:Shape = createBox(50, 20, -10);
* b.x = 50; b.y = 200;
* addChild(b);
*
* var c:Shape = createBox(120, 75, 150);
* c.x = 300; c.y = 200;
* addChild(c);
*
* // align 'b','c' according to 'a' (horizontal-left and vertical-top alignment)
* // horizontally
* AlignUtil.setAlign(AlignUtil.H_LEFT, b, a, false);
* AlignUtil.setAlign(AlignUtil.H_LEFT, c, a, false);
* // now vertically
* AlignUtil.setAlign(AlignUtil.V_TOP, b, a, false);
* AlignUtil.setAlign(AlignUtil.V_TOP, c, a, false);
* </listing>
*/
public class AlignUtil
{
/** Horizontal left alignment **/
public static const H_LEFT:String = "horizontalLeft";
/** Horizontal center alignment **/
public static const H_CENTER:String = "horizontalCenter";
/** Horizontal right alignment **/
public static const H_RIGHT:String = "horizontalRight";

/** Vertical top alignment **/
public static const V_TOP:String = "verticalTop";
/** Vertical middle alignment **/
public static const V_MIDDLE:String = "verticalMiddle";
/** Vertical bottom alignment **/
public static const V_BOTTOM:String = "verticalBottom";

/**
* Applies a specified alignment to the target DisplayObject
* @param	align:String				alignment mode (see the public constants defined above)
* @param	target:DisplayObject		target DisplayObject to align (according to the set alignment mode) @see flash.display.DisplayObject
* @param	parent:DisplayObject		the parent DisplayObject of the target one @see flash.display.DisplayObject
* @param	parentalRelation:Boolean	whether the "target" DisplayObject is a child of the "parent" or not @default true;
* @return	nothing
*/
public static function setAlign(align:String, target:DisplayObject, parent:DisplayObject, parentalRelation:Boolean = true):void
{
var a:String = align;
var t:DisplayObject = target;
var p:DisplayObject = parent;
var b:Rectangle = t.transform.pixelBounds;
var tp:Point = new Point();
var bp:Point;

/**
* @note 28/03/2011 :: bug fix for TextFields :: tip by Arindam Mojumder
* TextField.transform.pixelBounds return incorrect x/y coordinates (not the actual, but rather
* the one of the transform point) and the x/y are always 'zero' valued, so we make an exception for tfs
*/
if(t is TextField) b = t.getBounds(t.parent);

/** if parentalRelation is enabled, use local coordinates **/
if(parentalRelation)
{
bp = p.globalToLocal(new Point(b.x, b.y));
b.x = bp.x;	b.y = bp.y;
}else{
tp = new Point(p.transform.pixelBounds.x, p.transform.pixelBounds.y);
}

if(a == H_LEFT) t.x = (t.x > b.x) ? tp.x + t.x - b.x : tp.x;
if(a == H_CENTER) t.x = tp.x + int((p.width - b.width)/2 + t.x - b.x);
if(a == H_RIGHT) t.x = (t.x > b.x + b.width) ? tp.x + p.width : tp.x + p.width - (b.x + b.width - t.x);
if(a == V_TOP) t.y = (t.y > b.y) ? tp.y + t.y - b.y : tp.y;
if(a == V_MIDDLE) t.y = tp.y + int((p.height - b.height)/2 + t.y - b.y);
if(a == V_BOTTOM) t.y = (t.y > b.y + b.height) ? tp.y + p.height : tp.y + p.height - (b.y + b.height - t.y);
}
}
}

12 Comments (+add yours?)

  1. fmaxx
    Sep 23, 2010 @ 19:48:34

    I am use CasaLibrary, here many powerful utils ( Align, Array, Strings, Validators etc…) for flash programmers

  2. Luigi Fulk
    Nov 23, 2010 @ 09:24:11

    This is great stuff, thanks!

  3. Arindam Mojumder
    Mar 16, 2011 @ 04:17:10

    The class is good. But its not working in all the case, specially when I am using different rotation of different objects and try to align it with any particular object. Is it possible with this class?

    Suppose I have 4 Mclips A,B,C and D. All are located on the same place, i.e root/stage. Now I want to align the rest Mclips with A.

    Mycode:

    AlignUtil.setAlign(“verticalBottom”,B,A);
    AlignUtil.setAlign(“verticalBottom”,C,A);
    AlignUtil.setAlign(“verticalBottom”,D,A);

    Waiting for your reply.

  4. Arindam Mojumder
    Mar 16, 2011 @ 04:23:15

    It is also not working when I am scaling the Object and then aligning.

  5. jloa
    Mar 16, 2011 @ 05:19:45

    replying to the first question >> the AlignUtil doesn’t work, as the B,C,D buttons are not the childs of the A one, see the example http://pastebin.com/0nMvt9rW

    replying to the second question >> well, actually it does work with scaled and rotated objects (if only you are not scaling the parent object), see the example http://pastebin.com/Hp72AiDf

  6. Arindam Mojumder
    Mar 16, 2011 @ 21:31:29

    Hello SIr,

    Is there any possibilities so that I can align the B,C,D according to A clip? Can I do it with your class?

  7. pavan
    Jan 17, 2012 @ 05:25:46

    Hi Mate,

    Thanks for sharing this class. Just trying to use it to align a textfield in a movieclip

    But the AlignUtil.V_MIDDLE doesn’t seem to work, can you please help me how i can use it. Here is the code. I need horizontal and vertical center the textfield.

    AlignUtil.setAlign(AlignUtil.H_CENTER, bannerTxt,this,false)
    AlignUtil.setAlign(AlignUtil.V_MIDDLE, bannerTxt,this,false)

  8. pavan
    Jan 17, 2012 @ 05:29:01

    Well i just figured out the its a textfield and will have to use bannerTxt.autoSize = “left”; So it will calculate the width of the textfield :)

    But Excellent work!!

  9. jloa
    Jan 18, 2012 @ 01:54:01

    2pavan
    If there’s a movieclip ‘mc’ with a textfield ‘bannerTxt’, then you should try to set the parentalRelation param and the code should be like:

    
    AlignUtil.setAlign(AlignUtil.H_CENTER, bannerTxt, mc, true);
    AlignUtil.setAlign(AlignUtil.V_MIDDLE, bannerTxt, mc, true);
    
    

    You are welcome :)

  10. zeshan
    Mar 11, 2012 @ 05:15:32

    great work

  11. jloa
    Mar 13, 2012 @ 11:18:22

    thx

Leave a Reply

Spam protection by WP Captcha-Free