[flexcoders] Center Canvas Zoom

[sk_flexcoder]

I am trying to center the zoom rather than zoom to the default registration 
point 0,0. 

The following code works to some extent, but repositioning the canvas is not 
smooth when we change the slider value quickly. Also when we drag the child 
canvas to a new position and then zoom, the following code repositions the 
child canvas to the center and zooms, I would like the child canvas to stay 
where it is and zoom to its center.

Code:

private var childCanvas:Canvas = new Canvas();

childCanvas.clipContent = false;
childCanvas.setStyle("borderStyle", "solid");

var btn:Button = new Button();
btn.label = "Test";
btn.x = 10;
btn.y = 100;

childCanvas.addChild(btn);

parentCanvas.addChild(childCanvas);

parentCanvas.addEventListener(MouseEvent.MOUSE_DOWN , mouseDownHandler);
parentCanvas.addEventListener(MouseEvent.MOUSE_UP,mouseUpHandler);

// zoom handler function called when slider value is changed

private function zoomHandler():void {


childCanvas.scaleX = HSlider.value/100;
childCanvas.scaleY = HSlider.value/100;

// move to center
var parentCanvasCenter:Point = new 
Point(parentCanvas.width/2,parentCanvas.height/2);

var childCanvasCenter:Point = new Point(childCanvas.width/2, 
childCanvas.height/2);

var center:Point = parentCanvasCenter.subtract(childCanvasCenter);
childCanvas.move(center.x, center.y);
}

private function mouseDownHandler(event:MouseEvent):void {
childCanvas.startDrag();
}

private function mouseUpHandler(event:MouseEvent):void {
childCanvas.stopDrag();
}

<mx:Canvas width="100%" height="100%" id="parentCanvas" 
        backgroundColor="#FFFFFF" 
        horizontalScrollPolicy="off"
        verticalScrollPolicy="off" 
        backgroundAlpha="0" 
        borderStyle="outset"/>

<mx:HSlider
id="HSlider"
showDataTip = "true"
dataTipPlacement="top"
minimum="10" maximum="100"
value = "100"
snapInterval="5"
change="zoomHandler();"
width="300"
liveDragging="true"
/>

Thanks again..