====== Animation Control panel Tutorial ====== Sometimes you start working with model you need to have more interactive control over scene. That is what 'Control Panel' provides. Here we are going to show how to enable the panel. First, it has to be constructed and initialized during initial setup. So in addition to rendering engine and Cast3D setup, there is a new function 'setup Controls'.


private function setup3DScene(): void
{
       // intial setup for regdering engine Sandy3D
	this.setupSandy();

       // intial setup for Cast3D
	this.setupCast3D();

       // this function sets Control panel
	this.setupControls();

 	this.loadData();

	this.addEventListener(Event.ENTER_FRAME, this.handleEnterFrame);		
}

Initialization function looks like this:


 /**
 *  Function setups visual animation control panel.
 */		
public function setupControls(): void
{		
	cp = new ControlPanel(animator);
	this.stage.addChild(cp);
}

If want to see frame rate information you need to add few lines to ENTER_FRAME handler.


/**
* Handles the ENTER_FRAME event and updates the 3D scene.
*/
private function handleEnterFrame(event: Event): void
{					
       if (!this.loaded) return;
            
	var time:Number = getTimer();	
			
	// Update cast3D first		
	this.animator.render();

	// then render scene 	
	this.scene.render();
			
	// Update Control panel stat data		
	if (this.animator.source && cp)
	{
		var frame:int = this.animator.source.currentFrame; 
		var kframe:int = this.animator.source.currentKeyFrame; 
		cp.setCurrentFrame(kframe,frame);
		cp.setCurrentTime(animator.currentTime);
		cp.currentFps = 1000.0/(getTimer() - time);
	}
}

Later on when you are finished with debugging your model, you still can leave the panel in the code, just make it invisible. cp.visible = false; So, if done it right you should see something like these:

---- Complete source code of this [[samplesource|sample]].