Zoom in and zoom out using AS3

Question

Hi guys, you all know: "right click -> zoom in or out" in flash file, well, I need to do this but using, for example, clicking a button.

Is this possible using only AS3 code?

Thx!

Answer 1

Not as far as I know. Curious to see other answers though.

One hacky thing that comes to mind is, maybe you could use javascript to control a div containing your swf so that the div gets large(zoom in), but is displayed within the same 'scrollRect' rectangle. you would call the javascript function to do that using ExternalInterface.

A quick'n'dirty test I did using flash's scrollPane component:

//zoomIn,zoomOut = button
//sp = scrollPane, scrollDrag = true
zoomIn.addEventListener(MouseEvent.CLICK, zoom);
zoomOut.addEventListener(MouseEvent.CLICK, zoom);

function zoom(event:MouseEvent) {
    var scale:Number = event.currentTarget == zoomIn ? 1 : -1;
    sp.content.scaleX += scale;
    sp.content.scaleY += scale;
    sp.update();
}

Then I've noticed you are using flex, so surely there must be a a container that will allow you a similar functionality.

HTH, George

Answer 2

you must put all your graphics in a sprite, for example "scene" and then modify its scale...

Answer 3

I would use scaleX and scaleY also, but simply with a number instead of George's solution with a var. So, something like

zoomInButton.addEventListener(MouseEvent.MOUSE_DOWN, zoomIn);
zoomOutButton.addEventListener(MouseEvent.MOUSE_DOWN, zoomOut);

function zoomIn(e:MouseEvent) {
  //actions for zoom-in function
  myPicture.scaleX += 10;
  myPicture.scaleY += 10;
}
function zoomOut(e:MouseEvent) {
  //actions for zoom-out function
  myPicture.scaleX += 10;
  myPicture.scaleY += 10;
}

You might stumble upon another obstacle though, which is that the picture gets scaled from and to the upper left corner. In that case try moving the picture with the scaling. Like

function zoomIn(e:MouseEvent) {
  //actions for zoom-in function
  myPicture.scaleX += 10;
  myPicture.scaleY += 10;
  myPicture.x -= 5;
  myPicture.y -= 5;
}