How to smooth 'zoom' and 'pan' of image in as3 - actionscript-3

Question

I am using ActionScript 3 in Adobe Animate to zoom and pan for drawings. Whenever the center button in the control panel is clicked, the image doesn't appear in the center, it appears a bit right below..
Example of how photo inside MovieClip is not centred to the stage.
Also, the pan and zoom are not smooth. The code that I am using is creating a video clip of image and there is a control panel to control the zoom and pan. Please let me know the changes required to make it smooth and workable.
The AS3 code is given below:
import flash.events.MouseEvent;
import flash.events.Event;
var moveSpeed: Number = 5;
var sizeScale: Number = 0.04;
var clickMore: Boolean = false;
var clickLess: Boolean = false;
var clickLeft: Boolean = false;
var clickRight: Boolean = false;
var clickUp: Boolean = false;
var clickDown: Boolean = false;
var clickCenter: Boolean = false;
// --- Click Zoom more:
btMore.addEventListener(MouseEvent.MOUSE_DOWN, moreZoom);
function moreZoom(event: MouseEvent): void {
clickMore = true;
}
btMore.addEventListener(MouseEvent.MOUSE_UP, stopMoreZoom);
function stopMoreZoom(event: MouseEvent): void {
clickMore = false;
}
// --- Click Zoom less:
btLess.addEventListener(MouseEvent.MOUSE_DOWN, lessZoom);
function lessZoom(event: MouseEvent): void {
clickLess = true;
}
btLess.addEventListener(MouseEvent.MOUSE_UP, stopLessZoom);
function stopLessZoom(event: MouseEvent): void {
clickLess = false;
}
// --- Click Move left:
btLeft.addEventListener(MouseEvent.MOUSE_DOWN, leftMove);
function leftMove(event: MouseEvent): void {
clickLeft = true;
}
btLeft.addEventListener(MouseEvent.MOUSE_UP, stopLeftMove);
function stopLeftMove(event: MouseEvent): void {
clickLeft = false;
}
// --- Click Move right:
btRight.addEventListener(MouseEvent.MOUSE_DOWN, rightMove);
function rightMove(event: MouseEvent): void {
clickRight = true;
}
btRight.addEventListener(MouseEvent.MOUSE_UP, stopRightMove);
function stopRightMove(event: MouseEvent): void {
clickRight = false;
}
// --- Click Move up:
btUp.addEventListener(MouseEvent.MOUSE_DOWN, upMove);
function upMove(event: MouseEvent): void {
clickUp = true;
}
btUp.addEventListener(MouseEvent.MOUSE_UP, stopUpMove);
function stopUpMove(event: MouseEvent): void {
clickUp = false;
}
// --- Click Move Down:
btDown.addEventListener(MouseEvent.MOUSE_DOWN, downMove);
function downMove(event: MouseEvent): void {
clickDown = true;
}
btDown.addEventListener(MouseEvent.MOUSE_UP, stopDownMove);
function stopDownMove(event: MouseEvent): void {
clickDown = false;
}
// --- Click Move Center:
btCenter.addEventListener(MouseEvent.MOUSE_DOWN, centerMove);
function centerMove(event: MouseEvent): void {
clickCenter = true;
}
btCenter.addEventListener(MouseEvent.MOUSE_UP, stopCenterMove);
function stopCenterMove(event: MouseEvent): void {
clickCenter = false;
}
// --- Click Zoom Wheel:
stage.addEventListener(MouseEvent.MOUSE_WHEEL, handleMouseWheel);
function handleMouseWheel(event: MouseEvent): void {
if (myMCimg.scaleX >= 1) {
myMCimg.scaleX += (event.delta * sizeScale);
myMCimg.scaleY += (event.delta * sizeScale);
} else {
myMCimg.scaleX = 1;
myMCimg.scaleY = 1;
}
}
// --- Actions:
addEventListener(Event.ENTER_FRAME, enterFrame);
function enterFrame(event: Event): void {
if (clickMore == true) {
myMCimg.scaleX += sizeScale;
myMCimg.scaleY += sizeScale;
}
if ((clickLess == true) && (myMCimg.scaleX >= 1)) {
myMCimg.scaleX -= sizeScale;
myMCimg.scaleY -= sizeScale;
}
if (clickLeft == true) {
myMCimg.x -= moveSpeed;
}
if (clickRight == true) {
myMCimg.x += moveSpeed;
}
if (clickUp == true) {
myMCimg.y -= moveSpeed;
}
if (clickDown == true) {
myMCimg.y += moveSpeed;
}
if (clickCenter == true) {
// --- Centralize:
myMCimg.scaleX = 1;
myMCimg.scaleY = 1;
myMCimg.x = stage.stageWidth / 2;
myMCimg.y = stage.stageHeight / 2;
}
}
// --- Click keys directions keyboard:
stage.addEventListener(KeyboardEvent.KEY_DOWN, pressKeys);
function pressKeys(event: KeyboardEvent): void {
if (event.keyCode == Keyboard.LEFT) {
myMCimg.x -= moveSpeed;
}
if (event.keyCode == Keyboard.RIGHT) {
myMCimg.x += moveSpeed;
}
if (event.keyCode == Keyboard.UP) {
myMCimg.y -= moveSpeed;
}
if (event.keyCode == Keyboard.DOWN) {
myMCimg.y += moveSpeed;
}
if (event.keyCode == Keyboard.ENTER) {
// --- Centralize:
myMCimg.scaleX = 1;
myMCimg.scaleY = 1;
myMCimg.x = stage.stageWidth / 2;
myMCimg.y = stage.stageHeight / 2;
}
// --- Click Drag:
myMCimg.addEventListener(MouseEvent.MOUSE_DOWN, dragMove);
function dragMove(event: MouseEvent): void {
myMCimg.startDrag();
}
myMCimg.addEventListener(MouseEvent.MOUSE_UP, stopDragMove);
function stopDragMove(event: MouseEvent): void {
stopDrag();
}
}

Answer 1

(1) Centralize :
To centralize by width (horizontal), try also subtracting by half-width of picture like:
myMCimg.x = (stage.stageWidth / 2) - (myMCimg.width / 2);
Same logic for centralizing by height (vertical).
(2) Zoom :
As for smooth zoom, I haven't tested your code so not sure what the visual problem "not smooth" means exactly. Maybe it's your output settings? In your Publish Settings (press Ctrl+Shift+F12) does "smoothness" improve if you try those 3 Hardware Acceleration options: None, Direct and GPU?
Finally, I can only suggest you try something like this below as an alternative (maybe it helps) :
To test the code...
Create 2 different colour boxes on stage.
Convert each box to MovieClip (not as Button).
Give each box an instance name (example: zoom_in and zoom_out).
Add/convert image into some MovieClip with instance name pic.
First example will update zoom via mouse roll-over...
zoom_in.addEventListener(MouseEvent.MOUSE_OVER, process_zoom_rollover);
zoom_in.addEventListener(MouseEvent.MOUSE_OUT, process_zoom_rollout);
zoom_out.addEventListener(MouseEvent.MOUSE_OVER, process_zoom_rollover);
zoom_out.addEventListener(MouseEvent.MOUSE_OUT, process_zoom_rollout);
//# mouse pointer is placed over either zoom-in or zoom-out icon..
function process_zoom_rollover (event: MouseEvent): void
{
//trace("event.currentTarget : " + event.currentTarget.name );
event.currentTarget.addEventListener(Event.ENTER_FRAME, animate_Zoom);
}
//# mouse pointer is now move away from over any zoom icon.
function process_zoom_rollout (event: MouseEvent): void
{
event.currentTarget.removeEventListener(Event.ENTER_FRAME, animate_Zoom);
}
function animate_Zoom (event:MouseEvent) : void
{
//# scale by PERCENTAGE (width or height / 100), then multiply by some SPEED amount
if (event.currentTarget.name == "zoom_in") //increase width and height
{ pic.width += ((pic.width /100 ) * 1.75); pic.height += ((pic.height /100 ) * 1.75); }
if (event.currentTarget.name == "zoom_out") //decrease width and height
{ pic.width -= ((pic.width /100 ) * 1.75); pic.height -= ((pic.height /100 ) * 1.75); }
}
Second example will update zoom via mouse clicks...
zoom_in.addEventListener(MouseEvent.CLICK, process_zoom_click);
zoom_out.addEventListener(MouseEvent.CLICK, process_zoom_click);
//# mouse pointer is placed over either zoom-in or zoom-out icon.
function process_zoom_click (event:MouseEvent) : void
{
//trace("event.currentTarget : " + event.currentTarget.name );
if (event.currentTarget.name == "zoom_in") //increase width and height
{ pic.width += ((pic.width /100 ) * 1.75); pic.height += ((pic.height /100 ) * 1.75); }
if (event.currentTarget.name == "zoom_out") //decrease width and height
{ pic.width -= ((pic.width /100 ) * 1.75); pic.height -= ((pic.height /100 ) * 1.75); }
}