AS3: StageManager
View Example
View Documentation
Download Class & Example Files
The StageManager aligns items according to their selected alignment mode. You have the ability to resize your items with "easing" or "instant" modes as well. It also dispatches an event, ON_RESIZE, that allows for further manipulation of items to the stage sizing.
This is a port of my AS2 StageManager but I've changed some stuff around since you can now align not just movie clips but sprites and other display objects as well.
-
package com.reintroducing.utils
-
{
-
import flash.display.DisplayObject;
-
import flash.display.Stage;
-
import flash.display.StageAlign;
-
import flash.display.StageScaleMode;
-
import flash.events.Event;
-
import flash.events.EventDispatcher;
-
-
import com.reintroducing.events.StageManagerEvent;
-
-
import fl.transitions.Tween;
-
-
/**
-
* Creates an instance of the StageManager that aligns items according to their selected alignment mode. Also dispatches an event, ON_RESIZE, that allows for further manipulation of items to the stage sizing.
-
*
-
* @usage
-
<code>
-
import fl.transitions.easing.*;
-
import com.reintroducing.utils.StageManager;
-
import com.reintroducing.events.StageManagerEvent;
-
-
var listener:Object = new Object();
-
var sm:StageManager = new StageManager(stage, "easing", .5, Regular.easeOut);
-
-
sm.addItem(test1_mc, "TL", 10, 10);
-
sm.addItem(test2_mc, "TC");
-
sm.addItem(test3_mc, "TR");
-
sm.addItem(test4_mc, "ML");
-
sm.addItem(test5_mc, "MC");
-
sm.addItem(test6_mc, "MR");
-
sm.addItem(test7_mc, "BL");
-
sm.addItem(test8_mc, "BC");
-
sm.addItem(test9_mc, "BR", -30, -50);
-
-
trace("LENGTH OF ITEMS: " + sm.items.length);
-
-
sm.addEventListener(StageManagerEvent.ON_RESIZE, resizeHandler);
-
-
function resizeHandler($evt:StageManagerEvent):void
-
{
-
trace("STAGE WIDTH: " + stage.stageWidth + " & STAGE HEIGHT: " + stage.stageHeight);
-
};
-
-
sm.init();
-
</code>
-
*
-
* @author Matt Przybylski [http://www.reintroducing.com]
-
* @version 1.0
-
*/
-
-
public class StageManager extends EventDispatcher
-
{
-
//- PRIVATE & PROTECTED VARIABLES -------------------------------------------------------------------------
-
-
private var _stage:Stage;
-
private var _items:Array;
-
private var _resizeStyle:String;
-
private var _easeTime:Number;
-
private var _easeFunc:Function;
-
private var _tweenX:Tween;
-
private var _tweenY:Tween;
-
-
//- PUBLIC & INTERNAL VARIABLES ---------------------------------------------------------------------------
-
-
-
-
//- CONSTRUCTOR -------------------------------------------------------------------------------------------
-
-
/**
-
* Creates a new instance of the StageManager class.
-
*
-
* @usage <code>var sm:StageManager = new StageManager($stage, $resizeStyle, $easeTime, $easeFunc);</code>
-
*
-
* @param $stage A reference to the main stage.
-
* @param $resizeStyle A string value that represents how to move the clips into position ("easing" or "instant").
-
* @param $easeTime If the $resizeStyle is set to "easing", time (in seconds) it takes to ease clips into position.
-
* @param $easeFunc If the $resizeStyle is set to "easing", the easing function used to ease clips into position.
-
*
-
* @return void
-
*/
-
-
public function StageManager($stage:Stage, $resizeStyle:String, $easeTime:Number, $easeFunc:Function):void
-
{
-
this._stage = $stage;
-
this._items = new Array();
-
this._resizeStyle = $resizeStyle;
-
this._easeTime = $easeTime;
-
this._easeFunc = $easeFunc;
-
-
this._stage.scaleMode = StageScaleMode.NO_SCALE;
-
this._stage.align = StageAlign.TOP_LEFT;
-
this._stage.addEventListener(Event.RESIZE, onResize);
-
}
-
-
//- PRIVATE & PROTECTED METHODS ---------------------------------------------------------------------------
-
-
private function onResize($evt:Event):void
-
{
-
if (this._resizeStyle == "instant")
-
{
-
this.doInstantResize();
-
}
-
else if (this._resizeStyle == "easing")
-
{
-
this.doEasingResize();
-
}
-
-
this.dispatchEvent(new StageManagerEvent(StageManagerEvent.ON_RESIZE, {}));
-
}
-
-
// Resizes the clips using no easing but instant movement.
-
private function doInstantResize():void
-
{
-
var numClips:int = this._items.length;
-
-
for (var i:int = 0; i <numClips; i++)
-
{
-
var clip:DisplayObject = this._items[i].item;
-
var clipX:Number = this._items[i].x;
-
var clipY:Number = this._items[i].y;
-
-
switch (this._items[i].mode)
-
{
-
case "TL":
-
clip.x = (0 + clipX);
-
clip.y = (0 + clipY);
-
break;
-
-
case "TC":
-
clip.x = (((this._stage.stageWidth * .5) - (clip.width * .5)) + clipX);
-
clip.y = (0 + clipY);
-
break;
-
-
case "TR":
-
clip.x = ((this._stage.stageWidth - clip.width) + clipX);
-
clip.y = (0 + clipY);
-
break;
-
-
case "ML":
-
clip.x = (0 + clipX);
-
clip.y = (((this._stage.stageHeight * .5) - (clip.height * .5)) + clipY);
-
break;
-
-
case "MC":
-
clip.x = (((this._stage.stageWidth * .5) - (clip.width * .5)) + clipX);
-
clip.y = (((this._stage.stageHeight * .5) - (clip.height * .5)) + clipY);
-
break;
-
-
case "MR":
-
clip.x = ((this._stage.stageWidth - clip.width) + clipX);
-
clip.y = (((this._stage.stageHeight * .5) - (clip.height * .5)) + clipY);
-
break;
-
-
case "BL":
-
clip.x = (0 + clipX);
-
clip.y = ((this._stage.stageHeight - clip.height) + clipY);
-
break;
-
-
case "BC":
-
clip.x = (((this._stage.stageWidth * .5) - (clip.width * .5)) + clipX);
-
clip.y = ((this._stage.stageHeight - clip.height) + clipY);
-
break;
-
-
case "BR":
-
clip.x = ((this._stage.stageWidth - clip.width) + clipX);
-
clip.y = ((this._stage.stageHeight - clip.height) + clipY);
-
break;
-
}
-
}
-
}
-
-
// Resizes the clips using an easing equation.
-
private function doEasingResize():void
-
{
-
var numClips:int = this._items.length;
-
-
for (var i:int = 0; i <numClips; i++)
-
{
-
var clip:DisplayObject = this._items[i].item;
-
var clipX:Number = this._items[i].x;
-
var clipY:Number = this._items[i].y;
-
var x:Number;
-
var y:Number;
-
-
switch (this._items[i].mode)
-
{
-
case "TL":
-
x = (0 + clipX);
-
y = (0 + clipY);
-
break;
-
-
case "TC":
-
x = (((this._stage.stageWidth * .5) - (clip.width * .5)) + clipX);
-
y = (0 + clipY);
-
break;
-
-
case "TR":
-
x = ((this._stage.stageWidth - clip.width) + clipX);
-
y = (0 + clipY);
-
break;
-
-
case "ML":
-
x = (0 + clipX);
-
y = (((this._stage.stageHeight * .5) - (clip.height * .5)) + clipY);
-
break;
-
-
case "MC":
-
x = (((this._stage.stageWidth * .5) - (clip.width * .5)) + clipX);
-
y = (((this._stage.stageHeight * .5) - (clip.height * .5)) + clipY);
-
break;
-
-
case "MR":
-
x = ((this._stage.stageWidth - clip.width) + clipX);
-
y = (((this._stage.stageHeight * .5) - (clip.height * .5)) + clipY);
-
break;
-
-
case "BL":
-
x = (0 + clipX);
-
y = ((this._stage.stageHeight - clip.height) + clipY);
-
break;
-
-
case "BC":
-
x = (((this._stage.stageWidth * .5) - (clip.width * .5)) + clipX);
-
y = ((this._stage.stageHeight - clip.height) + clipY);
-
break;
-
-
case "BR":
-
x = ((this._stage.stageWidth - clip.width) + clipX);
-
y = ((this._stage.stageHeight - clip.height) + clipY);
-
break;
-
}
-
-
this._tweenX = new Tween(clip, "x", this._easeFunc, clip.x, x, this._easeTime, true);
-
this._tweenY = new Tween(clip, "y", this._easeFunc, clip.y, y, this._easeTime, true);
-
}
-
}
-
-
//- PUBLIC & INTERNAL METHODS -----------------------------------------------------------------------------
-
-
/**
-
* Initializes the StageManager and helps avoid the FireFox bug (won't manage the stage on initial load).
-
*
-
* @usage <code>sm.init();</code>
-
*
-
* @return void
-
*/
-
-
public function init():void
-
{
-
this._stage.dispatchEvent(new Event(Event.RESIZE));
-
}
-
-
/**
-
* Adds an item to the items array so that is is tracked when resizing. $offsetX and $offsetY are optional and can be left blank to use no offsets.
-
*
-
* <p>
-
* The $alignMode parameter can be any of the following string values:
-
* <ul>
-
* <li>"TL": top left</li>
-
* <li>"TC": top center</li>
-
* <li>"TR": top right</li>
-
* <li>"ML": middle left</li>
-
* <li>"MC": middle center</li>
-
* <li>"MR": middle right</li>
-
* <li>"BL": bottom left</li>
-
* <li>"BC": bottom center</li>
-
* <li>"BR": bottom right</li>
-
* </ul>
-
* </p>
-
*
-
* @usage <code>sm.addItem(test2_mc, "TL", 10, 30);</code>
-
*
-
* @param $item The item that is to be added to the items array.
-
* @param $alignMode A string value that represents the mode to align the item to.
-
* @param $offsetX An optional number that represents the value to offset the item on its x axis from its align spot (negative offsets left).
-
* @param $offsetY An optional number that represents the value to offset the item on its y axis from its align spot (negative offsets up).
-
*
-
* @return void
-
*/
-
-
public function addItem($item:DisplayObject, $alignMode:String, $offsetX:Number = 0, $offsetY:Number = 0):void
-
{
-
this._items.push({item: $item, mode: $alignMode, x: $offsetX, y: $offsetY});
-
}
-
-
/**
-
* Removes an item from the items array so it is no longer tracked by the resizing.
-
*
-
* @usage <code>sm.removeItem(test_mc);</code>
-
*
-
* @param $item The item that is to be removed from the items array.
-
*
-
* @return void
-
*/
-
-
public function removeItem($item:DisplayObject):void
-
{
-
var numClips:int = this._items.length;
-
-
for (var i:int = 0; i <numClips; i++)
-
{
-
var item:DisplayObject = this._items[i].item;
-
-
if (item == $item)
-
{
-
this._items.splice(i, 1);
-
}
-
}
-
}
-
-
//- EVENT HANDLERS ----------------------------------------------------------------------------------------
-
-
-
-
//- GETTERS & SETTERS -------------------------------------------------------------------------------------
-
-
/**
-
* Returns the current items array.
-
*
-
* @usage <code>trace(sm.items);</code>
-
*
-
* @return An array of the items currently being aligned to the stage.
-
*/
-
-
public function get items():Array
-
{
-
return this._items;
-
}
-
-
//- HELPERS -----------------------------------------------------------------------------------------------
-
-
public override function toString():String
-
{
-
return "com.reintroducing.utils.StageManager";
-
}
-
-
//- END CLASS ---------------------------------------------------------------------------------------------
-
}
-
}
If you found this post useful, please consider leaving a comment, subscribing to the feed, or making a small donation.
14 Comments
hi,
how would you go about to set a constraint (stage dimension)using this class? Like if I want to let user able to resize but the minimum stage size cant be smaller than 350x200...
thanks.
Hey Rich,
The class isn't designed to do that right now, but that's actually a very good option to have. I'll try to add that in soon but unfortunately it probably won't be until next week as I'm heading off to FITC tomorrow morning.
Thanks for the suggestion!
Thank you !
I have just tried and just change this class. Instead of Tween class i've used Tweener class. It work !
I am going to use it in my plans and I would make you of comebacks if I find error..
Mika
Glad you like it Mika, but why edit it to use Tweener? Did you change the functionality or just wanted to use Tweener in it? I didn't include a tweening engine because i didn't want to have to include dependencies, but if you insist on using a tweening engine i would go with TweenLite (http://www.tweenlite.com). It's updated more frequently, faster, and more lightweight than Tweener.
I think that native Flash Tweens are very restricted. Tweener give you more posibilities. Like bezier etc...
I think Tweener is better than Tweenlight because i met several bug with Tweenlight.
Thank's a lot for this StageManager
(sorry for my english )
no problem about your english.
what bugs have you run into with TweenLite? I assure you there are not many (if any at all) bugs in the engine. I use it on a daily basis and push it a lot and it has better bezier tweening capabilities than Tweener.
Hi There,
I'm trying to implement your stage manager and for some reason one of the assets goes off the stage and comes back to its right position only after me manually changing the size of the window...
here'smy code:
addChild(myOcean);
sm=new StageManager(stage,"easing",.5,Regular.easeOut);
sm.addEventListener(StageManagerEvent.ON_RESIZE, resizeHandler);
sm.addItem(myOcean, "BC");
sm.init();













[...] stumbleupon, technorati, twitter, more '; AS3 StageManager 1 Minute Ago View Example View Blog Post The StageManager aligns items according to their selected alignment mode. You have the ability to [...]