Using the Swipe 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 swipe gesture in your Flash mobile applications so that the user can execute a command by swiping his finger across the screen. Such a gesture can help you create an application to flick through a photo gallery or create any other similar application.

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 tutorial that will only require you to know the basics of AS3 Variables, Event Handling, and Conditionals.

At the time of writing this tutorial Device Central does not seem to be able to trigger a swipe gesture. For you to be able to see this effect in action you will have to test it on an actual device that supports multi-touch (e.g. the iPhone).

We are going to create a movie in which the user will be able to swipe over a square to move it in any direction he wishes.

Starting Off - Setting Up Graphical Elements

Start off by creating one a movie in one of the formats supporting multi-touch, I have created an iPhone application to be able to test it in on the iPhone. 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

Coding the Gesture

Using any gesture motions in Flash requires configuring the Multitouch class first to inform the player that it needs to detect multi-touch input. This is necessary for any type of gesture. This tutorial will only cover the swipe 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 zoom gesture in addition to the swipe gesture.

Now that you have you input type set, all you have to do is register your object with the GESTURE_SWIPE event. This event listener will be used to trigger an onSwipe method which we will define later. Using this event listener our square object will be tracking any swipe gesture that occurs on it and will trigger our code accordingly:

Multitouch.inputMode = MultitouchInputMode.GESTURE;

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


Our listener function onSwipe will be triggered every time the user's finger swipes over the square object. This function will also be able to detect the direction at which the swipe was made by retrieving some special variables, but before we do that lets just create the function:

Multitouch.inputMode = MultitouchInputMode.GESTURE;

square_mc.addEventListener(TransformGestureEvent.GESTURE_SWIPE , onSwipe);
function onSwipe (e:TransformGestureEvent):void{

}

The function will be able to retrieve the variables offsetX and offsetY to detect the direction in which the swipe was made from this way:

  • if the value of offsetX is positive 1 then the swipe was made from the left to the right, if -1 then the swipe was made from the right to the left.
  • if the value of offsetY is positive 1 then the swipe was made from the top to the bottom, if -1 then the swipe was made from the bottom to the top.

Now that we know this, we can use a simple conditional to check the value for each of these values. For the start, we can check if the value of offsetX is 1 then the user has swiped his finger from the left to the right, so the object should move to the right, we do that by adding 100 points to the x property value.

Multitouch.inputMode = MultitouchInputMode.GESTURE;

square_mc.addEventListener(TransformGestureEvent.GESTURE_SWIPE , onSwipe);
function onSwipe (e:TransformGestureEvent):void{
if (e.offsetX == 1) {
//User swiped towards right
square_mc.x += 100;
}
}
You can learn more about AS3 Conditionals by reviewing our tutorial on this topic.

In the same manner, we can move the object to the left by reducing the value of the x property of square_mc by a 100 points, if the offsetX value of our TransformGestureEvent is -1.

Multitouch.inputMode = MultitouchInputMode.GESTURE;

square_mc.addEventListener(TransformGestureEvent.GESTURE_SWIPE , onSwipe);
function onSwipe (e:TransformGestureEvent):void{
if (e.offsetX == 1) {
//User swiped towards right
square_mc.x += 100;
}
if (e.offsetX == -1) {
//User swiped towards left
square_mc.x -= 100;
}
}

The same concept can be applied for the offsetY values and the Y property of the object we want to move, we can use the same code and simply switch the properties around:

Multitouch.inputMode = MultitouchInputMode.GESTURE;

square_mc.addEventListener(TransformGestureEvent.GESTURE_SWIPE , onSwipe);
function onSwipe (e:TransformGestureEvent):void{
if (e.offsetX == 1) {
//User swiped towards right
square_mc.x += 100;
}
if (e.offsetX == -1) {
//User swiped towards left
square_mc.x -= 100;
}
if (e.offsetY == 1) {
//User swiped towards bottom
square_mc.y += 100;
}
if (e.offsetY == -1) {
//User swiped towards top
square_mc.y -= 100;
}

}

You can now test your movie, if you have created an iPhone App you will have to follow our tutorial on how to test it on your device.

This conclude our tutorial, you should check the AS3 Reference for additional details on how retrieve more info from the swipe gesture. If you have any questions feel free to post them at the Republic of Code Forum.

- End of Tutorial