Mike T. Henderson

The Grid overlay class is just that. It's a utility class that draws a grid overlay (or underlay, or even middle-lay--however you want) within your swf during run-time, of specified numbered columns and gutter width. I created this class as a way to assist in maintaining the grid of the layout during the development stage.

The Grid class is as follows:

 
package com.mth.util {
 
        /**
        * AS3 Grid Overlay Utility Class by Mike T. Henderson,
        * is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License.
        * Based on a work at http://mikethenderson.com.
        */
 
	import flash.display.Sprite;
	import flash.display.Stage;
	import flash.text.TextField;
	import flash.utils.Timer;
	import flash.events.Event;
	import flash.events.TimerEvent;
 
	public class Grid extends Sprite {
 
		private var _columns:int = 4;
		private var _gutterW:int = 25;
		private var _columnW:Number = 0;
		private var _color:uint = 0xff0000;
		private var _alphas:Array = [ .5, .35 ];
		private var _columnPositions:Array;
		private var _gridW:int = 0;
		private var _gridH:int = 0;
		private var _showText:Boolean = true;
		private var _useRounding:Boolean = false;
		private var Contain:Sprite;
		private var stageTimer:Timer
 
		public function Grid( args:Object = null ) {
			init( args );
		}
 
		// setters
		public function set columns( v:int ):void { _columns = v; }
		public function set gutterW( v:int ):void { _gutterW = v; }
		public function set color( v:uint ):void { _color = v; }
		public function set alphas( v:Array ):void { _alphas = v; }
		public function set gridW( v:int ):void { _gridW = v; }
		public function set gridH( v:int ):void { _gridH = v; }
		public function set showText( v:Boolean ):void { _showText = v; }
		public function set useRounding( v:Boolean ):void { _useRounding = v; }
 
		// getters
		public function get columns():int { return _columns; }
		public function get gutterW():int { return _gutterW; }
		public function get columnW():Number { return _columnW; }
		public function get alphas():Array { return _alphas; }
		public function get color():uint { return _color; }
		public function get colorHEX():String { return "0x" +  _color.toString(16); }
		public function get gridW():int { return _gridW; }
		public function get gridH():int { return _gridH; }
		public function get columnPositions():Array { return _columnPositions; }
 
		private function init( args:Object = null ):void {
 
			// set properties from object
			if ( args != null ) {
				_columns = ( args.columns != undefined ) ? args.columns : _columns;
				_gutterW = ( args.gutterW != undefined ) ? args.gutterW : _gutterW;
				_color = ( args.color != undefined ) ? args.color : _color;
				_alphas = ( args.alphas != undefined ) ? args.alphas : _alphas;
				_gridW = ( args.gridW != undefined ) ? args.gridW : _gridW;
				_gridH = ( args.gridH != undefined ) ? args.gridH : _gridH;
				_showText = ( args.showText != undefined ) ? args.showText : _showText;
				_useRounding = ( args.useRounding != undefined ) ? args.useRounding : _useRounding;
			}
 
			// add contain to display list
			Contain = new Sprite();
			addChild( Contain );
 
			// create array to host column positions
			_columnPositions = new Array();
 
			// FireFox 3.0 Hack
			// Check to make sure stage dimensions exist on load
			stageTimer = new Timer(100);
			stageTimer.addEventListener(TimerEvent.TIMER, checkStage);
			stageTimer.start();
 
		}
 
		private function checkStage( e:TimerEvent ):void {
			if (stage.stageWidth >= 1 && stage.stageHeight >= 1) {
				stageTimer.removeEventListener(TimerEvent.TIMER, checkStage);
				stageTimer.stop();
				drawGrid();
			}
		}
 
		public function drawGrid():void {
 
			// clear Contain if needed
			clearContain();
 
			// drawGrid vars
			var tGutterW:int = ( _gutterW * _columns ) + _gutterW;
			var i:int = 0;
 
			// set dimensions
			_gridW = ( _gridW == 0 ) ? stage.stageWidth : _gridW;
			_gridH = ( _gridH == 0 ) ? stage.stageHeight : _gridH;
			_columnW = ( _useRounding == true ) ? Math.round( ( _gridW - tGutterW ) / _columns ) : ( _gridW - tGutterW ) / _columns;
 
			while ( i < _columns ) {
 
				var colBox:Sprite = new Sprite();
				colBox.graphics.beginFill( _color, _alphas[ i % 2 ] );
				colBox.graphics.drawRect( 0, 0, _columnW, _gridH );
				colBox.x = ( ( _columnW + _gutterW ) * i ) + _gutterW;
 
				// populate column position array
				_columnPositions.push( colBox.x );
 
				if ( _showText == true ) {
					var colTXT:TextField = new TextField();
					colTXT.multiline = true;
					colTXT.autoSize = "left";
					colTXT.htmlText = String( "Column: " + i + "X : " + colBox.x );
					colBox.addChild( colTXT );
				}
 
				Contain.addChild( colBox );
 
				i++;
 
			}
 
		}
 
		private function clearContain():void {
			while( Contain.numChildren > 0 ) { Contain.removeChildAt( 0 ); }
		}
 
	}
 
}
 

Then to call the class:

 
import com.mth.util.Grid;
 
var myGrid:Grid = new Grid({
	columns : 4,
	gutterW : 10,
	color	 : 0x3366ff,
	gridH : 250,
	useRounding : true
});
 
addChild( myGrid );
 

More documentation in asdoc form can be found using the link below:

ASDocs: View ASDocs

AS3 Grid Overlay Utility Class by Mike T. Henderson,
is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License.
Based on a work at mikethenderson.com.

3 Comments | Posted under Tools