Skip to main content
June 27, 2009
Question

Zoom in Effect

  • June 27, 2009
  • 1 reply
  • 494 views

Hi, im trying to create a zoom/pan effect for an image gallery.

The thing is that i dont have any idea on how to do it so ive started to play with it.

I created a zoom button that basiclly make the image bigger and a mask for the image so

no matter how big you going to scale it its going to show the masked area only and if i want to pan

all i have to do is move the image inside of the mask. but my problem is that i use a MouseEvent.MOUSE_DOWN

event on the zoom in button and the function scale it up and position it in the center only once,

what i want to do is as long as the user have is mouse down the image will zoom and when the user releases the mouse

it's going to stop.

Thats the effect that im trying to achieve http://flashden.net/item/zoom-pan-controls-with-dynamic-image-settings/15713.

But the cool thing about this gallery is that when you zoom in or out it actually ease out or in and stop and it run's really smooth.

Any1 have any idea on how to get this zoom in effect ?

Thanks

This topic has been closed for replies.

1 reply

AttaBoy2
Inspiring
June 27, 2009

here's one way to do it:

you might want to try using EnterFrame first and only use timer if the scaleing isn't smooth enough.

the output of the code is here:  http://www.cybermountainwebservices.com/client0/dragdrop/ look for the arrows under scale XY

function scaleUp(event:MouseEvent):void {
    timer.addEventListener(TimerEvent.TIMER, timerListener);
    timer.start();
}

function timerListener(e:TimerEvent):void {
    if (lastTarget) {
        lastTarget.width*=1.01;
        lastTarget.height*=1.01;
        e.updateAfterEvent();
        if (lastTarget.width>320) {
            scaleOff();
        }
    }
}

function stopScale(event:MouseEvent):void {
    scaleOff();
}

function scaleOff() {
    timer.stop();
    timer.removeEventListener(TimerEvent.TIMER, timerListener);
    timer.removeEventListener(TimerEvent.TIMER, timerListenerDown);
}

function scaleDown(event:MouseEvent):void {
    scaleOff();
    timer.addEventListener(TimerEvent.TIMER, timerListenerDown);
    timer.start();
}

function timerListenerDown(e:TimerEvent):void {
    if (lastTarget) {
        lastTarget.scaleX*=.99;
        lastTarget.scaleY*=.99;
        e.updateAfterEvent();
        // if I reduce to 2.01 it won't scale back up
        if (lastTarget.width<3.01) {
            scaleOff();
        }
    }