Experiment - simulating z axis with Actionscript 3.0

[Flep]

When I attended the courses of Actionscript ( at Italian Adobe training center Inside s.r.l. ), with the teacher Luca Bonacorsi

I have learned how to simulate the z axis and creating 3D effects.

I've done some experiments, and I decided to share one of them with you.

Trying this experiment you just need to click the SWF that will create graphical lines.

Compose a plane figure with at least 3 segments ( closed ) and then will appear the START button, click it.

>

package
{
	import flash.display.*;
	import flash.events.*;
	import flash.text.*;
	
	public class Main extends MovieClip
	{
		private const SCREEN:int=400;
		private var vpX:Number;
		private var vpY:Number;
		private var clicks:int=0;
		
		private var isFirst:Boolean=true;
		private var isRunning:Boolean=false;
		private var switch_:Boolean=true;
		
		private var bg_mc:MovieClip;
		private var center_mc:MovieClip;
		private var draw_mc:MovieClip;
		
		private var face_1_array:Array=new Array();
		private var face_2_array:Array=new Array();

		public function Main():void
		{
			addEventListener(Event.ADDED_TO_STAGE,init);
		}
		
		private function init(evt:Event):void
		{
			removeEventListener(Event.ADDED_TO_STAGE,init);
			
			stage.frameRate=31;
			stage.focus=this;
			
			vpX=stage.stageWidth/2;
			vpY=stage.stageHeight/2;
			
			createBackGround();
			createDrawClip();
			addListeners();
			drawCenter();
		}
		
		private function createBackGround():void
		{
			bg_mc=new MovieClip();
			bg_mc.graphics.beginFill(0x333333,0);
			bg_mc.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
			bg_mc.mouseEnabled=false;
			addChild(bg_mc);
		}
		
		private function createDrawClip():void
		{
			draw_mc=new MovieClip();
			draw_mc.graphics.beginFill(0x333333,0);
			draw_mc.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
			draw_mc.graphics.moveTo(mouseX,mouseY);
			addChild(draw_mc);
			
			swapChildren(start_btn,draw_mc);
		}
		
		private function addListeners():void
		{
			start_btn.visible=false;
			start_btn.label="START";
			start_btn.addEventListener(MouseEvent.MOUSE_DOWN,onStartDown);
			start_btn.addEventListener(MouseEvent.MOUSE_OVER,onStartOver);
			start_btn.addEventListener(MouseEvent.MOUSE_OUT,onStartOut);
			
			addEventListener(MouseEvent.MOUSE_DOWN,onMouseClick);
		}
		
		private function onStartDown(evt:MouseEvent):void
		{
			if(switch_)
			{
				removeEventListener(MouseEvent.MOUSE_DOWN,onMouseClick);
				addEventListener(Event.ENTER_FRAME,moveDraw);
				evt.target.label="RESET";
			}
			else
			{
				evt.target.label="START";
				
				removeEventListener(Event.ENTER_FRAME,moveDraw);
				
				draw_mc.graphics.clear();
				removeChild(draw_mc);
				
				isFirst=true;
				isRunning=false;
				
				face_1_array=new Array();
				face_2_array=new Array();
				
				createDrawClip();
				
				removeEventListener(MouseEvent.MOUSE_DOWN,onMouseClick);
				
				evt.target.visible=false;
				clicks=0;
			}
			switch_=!switch_;
		}
		
		private function onStartOver(evt:MouseEvent):void
		{
			removeEventListener(MouseEvent.MOUSE_DOWN,onMouseClick);
		}
		
		private function onStartOut(evt:MouseEvent):void
		{
			addEventListener(MouseEvent.MOUSE_DOWN,onMouseClick);
		}
		
		private function drawCenter():void
		{
			center_mc=new MovieClip();
			center_mc.mouseEnabled=false;
			center_mc.graphics.lineStyle(1,0xCCCCCC,.2);
			center_mc.graphics.moveTo(stage.stageWidth/2,stage.stageHeight/2-10);
			center_mc.graphics.lineTo(stage.stageWidth/2,stage.stageHeight/2-110);
			center_mc.graphics.moveTo(stage.stageWidth/2,stage.stageHeight/2+10);
			center_mc.graphics.lineTo(stage.stageWidth/2,stage.stageHeight/2+110);
			center_mc.graphics.moveTo(stage.stageWidth/2-10,stage.stageHeight/2);
			center_mc.graphics.lineTo(stage.stageWidth/2-110,stage.stageHeight/2);
			center_mc.graphics.moveTo(stage.stageWidth/2+10,stage.stageHeight/2);
			center_mc.graphics.lineTo(stage.stageWidth/2+110,stage.stageHeight/2);
			addChild(center_mc);
		}
		
		private function onMouseClick(evt:MouseEvent):void
		{
			if(!isRunning)
			{
				var front:Object;
				var back:Object;
				
				if(isFirst)
				{
					clicks++;
					isFirst=false;
					draw_mc.graphics.lineStyle(2,0xFF0033,1);
					draw_mc.graphics.moveTo(mouseX,mouseY);
				}
				else
				{
					clicks++;
					if(clicks>=4)
						start_btn.visible=true;
					front=new Object();
					back=new Object();
					
					front.x=mouseX-vpX;
					front.y=mouseY-vpY;
					front.z=-50;
					
					back.x=mouseX-vpX;
					back.y=mouseY-vpY;
					back.z=50;
					
					draw_mc.graphics.lineTo(mouseX,mouseY);
					draw_mc.graphics.moveTo(mouseX,mouseY);
					
					face_1_array.push(front);
					face_2_array.push(back);
				}
			}
		}
		
		private function moveDraw(evt:Event):void
		{
			isRunning=true;
			
			var angleY:Number=(mouseX-vpX)*.0001;
			var cosY:Number=Math.cos(angleY);
			var sinY:Number=Math.sin(angleY);
			
			var angleX:Number=(mouseY-vpY)*.0001;
			var cosX:Number=Math.cos(angleX);
			var sinX:Number=Math.sin(angleX);
			
			draw_mc.graphics.clear();
			
			setRotation(face_1_array,sinX,cosX,sinY,cosY);
			setRotation(face_2_array,sinX,cosX,sinY,cosY);
			
			join();
		}
		
		private function setRotation(side:Array,sinX:Number,cosX:Number,sinY:Number,cosY:Number):void
		{
			var vertex:Object;
			var x1:Number;
			var z1:Number;
			var y1:Number;
			var z2:Number;
			var y2:Number;
			var scale:Number;
			
			for(var i:Number=0;i < side.length;i++)
			{
				vertex=side[i];
				
				x1=vertex.x*cosY-vertex.z*sinY;
				z1=vertex.z*cosY+vertex.x*sinY;
				
				y1=vertex.y*cosX-z1*sinX;
				z2=z1*cosX+vertex.y*sinX;
				
				vertex.x=x1;
				vertex.y=y1;
				vertex.z=z2;
		
				scale=SCREEN/(SCREEN+vertex.z);
				vertex.xPos=vpX+vertex.x*scale;
				vertex.yPos=vpY+vertex.y*scale;
			}
		
			draw_mc.graphics.lineStyle(2,0xFF0033,1);
			draw_mc.graphics.moveTo(side[0].xPos,side[0].yPos);
			
			for(var j:int=1;j < side.length;j++)
			{
				vertex=side[j];
				draw_mc.graphics.lineTo(vertex.xPos,vertex.yPos);
			}
			
			draw_mc.graphics.lineTo(side[0].xPos,side[0].yPos);
		}
		
		private function join():void
		{
			for (var i:int=0;i < face_1_array.length;i++)
			{
				draw_mc.graphics.moveTo(face_1_array[i].xPos,face_1_array[i].yPos);
				draw_mc.graphics.lineTo(face_2_array[i].xPos,face_2_array[i].yPos);
			}
		}
	}
}

Source files: