Using the Rotate Gesture in Flash Using ActionScript 3.0

This tutorial will teach you how to use the rotate gesture in your Flash mobile applications so that the user can rotate an object by moving two of this fingers over an object in a circular motion.

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 rotate a square by using the gesture.

You can check our other tutorials to learn how to use 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 aMovieClip 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 assquare_mc.

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 rotate 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 toGESTURE:

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_ROTATE event. This event listener will be used to trigger anonRotate method which we will define later. Using this event listener our square object will be tracking any rotation gesture that occurs on it and will trigger our code accordingly:

Multitouch.inputMode = MultitouchInputMode.GESTURE;

square_mc.addEventListener(TransformGestureEvent.GESTURE_ROTATE , onRotate);

You can learn more about AS3 Event Handling by reviewing our tutorial on this topic.

Our listener function onRotate will be triggered every time the user places two fingers over the square object and then attempts to rotate them in a circular motion. This function will be able to tell how much the fingers have rotated then rotate the square accordingly, but before we do that lets just create the function:

Multitouch.inputMode = MultitouchInputMode.GESTURE;

square_mc.addEventListener(TransformGestureEvent.GESTURE_ROTATE , onRotate);

function onRotate (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 property relevant to our rotate gesture effect is a rotation property which retrieves the amount by which the fingers rotated.

Now that we know this, we can simply add the value of the rotation property to the rotation property of our square and have it move that way:

Multitouch.inputMode = MultitouchInputMode.GESTURE;

square_mc.addEventListener(TransformGestureEvent.GESTURE_ROTATE , onRotate);

function onRotate (e:TransformGestureEvent):void{

square_mc.rotation += e.rotation;

}

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:

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 revolve one of them around the other to mimic a rotation 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 around the second point while holding down the mouse button you will should see the effect in action.

This basically concludes our tutorial, you can use this effect along wit the pinch to zoom gesture to make your object change size as well as rotate using a single gesture.

You can learn more about the Rotate 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.