topical media & game development
#graphic-flex-image-effects-06-Flex-PerspectiveProjectionTest.ax
#graphic-flex-image-effects-06-Flex-PerspectiveProjectionTest.ax
[swf]
[flash]
flex
package {
import flash.display.Shape;
import flash.display.Sprite;
import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import flash.geom.PerspectiveProjection;
import flash.geom.Point;
import flash.ui.Keyboard;
[SWF(width=600, height=600, backgroundColor=0x000000)]
Demonstrates the multiple properties of PerspectiveProjection and how they
affect the positioning and size of objects in 3D space by drawing 80
rectangles at multiple depths and altering the perspective projection
through mouse and keyboard interaction.
public class @ax-graphic-flex-image-effects-06-Flex-PerspectiveProjectionTest extends Sprite {
Constructor. Creates 80 rectangles and establishes listeners
for mouse and key events on the stage.
public function @ax-graphic-flex-image-effects-06-Flex-PerspectiveProjectionTest() {
// create fresh projection so it may be accessed later
transform.perspectiveProjection = new PerspectiveProjection();
// run through 20 depths
for (var i:uint = 0; i < 20; i++) {
var color:uint = Math.random()*0xFFFF;
// for each depth, draw 4 planes, one at each of 4 corners
for (var j:uint = 0; j < 4; j++) {
var x:uint = (j == 0 || j == 1) ? 400 : 0;
var y:uint = (j == 1 || j == 2) ? 400 : 0;
createPlane(color, x, y, (20-i)*500);
}
}
setVanishingPoint(stage.mouseX, stage.mouseY);
stage.addEventListener(MouseEvent.MOUSE_MOVE, onStageMouseMove);
stage.addEventListener(KeyboardEvent.KEY_DOWN, onStageKeyDown);
}
Create and position a shape, drawing one rect inside another to create a border.
parameter: color The color of the shape.
parameter: x The x position of the shape
parameter: y The y position of the shape
parameter: z The z position of the shape
private function createPlane(color:uint, x:Number, y:Number, z:Number):void {
var plane:Shape = new Shape();
plane.graphics.beginFill(color);
plane.graphics.drawRect(0, 0, 200, 200);
plane.graphics.drawRect(20, 20, 160, 160);
plane.graphics.endFill();
plane.x = x;
plane.y = y;
plane.z = z;
addChild(plane);
}
Sets the vaishing point of this sprite's perspective projection.
This also draws lines from the stage corners to the vanishing point.
parameter: x The x coordinate of the vanishing point.
parameter: y The y coordinate of the vanishing point.
private function setVanishingPoint(x:Number, y:Number):void {
transform.perspectiveProjection.projectionCenter = new Point(x, y);
// draw lines from stage corners to vanishing point
graphics.clear();
graphics.lineStyle(0, 0x666666);
graphics.lineTo(x, y);
graphics.moveTo(stage.stageWidth, 0);
graphics.lineTo(x, y);
graphics.moveTo(stage.stageWidth, stage.stageHeight);
graphics.lineTo(x, y);
graphics.moveTo(0, stage.stageHeight);
graphics.lineTo(x, y);
}
Handler for when the mouse moves about the stage.
This updates the projection vanishing point.
parameter: event Event dispatched by stage.
private function onStageMouseMove(event:MouseEvent):void {
setVanishingPoint(stage.mouseX, stage.mouseY);
event.updateAfterEvent();
}
Handler for when a key is pressed. If it is the up or down arrow,
this updates the projection field of view.
parameter: event Event dispatched by stage.
private function onStageKeyDown(event:KeyboardEvent):void {
var projection:PerspectiveProjection = transform.perspectiveProjection;
var fieldOfView:Number = projection.fieldOfView;
switch (event.keyCode) {
case Keyboard.UP:
fieldOfView += 2;
break;
case Keyboard.DOWN:
fieldOfView -= 2;
break;
}
// keep field of view between .1 and 179.9 to prevent exceptions
projection.fieldOfView = Math.max(0.1, Math.min(fieldOfView, 179.9));
event.updateAfterEvent();
}
}
}
(C) Æliens
04/09/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
