Question

i have a mobile application that i am creating in Adobe Flex (Flash Builder 4), and i am trying to create a zoom function. The one i have works, but the point is to be able to more easily read words that are in the image (the images are .jpg files). The images are 2550×3300 originally, but as soon as you zoom, the image quality reduces drastically, and nothing is readable.

My code for the zoom function is included below.

        protected function onZoom(e:TransformGestureEvent, img:Image):void
        {
            img.transformAround(new Vector3D(e.localX, e.localY, 0), new Vector3D(img.scaleX*e.scaleX, img.scaleY*e.scaleY, 0));
        }

and this is the code for the image object:

<s:Image id="titlepage" includeIn="title_page" x="0" y="0" width="320" height="415" 
         gesturePan="onPan(event, titlepage)" 
         gestureSwipe="onSwipe(event)" 
         gestureZoom="onZoom(event, titlepage)" 
         source="@Embed('assets/myImage.jpg')"/>

Answer 1

Image quality would be improved by setting smooth to true for anti-aliasing.

<s:Image smooth="true" />

There are many ways to handle registration issues – you might be interested in Yahoo Astra utils DynamicRegistration class.

Maybe something like this?

    <fx:Script>
        <![CDATA[
            import com.yahoo.astra.utils.DynamicRegistration;

            protected function image_gestureZoomHandler(event:TransformGestureEvent):void
            {
                DynamicRegistration.scale(image,
                                          new Point(event.localX, event.localY),
                                          image.scaleX *= event.scaleX,
                                          image.scaleY *= event.scaleY);
            }
        ]]>
    </fx:Script>

    <s:Image id="image"
             smooth="true"
             gestureZoom="image_gestureZoomHandler(event)" />