Using the Pan 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 pan gesture in your Flash mobile applications so that the user can scroll an object or move it around by swiping two of your fingers in the same direction over that object.

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, and Event Handling.

In this tutorial we are going to create a movie in which the user will be able to move a square by using the pan gesture.

You can check our other tutorials to learn how to use the Rotate Gesture, the Swipe Gesture and the Pinch to Zoom 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 movie 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 pan 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_PAN event. This event listener will be used to trigger an onPan method which we will define later. Using this event listener our square object will be tracking any pan gesture that occurs on it and will trigger our code accordingly:

Multitouch.inputMode = MultitouchInputMode.GESTURE;

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


Our listener function onPan will be triggered every time the user places two fingers over the square object and then attempts to move them horizontally or vertically together at the same time. This function will be able to tell how much the fingers have travelled and then move square accordingly, but before we do that lets just create the function:

Multitouch.inputMode = MultitouchInputMode.GESTURE;

square_mc.addEventListener(TransformGestureEvent.GESTURE_PAN , onPan);
function onPan (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:

  • offsetX - this property retrieves the horizontal distance for the pan motion.
  • offsetY - this properly retrieves the vertical distance for the pan motion.

Now that we know this, we can simply add any of these values to the existing x or y property of an object to make it move as the user moves two of his fingers on that object:

Multitouch.inputMode = MultitouchInputMode.GESTURE;

square_mc.addEventListener(TransformGestureEvent.GESTURE_PAN , onPan);
function onPan (e:TransformGestureEvent):void{
square_mc.y += e.offsetY;
}

Believe it or not, but this everything you need to do to actually get your rotation gesture 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 while you need to hold down the ALT +CTRL keys together to move all the touchpoints simultaneously. We need to create two touchpoints and then move them in the same direction. 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+CTRL keys to create the second touchpoint, and now if you move the pointer around while holding down the mouse button you will should see the effect in action.

 

AS3 Zoom Gesture

This basically 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