DisplayObject.rotationX,Y,Z

Just a quick note about working with DisplayObject.rotationX,Y,Z:

Keep in mind that your DisplayObject rotates around it’s center point. This may result in weird optics if you forget to align your DisplayObject properly.

Update: Well, there is much more to know!

There’s need for an DisplayObjectContainer with an properly assigned PerspectiveProjection.

Copy & paste this code and you’ll see what I’m talking about:

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.addEventListener( Event.RESIZE, onStageResize );
 
function onStageResize( event : Event ) : void
{
    draw();
}
 
function createRectSprite( w : int, h : int, rotationY : Number, container : Sprite, useProjection : Boolean ) : Sprite
{
    // 3D object
    var graphicSprite : Sprite = new Sprite();
        graphicSprite.name = "graphicSprite";
        graphicSprite.rotationY = rotationY;
        graphicSprite.buttonMode = true;
        graphicSprite.useHandCursor = true;
 
    // Make sure 3D objects content is centered
    var g : Graphics = graphicSprite.graphics;
        g.beginFill( 0, .5 );
        g.drawRect( w * -.5, h * -.5, w, h );
        g.endFill();
 
    // 3D Container
    var containerSprite : Sprite = new Sprite();
        containerSprite.addChild( graphicSprite );
 
    // Apply projection to 3D Container instead of 3D Object
    if ( useProjection )
    {
        var projection:PerspectiveProjection = new PerspectiveProjection();             
            projection.projectionCenter = new Point( 0, 0 );
 
        containerSprite.transform.perspectiveProjection = projection;
    }
 
    // Visualize center
    g = containerSprite.graphics;
    g.beginFill( 0xff0000 );
    g.drawCircle( 0, 0, 2 );
    g.endFill();
 
    container.addChild( containerSprite );    
    return containerSprite;
}
 
var left : Sprite;
var right : Sprite;
 
function draw() : void
{
    while ( numChildren > 0 ) { removeChildAt( 0 ); }
 
    var container : Sprite = new Sprite()
        container.name = "container";
        container.x = stage.stageWidth * .5;
        container.y = stage.stageHeight * .5;
    addChild( container );
 
    var stepX : int = stage.stageWidth / 3;
 
    var w : int = 200;
    var h : int = 200;
 
    left = createRectSprite( w, h, -60, this, true );
    left.name = "left";
    left.x = stepX;
 
    right = createRectSprite( w, h, 60, this, true );
    right.name = "right";
    right.x = stepX * 2;
 
    left.y =
    right.y = stage.stageHeight * .5;
}
 
function onEventHitTest( event : Event ) : void
{
    var containerSprite : DisplayObjectContainer;
    var graphicSprite : DisplayObject;
 
    containerSprite = this.getChildByName( "left" ) as DisplayObjectContainer;
    graphicSprite = containerSprite.getChildByName( "graphicSprite" ) as DisplayObject;
 
    trace( "hit left containerSprite:", containerSprite.hitTestPoint( mouseX, mouseY, true ) );
    trace( "hit left graphicSprite:", graphicSprite.hitTestPoint( mouseX, mouseY, true ) );
 
    containerSprite = this.getChildByName( "right" ) as DisplayObjectContainer;
    graphicSprite = containerSprite.getChildByName( "graphicSprite" ) as DisplayObject;
 
    trace( "hit right containerSprite:", containerSprite.hitTestPoint( mouseX, mouseY, true ) );
    trace( "hit right graphicSprite:", graphicSprite.hitTestPoint( mouseX, mouseY, true ) );
    trace( "" );
}
 
stage.addEventListener( MouseEvent.MOUSE_DOWN, onEventHitTest );
 
draw();

This entry was posted in ActionScript, Flash. Bookmark the permalink.

2 Responses to DisplayObject.rotationX,Y,Z

  1. Jarrod says:

    I’ve been trying to figure this out for a few hours, and was overlooking the PerspectivProjection part. I was SO glad to find your post. Thanks!

  2. Pingback: PerspectiveProjection.projectionCenter - Flashforum

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">