Native 3D Flash Interface

Posted: February 2nd, 2010 | Filed under: AS3, Flash | 3 Comments » Little experiment with native Flash 3D. I had been playing around with Papervision and needed a simple way to deal with a single element of an application as a 3D object. I found Flash Player 10’s matrix3D adequate for this purpose. Papervision requires a lot of processing power and longer compile times. If you’re working with Flex, you’ll need to have the most recent SDK that compiles to Flash 10. Using native 3D is an easy way to add 3D to your projects by simply applying matrix3D properties to your elements.

Here I’ve set a container and arranged blocks into a grid. If you click on a block, it changes it’s z and rotationY properties. On the “back” of the block is a second block set back in z space one pixel. When the block flips around, the front block is turned invisible and the back turned visible. On mouse out, the reverse happens.

The hardest thing was working around the fact that it doesn’t support a double sided plane. I hacked around this by putting the back face with a scale of -1 and setting the visibilities of the front and back faces on a timer that goes off while the plane is turns 90 degrees.

Download Source

Block3D.as
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

package 
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
 
	import fl.transitions.Tween;
 	import fl.transitions.easing.*;
	import fl.transitions.TweenEvent;
 
   	public class Block3D extends Sprite 
	{
		private static var NUM_SQUARES:uint = 15;
		private static var NUM_ACROSS:uint = 5;
		private static var BLOCK_OFFSET:Number = 100;
 
		private var container:Sprite;
 
		private var easeOut:Number = 0.3;
		private var rotX:Number = 0.1;
		private var rotY:Number = 0.1;
 
		private var scaleTween:Tween;
		private var rotationTween:Tween;
 
		private var activeSquare:Object;
		private var front:BlockFaces;
		private var back:BlockFaces;
 
		public function Block3D():void 
		{
			buildDisplay();
			positionDisplay();
 
			stage.addEventListener(MouseEvent.MOUSE_OVER, enterMovieHandler);
			stage.addEventListener(Event.MOUSE_LEAVE, leaveMovieHandler);
		}
 
		private function buildDisplay():void
		{
			container = new Sprite()
			addChild(container);
 
			var blockXPos:Number = -200;
			var blockYPos:Number = 0;
			var blockNum:Number = 0;
 
			for(var i:uint = 0; i < NUM_SQUARES; i++)
			{
				var block:Block = new Block();
				block.itemNum = i;
				container.addChild(block);
 
				block.addEventListener(MouseEvent.MOUSE_OVER, scaleBlock);
				block.addEventListener(MouseEvent.MOUSE_OUT, scaleBlock);
				block.addEventListener(MouseEvent.MOUSE_DOWN, scaleBlock);
 
 
				if (blockNum < NUM_ACROSS -1) {
					block.x = blockXPos;
					block.y = blockYPos;
					blockXPos += BLOCK_OFFSET;
					blockNum++;
				} else {
					block.x = blockXPos;
					block.y = blockYPos;
					blockYPos += BLOCK_OFFSET;
					blockXPos = -200;
					blockNum = 0;
				}
			}
		}
 
		private function positionDisplay():void
		{
			container.x = stage.stageWidth/2;
			container.y = stage.stageHeight/2 - container.height/2 + BLOCK_OFFSET/2;
			container.z = 200;
		}
 
		private function scaleBlock(e:MouseEvent):void
		{
			switch(e.type){
				case MouseEvent.MOUSE_OVER:;
				scaleTween = new Tween(e.currentTarget, "z", Regular.easeOut, e.currentTarget.z, -200, .3, true);
				container.setChildIndex(Sprite(e.currentTarget), container.numChildren - 1);
				break;
 
 
				case MouseEvent.MOUSE_OUT:
				scaleTween = new Tween(e.currentTarget, "z", Regular.easeOut, e.currentTarget.z, 0, .3, true);
				if (e.currentTarget.rotationY >= 180) {
					rotationTween = new Tween(e.currentTarget, "rotationY", Regular.easeOut, e.currentTarget.rotationY, 0, .3, true);
					e.currentTarget.frontFlip();
				}
				break;
 
				case MouseEvent.MOUSE_DOWN:
				e.currentTarget.z = -200;
				rotationTween = new Tween(e.currentTarget, "rotationY", Regular.easeOut, e.currentTarget.rotationY, 180, .3, true);
				e.currentTarget.backFlip();
				break;
			}
		}
 
		private function mouseOverHandler(e:Event):void
		{
			var xDist:Number = mouseX - stage.stageWidth * 0.5;
			var yDist:Number = mouseY - stage.stageHeight * 0.5;
			container.rotationY += (xDist * rotY - container.rotationY) * easeOut;
		}
 
		private function enterMovieHandler(e:MouseEvent):void
		{
			addEventListener(Event.ENTER_FRAME, mouseOverHandler);
		}
 
		private function leaveMovieHandler(e:Event):void
		{
			removeEventListener(Event.ENTER_FRAME, mouseOverHandler);
		}
 
	}
}
Block.as
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.text.TextFormatAlign;
	import flash.text.AntiAliasType;
 
	import flash.events.TimerEvent;
    	import flash.utils.Timer;
 
	public class Block extends Sprite
	{
		private var _number:uint;
		private var front:BlockFaces;
		private var back:BlockFaces;
 
		private var t1:Timer;
		private var t2:Timer;
 
		public function Block()
		{
			front = new BlockFaces(0xFF0000);
			addChild(front);
			front.itemNum = _number;
			front.mouseEnabled = false;
			front.mouseChildren = false;
 
			back = new BlockFaces(0x0000FF);
			addChild(back);
			back.itemNum = _number;
			back.mouseEnabled = false;
			back.mouseChildren = false;
			back.z = -1;
			back.scaleX = -1;
			back.visible = false;
 
		}
 
		public function set itemNum(num:uint):void
		{
			_number = num;
			front.itemNum = _number;
			back.itemNum = _number;
		}
 
		public function frontFlip():void
		{
			t1 = new Timer(100);
           			t1.addEventListener(TimerEvent.TIMER, timerHandler);
			t1.start();
		}
 
		public function backFlip():void
		{
			t2 = new Timer(100);
			t2.addEventListener(TimerEvent.TIMER, timerHandler2);
			t2.start();
		}
 
		private function timerHandler(event:TimerEvent):void 
		{
			t1.stop();
			front.visible = true;
			back.visible = false;
		}
 
		private function timerHandler2(event:TimerEvent):void 
		{
			t2.stop();
			front.visible = false;
			back.visible = true;
		}
 
	}
}
BlockFaces.as
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

package
{
	import flash.display.Sprite;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.text.TextFormatAlign;
	import flash.text.AntiAliasType;
 
	public class BlockFaces extends Sprite
	{
		private var _number:uint;
		private var tFTitle:TextField;
 
		public function BlockFaces(color:uint)
		{
			var square:Sprite = new Sprite();
			addChild(square);
			square.graphics.lineStyle(2,0xffffff);
			square.graphics.beginFill(color, 1);
			square.graphics.drawRect(-50,-50,100,100);
			square.graphics.endFill();
 
			var fmt:TextFormat = new TextFormat();
			fmt.size = 16;
			fmt.color = 0xcccccc;
			fmt.align = TextFormatAlign.LEFT;
			fmt.font = "Arial";
 
			tFTitle = new TextField();
			tFTitle.defaultTextFormat = fmt;
			tFTitle.selectable = false;
			tFTitle.antiAliasType = AntiAliasType.ADVANCED;
			tFTitle.border = false;
			tFTitle.wordWrap = true;
			tFTitle.mouseEnabled = false;
			square.addChild(tFTitle);
			tFTitle.width = 100;
			tFTitle.height = 50;
			tFTitle.text = "";
			tFTitle.x = -50;
			tFTitle.y = -50;
 
		}
 
		public function get itemNum():uint
		{
			return _number;
		}
 
		public function set itemNum(num:uint):void
		{
			_number = num;
			tFTitle.text = String(_number + 1);
		}
 
	}
}

3 Comments on “Native 3D Flash Interface”

  1. 1 LANCE said at 10:38 pm on July 3rd, 2010:


    PillSpot.org. Canadian Health&Care.No prescription online pharmacy.Special Internet Prices.Best quality drugs. No prescription pills. Order drugs online…

    Buy:Synthroid.Actos.Human Growth Hormone.Valtrex.Prevacid.Lumigan.Mega Hoodia.Retin-A.Nexium.Zyban.Arimidex.100% Pure Okinawan Coral Calcium.Prednisolone.Accutane.Petcam (Metacam) Oral Suspension.Zovirax….

  2. 2 JOEL said at 12:17 pm on July 21st, 2010:


    MedicamentSpot.com. Canadian Health&Care.No prescription online pharmacy.Best quality drugs.Special Internet Prices. Online Pharmacy. Order pills online…

    Buy:Viagra Super Active+.Maxaman.Cialis.Levitra.Viagra.Super Active ED Pack.Zithromax.Cialis Professional.Propecia.Viagra Soft Tabs.Tramadol.Cialis Soft Tabs.Viagra Super Force.Soma.Cialis Super Active+.VPXL.Viagra Professional….

  3. 3 Printer said at 6:14 pm on August 29th, 2010:

    Printer http://avwco.APTAUTOPARTS.INFO/tag/Printer+HP+430/ : 430…

    HP…

Leave a Reply