hulse.me

Article


/ Box Shredz / Experimental Flash thingy


Inspired by this site. :: drool ::


“Shredz” modeled in, and output from, Maya.


package me.hulse.shredz {
	
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.display.DisplayObject;
	import flash.display.Stage;
	import flash.display.StageScaleMode;
	import flash.display.StageAlign;
	import flash.display.Graphics;
	import flash.display.GradientType;
	import flash.display.SpreadMethod;
	import flash.display.BlendMode;
	import flash.events.MouseEvent;
	import flash.display.Loader;
	import flash.events.Event;
	import flash.net.URLRequest;
	import flash.filters.BitmapFilterQuality;
	import flash.filters.BlurFilter;
	import flash.geom.*;
	
	import ascb.util.ArrayUtilities;
	import gs.TweenMax; // http://blog.greensock.com/tweenliteas3/
	import gs.easing.*;
	
	public class Main extends MovieClip {
		
		private static const SWF_PATH:String = "assets/"; // Folder with swf's.
		private static const NUM_SWFS:Number = 32; // Total number of clips to load.
		private static const NUM_PARENTS:Number = 2; // Total number of parent containers.
		private static const GRAD_HEIGHT:Number = 300;
		private static const CHILD_OFFSET:Number = 400;
		
		private var _parents:Array;
		private var _children:Array;
		private var _clips:Array;
		private var _clipsCopy:Array;
		private var _currentClip:int;
		private var _final:Array;
		private var _stageWidth:Number;
		private var _stageHeight:Number;
		private var _grad:Sprite;
		
		// @ Main()
		public function Main():void {
			
			init(); // Begin program.
			
		};
		
		// @ init()
		private function init():void {
			
			setup();
			
			background();
			
			parents(0);
			
			middleground();
			
			parents(1);
			
			foreground();
			
			children();
			
			display();
			
		};
		
		// @setup()
		private function setup():void {
			
    		_final = new Array();
			_parents = new Array();
			_children = new Array();
			_clips = new Array();
			_clipsCopy = new Array();
			
			// Stage:
			_stageWidth = stage.stageWidth;
			_stageHeight = stage.stageHeight;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			stage.addEventListener(Event.RESIZE, onResize, false, 0, true);
			
			/*
			** 
			** _clips[*][0] = Clip number and/or depth.
			** _clips[*][1] = Path to file.
			** _clips[*][2] = .x clip home location.
			** _clips[*][3] = .y clip home location.
			** 
			*/
			
			_clips = [
				[1, "r1", 17.9, -299.3],    [2, "r2", 39.5, -234.9],   [3, "r3", 60.4, -207.9],    [4, "r4", 81.9, -289.0],    [5, "r5", 104.5, -182.2],   [6, "r6", 128.2, -211.3],   [7, "r7", 153.0, -278.5],   [8, "r8", 179.1, -156.7],
				[9, "b8", -26.5, -316.8],   [10, "b7", -39.8, -291.9], [11, "b6", -149.6, -248.2], [12, "b5", -105.5, -237.4], [13, "b4", -166.9, -195.3], [14, "b3", -180.4, -297.6], [15, "b2", -215.8, -250.3], [16, "b1", -249.1, -278.4],
				[17, "l8", -382.8, -273.4], [18, "l7", -290.1, -98.5], [19, "l6", -365.4, -271.6], [20, "l5", -278.1, -196.9], [21, "l4", -228.8, -166.1], [22, "l3", -260.7, -179.4], [23, "l2", -176.6, -141.1], [24, "l1", -139.4, -106.0],
				[25, "f1", 187.3, -273.1],  [26, "f2", 166.2, -173.4], [27, "f3", 143.9, -203.6],  [28, "f4", 120.5, -153.3],  [29, "f5", 95.7, -79.5],    [30, "f6", 69.6, -183.8],   [31, "f7", 40.4, -109.7],   [32, "f8", 9.8, -118.1]
			];
			
			// Duplicate:
			_clipsCopy = ArrayUtilities.duplicate(_clips) as Array;
			// Randomize:
			_clipsCopy = ArrayUtilities.randomize(_clipsCopy);
			
		};
		
		// @display()
		private function display():void {
			
			var loader:Loader = new Loader();
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComplete, false, 0, true);
			loader.load(new URLRequest(SWF_PATH + _clipsCopy[0][1] + ".swf"));
			
		};
		
		// @onLoadComplete()
		private function onLoadComplete(e:Event):void {
			
			var targChild:MovieClip = _children[_clipsCopy[0][0] - 1];
			
			// http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/Array.html
			_final.push(e.target.content); // Adds one or more elements to the end of an array and returns the new length of the array.
			
			targChild.addChild(_final[_final.length - 1]);
			TweenMax.to(targChild, 1, { y:(targChild.y - CHILD_OFFSET), ease:Elastic.easeInOut, easeParams:[1, 5] });
			
			_clipsCopy.shift(); // Removes the first element from an array and returns that element.
			
			if (_clipsCopy.length > 0) {
				display();
			}
			
		};
		
		// @background()
		private function background():void {
			
		};
		
		// @middleground()
		private function middleground():void {
			
		};
		
		// @foreground()
		private function foreground():void {
			
			makeGradient();
			
		};
		
		// @parents()
		private function parents(key:int):void {
			
			/*
			** 
			** Create parent sprites:
			** 
			*/
			
			_parents[key] = new Sprite();
			_parents[key].name = "parent_" + key;
			_parents[key].x = (_stageWidth / 2) - 20;
			_parents[key].y = (_stageHeight / 2) + 75;
			this.addChild(_parents[key]);
			
		};
		
		// @children()
		private function children():void {
			
			/*
			** 
			** Create children movieclips:
			** 
			*/
			
			var i:int;
			
			for (i = 0; i < NUM_SWFS; i++) {
				
				_children<i> = new MovieClip();
				this._parents[(i < 17 ? 0 : 1)].addChild(_children<i>);
				
				with(_children<i>){
					
					// Do something with _children<i>:
					
					// Button mode:
					buttonMode = true;
					
					// Name:
					name = _clips<i>[1] + "_mc";
					
					// Positioning:
					x = _clips<i>[2];
					y = _clips<i>[3] + CHILD_OFFSET;
					
					// Event listeners:
					//addEventListener(MouseEvent.CLICK, onMouseEvent, false, 0, true);
					addEventListener(MouseEvent.ROLL_OVER, onMouseEvent, false, 0, true);
					addEventListener(MouseEvent.ROLL_OUT, onMouseEvent, false, 0, true);
					
				}
				
			}
			
		};
		
		private function makeGradient():void {
			
			// http://snipplr.com/view/7050/as3-creating-a-gradient-rectangle/
			
			// Type of Gradient we will be using:
			var fType:String = GradientType.LINEAR;
			
			// Colors of our gradient in the form of an array:
			var colors:Array = [0xf1f1f2, 0xf1f1f2];
			
			// Store the Alpha Values in the form of an array:
			var alphas:Array = [0, 1];
			
			// Array of color distribution ratios:
			var ratios:Array = [0, 255]; // The value defines percentage of the width where the color is sampled at 100%.
			
			// Create a Matrix instance and assign the Gradient Box:
			var matr:Matrix = new Matrix();
			matr.createGradientBox(_stageWidth, 200, (Math.PI/180) * 90, 0, 0);
			
			// SpreadMethod will define how the gradient is spread:
			var sprMethod:String = SpreadMethod.PAD; // Note!!! Flash uses CONSTANTS to represent String literals.
			
			// Start the Gradient and pass our variables to it:
			_grad = new Sprite();
			
			// Allow mouse to bleed through:
			_grad.mouseEnabled = false;
			
			// Save typing + increase performance through local reference to a Graphics object:
			var g:Graphics = _grad.graphics;
			g.beginGradientFill(fType, colors, alphas, ratios, matr, sprMethod);
			g.drawRect(0, 0, _stageWidth, GRAD_HEIGHT);
			
			// Position:
			_grad.x = 0;
			_grad.y = (_stageHeight - GRAD_HEIGHT);
			
			// Add to display list:
			addChild(_grad);
			
		}
		
		// @onMouseEvent()
		private function onMouseEvent(e:MouseEvent):void {
			
			var targ:* = e.currentTarget.getChildAt(0);
			
			// http://www.actionscript.org/forums/showpost.php3?p=691093&postcount=9
			
			switch (e.type) {
				
				case "rollOver":
					
					trace(e.type);
					
					TweenMax.to(targ, 2, { y:(this.y - 50), ease:Elastic.easeOut, easeParams:[1, .2] });
					TweenMax.to(targ, .2, { blurFilter:{ blurY:20 }, overwrite:false, ease:Linear.easeIn });
					TweenMax.to(targ, .2, { blurFilter:{ blurY:0 }, delay:.2, overwrite:false });
					
					if (targ.totalFrames > 1) {
						targ.removeEventListener(Event.ENTER_FRAME, onLoopBackward);
						targ.addEventListener(Event.ENTER_FRAME, onLoopForward, false, 0, true);
					}
					
					break;
					
				case "rollOut":
					
					trace(e.type);
					
					TweenMax.to(targ, 1, { y:this.y, ease:Elastic.easeInOut, easeParams:[1, 5] });
					
					if (targ.totalFrames > 1) {
						targ.removeEventListener(Event.ENTER_FRAME, onLoopForward);
						targ.addEventListener(Event.ENTER_FRAME, onLoopBackward, false, 0, true);
					}
					
					break;
					
				/*case "click":
					trace(e.type);
					break;*/
					
			}
			
		};
		
		// @onResize()
		private function onResize(e:Event):void {
			
			trace("stageWidth: " + _stageWidth + " stageHeight: " + _stageHeight);
			
			_stageWidth = stage.stageWidth;
			_stageHeight = stage.stageHeight;
			
			_parents[0].x = (_stageWidth / 2) - 20;
			_parents[0].y = (_stageHeight / 2) + 75;
			_parents[1].x = (_stageWidth / 2) - 20;
			_parents[1].y = (_stageHeight / 2) + 75;
			
			// Size and position:
			_grad.width = _stageWidth;
			_grad.x = 0;
			_grad.y = (_stageHeight - GRAD_HEIGHT);
			
		};
		
		// @onLoopForward()
		private function onLoopForward(e:Event) {
			
			var targ:* = e.currentTarget;
			
			if (targ.currentFrame == targ.totalFrames) {
				targ.removeEventListener(Event.ENTER_FRAME, onLoopForward);
			} else {
				targ.nextFrame();
			}
			
		};
		
		// @onLoopBackward()
		private function onLoopBackward(e:Event) {
			
			var targ:* = e.currentTarget;
			
			if (targ.currentFrame == 1) {
				targ.removeEventListener(Event.ENTER_FRAME, onLoopBackward);
			} else {
				targ.prevFrame();
			}
			
		};
		
	};
	
};

Box Shredz document class.