Zoom in and zoom out using AS3

you all know: "right click -> zoom in or out" in flash file, well, I need to do this but using, for example, cli开发者_如何学Pythoncking a button.

Is this possible using only AS3 code?

Thx!

---

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

---

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

---

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;
}

---

Actually if you want to scale/zoomin/zoomout a stage or video object or anything else, multiply and divide should be used instead. Like this (this is what I used when I needed to create zoomin/zoomout functionality for web camera - digital zoom of course using scale functionality):

Assume that:

video_width = 640;
video_height = 480;

stage.scaleMode     = StageScaleMode.NO_SCALE; 
stage.align         = StageAlign.TOP_LEFT;
stage.stageWidth    = video_width;
stage.stageHeight   = video_height;


camera = Camera.getCamera();
// some other params

video = new Video( video_width, video_height );
video.attachCamera(camera);
addChild(video);

// to mirror webcam output:
video.scaleX = -1;
video.scaleY = 1;
video.x = video_width;
video.y = 0;


public function zoom(action:String = 'reset')
{
      var step = 1.1, // adjust this multiplyer for faster zoom. Eg. 1.2, 1.5, etc.
          x_offset = 0, 
          y_offset = 0;

    if (action == 'in')
    {
        video.scaleX *= step;
        video.scaleY *= step;

        x_offset = (stage.stageWidth - video.width)/2;
        y_offset = (stage.stageHeight - video.height)/2;
                // to center video object on stage by X if mirror effect is used
        video.x = stage.stageWidth - x_offset; 
                // to center video object on stage by X - no mirror
                // video.x = x_offset;
        video.y = y_offset; // to center video object on stage by Y
    }
    else if (action == 'out')
    {
            video.scaleX /= step;
        video.scaleY /= step;

        x_offset = (stage.stageWidth - video.width)/2;
        y_offset = (stage.stageHeight - video.height)/2;
        video.x = stage.stageWidth - x_offset;
        video.y = y_offset;
    }
    else
    {
                // need to be mirrored
        video.scaleX = -1; 
                // no mirror
                 // video.scaleX = 1;
        video.scaleY = 1;
                // if mirror video output
        video.x = stage.stageWidth;
               // no mirroring used
               // video.x = 0;
        video.y = 0;
    }       
}

Now you use this by attaching this functions to your buttons:

zoom('in');
zoom('out'); 
zoom('reset'); // reset zoom