3D in flash the old way

As the new Flash player 10 is arriving in 2009 is there a need to write code to simulate 3D code. I suppose it depends on what you want to achieve in your Flash project.

The way I do it now is by perspective. I use perspective to manipulate the x, y and scaling values of the objects that I want to be in 3D space.

Perspective is pretty easy to understand as you see it all the time. The further you are away from an object the smaller the object becomes.

On a screen though, you have a focal distance and then the z index, which determines your perspective of an object. Below is a diagram demonstrating this:

Example of 3D perspective

Now to determine your z index you have to do a little bit of simple maths.

Scale ratio = fd / (fd + z)

Where fd is your focal distance (the distance away from your screen) and the z is the z distance on your screen. fd is static it doesn’t change, I usually do 300. The reason why I choose 300 is because it gives a good virtual distance between the screen and the eye.

As an objects z index gets bigger this ratio becomes smaller, and so does the objects size. To apply the scale ratio to the objects scale just add the scale ratio as the new scale for the object.

You also have to apply this ratio to the x and y positions of the object other wise it wont scale properly. You have to set a vanishing point as well. You can use the center of the stage for this. You can see how this is applied in the example below.

Below i have done a quick sample. If you want, try the code out and try it for your self.
 

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

package {
	import flash.display.Sprite;
	import flash.events.Event;
 
	public class basic3d extends Sprite {
		private var ball:Sprite = new Sprite();
		private const fd:Number = 300;
		private var bx:Number = stage.stageWidth/2;
		private var by:Number = stage.stageHeight/2;
		private var z:Number = -100;
		private var vx:Number = stage.stageWidth/2;
		private var vy:Number = stage.stageHeight/2;
 
		public function basic3d():void {
 
			ball.graphics.beginFill(0x000000);
			ball.graphics.drawCircle(0, 0, 40);
			ball.graphics.endFill();
			ball.x = bx
			ball.y = by
			addChild(ball);
 
			ball.addEventListener(Event.ENTER_FRAME, scale);
		}
 
		private function scale(e:Event):void {
			z += 10;
			var scale:Number = fd/(fd+z);
			ball.scaleX = ball.scaleY = scale;
			ball.x = bx + vx * scale;
			ball.y = by + vy * scale;
 
			if(z == 2000) {
				z = -100;
			}			
		}	
	}	
}

You can download the end result of this code here

This is the complete basics of 3D in flash and the new Flash player 10 will incorporate a z index so you don’t have to do this ratio every time you want to achieve basic 3D. Having this in the Flash player will lead to some exciting developments in user interface design, but if you want real powerful 3D capabilities I recommend the Papervision3D framework (Now that is some cool stuff).

July 1, 2008
Tags: ,





Leave a comment: