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.
deep impact on planet color by spettacolopuro
Yosemite : fall colours by tibchris
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!
Comments