share

Famous Triangle Trick

forked:3
favorite:15
lines : 145
license : MIT License
modified : 2009-04-01 06:26:23

package {
	import flash.display.*;
	import flash.events.*;
	import flash.filters.*;
	import flash.geom.Matrix;
	import flash.text.*;
	
	// My first use of Tweener. Brilliant library!
    import caurina.transitions.Tweener;
	import caurina.transitions.properties.CurveModifiers;
	
	[SWF(width = "465", height = "465", frameRate = "60", backgroundColor="0x38502A")]
	public class TriangleTrick extends Sprite {
		private const W:Number = stage.stageWidth;
		private const H:Number = stage.stageHeight;
		
		private const ORIGIN_X:Number = W * 0.06;
		private const ORIGIN_Y:Number = H * 0.63;
		private const GRID_SPACING:int = 30;
		
		private var polygons:Vector.<Shape> = new Vector.<Shape>();
		private var polygonData:Array = [
			{ x:[0, 5], y:[0, 2], bezier:{ x:0, y:9, rotation:20 }, color:0xFF3300, vertices:[0, 0,  8, 0,  8, 3] }, 
			{ x:[8, 0], y:[3, 0], bezier:{ x:4, y:4, rotation:-5 }, color:0x0033FF, vertices:[0, 0,  5, 0,  5, 2] }, 
			{ x:[8, 5], y:[1, 0], bezier:{ x:5, y:1, rotation:10 }, color:0xFFFF33, vertices:[0, 0,  2, 0,  2, 1,  5, 1,  5, 2,  0, 2] }, 
			{ x:[8, 8], y:[0, 0], bezier:{ x:9, y:-2.5, rotation:20 }, color:0x00FF00, vertices:[0, 0,  5, 0,  5, 2,  2, 2,  2, 1,  0, 1] }, 
		];
		private var triangleState:int = 0;
		
		private const MESSAGES:Array = [
			// Want some nifty messages but I'm not good at English... Please help!
			"Click it!", 
			"What the hell happened!?", 
			"Check it carefully!", 
			"Don't you understand?", 
		];
		private var messageNo:int = 0;
		private var textField:TextField = new TextField();
		
		private var circle:Shape = new Shape();
		private var cursor:Shape = new Shape();
		
		private const CURSOR_Y:Number = H * 0.95;
		
		public function TriangleTrick():void {
			CurveModifiers.init();
			
			var grid:Shape = new Shape();
			var g:Graphics = grid.graphics;
			g.lineStyle(1, 0x000000, 0.2);
			for (var i:int = -30; i < 30; i++) {
				g.drawRect(ORIGIN_X + GRID_SPACING * i + 2, -400, 0, 1600);
				g.drawRect(-400, ORIGIN_Y + GRID_SPACING * i + 2, 1600, 0);
			}
			addChild(grid);
			
			textField.defaultTextFormat = new TextFormat("Helvetica", 20, 0x444444, true, false);
			textField.text = MESSAGES[messageNo];
			textField.autoSize = TextFieldAutoSize.CENTER;
			textField.selectable = false;
			textField.x = W * 0.42;
			textField.y = H * 0.73;
			textField.filters = [ new GlowFilter(0xFFFFFF, 1, 40, 30, 8) ];
			addChild(textField);
			
			// Couldn't use DisplayObject.transform to zoom because lines' thickness is treated as integer.
			function toPixelX(graphX:Number):Number { return ORIGIN_X + graphX * GRID_SPACING; }
			function toPixelY(graphY:Number):Number { return ORIGIN_Y - graphY * GRID_SPACING; }
			
			var triangle:Sprite = new Sprite();
			for (i = 0; i < polygonData.length; i++) {
				var pd:Object = polygonData[i];
				
				// scale polygon data
				for (var j:int = 0; j < pd.x.length; j++) {
					pd.x[j] = toPixelX(pd.x[j]);
					pd.y[j] = toPixelY(pd.y[j]);
				}
				pd.bezier.x = toPixelX(pd.bezier.x);
				pd.bezier.y = toPixelY(pd.bezier.y);
				for (j = 0; j < pd.vertices.length; j += 2) {
					pd.vertices[j    ] *=  GRID_SPACING;
					pd.vertices[j + 1] *= -GRID_SPACING;
				}
				
				// create a polygon
				var polygon:Shape = new Shape();
				g = polygon.graphics;
				g.lineStyle(4, 0xFFFFFF);
				var matrix:Matrix = new Matrix();
				matrix.createGradientBox(GRID_SPACING * 4, GRID_SPACING * 4, 70 * Math.PI / 180, 0, -95);
				g.beginGradientFill(GradientType.LINEAR, [0xFFFFFF, pd.color], [0.5, 0.6], [0, 255], matrix);
				var commands:Vector.<int> = Vector.<int>([GraphicsPathCommand.MOVE_TO]);
				for (j = 0; j < pd.vertices.length / 2; j++) {
					commands.push(GraphicsPathCommand.LINE_TO);
				}
				g.drawPath(commands, Vector.<Number>(pd.vertices.concat(pd.vertices[0], pd.vertices[1])));
				g.endFill();

polygon.x = pd.x[0];
				polygon.y = pd.y[0];
				triangle.addChild(polygon);
				polygons.push(polygon);
			}
			triangle.filters = [ new DropShadowFilter(4, 45, 0x000000, 0.5, 0, 0) ];
			addChild(triangle);
			
			g = circle.graphics;
			g.lineStyle(8, 0xFF0000, 0.8);
			g.drawCircle(toPixelX(7.5), toPixelY(0.5), 1.2 * GRID_SPACING);
			circle.alpha = 0;
			addChild(circle);
			
			g = cursor.graphics;
			g.beginFill(0xFFFFFF);
			g.drawPath(Vector.<int>([1, 2, 2, 2]), Vector.<Number>([0, 0,  -1, -1.7,  1, -1.7,  0, 0]));
			cursor.x = W * 0.945;
			cursor.y = CURSOR_Y;
			cursor.scaleX = cursor.scaleY = 5;
			cursor.filters = [ new DropShadowFilter(3, 45, 0x000000, 0.5, 0, 0) ];
			addChild(cursor);
			enableClick();
		}
		
		private function enableClick():void {
			stage.addEventListener(MouseEvent.CLICK, clickHandler);
			tickCursor();
		}
		
		private function disableClick():void {
			stage.removeEventListener(MouseEvent.CLICK, clickHandler);
			Tweener.removeTweens(cursor);
			cursor.alpha = 0;
		}
		
		private function clickHandler(event:MouseEvent):void {
			disableClick();
			
			// an easy way to flip integers
			triangleState = 1 - triangleState;
			
			for (var i:int = 0; i < polygons.length; i++) {
				Tweener.addTween(polygons[i], { 
					// Which transition type do you like?
					time:0.7, transition:"easeOutCubic", 
					x:polygonData[i].x[triangleState], 
					y:polygonData[i].y[triangleState], 
					rotation:0, 
					_bezier:polygonData[i].bezier} );
			}
			
			if (triangleState == 1) {
				circle.x = -0;
				circle.y = -30;
				Tweener.addTween(circle, { delay:0.7, time:0.6, transition:"easeOutElastic", x:0, y:0 } );
				Tweener.addTween(circle, { delay:0.7, time:0.2, transition:"easeOutQuart", alpha:1 });
			} else {
				Tweener.addTween(circle, { time:0.2, transition:"easeOutQuart", alpha:0 });
			}
			
			if (++messageNo >= MESSAGES.length) {
				messageNo = 1;
			}
			textField.text = MESSAGES[messageNo];
			textField.alpha = 0;
			Tweener.addTween(textField, { delay:0.6, time:0.2, transition:"easeInQuart", alpha:1, onComplete:enableClick } );
		}
		
		private function tickCursor():void {
			cursor.y = CURSOR_Y;
			Tweener.addTween(cursor, { time:0.25, transition:"linear", y:CURSOR_Y + 3 } );
			Tweener.addTween(cursor, { time:0.1, transition:"easeOutSine", alpha:1 } );
			Tweener.addTween(cursor, { delay:0.15, time:0.1, transition:"easeOutSine", alpha:0 } );
			Tweener.addTween(cursor, { delay:0.45, onComplete:tickCursor } );
		}
	}
}

Code Fullscreen

Preview Fullscreen