January 20, 2011

Flash 3d Panel Effect

by blackbird

We wanted to make a subtle 3d effect for a flash feature on a new website.

I’ve done this before, and it wasn’t hard to modify my pre-existing code.

Example:
[swfobj src=”http://dev.www.blackbirdi.com/wp-content/uploads/2011/01/panel3d1.swf” width=”600″ height=”210″ allowfullscreen=”false” required_player_version=”10″]
Note: This was done with AS3, Flash CS5, and Flash Player 10. It won’t work on lower versions.

var SH:Number = stage.stageHeight;
var SW:Number = stage.stageWidth;

//mins and maxes in degrees
var negYMin:Number = -45;
var posYMax:Number = 45;
var negXMin:Number = -45;
var posXMax:Number = 45;

stage.transform.perspectiveProjection.projectionCenter = new Point(SW / 2,SH / 2);
stage.transform.perspectiveProjection.fieldOfView = 45;

stage.addEventListener(MouseEvent.MOUSE_MOVE,rotatorate);
stage.mouseChildren = true;

function rotatorate(e:MouseEvent):void{
     panel.rotationY = negYMin+((stage.mouseX/SW)*(posYMax-negYMin));
     panel.rotationX = negXMin+((stage.mouseY/SH)*(posXMax-negXMin));
}

The MovieClip ‘panel’ should be a center-registered MovieClip and may contain other MovieClips at different z positions (this will give more depth).