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
       // intial setup for Cast3D
       // this function sets Control panel
	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);

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		
	// then render scene 	
	// 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.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 sample.