Zoom In/Out and Pan in As3

[Kumineko]

Hi all I am using Animate CC.

So i don't know if that action script 3 or not. My apologies if its not. I am new to Animate CC and Flash/Actionscript.

Anyhow i am doing an interactive map and map turned out rather big for the html i tend to put it on. Thus after spending a day or two trying to find the answer having no luck, I decided to ask here.

All I want is that i can pan the image, and zoom in/out the image using the mouse.

Please help,

Jorge

[Kumineko]

While checking the web i came across this code. Which i modified as AzS is the name of the image converted to a movie. But whenever i run it, it comes up with the following error: Scene 1, Layer 'action', Frame 1, Line 20, Column 7 1119: Access of possibly undefined property width through a reference with static type Class.

So I am assuming is have define the movie variable some how but i dont know how.

import flash.events.MouseEvent;

addEventListener(MouseEvent.MOUSE_WHEEL, zoom);

function zoom(e: MouseEvent): void {

if (e.delta > 0) {

AzS.width += 20;

AzS.height += 20;

} else if (e.delta < 0) {

AzS.width -= 20;

AzS.height -= 20;

}

}

[Colin Holgate · Accepted solution]

It could be that when the object becomes big enough to be under the mouse, or if you happen to start that way, but I can't get it to go wrong.

You should add the listener to a background movieclip, so that you can zoom AzS smaller, the background movieclip would still get the mouse events when the cursor isn't over AzS. You would also want to stop AzS from triggering mouse events. I made a background movieclip, bg, and here's my version:

import flash.events.MouseEvent;

bg.addEventListener(MouseEvent.MOUSE_WHEEL, zoom);

AzS.mouseEnabled = false;

AzS.mouseChildren = false;

function zoom(e: MouseEvent): void {

    if (e.delta > 0) {

        AzS.width += 20;

        AzS.height += 20;

    } else if (e.delta < 0) {

        AzS.width -= 20;

        AzS.height -= 20;

    }

}

BTW, it only works in the debug player or in a browser. It won't work as a normal Test Movie.

[Kumineko]

for some reason that code comes up with an error when the:

AzS.width += 20;

Scene 1, Layer 'action', Frame 1, Line 8, Column 13 1119: Access of possibly undefined property width through a reference with static type Class.

When it goes thru bg.addEventListener(MouseEvent.MOUSE_WHEEL, zoom);

Scene 1, Layer 'action', Frame 1, Line 2, Column 1 1120: Access of undefined property bg.

I dont know what this errors mean.

[Colin Holgate]

If you made the background movieclip I was suggesting, did you go to the Properties panel and give it a name of bg?

[Kumineko]

The this is that AzS is what named my image converted into movieclip. I tried renaming movieclip to bg. It brings up another error.

So i guess this script i found above is wrong.

And then the other script i found doesn't zoom but it stretches the image sideways regardless of which way the mouse wheel turns so i don't know how to fix that either (which again i don't know if its AS3 or not); that one is pasted below:

import flash.events.MouseEvent;

addEventListener(MouseEvent.MOUSE_WHEEL, zoom);

function zoom(e:MouseEvent): void {

     if(e.delta - 0){

          e.currentTarget.width += (e.currentTarget.width/100) * 10;

          e.currentTarget.height += 10;

     } else{

          e.currentTarget.width -= (e.currentTarget.width/100) * 10;

          e.currentTarget.height -= 10;

     }

}

[Colin Holgate]

With my suggestion there should be two movieclips, one is a stage sized background, that never moves. The other is your AzS movieclip, which is on top of the bg named movieclip, and is the one that gets scaled when you mousewheel on top of the bg movieclip.

Your existing math did make it seem like it was a square AzS. You could make a note of the initial width and height of the movieclip, then when you scroll you add or subtract from a scale variable, and multiple the start width and start height by the scale variable value.

With scaling the current width and height I think you'll get into rounding errors, or end up with something smaller than a pixel.

[Kumineko]

Well if i try this and i don't define what AzS is i get a #1120 and #1061 error . Yes i did rename my movieclip outside to bg

If i do define it as a movieclip then i still get the #1061 error.

[Colin Holgate]

You wouldn't rename your AzS movieclip, that would keeps its current name. The background movieclip would be named bg.

Are you able to post your non-working files somewhere for me to try?

[Kumineko]

sure

here go a wesendit link

https://wsi.li/0ndwS551O2kB

[Kumineko]

I sent you a pm instead looks like linking from here will take a while to moderate.

[Colin Holgate]

I'm a  moderator, I saw your link!

You have given the two movieclips a linkage name in the library, of AzS and bg. You want to have no linkage name in the library. Instead you want to select the object on the stage, and in Properties give it an instance name of AzS for the map, and bg for the stage sized movieclip. Then it all works.

[Kumineko]

oki i did that but it keeps coming back with errors and the mouse wheel wont do anything.

1120 error for AzS and bg.

[Kumineko]

and then if i say that:

import flash.display.MovieClip;

var AzS:MovieClip;

var bg:MovieClip;

This error shows up: TypeError: Error #1009: Cannot access a property or method of a null object reference.

at azimsteepe_map_fla::MainTimeline/frame1() <-- when i test the movie.

[Colin Holgate]

That's because the linkage column is still filled in in the library.

[Kumineko]

Omg it worked now for a new problem. Since the locations are in another layer how i link to the map so they zoom in together.

[Colin Holgate]

You could put them into the AzS movieclip. Two problems though, they will scale (which may be ok), and because you want to be able to zoom using the bg movieclip, you won't be able to click on each X, if that's meant to do something.

You could comment out the mouseChildren = false line, then the X would be able to pick up on a click. If you tried zooming while on top of an X, the zoom wouldn't work, because bg wouldn't get the mouse event.

[Kumineko]

its more a mouse over than a click. i just put them both in the button since people tend to click subconsciously. but click them doesn't have like action or link to it. the X locations are just there so you know where to put the mouse pointer.

what if i copy them and paste on the stage on top map. Will that work?

[Kumineko]

no that didn't work.

[Colin Holgate]

If you right-click on the layer name "locations" you can Cut Layer. Then double-click into the AzS map, right-click on layer 1 and select Paste Layer. Make sure everything is selected in the layer you just made, and nudge any one X into the right place, and the others should move into their right place.

Do comment out the mouseChildren line:

//AzS.mouseChildren = false;

and then do another test. They will scale, and on rollover with show their Over frame.

It's soon going to occur to you that you'll want to zoom into towards the area you're pointing at, and you could end up asking a lot of questions. Are you working on this on your own, or at least do you have any friends good at math?

[Kumineko]

i am doing this on my own.

Wow that worked. yeah i see that it only zooms from the center. and that at some point the panning doesn't work as i hoped it would because it doesn't stop at the images borders.

[Kumineko]

plus there aren't that many tutorials on web about AS3, after Flash Pro changed to Animate CC came out.

[Colin Holgate]

That may not matter. Everything you're doing was possible in Flash Pro, you could find those tutorials too, and it would apply to Animate.

[Kumineko]

some times they don't work. like the panning code i have there under zooming one was from one tutorial from this guy from India. And while the panning worked perfectly the zoom he had would stretch the image horizontally no matter which way the mouse wheel scroll to.

One thing i did learn while working with you on this is that you could change bg for stage and it would work.

[Colin Holgate]

That's interesting. When I first started answering your questions I tried stage, and it didn't work at the time. I must have had something wrong in my code.