May 9, 2011 Posted on May 9, 2011 in Hints and Tips | 3 comments

Using Native Multitouch Gestures in ActionScript 3.0

In this tutorial, we’ll learn how to implement native multitouch gestures to use in your applications. Read on!

---

Final Result Preview

Let’s take a look at the final result we will be working towards:

Note: This example will work only on Multitouch devices (Tablets, Smartphones, Touch Screen Computers and Multitouch trackpads under AIR).

Note for Android users: Multitouch won’t run in the SWF embedded in an HTML page in an Android browser, but the Source download does include an APK you can use to check it out. (Please note that the APK is just for the purpose of a quick demonstration of the gestures themselves, and does not display entirely correctly.)

You can pinch to zoom, spin to rotate, and swipe to change the image. Check out the video demo if you’re unable to test the preview on your device:

---

Step 1: Brief Overview

We’ll use the native Multitouch support built in to the Flash Player to create a gesture-based image application.

---

Step 2: Flash Document Settings

Launch Flash and create a new document. Set the stage size to 600x300px, and the frame rate to 24fps.

---

Step 3: Interface

The interface will be very simple, just an image in the stage that will be then modified by the gestures.

---

Step 4: Get Some Images

We’ll need some images to test our application, choose them from your personal collection or download a few for testing.

These are the images from the demo, obtained from Flickr, all with a Creative Commons License.

Grass 01 by 100kr

deep impact on planet color by spettacolopuro

Yosemite : fall colours by tibchris

Flower by Antonio Manchado

---

Step 5: Export For ActionScript

Convert one of the images to a movie clip, and add the rest of the images to that clip in different frames. Name the clip SlideItem and mark the Export for ActionScript box.

---

Step 6: TweenNano

We’ll use a different tween engine from the default included in Flash, this will increase performance as well as being easier to use.

You can download TweenNano from its official website.

---

Step 7: New ActionScript Class

Create a new (Cmd + N) ActionScript 3.0 Class and save it as Main.as in your class folder.

---

Step 8: Class Structure

Create your basic class structure to begin writing your code.

package
{
	import flash.display.Sprite;

	public class Main extends Sprite
	{
		public function Main():void
		{
			// constructor code
		}
	}
}

---

Step 9: Required Classes

These are the classes we’ll need to import for our class to work, the import directive makes externally defined classes and packages available to your code.

import flash.display.Sprite;
import flash.display.MovieClip;
import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;
import flash.events.TransformGestureEvent;
import com.greensock.TweenNano;
import com.greensock.easing.Strong;

---

Step 10: Variables

These are the variables we’ll use, read the comments in the code to find out more about them.

private var slideItem:SlideItem; //The object that will be affected by the gestures
private var tempContainer:Sprite; //An empty sprite that will store the slide item

---

Step 11: Constructor

The constructor is a function that runs when an object is created from a class, this code is the first to execute when you make an instance of an object or runs using the Document Class.

It performs the necessary actions to start the application.

public final function Main():void
{
	//Code
}

---

Step 12: Enable Gestures Input

This line tells the Flash Player to identify the multi-touch mode for touch and gesture event handling.

Multitouch.inputMode = MultitouchInputMode.GESTURE;

Read more about this on help.adobe.com.

---

Step 13: Slide Item

Let’s instantiate the images that will respond to the gesture events.

slideItem = new SlideItem();
/* Prevents the image from changing */
slideItem.stop();
/* Center the image */
slideItem.x = stage.stageWidth * 0.5;
slideItem.y = stage.stageHeight * 0.5;

addChild(slideItem);

listeners('add', slideItem); //see next step

---

Step 14: Add Listeners

This function adds or removes the gesture listeners depending on the specified parameter.

private final function listeners(action:String, target:Sprite):void
{
	if(action == 'add')
	{
		target.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);
		target.addEventListener(TransformGestureEvent.GESTURE_ROTATE, onRotate);
		target.addEventListener(TransformGestureEvent.GESTURE_PAN, onPan);
		target.addEventListener(TransformGestureEvent.GESTURE_SWIPE, onSwipe);
	}
	else
	{
		target.removeEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);
		target.removeEventListener(TransformGestureEvent.GESTURE_ROTATE, onRotate);
		target.removeEventListener(TransformGestureEvent.GESTURE_PAN, onPan);
		target.removeEventListener(TransformGestureEvent.GESTURE_SWIPE, onSwipe);
	}
}

This means that the listeners() function called in the previous step will add event listeners to the sliding image, to make it listen for zooming, panning, rotating, and swiping gestures.

---

Step 15: Pinch to Zoom

This function responds to the well known pinch gesture. It handles the image zoom in and zoom out.

private final function onZoom(e:TransformGestureEvent):void
{
	/* Use the event data to scale the target image */
	e.target.scaleX *= e.scaleX;
	e.target.scaleY *= e.scaleY;
}

---

Step 16: Spin to Rotate

Rotation is handled by this function, two fingers are used to spin the image in the stage.

private final function onRotate(e:TransformGestureEvent):void
{
	/* Use the event data to rotate the target image */
	e.target.rotation += e.rotation;
}

---

Step 17: Slide to Pan

The Pan function is used to move the image to see parts that are off-stage.

private final function onPan(e:TransformGestureEvent):void
{
	e.target.x += e.offsetX;
	e.target.y += e.offsetY;
}

---

Step 18: Swipe to Swap

This function is a little bigger due to the four swipe directions available. The gesture is similar to that from the previous step, but firmer, and instead of simply moving the image around, it swaps it for a different image.

It first checks if a previous item is on the stage and stores it in a container in order to tween it and be able to remove it later. Then, the offset property is read to determine the direction of the swipe, showing the corresponding animation and image.

private final function onSwipe(e:TransformGestureEvent):void
{
	/* Check if image is on stage */

	if(slideItem != null)
	{
		tempContainer = new Sprite();
		tempContainer.addChild(slideItem);
		addChild(tempContainer);
	}

	/* Change Images */

	if(e.offsetX == 1)
	{
		//right
		slideItem = new SlideItem();

		slideItem.gotoAndStop(1);
		slideItem.x = -slideItem.width;
		slideItem.y = stage.stageHeight * 0.5;

		listeners('add', slideItem);
		addChild(slideItem);

		TweenNano.to(tempContainer, 0.5, {x:stage.stageWidth, onComplete: removeLast});
		TweenNano.to(slideItem, 0.5, {x:stage.stageWidth * 0.5});
	}
	if(e.offsetX == -1)
	{
		//left
		slideItem = new SlideItem();

		slideItem.gotoAndStop(2);
		slideItem.x = stage.stageWidth + slideItem.width;
		slideItem.y = stage.stageHeight * 0.5;

		listeners('add', slideItem);
		addChild(slideItem);

		TweenNano.to(tempContainer, 0.5, {x:-slideItem.width, onComplete: removeLast});
		TweenNano.to(slideItem, 0.5, {x:stage.stageWidth * 0.5});
	}
	if(e.offsetY == -1)
	{
		//up
		slideItem = new SlideItem();

		slideItem.gotoAndStop(3);
		slideItem.x = stage.stageWidth * 0.5;
		slideItem.y = stage.stageHeight + slideItem.height;

		listeners('add', slideItem);
		addChild(slideItem);

		TweenNano.to(tempContainer, 0.5, {y:-slideItem.height, onComplete: removeLast});
		TweenNano.to(slideItem, 0.5, {y:stage.stageHeight * 0.5});
	}
	if(e.offsetY == 1)
	{
		//down
		slideItem = new SlideItem();

		slideItem.gotoAndStop(4);
		slideItem.x = stage.stageWidth * 0.5;
		slideItem.y = -slideItem.height;

		listeners('add', slideItem);
		addChild(slideItem);

		TweenNano.to(tempContainer, 0.5, {y:slideItem.height, onComplete: removeLast});
		TweenNano.to(slideItem, 0.5, {y:stage.stageHeight * 0.5});
	}
}

---

Step 19: Remove Last Slide Item

When the animation is finished, the item offstage is destroyed to save memory.

private final function removeLast():void
{
	listeners('remove', tempContainer.getChildAt(0) as Sprite);
	removeChild(tempContainer);
	tempContainer = null;
}

---

Step 20: Set Main Class

We’ll make use of the Document Class in this tutorial, if you don’t know how to use it or are a bit confused please read this Quick Tip.

---

Conclusion

Gestures add a nice touch and and offer great interaction in your application, use them!

Thanks for reading this tutorial, I hope you’ve found it useful!

View full post on Activetuts+

3 Responses to “Using Native Multitouch Gestures in ActionScript 3.0”

1. Bratu Sebastian says:

   May 9, 2011 at 7:50 am

   Really cool. Flash is going to take over iphone and android again
2. Using Native Multitouch Gestures in ActionScript 3.0 | Activetuts+ | Flash Designers says:

   May 9, 2011 at 8:09 am

   Author

   [...] Read the original: Using Native Multitouch Gestures in ActionScript 3.0 | Activetuts+ [...]
3. Amir Mehmood says:

   May 9, 2011 at 8:39 am

   Very helpful. Thanks a lot.