As3 short-cut library :- bwhiting swc

updated: 17.01.2012

Quick follow-on from the previous post.

Added a few more features/functions that I use so feel free to give it a whirl see how you get on, please feedback with any problems or suggestions.


Quick run down of the functions:

  • addListener – adds an event listener to a target with some added magical powers
  • removeListener – removes a single listener assigned by the “addListener” function
  • removeAllListeners – removes all listeners assigned by the “addListener” function
  • buttonify – assigns some button like functionality to an interactive object
  • unbuttonify – removes the functionality added by a call to the “buttonify” function
  • grid – arranges the target’s children in a grid
  • hbox – arranges the target’s children in a hbox
  • vbox – arranges the target’s children in a vbox
  • addChildren – a small short-cut to add a few children to a DisplayObjectContainer at once
  • removeAllChildren – short-cut to remove all the children of a DisplayObjectContainer


more details (with code and samples) to follow but more info can be found in the docs below.

download swc:
bwhiting v1.2

click com.bwhiting.utilities

Code and Samples:

Layout functions

demo here

In the demo above there are 3 buttons.
The first button arranges the content in a hbox style with a padding of 5
The second button arranges the content in a vbox style with a padding of 5
The third button arranges the content in a grid style with fixed number of columns (in brackets) and a padding of 5

The code that drives it is very simple…

private function updateLayout(layout:String):void
	if(layout == "hbox") hbox(container, padding);
	else if(layout == "vbox") vbox(container, padding);
	else if(layout == "grid") grid(container, cols, padding);

So what happens when you click one of those buttons is the above function is called with a parameter “layout” based on which button was clicked.
The sprite “container” holds 5 simple display objects and the functions hbox/vbox/grid all operate automatically on the children of the 1st parameter.
To to arrange display objects horizontally or vertically or in a grid only takes one line of code… ūüôā

Event functions

//adds a listener to the stage for Event.RESIZE and calls the onResize function when triggered
addListener(stage, Event.RESIZE, onResize);
//adds a listener to mc1 for MouseEvent.CLICK and calls the handleClick1 function when triggered
addListener(mc1, MouseEvent.CLICK, handleClick1);
//notice how no event parameter is needed in the function
private function handleClick1():void
//adds a listener to mc2 for MouseEvent.CLICK and calls the handleClick2 function when triggered
//but also passes mc2 in as a parameter
addListener(mc2, MouseEvent.CLICK, handleClick2, mc2);
private function handleClick2(mc:Movieclip):void
	trace("handleClick2", mc);
//adds a listener to mc3 for MouseEvent.CLICK and calls the handleClick3 function when triggered
//but also passes mc3 as a parameter and tells it to also return the event as a parameter
//thanks to the return event flag (the true after mc3)
addListener(mc3, MouseEvent.CLICK, handleClick3, mc3, true);
private function handleClick3(mc:Movieclip, e:MouseEvent):void
	trace("handleClick3", mc, e.ctrlKey);
//adds a listener to mc4 for MouseEvent.CLICK and calls the handleClick4 function when triggered
//but also passes an array containing mc4 and an alpha value
addListener(mc4, MouseEvent.CLICK, handleClick4, [mc4, 0.5]);
private function handleClick4(array:Array):void
	array[0].alpha = array[1];
//adds a listener to mc5 for MouseEvent.CLICK and calls the handleClick5 function when triggered
//but also passes the parameters mc5 and 0.5 in sequence thanks to the apply parameters flag (the true at the end)!
addListener(mc5, MouseEvent.CLICK, handleClick5, [mc5, 0.5], false, true);
private function handleClick5(mc:MovieClip, alpha:Number):void
	mc.alpha = alpha;
//adds a listener to mc6 for MouseEvent.CLICK and calls the handleClick6 function when triggered
//but also passes the parameters mc6 and 0.5 in sequence and also sends the event though
addListener(mc5, MouseEvent.CLICK, handleClick5, [mc5, 0.5], true, true);
private function handleClick6(mc:MovieClip, alpha:Number, e:MouseEvent):void
	mc.alpha = alpha;
//notice how no event parameter is needed in the function
private function onResize():void
	//aligns this centrally on the stage (using the align function included in bwhiting.swc)
	align(this, stage);

This has real potential to save some typing it is also pretty powerful to if you use your imagination.

//quick dragging! - not the best example but shows what it can do
addListener(box, MouseEvent.MOUSE_DOWN, box.startDrag, [false, new Rectangle(0,0,stage.stageWidth-box.width, stage.stageHeight-box.height)], false, true);

you can also clear a listener or remove all registered listeners with one call (must have been registered with “addListener”)

//remove single listener
removeListener(box, MouseEvent.MOUSE_DOWN);
//remove all listeners attached to box



Aligning in Actionscript

Ever had to align something in as3 before?

How many times have you typed something like this to centre align a display object?

child.x = (parent.width - child.width) / 2;

Well no more!


This is a class I have been using for years and always meant to share but never got round to it.

Here is how it works:

//to centre align a display object with its parent:
//to top-right align a display object with its parent:
align(child, null, [1, 0]);
//to bottom-right align a display object with its parent:
align(child, null, [1, 1]);
//to centre align a display object with respect to the stage:
align(child, stage);
//to top-centre align a display object with respect to the stage and offset it by 25 pixels in the y direction:
align(child, stage, [0.5,1], [0,25]);

Why it works:

parameter 1 – the display object to align
parameter 2 – the object to align against (if null it will use the child’s parent)
note: this can be a display object or an array of length 2 (element 0 being width and 1 being height) comes in handy if you want to align against some values not relating to a specific display object
parameter 3- the alignment in array form! element 0 is the alignment in x-direction and element 1 is the alignment in the y-direction… [0,0] = top left, [1,1] = bottom right, [0.5,0.5] = middle centre (also the default if you pass in null)
parameter 4 – an optional offset array in pixels i.e. an array here of [50,-100] would offset the display object by +50 in the x direction and -100 in the y direction, after the object has been aligned!

Its not perfect but I use it all the time!!! Brilliant in resize event handlers:

align(_contact, stage, [0.5, 1], [0,-25]);
align(_content, stage);
align(_bg, stage, null, [0,-50]);
align(_spinner, _content, null, [_content.x+_spinner.width/2, _content.y+_spinner.height/2]);

just a small snippet from a resize handler in one of my projects… really really speeds things up when it comes to aligning

please use it and please feedback, especially if it breaks/dies/explodes

I plan to add support for detecting bounds as at the moment it is geared at top left aligned display objects only (although you can use the offset to overcome this if you wish)

let me know what you think


EDIT: the following link has been updated to include the features as described in the next post, ensure you download the latest version number
the download link —-> bwhiting v1.1 <----

3d misc

booo adobe

Just wanted to share a few of my frustrations with as3, in particular the apis added to aid 3d development.

My reason for voicing these is really to find out if its me miss understanding things or if other people share my opinions.

My main issue is the restrictions of the drawtriangles/projectVectors/transformVectors methods.

These methods work well and are pretty fast but the parameter format drives me nuts!

everything has to be in vectors of numbers i.e.

var verts:Vector.<Number> = new Vector.<Number>();

verts.push(0, 0, 0, 10, 0, 0, 0, 0, 10);

the vector verts now contains a representation of three 3d vertices (that make up a triangle) in the format the flash wants them in.

is this format easy to manage/maintain…no.

is it easy to debug…no.

is it faster for non-native methods…no.

is it the format flash demands…yes.

is it a pain in the arse…yes.

directly referencing a vertex like this is impossible and accessing it will require a minimum of 6 vector index operations, 3 to get the numbers out and 3 to put them back (slow slow slow).


I find things so inflexible that I run two systems in parallel, just to take advantage of the new methods resulting in wasted time and memory.

You often end up just having to repopulate these lists every frame, which although works its just plain craziness.

I am sure there are good reasons for this but what are they?

Why couldn’t they have given us a few interfaces instead i.e. IVector2D and IVector3D. Would it really be much slower?

Let us manage things our own way, give us freedom to implement things how we like!

Another thing that has been bugging me is drawTriangles, it isn’t currently flexible enough to be fully taken advantage of. Say for example you had a cube, and you decide to use 8 vertices to define it, one for each corner, drawTriangles is great because it lets you define which of the vertices makes up each individual triangle but it wont let you specify individual uv-coordinates per triangle-vertex. booo. Ideally a vertex shouldn’t need to be tied to one uv and one uv only because if that vertex is also part of another face it make have a different uv-coord.

Given that adobe are supposedly working on new 3d shiznit that are gonna blow our minds, I really really hope they consult the community and ask the people who are going to be using it most for input, ideas and suggestions!


behold.. a mighty blog was born

Well I don’t know about mighty but here she is.

My name is Ben and I like to flash.

I’ve been in the game for a while now and figured it was about time to set up a little place to share my woes, expose my experiments and hopefully gain some knowledge from perhaps the best¬†on-line¬†community¬†there is.

But don’t expect great things just yet… for I am¬†a man with far more questions than answers.

Hopefully this won’t be a waste of space and with any luck it will be a source of enlightenment for you and me.