1 Reply Latest reply on Apr 22, 2008 10:22 AM by slaingod

    Circle zooming parts of image - hints to get me started

      I didn't know how to explain the "zoom" in the message title so I'm linking to the page containing the effect I want to mimic:


      Can someone give me some hints on how I could remake the "zoom"-effect in a Flex-application? I'm not asking for the whole solution but for some pointers on what classes and such I should be using (bitmap, mask, cursor...).

      Would appreciate some answers since I really want to do this in Flex/ActionScript rather than Silverlight.
        • 1. Re: Circle zooming parts of image - hints to get me started
          slaingod Level 1
          You would need to track the MouseEvent.MOUSE_MOVE with an event listener on your 'shoe image'. You would use that to set the X/Y of your 'tooltip' component that had a much larger image so taht it followed your mouse, and translated the x/y into the other coordinates to move the image around underneath the viewport (like bigX = x * 1.2, bigY = y* 1.2 though you can easily calculate the scale value from the image sizes). The viewport would be a MaskFilter I believe. Yu would set mouseEnabled = false for the tooltip so that it didn't accept input from the mouse, instead passing through to the image underneath. I also believe that example use the Move transition with an easingFunction so that it lags behind slightly.