[flexcoders] set camera position for 3d content

[michaeljonknight]

I am trying to solve a bug that I think is related to the camera position for z 
transforms.  I want to resize my frame and keep the z positions in tact.  
However, as we scale the document the z transform slides from side to side.   I 
think is because the initial camera position is centered in our frame.  
however, as we resize it the camera stays in the same place.  

The mxml below shows the problem. The face scales correctly when it is on the 
same z level as the rest of the face.  Pressing the space bar moves it forward 
a bit and it no longer scales correctly.  Seems like we are just missing 
something.  

Thanks in advance for the help.



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute" 
  width="150" height="150" backgroundAlpha="0" addedToStage="startUp();" >
  <mx:Script>
    <![CDATA[
      public var holder:MovieClip
      public var base:MovieClip
      public var face:MovieClip
      public var toggle:Boolean
      private const BASE_SIZE:Number=150

      public function startUp():void {      
        // add event listener
        stage.addEventListener(Event.RESIZE, handleResize)
        stage.addEventListener(KeyboardEvent.KEY_DOWN, handleKeyPress)
        
        // add the holder
        holder = new MovieClip()
        stage.addChild(holder)
        
        // draw the base
        base = new MovieClip()
        base.graphics.beginFill(0xffffff)
        base.graphics.lineStyle(3, 0x000000)
        base.graphics.drawCircle(0, 0, (BASE_SIZE / 3.0))
        base.graphics.endFill()
        holder.addChild(base)
        base.x = base.y = (BASE_SIZE / 2.0)
        
        // draw the face
        face = new MovieClip()
        face.graphics.beginFill(0x0000ff)
        face.graphics.lineStyle(3, 0x000000)
        face.graphics.drawCircle(-(BASE_SIZE / 8.0), -(BASE_SIZE / 8.0), 
(BASE_SIZE / 12.0))
        face.graphics.endFill()
        face.graphics.beginFill(0x0000ff)
        face.graphics.drawCircle((BASE_SIZE / 8.0), -(BASE_SIZE / 8.0), 
(BASE_SIZE / 12.0))
        face.graphics.endFill()
        face.graphics.lineStyle(6, 0x000000)
        face.graphics.moveTo(-(BASE_SIZE / 8.0), (BASE_SIZE / 12.0))
        face.graphics.curveTo(0, (BASE_SIZE / 4.0), (BASE_SIZE / 8.0), 
(BASE_SIZE / 12.0))
        base.addChild(face)
        toggle = false
      }

      public function handleResize( pEvt:Event ):void {
        var scale:Number = ((stage.stageHeight > stage.stageWidth) ? 
stage.stageWidth : stage.stageHeight) / BASE_SIZE
        holder.scaleX = holder.scaleY = holder.scaleZ = scale
        
        // center it
        holder.x = (stage.stageWidth - BASE_SIZE * scale) / 2.0
        
      }
      
      public function handleKeyPress( pEvt:KeyboardEvent ):void {
        if( pEvt.keyCode == 32 ) {
          toggle = !toggle
          face.z = toggle ? -15 : 0
        }
      }
      
    ]]>
  </mx:Script>
</mx:Application>