Skip to main content
Inspiring
April 23, 2006
Question

Scaling and positioning simultaneously to achieve a zoom out effect

  • April 23, 2006
  • 3 replies
  • 607 views
Hello all,

I'm working on a map very similar to the one found here: http://www.curatingthecity.org/map.jsp

Since you can pan around the map after you have zoomed in on it, the only way to achieve a decent zoom out is to code it instead of using tweens. Since my map actually moves on top of the location and then does an even scale up (you can find the swf here: http://www.stationarynotes.com/art/testMap.swf) I was wondering how to code the zoom out? Right now I have 4 loopers, one for width, one for height, one for _x and one for _y. These loopers are all triggered when the user hits the big red "X" in the top right corner. Unfortunately it seems that Flash might not be recognizing that an _x position of -700 is actually less than 0 so when it runs the looper it runs the subtraction routine instead of running the addition routine to get everything back to 0,0. I hope that made some sense.

Any help is greatly appreciated, I am a lowly student with a professor who doesn't know how to use Flash.
This topic has been closed for replies.

3 replies

robdodsonAuthor
Inspiring
April 24, 2006
Thanks for all your help guys, I got everything worked out and now I've decided to use the Tween class for a lot more of my site. Much good karma to all of you
Inspiring
April 23, 2006
Hi.

I'm currently working on a map project that involves mostly the same kind of zooming (though mine doesn't pan) and I also had loops for each property that changed the property's values at each .onEnterFrame. Then I began to do some abstraction and made me a function that would receive a property and a function to change it accordingly, and my code became simpler and less cluttered. When I was finished with the zooming part, and while trying to solve a different problem, I stumbled upon the description of the Tween class, availiable in the latest versions of Flash. That's when I banged my head agains the wall.

I would advise you to try the Tween class yourself, though if you're willing to change your code at this time is your choice.

http://livedocs.macromedia.com/flash/8/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00001500.html

The advantage is that you don't have to define the movement routines for positioning, for instance, you provide only the initial and final coordinates, how long will the tween last and there are even several interesting easing options to create different kinds of animation. Also, the availiable properties, handlers (and listeners, though not documented specifically, I think), allow for great control.

Apart from this suggestion and moving back to your current problems:

Have you tested the coordinates your routines are getting? I used to have some problems with global and local coordinates getting mixed up in the beginning of my project, since many of the buttons were inside multiple nested Movie Clips. Also, you'll probably need to record the coordinates of the place you clicked in your map, which will become the center of the zoomed map, if I understood correctly. Those will be the values to feed to your loops so they can bring you to the 0,0.

Hope this was useful.
Inspiring
April 23, 2006
Scruffpuff,

> I'm working on a map very similar to the one found here:
> http://www.curatingthecity.org/map.jsp
>
> Since you can pan around the map after you have zoomed
> in on it, the only way to achieve a decent zoom out is to
> code it instead of using tweens.

Makes sense.

> Since my map actually moves on top of the location and then
> does an even scale up (you can find the swf here:
> http://www.stationarynotes.com/art/testMap.swf) I was
> wondering how to code the zoom out?

Looks good so far. I guess I'm confused on why zooming out is different
from zooming in. Conceptually, it's the same idea, right? Adjust the
MovieClip._width, _height (or _xscale, _yscale) and also the _x and _y
properties.

> Right now I have 4 loopers, one for width, one for height,
> one for _x and one for _y. These loopers are all triggered
> when the user hits the big red "X" in the top right corner.

Not sure what you mean "loopers" ... are you talking about the
MovieClip.onEnterFrame event?

> unfortunately it seems that Flash might not be recognizing
> that an _x position of -700 is actually less than 0 so when
> it runs the looper it runs the subtraction routine instead of
> running the addition routine to get everything back to 0,0.

Hmm. Any routine that's run is a routine you've written, right? So
it's up to you whether or not to account for negative numbers.

> I hope that made some sense.

I think if you post some of these routines you're talking about, you'll
get a better shot at some useful answers. Let's see what you've done so
far, under the hood.


David
stiller (at) quip (dot) net
Dev essays: http://www.quip.net/blog/
"Luck is the residue of good design."


robdodsonAuthor
Inspiring
April 23, 2006
Well to zoom in I just used a tween. I'm breaking the map up into sections so someone just clicks on a section and then it zooms in on it. However, the user is then able to pan around the map and therefore I need to actually code a zoom out since they'll be in a different position than where any of the tweens end at.

When I say "loopers" I'm basically referring to a movie clip with a reapeting frame action which is triggered once the X button is clicked.

Here's the code for the X button:

on (release) {

if (mapContainer_mc.map_mc._width > 817.5) {
mapContainer_mc.mapWsizer_mc.gotoAndPlay(2);
}


if (mapContainer_mc.map_mc._height > 634.9) {
mapContainer_mc.mapHsizer_mc.gotoAndPlay(2);
}


if (mapContainer_mc.map_mc._x > 0) {
mapContainer_mc.mapXlocer_mc.gotoAndPlay(2);
}

if (mapContainer_mc.map_mc._x < 5) {
mapContainer_mc.mapXlocer_mc.gotoAndPlay(2);
}

if (mapContainer_mc.map_mc._y > -30) {
mapContainer_mc.mapYlocer_mc.gotoAndPlay(2);
}

if (mapContainer_mc.map_mc._y < -30) {
mapContainer_mc.mapYlocer_mc.gotoAndPlay(2);
}
}


And here's what one of the loopers looks like:

First Frame:
stop();

Second Frame:
if (_parent.map_mc._width > 817.5) {
_parent.map_mc._width = _parent.map_mc._width - 5;

}

if (_parent.map_mc._width == 817.5) {
gotoAndStop(1);
}

Third Frame:
gotoAndPlay(2);


So the X button checks to see which looper to play and then the appropriate looper should ideally trigger a function over and over again until the appropriate value is reached. However, it's not working. The width just scales the image into a straight line and I never see the height or the x and y loopers actually doing anything although I have trace commands on all of their second frames which are stating that they are in fact running.

Here's a link to the actual .fla: http://www.stationarynotes.com/studioI/