Using the Pinch to Zoom Gesture in Flash Using ActionScript 3.0

By Blue_Chi | Flash CS5 | ActionScript 3.0 | Beginner

This tutorial will teach you how to use the pinch to zoom gesture in your Flash mobile applications so that the user can change the size of an object by pinching inwards or outwards of the object - such a gesture can be used for example to create a picture application that allow the user to zoom in or out by pinching the image.

This effect is supported on device supporting Multi-touch screens running Flash Player 10.1, Flash Lite 4 or Adobe AIR 2. The feature is also supported on iPhone Apps created using Flash.

This is a beginner level tutorial that will only require you to know the basics of AS3 Variables, Event Handling, and Conditionals.

In this tutorial we are going to create a movie in which the user will be able to pinch a square to change its size.

You can check our other tutorial to learn how to use the Swipe Gesture.

Our tutorial will be divided into the following sections:

  1. Creating the FLA and setting up the graphical elements.
  2. Coding the effect.
  3. Testing the gesture in Device Central.

Starting Off - Setting Up Graphical Elements

Our tutorial will create this effect inside a Flash Lite 4 that is played on a mobile device - we are doing this in order to be able to easily test the effect in Device Central. You can use the same exact code in a Flash iPhone project, or an AIR project.

Launch Flash and go through File>New to create a new movie in Flash Lite 4 format. Once you have the movie ready, simply use the Rectangle Tool to draw a square on the screen, we need to convert this object to a symbol to be able to easily manipulate it using ActionScript. So select this square and go through Modify>Convert to Symbol to convert it to a MovieClip symbol, the name of the symbol does not matter. Once you have your symbol ready you need to go through the Properties Inspector and set its instance name as square_mc.

AS3 Swipe Gesture

Instance Names make it easy to refer to objects using ActionScript.

 

Coding the Gesture

Using any gesture motion in Flash requires configuring the Multitouch class first to inform the player that it needs to detect multi-touch input instead of regular clicks. This tutorial will only cover the swipe gesture, so we will not go into detail into the other options of the Multitouch class. Simply start your code by setting the inputMode of the Multitouch class to GESTURE:

Multitouch.inputMode = MultitouchInputMode.GESTURE;
The GESTURE input mode supports a number of gestures such as the pan gesture, the rotate gesture, and the swipe gesture in addition to the zoom gesture.

Now that you have you input type set, you will have to make your object register an event listener with the GESTURE_ZOOM event. This event listener will be used to trigger an onZoom method which we will define later. Using this event listener our square object will be tracking any zoom gesture that occurs on it and will trigger our code accordingly:

Multitouch.inputMode = MultitouchInputMode.GESTURE;

square_mc.addEventListener(TransformGestureEvent.GESTURE_ZOOM , onZoom);
You can learn more about AS3 Event Handling by reviewing our tutorial on this topic.


Our listener function onZoom will be triggered every time the user places two fingers over the square object and then attempts to move them apart. This function will be able to tell how further the fingers have moved apart and then change the size of the square accordingly, but before we do that lets just create the function:

Multitouch.inputMode = MultitouchInputMode.GESTURE;

square_mc.addEventListener(TransformGestureEvent.GESTURE_ZOOM , onZoom);
function onZoom (e:TransformGestureEvent):void{

}

The TransformGestureEvent is capable of retrieving various properties relating to our motion and the object to which the gesture was applied, the only two properties relevant to our zoom effect are these:

  • scaleX - this property retrieves a scaling multiplier that relates to the horizontal distance between the two touchpoints.
  • scaleY - this properly retrieves a scaling multiplier that relates to the vertical distance between the two touchpoints.

Now that we know this, we can simply multiply any of these values to the existing scale properties of our object to change the size of the object as the user moves his fingers apart of closer to teach other:

Multitouch.inputMode = MultitouchInputMode.GESTURE;

square_mc.addEventListener(TransformGestureEvent.GESTURE_ZOOM , onZoom);
function onZoom (e:TransformGestureEvent):void{
square_mc.scaleX *= e.scaleX;
square_mc.scaleY *= e.scaleY;
}

Believe it or not, but this everything you need to do to actually get your pinch zoom effect to work. We will move on to how to test this in Device Central next.

Testing the Movie in Device Central

We can now test our movie inside Device Central to see how our gesture works, go through Control>Test>In Device Central to create the test movie and launch Device Central. Once Device Central is opened you can configure multitouch settings by accessing the Multitouch panel (Window>Flash>Multitouch:

AS3 Zoom Gesture

You don't actually need to change any of the default values for our effect - what you need to do is read the instructions mentioned in the panel: You can create multiple touch points by holding down the ATL key on your keyboard. We need to create two touchpoints and then move one of them apart from the other to mimic a pinch gesture. So hold down the ALT key on your keyboard and click once on the square movieclip, then move the mouse press and hold the mouse key while holding down the ALT to create the second touchpoint, and now if you move the pointer away from the second point while holding down the mouse button you will should see the effect in action.

 

AS3 Zoom Gesture

Cool, so you see that you can set the X and Y scales of the square independently based on the distance our second touchpoint travels horizontally or vertically. To make the effect predictable and consistent with the way this effect is usually used, we have to combine both the horizontal and vertical distances and use the exact same value for both X and Y scales, so go back to your code and update it this way:

Multitouch.inputMode = MultitouchInputMode.GESTURE;

square_mc.addEventListener(TransformGestureEvent.GESTURE_ZOOM , onZoom);
function onZoom (e:TransformGestureEvent):void{
square_mc.scaleX *= (e.scaleX+e.scaleY)/2;
square_mc.scaleY *= (e.scaleX+e.scaleY)/2;
}

You can test your movie again in Device Central to see that it behaves differently now.

You can learn more about the Zoom Gesture and the other properties its event has by reviewing the ActionScript reference.

This concludes our tutorial, I hope that you learnt something new from it. You should be able to use the same exact effect in an iPhone, Android, or any other touch based project using the same exact code. If you have any questions feel free to post them at the Republic of Code Forum.

End of Tutorial