Interactive Map with zoom/pan feature

[sara]

So, I am working on this interactive map that needs the ability to pan/zoom. I thought I'd try using a vcam for the panning/zooming action, since for some reason resizing the actual map messes up the text and such. So I'm using TweenLite to tween the vcam. I want the buttons/user interface to stay in one place (or rather, move with the vcam) while the user moves or zooms in on the map. Both the vcam and the user interface (named "menu") are the same size (811 x 549) and have the same x and y coordinates (405.50, 274.50). But when applying the same tween to them, they don't stay perfectly aligned while moving. Any suggestions? I am kind of a newbie with this stuff and I'm not even sure I'm approaching this the right way at all. I'm guessing there's a better way to do this.

 

Anyway, here's the code I'm using to test it out:

 

bAC.addEventListener(MouseEvent.CLICK, ACmove);

 

function ACmove(evt:MouseEvent) {

TweenLite.to(vcam, 1, {x:100, y:100});

TweenLite.to(menu, 1, {x:100, y:100});

}

[Carl]

i don't see why that would be happening. is it a big difference? does one object have a filter on it?

if one object has a filter it could be snapping to whole pixel values and the other object is sitting on sub-pixels which would make them appear out of sync.

the same thing might happen if one object has a stroke with "hinting" turned on which forces the stroke to snap to whole pixel values.

 

if the objects start in the same position and they end in the same position, I would put them into a container and just move the container.

 

you can do this in the Flash IDE by just putting them in the same movie clip symbol or with code

 

var container:Sprite = new Sprite();
addChild(container);

container.addChild(vcam);
container.addChild(menu);

//i don't know how your project is set up so you may have to set the x/y of vcam and menu to 0:0 and then set the x/y of container to where you want it to start

bAC.addEventListener(MouseEvent.CLICK, ACmove);

function ACmove(evt:MouseEvent) {
TweenLite.to(container, 1, {x:100, y:100});

}

 

you can always upload a zip of your fla (CS5 or less) with just enough in it to exhibit the problem.

[sara]

Thanks. It's a fairly big difference. They lined up at the end of the tween but during the tween they were off. Anyway, tried the container, it's giving an error "Access of undefined property bAC." I assume it's because my button bAC is inside of my menu movie clip inside of the container. I tried container.bAC and container.menu.bAC, but neither work... :/

[Carl]

from the first code you posted it did not appear that bAC was inside menu as bAC was trying to target menu and vcam from the same scope.

 

i don't know where your code is in relationship to your buttons so I can't really troubleshoot your path issues.

 

assuming all your code is on the main timeline or in a document class:

 

container.menu.bAC.addEventListener(...)

 

should work.