[RESOLVED] AS3 centering 3D objects on stage

[dmacker]

I am new to working with 3D in Flash CS4. My project has a center-registered movie clip with a z-axis setting of 850 that I need to keep centered on the stage at all times, including when the stage is re-sized.

Code like this for centering 2D objects doesn't seem to work:

mc.x = stage.stageWidth/2;
mc.y = stage.stageHeight/2;

My guess is that I need to convert the movie clip back into 2D space somehow, center it using the code above and then change the z-axis back to 850. Does this sound about right, or is there another way to do this? A simplified code example would be much appreciated.

Thanks.

[Baby Minion]

I'm hoping that you have set the stage.scaleMode = "noScale" and the stage.align = "tl"

If that is the case, then I think you might have to adjust the vanishing point of the application whenever the stage resizes. Try looking up info about that.

For my testing I put this code in the IDE and tested with this:

stage.scaleMode = "noScale";
stage.align = "tl";

// draw square sprite and place it at z=850
var s:Sprite = new Sprite ();
s.graphics.beginFill(0);
s.graphics.drawRect(0, 0, 200, 200);
s.graphics.endFill();
s.graphics.lineStyle(2, 0xFF0000);
s.graphics.moveTo(100, 0);
s.graphics.lineTo(100, 200);
s.graphics.moveTo(0, 100);
s.graphics.lineTo(200, 100);
s.z = 850;
addChild(s);

// create holder sprite for stage center
var st:Sprite = new Sprite();
addChild(st);

// when you click on the stage, call the center function
stage.addEventListener (MouseEvent.CLICK, center);


function center (e:MouseEvent = null):void {
    // reset the holder sprite to show cross on stage
    st.x = st.y = 0;
    st.graphics.clear();
    st.graphics.lineStyle(2, 0xFF0000);
    st.graphics.moveTo(stage.stageWidth/2, 0);
    st.graphics.lineTo(stage.stageWidth/2, stage.stageHeight);
    st.graphics.moveTo(0, stage.stageHeight/2);
    st.graphics.lineTo(stage.stageWidth, stage.stageHeight/2);

    // try to center the square using the pixel bounds
    s.x = (stage.stageWidth / 2) - (s.transform.pixelBounds.width / 2);
    s.y = (stage.stageHeight / 2) - (s.transform.pixelBounds.height / 2);
} 

[Baby Minion]

I did some more digging cause this interested me. I'm very interesting in alignment of DisplayObject.

Here's what I found:

The PerspectiveProjection was key. changing the perspectiveProjectionCenter of the display object was what made it work, along with using the pixelBounds of the display object rather than its width and height properties.

view my results here. (keep resizing the stage and double clicking.)
download the fla here (makes more sense when you see the code)

*Note: I'm not sure if this is the best way or only way to do it, but none the less it seems like it could be a solution. I also didn't fully test everything and I don't fully understand how the perspective projection is really working in this case so keep playing around with it.

[dmacker]

Thank you Baby Minion for putting together the code to get this all working; your solution was EXACTLY what I needed!

Once you added the perspective projection code, I threw the whole thing into an Event.RESIZE handler and got the results I was looking for.

Cheers!

[Baby Minion]

NP

For future reference, this is how I did it:

// put the center of the projection at the center of the stage
var pp:PerspectiveProjection=new PerspectiveProjection();
pp.projectionCenter = new Point(stage.stageWidth/2, stage.stageHeight/2);
square.transform.perspectiveProjection = pp;
// center the object using the pixelBounds
square.x = (stage.stageWidth / 2) - (square.transform.pixelBounds.width / 2);
square.y = (stage.stageHeight / 2) - (square.transform.pixelBounds.height / 2); 

One interesting note as I was checking things.

The width and height of a DisplayObject when the z is modified change to match what you see on screen, but the pixelBounds returns the original dimensions of the DisplayObject. Using getBounds(stage) returns the proper values for the object's dimensions...

square.width = square.height = 200;
square.z = 850;
trace(square.transform.pixelBounds.width + " : " + square.width);  // 200 : 70
trace(square.transform.pixelBounds.height + " : " + square.height);// 200 : 70
trace(square.getBounds(stage)) // (x=154, y=180, w=70, h=70) 

dmacker, please set this thread to resolved