Advertisement
  1. Code
  2. ActionScript
Code

Using Native Multitouch Gestures in ActionScript 3.0

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called GreenSock Tweening Platform.
Creating a Virtual Joystick for Touch Devices
Weekend Presentation: GreenSock ThrowProps Plugin

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.

Flash AS3 multitouch gestures


Step 3: Interface

Flash AS3 multitouch gestures

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.

Flash AS3 multitouch gestures

Grass 01 by 100kr

Flash AS3 multitouch gestures

deep impact on planet color by spettacolopuro

Flash AS3 multitouch gestures

Yosemite : fall colours by tibchris

Flash AS3 multitouch gestures

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.

Flash AS3 multitouch gestures


Step 6: TweenNano

Flash AS3 multitouch gestures

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.

Flash AS3 multitouch gestures


Step 8: Class Structure

Create your basic class structure to begin writing your 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.


Step 10: Variables

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


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.


Step 12: Enable Gestures Input

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

Read more about this on help.adobe.com.


Step 13: Slide Item

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


Step 14: Add Listeners

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

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.


Step 16: Spin to Rotate

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


Step 17: Slide to Pan

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


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.


Step 19: Remove Last Slide Item

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


Step 20: Set Main Class

Flash AS3 multitouch gestures

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!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.