Skip to main content
June 18, 2010
Question

What code to scrollwheel zoom with point of focus at mouse cursor tip ?

  • June 18, 2010
  • 1 reply
  • 901 views

Hi,

Can anyone supply a code to enable zooming in/out on a graphic or movie clip using mouse scrollwheel with origin of scale change being at the mouse cursor position. I have one where it is at top left.

I also require it to stay proportional, when applied to a rectangular graphic my code makes it go letterbox on zoom out !

Envirographics

This topic has been closed for replies.

1 reply

Known Participant
June 18, 2010

Math for the zooming part would look something like this

var percentY

var percent X

const scaleAmtY = WhateverYouWantThisNumberToBe

const scaleAmtX = WhateverYouWantThisNumberToBe

percentY = ((mouseY - stage.height)/stage.height)*100

percentX = ((mouseX - stage.width)/stage.width)*100

function thisFunctionZoomsIn (e:MouseEvent):Void{

     nameOfImage.scale.x += scaleAmtX

     nameOfImage.scale.y += scaleAmtY

     nameOfImage.x -= (scaleAmtX * percentX)

     nameOfImage.y -= (scaleAmtY * percentY)

}

Now again, This is not written in code. this is pseudo code but its prety close to code. you may have to tweek things a bit.

Also, I would guess the event listner looks something like this

stage.addEventListener(Mouse.SCROLL_UP, thisFunctionZoomsIn);

But im just guessing. I can never remember the right formula for setting up event listeners without looking at one that ive written before and that was off the top of my head. But I hope this helps.

June 23, 2010

Hi Zilx,

Thanks for replying, the only one so an even bigger thanks !

I would have thought this sort of common need was a commonly available code.

I shall see how this works, myself and colleague both newcomers to AS3 but we only need just a pan and zoom code functional to create many artworks, all other can wait a bit longer !

Cheers

Envirographics

Known Participant
June 23, 2010

Its no problem. Just remember that for the most part, Its all preplanning. For the zoom thing, all you need to do is figure out the mouses position relitive to the stage (percent variable), and then zoom it in on what is at that point in stage relation. After that the code almost writes itself. AS3 is pretty easy to learn. If you want a little more help, Google MR SUN and check out his tutorials.