Flash AS3 Mosaic

Mosaic is a standalone library for Flash and Flex (ActionScript 3) in order to simplify DisplayObjects instantiation and alignment.

The mold() function is a static method.

Currently supports ActionScript 3.0.
(Flash 8+, Flex 3+, AIR 1+)

Usage

The library is itself a Sprite, with the special static function mold().

(constructor) Mosaic(margin = 0, duration = 0.5)
Creates a new Mosaic (Sprite) object to be added to the stage.
The two parameters specify the margin between tiled objects and the tiling duration in seconds (if duration is 0 then no Tween will be applied).
tile(alignA, alignB, A:DisplayObject, B:DisplayObject, ...N)
Tiles the object B to the object A, aligning the alignA corner of object A to the alignB corner of object B.
Possible corner values: TOP_LEFT, BOTTOM_LEFT, TOP_RIGHT, BOTTOM_RIGHT.
If more than two objects are passed, each element N (alignB) will be corner-matched with the element N-1 (alignA).
NOTE 1: if the tiled object has a "mosaicRect" property with an hash containing {width: ..., height: ...} Mosaic will use them instead of the real ones (useful to control specific margins and fix sizing bugs).
NOTE 2: the x, y positions of the original object will be preserved as margin-top and margin-left.
untile(...args)
Removes (untiles) the object previously added to the objects corner-chain.
(static) Mosaic.mold(clay:*, ...args)
This function is a fast & smart creator for any kind of object (primarily DisplayObjects).
Its first parameter is the constructor object: it can be either a class, an already existing DisplayObject (usually the result of some make function), a function (returning a DisplayObject), a string (the object will be created from the class with the same name).
Then it scans the other parameters: if any of the following parameters is a string, it will be the object name (.name property).
Otherwise, if it's an hash, it reads the hash properties and applies it to the DisplayObject, with some smart shortcuts in this priority order:
  1. Any text-related parameter will be automatically converted into a new TextFormat using those names: textFont, textSize, textColor, textAlign, textBold, textItalic, textUnderline, textLetterSpacing. Also: embedFonts is by default set to true.
  2. Properties: public declared properties will be assigned: if the mold object has a method "a" public, it will be assigned.
  3. Events: any pattern like "onEventName" will be converted to the matching event "EVENT_NAME" for the classes: MouseEvent, KeyboardEvent, FocusEvent, ListEvent, TextEvent, ScrollEvent, SliderEvent, ComponentEvent.
  4. Styles: if the class has a public "getStyleDefinition" and associated styles, any matching style will be applied using setStyle().
  5. Any other thing: will be simply associated (out[name] = property[name]).
Example:
var obj = Mosaic.mold(TextField, "name", { prop1: "data", onEvent: function(){}, ... })
array property object
This is a special tiling object that will initialize an array-like structure to handle chains of same-aligned item.
array.<name>(alignA, alignB)
Initializes the array named "name" with the specified alignment corners.
NOTE: the arrays "x" (TOP_RIGHT, TOP_LEFT) and "y" (BOTTOM_LEFT, TOP_LEFT) are pre-initialized.
array.<name>.push(...args)
Executes the push() array function on the tiled array, adding elements to the end of the chain. Automatically does tile().
array.<name>.pop()
Executes the pop() array function on the tiled array, returning the last element of the chain. Automatically does untile().
array.<name>.shift()
Executes the shift() array function on the tiled array, returning the first element of the chain. Automatically does untile().
array.<name>.unshift(...args)
Executes the unshift() array function on the tiled array, adding elements to the beginning of the chain. Automatically does tile().
array.<name>.splice(...args)
Executes the splice() array function on the tiled array.
See AS3 splice() syntax.
array.<name>.length()
Returns the number of objects inside the array.
array.<name>.mold(...args)
Executes the mold() array function on the tiled array. It executes n-times the mold() function above for each of the arguments passed to it. Each argument is an array, mimicking the mold() parameter syntax.

Examples

Tiling 2 objects, aligning them to their baseline, side by side. 

var m = new Mosaic();
stage.addChild(m);
m.tile(Mosaic.BOTTOM_RIGHT, Mosaic.BOTTOM_LEFT, sprite1, sprite2);

Tiling 2 objects using the compact syntax, aligning them to their baseline, side by side. 

var m = new Mosaic();
stage.addChild(m);
m.tile("br", "bl", sprite1, sprite2);

Tiling 5 objects, aligning them to their top, side by side. 

var m = new Mosaic();
stage.addChild(m);
m.tile("tr", "rl", sprite1, sprite2, movieclip1, sprite3, movieclip2);

Creating a diagonal tiling array, from top-left angle to bottom-right angle, and attaching a few objects.
NOTE: the "diagonal" name is initialized automatically when the alignment parameters are passed. 

var m = new Mosaic();
stage.addChild(m);
m.array.diagonal("br", "tl");
m.array.diagonal.push(sprite1);
m.array.diagonal.push(sprite2, movieclip1, sprite3);
m.array.diagonal.pop(movieclip1);

Molding a new button, passing some parameters. 

var button = Mosaic.mold(Button, "submitButton",
  { 
    label: "Load",
    width: 150,
    emphasized: true,
    enabled: false,
    onClick: function() { trace("Submitted"); }
  }
);

Molding an array, using different constructing sources: by class, by already existing DisplayObject, by function, by function call (like the existing DisplayObject), by string. 

a.array.name.mold(
  [TextField, "name1", { prop1: "data", onEvent: function(){}, ... }],
  [objectX, "name2", { prop1: "data", onEvent: function(){}, ... }],
  [makeFunction, "name3", { prop1: "data", onEvent: function(){}, ... }],
  [calledMakeFunction(), "name4", { prop1: "data", onEvent: function(){}, ... }],
  ["Sprite", "name5", { prop1: "data", onEvent: function(){}, ... }],
);

Download

Changelog

0.5.3 (2009 02 05)
First public release (I should have done it before).