Answer: Use a 2D Container

Franto of Franto.com asked today (01/25/10) the following question: How to assign a custom PerspectiveProjection to an interactive 3D object without losing interactivity? The answer is: create a 2D container for the object and assign a custom instance of PerspectiveProjection to the container. Below is an example:

Download

  • Download all the source files corresponding to this tip: pptip.zip

The zip file contains two files, pptip.fla and PPTip.as. PPTip.as is assigned as the Document Class of pptip.fla and all the code is in the class.

PerspectiveProjection often behaves in counterintuitive ways. See our exhaustive tutorial: How to Set Perspective Projection of Display Objects - Experiments in Flash CS4.

The Code in the Document Class

In the Document Class PPTip whose code is presented below, we create a Sprite, 'square', which when clicked, randomly changes color. We want 'square' to have its own custom perspective projection. If you assign an instance of PerspectiveProjection to 'square', you lose interactivity. Thus, we create a 2D Sprite container, called 'container', that holds 'square' and assign an instance of PerspectiveProjection to 'container'. It will work as long as 'container' is a 2D object; that is, as long as its transform.matrix3D propery is null. In other words, as long as no 3D methods are used on 'container'. ('this' in the class stands for the MainTimeline as PPtip is a Document Class for a fla file.) The rest of code is positioning: we want the registration point of square to be in the center, the regsiatration point of 'container' to be in its upper left corner. We also want the container to appear away from the center of the Stage so that the cusom perspective projection effect is evident.

package {

import flash.display.Sprite;

import flash.events.MouseEvent;

import flash.geom.PerspectiveProjection;

import flash.geom.Point;

 

public class PPTip extends Sprite {

private var container:Sprite;

private var square:Sprite;

private var pp:PerspectiveProjection;

 

public function PPTip(){

container=new Sprite();

this.addChild(container);

container.x=400;

container.y=60;

square=new Sprite();

container.addChild(square);

square.x=50;

square.y=50;

drawSquare();

square.addEventListener(MouseEvent.CLICK,squareClicked);

square.rotationY=45;

pp=new PerspectiveProjection();

pp.fieldOfView=80;

pp.projectionCenter=new Point(50,50);

container.transform.perspectiveProjection=pp;

/*

Assigning pp to square instead of container,

as in the next line, makes square lose interactivity.

*/

//square.transform.perspectiveProjection=pp;

/*

Making container into a 3D object by uncommenting the next line

obliterates effects of pp except for loss of interactivity.

*/

//container.z=0;

}

 

private function drawSquare():void {

var color:Number=Math.random()*0xFFFFFF/2;

square.graphics.clear();

square.graphics.beginFill(color);

square.graphics.drawRect(-50,-50,100,100);

square.graphics.endFill();

}

 

private function squareClicked(e:MouseEvent):void {

drawSquare();

}

}

}

Back to Flash CS4 Tutorials              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.