iPlat Blog

package com.iplat.utils{
 
	// Display Imports
 
	import flash.display.MovieClip;
 
	// Events
 
	import flash.events.Event;
	import flash.events.MouseEvent;
 
	// Caurina
 
	import caurina.transitions.*;
	import caurina.transitions.properties.ColorShortcuts;
 
	// iPlat Utils
 
	import com.iplat.utils.Display;
 
	// Pixel Fumes Reflection
 
	import com.pixelfumes.reflect.Reflect;
 
	public class Dock {
 
		// Main MovieClips;
 
		private var _container:MovieClip;
		private var _background:MovieClip;
		private var _mouseArea:MovieClip;
		private var _ribbon:MovieClip;
 
		// Constructor Arguments
 
		private var _target:MovieClip;
		private var _x:Number;
		private var _y:Number;
		private var _width:Number;
		private var _height:Number;
		private var _space:Number;
		private var _orientation:String;
		private var _radius:Number;
		private var _ratio:Number;
		private var _align:String;
 
		// Dock Properties
 
		private var _state:Boolean;
		private var _length = 5;
		private var _items:Array;
		private var _nextPosition:Number;
		private var _nextIndex:Number;
 
		// Positions & Sizes
 
		private var _initXs:Array;
		private var _initYs:Array;
		private var _initWidths:Array;
		private var _initHeights:Array;
		private var _xLefts:Array;
		private var _yLefts:Array;
		private var _xCenters:Array;
		private var _yCenters:Array;
		private var _xRights:Array;
		private var _yRights:Array;
 
		// Anti-jumping Variables
 
		private var _lastX:Number = -1;
		private var _lastY:Number = -1;
 
		// Constants
 
		public static const HORIZONTAL:String = "horizontal";
		public static const VERTICAL:String = "vertical";
		public static const TOP:String = "top";
		public static const BOTTOM:String = "bottom";
		public static const CENTER:String = "center";
		public static const LEFT:String = "left";
		public static const RIGHT:String = "right";
 
		public function Dock($target:MovieClip, $x:Number, $y:Number, $width:Number, $height:Number, $space:Number, $orientation:String,
		$radius:Number = 150, $ratio:Number = 2, $align:String = Dock.BOTTOM) {
 
			ColorShortcuts.init();
 
			_target = $target;
			_x = $x;
			_y = $y;
			_width = $width;
			_height = $height;
			_space = $space;
			_orientation = $orientation;
			_radius = $radius;
			_ratio = $ratio;
			_align = $align;
 
			designLayout();
 
		}
 
		private function designLayout():void {
 
			_container = new MovieClip();
			_target.addChild(_container);
			_container.x = _x;
			_container.y = _y;
 
			_background = Display.solidRectangle(_container, 0, 0, _width, _height, 0x333333, 0.20);
			_mouseArea = Display.solidRectangle(_container, 0, 0, 200, 200, 0x990000, 0);
 
			_ribbon = new MovieClip();
			_container.addChild(_ribbon);
			_ribbon.x = 0;
			_ribbon.y = 0;
 
			_nextPosition = 0;
			_nextIndex = 0;
			_state = false;
 
			_items = new Array();
			_initXs = new Array();
			_initYs = new Array();
			_initWidths = new Array();
			_initHeights = new Array();
			_xLefts = new Array();
			_yLefts = new Array();
			_xCenters = new Array();
			_yCenters = new Array();
			_xRights = new Array();
			_yRights = new Array();
 
			placeItems();
		}
 
		private function placeItems():void {
			for (_nextIndex = 0; _nextIndex < _length; _nextIndex++) {
				var item:MovieClip;
				if ((_nextIndex % 3) == 0) {
					item = new ItemMovie();
				}
				else if ((_nextIndex % 3) == 1) {
					item = new ItemMovie2();
				}
				else if ((_nextIndex % 3) == 2) {
					item = new ItemMovie3();
				}
				addItem(item);
				Tweener.addTween(item,  { _saturation: 0, time: 0.50, transition: "easeOutQuad" } );
				item.buttonMode = true;
				item.useHandCursor = true;
				item.addEventListener(MouseEvent.MOUSE_OVER, itemOver);
				item.addEventListener(MouseEvent.MOUSE_OUT, itemOut);
				item.addEventListener(MouseEvent.CLICK, itemClick);
			}
			_container.addEventListener(Event.ENTER_FRAME, dockFrame);
		}
 
		private function itemOver($evt:MouseEvent):void {
			Tweener.addTween($evt.currentTarget, { _saturation: 1, transition: "easeInOutQuad", time: 0.50 } );
		}
 
		private function itemOut($evt:MouseEvent):void {
			Tweener.addTween($evt.currentTarget, { _saturation: 0, transition: "easeInOutQuad", time: 0.50 } );
		}
 
		private function itemClick($evt:MouseEvent):void {
			trace("clicked");
		}
 
		private function addItem(item:MovieClip):void {
			_ribbon.addChild(item);
			_items[_nextIndex] = item;
			_items[_nextIndex].x = _nextPosition;
 
			alignItem(_nextIndex);
 
			_initXs[_nextIndex] = item.x;
			_initYs[_nextIndex] = item.y;
 
			_initWidths[_nextIndex] = item.width;
			_initHeights[_nextIndex] = item.height;
 
			updatePositions(_nextIndex);
 
			_ribbon.x = (_width - _ribbon.width) / 2;
 
			if (_align == BOTTOM) {
				_ribbon.y = _background.height;
				var r1:Reflect = new Reflect({mc:_items[_nextIndex], alpha:50, ratio:50, distance:1, updateTime:0, reflectionDropoff:1});
			}
			else if (_align == TOP) {
				_ribbon.y =  0;
			}
			else if (_align == CENTER) {
				_ribbon.y =  _background.height / 2;
			}
 
			_nextPosition += item.width + _space;
			updateMouseArea();
		}
 
		private function updatePositions($index):void {
 
			_xLefts[$index] = _items[$index].x;
			_yLefts[$index] = _items[$index].y;
 
			_xCenters[$index] = _items[$index].x + _items[$index].width / 2;
			_yCenters[$index] = _items[$index].y + _items[$index].height / 2;
 
			_xRights[$index] = _items[$index].x + _items[$index].width;
			_yRights[$index] = _items[$index].y + _items[$index].height;
		}
 
		private function updateMouseArea():void {
			_mouseArea.width = _ribbon.width + 2 * _space;
			_mouseArea.x = _ribbon.x - _space;
			_mouseArea.y =  - (_mouseArea.height - _background.height) / 2;
		}
 
		private function alignItem($index):void {
			if (_align == BOTTOM) {
				_items[$index].y = - _items[$index].height;
			}
			else if (_align == TOP) {
				_items[$index].y = 0;
			}
			else if (_align == CENTER) {
				_items[$index].y = - (_items[$index].height / 2);
			}
		}
 
		private function specialAlignItem($index):void {
			if (_align == BOTTOM) {
				_items[$index].y = - _initHeights[$index] * _items[$index].scaleX;
			}
			else if (_align == TOP) {
				_items[$index].y = 0;
			}
			else if (_align == CENTER) {
				_items[$index].y = - (_items[$index].height / 2);
			}
		}
 
		private function dockFrame($evt:Event):void {
			var i:uint;
			var currentX:Number;
			if (_lastX != _mouseArea.mouseX || _lastY != _mouseArea.mouseY) {
				if (_mouseArea.mouseX > 0 && _mouseArea.mouseX <= (_mouseArea.width / _mouseArea.scaleX) && _mouseArea.mouseY > 0 && _mouseArea.mouseY <= _mouseArea.height) {
					currentX = 0;
					for (i = 0; i < _length; i++) {
						var cDistance:Number = Math.round(Math.sqrt(Math.pow(Math.abs(_ribbon.mouseX - _xCenters[i]), 2) + Math.pow(Math.abs(_ribbon.mouseY - _yCenters[i]), 2)) * 100) / 100;
						var lDistance:Number = Math.round(Math.sqrt(Math.pow(Math.abs(_ribbon.mouseX - _xLefts[i]), 2) + Math.pow(Math.abs(_ribbon.mouseY - _yLefts[i]), 2)) * 100) / 100;
						var rDistance:Number = Math.round(Math.sqrt(Math.pow(Math.abs(_ribbon.mouseX - _xRights[i]), 2) + Math.pow(Math.abs(_ribbon.mouseY - _yRights[i]), 2)) * 100) / 100;
						if (cDistance <= _radius || lDistance <= _radius || rDistance <= _radius) {
							var dist:Number = Math.min(cDistance, lDistance, rDistance);
							_items[i].scaleX = _items[i].scaleY = 1 + (1 - Math.pow((Math.round((dist / _radius) * 100) / 100), (3))) * (_ratio - 1);
						}
						else {
							_items[i].scaleX = _items[i].scaleY = 1;
						}
 
						_items[i].x = currentX;
 
						specialAlignItem(i);
 
						currentX += _items[i].width + _space;
						if (i == _length - 1) {
							currentX += _space;
						}
 
						_mouseArea.width = currentX;
						_mouseArea.x = (_background.width - _mouseArea.width) / 2;
						_ribbon.x = (_background.width - _ribbon.width) / 2;
 
						updatePositions(i);
 
						_lastX = _mouseArea.mouseX;
						_lastY = _mouseArea.mouseY;
					}
				}
				else {
					for (i = 0; i < _length; i++) {
						updatePositions(i);
						Tweener.addTween(_items[i], { scaleX: 1, scaleY: 1, x: _initXs[i], y: _initYs[i], time: 0.15, transition: "easeOutQuad" } );
					}
					Tweener.addTween(_mouseArea, { width: _nextPosition + _space, x: (_background.width - (_nextPosition + _space)) / 2, time: 0.15, transition: "easeOutQuad" } );
					Tweener.addTween(_ribbon, { x: (_background.width - (_nextPosition - _space)) / 2, time: 0.15, transition: "easeOutQuad" } );
				}
			}
		}
	}
}

 
Tweener.addTween(_myTextField, {_text: "RandomText", time: 1, transition:"easeOutQuad"});

 
Tweener.addTween(_myTextField, {_text:"Random Text", time: 1, transition: "easeOutQuad", onUpdate: updateTextFromat});
 
private function updateTextFormat():void {
   _textFormat.setTextFormat(_myFormat);
}