2 Replies Latest reply on Jun 19, 2009 8:07 AM by magapatalogikaa

    Programmed zoom

    magapatalogikaa

      I have to create an animation involving a big fast zoom with a little rotation and animating it on the timeline just doesn't cut it.

       

      I start with state 1 (see attached file state11.jpg) where there is an animation and then I want a fast smooth zoom until I reach State 2 (see attached file state2.jpg).
      In the first state the "map" occupies the entire screen, but when it reaches state 2 the map is inside a mask and the other elements will start appearing.

       

      Can anyone teach me how to create this zoom smoothly with actionscript? I am really lost here and I know somethings about actionscript but I just cannot do this and my timing is today...

        • 1. Re: Programmed zoom
          Ned Murphy Adobe Community Professional & MVP

          Your images are stuck in the queue, so I haven't seen them at this stage.  To code a zooming effect you can use the Tween class.  In your case you would be tweening the _xscale and _yscale properties.  There is another posting I answered that explains the use of the Tweens a bit.  So it may be a good place to start.

           

          http://forums.adobe.com/thread/436927?tstart=0

           

          Your should create a separate simple file to experiment with getting the interaction and zooming you want.  This will help you gain an understanding and make implementing it in your actual design easier.

          • 2. Re: Programmed zoom
            magapatalogikaa Level 1

            I have managed to create more or less what I want. Very happy with this since I have never used imported classes.

             

            The Zoom is working fine. My only problem now is that I have a mask that needs to be animated along with the rest and the mask animation is not working. And When the movieClips reach their final value I want the timeline to continue, and I have no idea how to do that!

             

            I have attached the code for you to see if I am doing anything wrong about the Mask.

            And if you could help me with jumping ahead in the timeline when the tweens finish ...

             

            // CODE

             

            stop();

             

            import mx.transitions.Tween;
            import mx.transitions.easing.Regular;

             

            // Set Mask for the map
            state1.cacheAsBitmap = true;
            maskMC.cacheAsBitmap = true;
            state1.setMask(maskMC);

             

            // Tween variables

             

            var twContent;   // the Circle movieclip
            var zoomContentX;    // Circle x Scale
            var zoomContentY;    // Circle y Scale
            var alphaContent; // Circle alpha
            var twBK;        // Map piece
            var zoomBKX;    // Map x scale
            var zoomBKY;    // Map y scale
            var alphaBK;        // Set transparent Map
            var zoomMaskX;        //Set Mask x Scale
            var zoomMaskY;     //Set Mask y Scale

             


            // Final variables

             

            var mcFinalX =  content1._x;    // initialized to its current value
            var mcFinalZoom = content1._xscale = content1._yscale;
            var mcFinalAlpha = content1._alpha;
            var mapFinalX = state1._x;
            var mapFinalZoom = state1._xscale = state1._yscale;
            var mapFinalAlpha = state1._alpha;
            var maskFinalZoom = maskMC._xscale = maskMC._yscale;

             

            function moveMovies(){

             

                twContent = new Tween(content1, "_x", Regular.easeOut, content1._x, mcFinalX, 0.5, true);
                zoomContentX = new Tween(content1, "_xscale", Regular.easeOut, content1._xscale, mcFinalZoom, 0.5, true);
                zoomContentY = new Tween(content1, "_yscale", Regular.easeOut, content1._yscale, mcFinalZoom, 0.5, true);
                alphaContent = new Tween(content1, "_alpha", Regular.easeOut, content1._alpha, mcFinalAlpha, 0.5, true);
                twBK = new Tween(state1, "_x", Regular.easeOut, state1._x, mapFinalX, 0.5, true);
                zoomBKX = new Tween(state1, "_xscale", Regular.easeOut, state1._xscale, mapFinalZoom, 0.5, true);
                zoomBKY = new Tween(state1, "_yscale", Regular.easeOut, state1._yscale, mapFinalZoom, 0.5, true);
                alphaBK = new Tween(state1, "_alpha", Regular.easeOut, state1._alpha, mapFinalAlpha, 0.5, true);
                zoomMaskX = new Tween(maskMC, "_xscale", Regular.easeOut, maskMC._xscale, maskFinalZoom, 0.5, true);
                zoomMaskY = new Tween(maskMC, "_yxscale", Regular.easeOut, maskMC._yscale, maskFinalZoom, 0.5, true);

             

            }

             

            // set final values
            state1.onRelease = function(){
                mcFinalX = 588;
                mcFinalZoom = 100;
                mcFinalAlpha = 100;
                mapFinalX = 420;
                mapFinalZoom = 400;
                mapFinalAlpha = 0;
                maskFinalZoom = 100;
               
                moveMovies();

             

            }