4 Replies Latest reply on Apr 22, 2008 8:19 AM by Cpt._Awesome

    Problem with the zoom effect

    ChiefRocka00 Level 1
      I have five images in a row and I have added a zoom effect to the rollover and rollout effects. What I have noticed is that the image only zooms out when I bring the mouse out from the bottom of the image. If I try to bring the mouse from left to right across the images the first image zooms in but not out, and this happens for all five images. Can anyone identify what I am doing wrong? Here is my code:

      <mx:HBox width="100%" horizontalAlign="center">
      <mx:Image source="@Embed('images/bistro9-1.jpg')" scaleX=".05" scaleY=".05" rollOver="doZoom(event)" rollOut="doZoom(event)" click="showImage('images/bistro9-1.jpg')"/>
      <mx:Image source="@Embed('images/bistro9-2.jpg')" scaleX=".05" scaleY=".05" rollOver="doZoom(event)" rollOut="doZoom(event)" click="showImage('images/bistro9-2.jpg')"/>
      <mx:Image source="@Embed('images/bistro9-3.jpg')" scaleX=".05" scaleY=".05" rollOver="doZoom(event)" rollOut="doZoom(event)" click="showImage('images/bistro9-3.jpg')"/>
      <mx:Image source="@Embed('images/bistro9-4.jpg')" scaleX=".05" scaleY=".05" rollOver="doZoom(event)" rollOut="doZoom(event)" click="showImage('images/bistro9-4.jpg')"/>
      <mx:Image source="@Embed('images/bistro9-5.jpg')" scaleX=".05" scaleY=".05" rollOver="doZoom(event)" rollOut="doZoom(event)" click="showImage('images/bistro9-5.jpg')"/>
      </mx:HBox>


      <mx:Zoom id="zoomAll" zoomWidthTo="0.06" zoomHeightTo="0.06" zoomWidthFrom=".05" zoomHeightFrom=".05" />


      public function doZoom(event:MouseEvent):void {
      if (zoomAll.isPlaying) {
      zoomAll.reverse();
      }
      else {
      // If this is a ROLL_OUT event, play the effect backwards.
      // If this is a ROLL_OVER event, play the effect forwards.
      zoomAll.play([event.target], event.type == MouseEvent.ROLL_OUT ? true : false);
      }
      }