1 Reply Latest reply on Feb 9, 2007 11:18 AM by dmccallie

    Strange behavior with Zoom and Image control

    dmccallie
      HELP - I have a strange behavior (bug?) with using Zoom effect on an Image that has been placed on a Canvas. I am using dynamically instantiated images which are placed on a canvas inside a panel. I then assign a Zoom IN and Zoom Out behavior to the image, triggered by ROLL_OVER and ROLL_OUT effect triggers. THE BUG is that the image jumps around on the Zoom OUT and lands on a random place on the canvas instead of coming back to the original spot. This is especially true if the mouse goes in and out of the image very quickly. HELP -- what am I doing wrong? Computer = Mac OS X 10.4.9 Flex 2.0.1

      Here's a simple demo of the bug -- be sure to move the mouse in and out rapidly:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="setUp();">
      <mx:Script><![CDATA[
      import mx.events.EffectEvent;
      import mx.effects.Fade;
      import mx.effects.Zoom;
      import mx.rpc.events.ResultEvent;
      import flash.display.Sprite;
      import mx.core.UIComponent;
      import mx.controls.Image;

      private var zoomIn:Zoom;
      private var zoomOut:Zoom;

      private function setUp():void {

      var image:Image = new Image();
      image.id = "album_1_1";
      image.x = 200;
      image.y = 200;
      image.width = 64;
      image.height = 64;
      image.source = " http://s3.amazonaws.com/davidmccallie/album-128.jpg";
      image.addEventListener(MouseEvent.ROLL_OVER, doZoom);
      image.addEventListener(MouseEvent.ROLL_OUT, doZoom);
      myCanvas.addChild(image);

      zoomIn = new Zoom();
      zoomIn.zoomHeightTo = 2.0;
      zoomIn.zoomWidthTo = 2.0;
      zoomIn.captureRollEvents = true;
      zoomIn.suspendBackgroundProcessing = true;

      zoomOut = new Zoom();
      zoomOut.zoomHeightTo = 1.0;
      zoomOut.zoomWidthTo = 1.0;
      zoomOut.captureRollEvents = true;
      zoomOut.suspendBackgroundProcessing = true;
      }

      private function doZoom(event:MouseEvent):void {
      var image:Image = Image(event.currentTarget);
      if (event.type == MouseEvent.ROLL_OVER) {
      zoomIn.target = event.currentTarget;
      zoomIn.play();

      } else if (event.type == MouseEvent.ROLL_OUT) {
      zoomOut.target = event.currentTarget;
      zoomOut.play();
      }
      }
      ]]>
      </mx:Script>

      <mx:Panel width="100%" height="100%" layout="absolute">
      <mx:Canvas id="myCanvas" width="100%" height="100%">
      </mx:Canvas>
      </mx:Panel>

      </mx:Application>