7 Replies Latest reply on Apr 24, 2006 7:00 AM by robdodson

    Scaling and positioning simultaneously to achieve a zoom out effect

    robdodson Level 1
      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.
        • 1. Re: Scaling and positioning simultaneously to achieve a zoom out effect
          Level 7
          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."


          • 2. Scaling and positioning simultaneously to achieve a zoom out effect
            robdodson Level 1
            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/
            • 3. Re: Scaling and positioning simultaneously to achieve a zoom out effect
              maguskrool
              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.
              • 4. Re: Scaling and positioning simultaneously to achieve a zoom out effect
                Level 7
                Scruffpuff,

                > Well to zoom in I just used a tween.

                Gotcha. So actually, the ActionScript here is basically navigatory: go
                to this frame and play, go to that frame and play, etc.

                > 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.

                I can see where this might get a bit complicated, especially if you want
                to anticipate zooms from various pan locations. When you first described
                your circumstances, I was under the impression you were using ActionScript
                to adjust MovieClip properties such as _x, _y, and the like on an
                onEnterFrame event handler.

                > Here's the code for the X button:
                >
                > on (release) {
                > if (mapContainer_mc.map_mc._width > 817.5) {
                > mapContainer_mc.mapWsizer_mc.gotoAndPlay(2);
                > }

                At this point, I would recommend you give maguskrool's suggestion a
                shot. The Tween class may turn out to be a lifesaver for you, for the exact
                reasons maguskrool gives. If not the Tween class, I would recommend you
                study the MovieClip class and see what your options are. Just about
                everything in ActionScript is an object, and objects are defined by their
                namesake classes. What they can do is listed under the Methods summary;
                what they can react to is listed under the Events summary; characteristics
                they have are listed under the Properties summary.

                Animation can be described as change over time. One of the most basic
                of animations is to simply move something horizontally. Start a brand new
                FLA, draw a quick circle, and convert it to a movie clip symbol. Select the
                movie clip and give it an instance name via the Property insepctor. Now, in
                a frame of the timeline that contains this clip (not *on* the clip, but in a
                frame), type ...

                theClipsInstanceName.onEnterFrame = function() {
                this._x += 5;
                }

                ... and test your SWF file. (Replace theClipsInstanceName, of course, with
                the actual instance name you give the clip.) On testing, you'll see the
                clip move to the right. The reason for this is because you've assigned a
                function to its onEnterFrame event, as described in the MovieClip class.
                Every time the clip enters a frame -- this is roughly equivalent to your
                movie's framerate -- it updates its _x property by 5. Badda bing,
                animation. This same principle applies to any settable MovieClip property.
                It is in this way that scripted animations, even sophisticated ones, can be
                made.

                The Tween class makes use of the same principle, but wraps a number of
                functions into a neatly organized collection (seen as the methods of the
                Tween class).

                Give maguskrool's suggestion a shot.


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


                • 5. Re: Scaling and positioning simultaneously to achieve a zoom out effect
                  robdodson Level 1
                  ok guys, I'm gonna look into the tween class and see if I can't get the ball rolling. By using the tween class I should be able to say, essentially, "No matter where the map has been dragged to it should animate smoothly back to these coordinates" correct?
                  • 6. Re: Scaling and positioning simultaneously to achieve a zoom out effect
                    Level 7
                    Scruffpuff,

                    > By using the tween class I should be able to say, essentially,
                    > "No matter where the map has been dragged to it should
                    > animate smoothly back to these coordinates" correct?

                    Correct. You supply a start position and a destination position. I
                    would store the position of the original location in a set of variables.

                    var origX:Number = mapContainer_mc._x;
                    var origY:Number = mapContainer_mc._y;

                    That way, you'll have your return-to-here data handy at all times. You
                    can always use origX and origY as your destination position coordinates.
                    Use the MovieClip._x and _y properties of the map container itself to serve
                    as your start position coordinates, since that will describe the maps
                    current position.

                    Note, each Tween instance only handles one property at a time, so you'll
                    need one for _x and one for _y. While you're at it, be aware that you can
                    also write a couple for _xscale and _yscale (or any other properties you
                    like).

                    In my opinion, the Tween class isn't nearly as documented nearly as
                    clearly as other classes -- and I'm a definite fan of the ActionScript
                    Language Reference, so I don't say that lightly. To support the existing
                    documentation, read Jen deHaan's article on the Tween and Transform classes
                    here ... and just stick with the parts on the Tween class.

                    http://www.macromedia.com/devnet/flash/articles/tweening.html
                    Page 5 is your friend, because it explains the Tween constructor.

                    Write back if you run into trouble.


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


                    • 7. Re: Scaling and positioning simultaneously to achieve a zoom out effect
                      robdodson Level 1
                      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