Flash Player Gestures
Image By GestureWorks
There are two different ways for the user to interact using the touch interface: touch points and gestures. In a different blog post I will talk about touch points, but Gestures are the common and natural motions that you use for mobile application you already use. These include options such as swipe, pinch, zoom, and rotate.
If you are starting with this post I recommend actually starting with a previous post introducing AIR for Android Development. There is a ANT file there that you will want to have.
Memory, Power, and Performance Considerations
One thing to remember when using touch points is that you also have mouse events that are still being fired. So… long story short touch points are more costly than mouse events. When possible just use your mouse events.
When you are setting up your gesture listeners make sure to only listen for events that will be fired by your device. If you device doesn’t support swipe functionality why add the overhead of additional listeners?
You can do this by simply using the following code:
if(Multitouch.supportsGestureEvents)
{
... add your listeners here ...
}
{
... add your listeners here ...
}
Get Supported Gestures
Once you know if the device supports gestures you need to check for what gestures the device supports. You do this by calling for the supported gestures.
var gestures:Vector.<string> = Multitouch.supportedGestures;
You can then iterate through the resulting vector to check for specific gestures that you are wanting to listen for.
Sample Application
Here is a sample application ready to go to get Gesture information.
package
{
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.GestureEvent;
import flash.events.PressAndTapGestureEvent;
import flash.events.TransformGestureEvent;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;
/**
* Gestures testing application.
*
* @author jonbcampos
*
*/
public class Gestures extends Sprite
{
//---------------------------------------------------------------------
//
// Constructor
//
//---------------------------------------------------------------------
public function Gestures()
{
//setup stage
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
//add handlers
addEventListener(Event.ADDED_TO_STAGE, _onAddedToStage);
}
//---------------------------------------------------------------------
//
// Private Properties
//
//---------------------------------------------------------------------
private var _text:TextField;
//---------------------------------------------------------------------
//
// Protected Methods
//
//---------------------------------------------------------------------
protected function createChildren():void
{
//text
if(!_text)
{
_text = new TextField();
_text.multiline = true;
_text.x = 10;
_text.y = 10;
_text.width = 400;
_text.height = 750;
var tf:TextFormat = new TextFormat();
tf.size = 24;
_text.defaultTextFormat = tf;
_text.text = "Multitouch Supported: false";
addChild(_text);
}
}
//---------------------------------------------------------------------
//
// Handler Methods
//
//---------------------------------------------------------------------
private function _onAddedToStage(event:Event):void
{
//removes listener
removeEventListener(Event.ADDED_TO_STAGE, _onAddedToStage);
//draws background
_draw();
//creates children
createChildren();
_setupMultitouch();
}
//---------------------------------------------------------------------
//
// Private Methods
//
//---------------------------------------------------------------------
private function _draw():void
{
graphics.clear();
graphics.beginFill(0xFFFFFF,1);
graphics.drawRect(0, 0, 480, 762);
graphics.endFill();
}
private function _setupMultitouch():void
{
Multitouch.inputMode = MultitouchInputMode.GESTURE;
_updateText();
//add listeners
if(Multitouch.supportsGestureEvents)
{
stage.addEventListener(GestureEvent.GESTURE_TWO_FINGER_TAP, onGestureTwoFingerTap);
stage.addEventListener(PressAndTapGestureEvent.GESTURE_PRESS_AND_TAP, onGesturePressAndTap);
stage.addEventListener(TransformGestureEvent.GESTURE_PAN, onGesturePan);
stage.addEventListener(TransformGestureEvent.GESTURE_ROTATE, onGestureRotate);
stage.addEventListener(TransformGestureEvent.GESTURE_SWIPE, onGestureSwipe);
stage.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onGestureZoom);
}
}
private function onGestureZoom(event:TransformGestureEvent):void
{
_text.appendText("\n"+event.type );
}
private function onGestureSwipe(event:TransformGestureEvent):void
{
_text.appendText("\n"+event.type);
}
private function onGesturePan(event:TransformGestureEvent):void
{
_text.appendText("\n"+event.type);
}
private function onGestureRotate(event:TransformGestureEvent):void
{
_text.appendText("\n"+event.type);
}
private function onGesturePressAndTap(event:PressAndTapGestureEvent):void
{
_text.appendText("\n"+event.type);
}
private function onGestureTwoFingerTap(event:GestureEvent):void
{
_text.appendText("\n"+event.type);
}
private function _updateText():void
{
var supportsGestures:Boolean = Multitouch.supportsGestureEvents;
var supportedGestures:Vector.<string> = Multitouch.supportedGestures;
var i:int = -1;
var n:int = supportedGestures.length;
var gestures:String = "";
while(++i<n)
{
gestures += supportedGestures[i]+"\n";
}
_text.text = "Gestures supported: "+supportsGestures+"\n" +
"Gestures Supported: "+gestures;
}
}
}
{
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.GestureEvent;
import flash.events.PressAndTapGestureEvent;
import flash.events.TransformGestureEvent;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;
/**
* Gestures testing application.
*
* @author jonbcampos
*
*/
public class Gestures extends Sprite
{
//---------------------------------------------------------------------
//
// Constructor
//
//---------------------------------------------------------------------
public function Gestures()
{
//setup stage
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
//add handlers
addEventListener(Event.ADDED_TO_STAGE, _onAddedToStage);
}
//---------------------------------------------------------------------
//
// Private Properties
//
//---------------------------------------------------------------------
private var _text:TextField;
//---------------------------------------------------------------------
//
// Protected Methods
//
//---------------------------------------------------------------------
protected function createChildren():void
{
//text
if(!_text)
{
_text = new TextField();
_text.multiline = true;
_text.x = 10;
_text.y = 10;
_text.width = 400;
_text.height = 750;
var tf:TextFormat = new TextFormat();
tf.size = 24;
_text.defaultTextFormat = tf;
_text.text = "Multitouch Supported: false";
addChild(_text);
}
}
//---------------------------------------------------------------------
//
// Handler Methods
//
//---------------------------------------------------------------------
private function _onAddedToStage(event:Event):void
{
//removes listener
removeEventListener(Event.ADDED_TO_STAGE, _onAddedToStage);
//draws background
_draw();
//creates children
createChildren();
_setupMultitouch();
}
//---------------------------------------------------------------------
//
// Private Methods
//
//---------------------------------------------------------------------
private function _draw():void
{
graphics.clear();
graphics.beginFill(0xFFFFFF,1);
graphics.drawRect(0, 0, 480, 762);
graphics.endFill();
}
private function _setupMultitouch():void
{
Multitouch.inputMode = MultitouchInputMode.GESTURE;
_updateText();
//add listeners
if(Multitouch.supportsGestureEvents)
{
stage.addEventListener(GestureEvent.GESTURE_TWO_FINGER_TAP, onGestureTwoFingerTap);
stage.addEventListener(PressAndTapGestureEvent.GESTURE_PRESS_AND_TAP, onGesturePressAndTap);
stage.addEventListener(TransformGestureEvent.GESTURE_PAN, onGesturePan);
stage.addEventListener(TransformGestureEvent.GESTURE_ROTATE, onGestureRotate);
stage.addEventListener(TransformGestureEvent.GESTURE_SWIPE, onGestureSwipe);
stage.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onGestureZoom);
}
}
private function onGestureZoom(event:TransformGestureEvent):void
{
_text.appendText("\n"+event.type );
}
private function onGestureSwipe(event:TransformGestureEvent):void
{
_text.appendText("\n"+event.type);
}
private function onGesturePan(event:TransformGestureEvent):void
{
_text.appendText("\n"+event.type);
}
private function onGestureRotate(event:TransformGestureEvent):void
{
_text.appendText("\n"+event.type);
}
private function onGesturePressAndTap(event:PressAndTapGestureEvent):void
{
_text.appendText("\n"+event.type);
}
private function onGestureTwoFingerTap(event:GestureEvent):void
{
_text.appendText("\n"+event.type);
}
private function _updateText():void
{
var supportsGestures:Boolean = Multitouch.supportsGestureEvents;
var supportedGestures:Vector.<string> = Multitouch.supportedGestures;
var i:int = -1;
var n:int = supportedGestures.length;
var gestures:String = "";
while(++i<n)
{
gestures += supportedGestures[i]+"\n";
}
_text.text = "Gestures supported: "+supportsGestures+"\n" +
"Gestures Supported: "+gestures;
}
}
}
Application Descriptor
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<application xmlns="http://ns.adobe.com/air/application/2.5">
<!-- Adobe AIR Application Descriptor File Template.
Specifies parameters for identifying, installing, and launching AIR applications.
xmlns - The Adobe AIR namespace: http://ns.adobe.com/air/application/2.5
The last segment of the namespace specifies the version
of the AIR runtime required for this application to run.
minimumPatchLevel - The minimum patch level of the AIR runtime required to run
the application. Optional.
-->
<!-- A universally unique application identifier. Must be unique across all AIR applications.
Using a reverse DNS-style name as the id is recommended. (Eg. com.example.ExampleApplication.) Required. -->
<id>com.unitedmindset.Gestures</id>
<!-- Used as the filename for the application. Required. -->
<filename>Gestures</filename>
<!-- The name that is displayed in the AIR application installer.
May have multiple values for each language. See samples or xsd schema file. Optional. -->
<name>Gestures</name>
<!-- A string value of the format <0-999>.<0-999>.<0-999> that represents application version which can be used to check for application upgrade.
Values can also be 1-part or 2-part. It is not necessary to have a 3-part value.
An updated version of application must have a versionNumber value higher than the previous version. Required for namespace >= 2.5 . -->
<versionNumber>1.0.0</versionNumber>
<!-- A string value (such as "v1", "2.5", or "Alpha 1") that represents the version of the application, as it should be shown to users. Optional. -->
<!-- <versionLabel></versionLabel> -->
<!-- Description, displayed in the AIR application installer.
May have multiple values for each language. See samples or xsd schema file. Optional. -->
<!-- <description></description> -->
<!-- Copyright information. Optional -->
<!-- <copyright></copyright> -->
<!-- Publisher ID. Used if you're updating an application created prior to 1.5.3 -->
<!-- <publisherID></publisherID> -->
<!-- Settings for the application's initial window. Required. -->
<initialWindow>
<!-- The main SWF or HTML file of the application. Required. -->
<!-- Note: In Flash Builder, the SWF reference is set automatically. -->
<content>[This value will be overwritten by Flash Builder in the output app.xml]</content>
<!-- The title of the main window. Optional. -->
<!-- <title></title> -->
<!-- The type of system chrome to use (either "standard" or "none"). Optional. Default standard. -->
<!-- <systemChrome></systemChrome> -->
<!-- Whether the window is transparent. Only applicable when systemChrome is none. Optional. Default false. -->
<!-- <transparent></transparent> -->
<!-- Whether the window is initially visible. Optional. Default false. -->
<visible>true</visible>
<!-- Whether the user can minimize the window. Optional. Default true. -->
<!-- <minimizable></minimizable> -->
<!-- Whether the user can maximize the window. Optional. Default true. -->
<!-- <maximizable></maximizable> -->
<!-- Whether the user can resize the window. Optional. Default true. -->
<!-- <resizable></resizable> -->
<!-- The window's initial width in pixels. Optional. -->
<width>480</width>
<!-- The window's initial height in pixels. Optional. -->
<height>762</height>
<!-- The window's initial x position. Optional. -->
<!-- <x></x> -->
<!-- The window's initial y position. Optional. -->
<!-- <y></y> -->
<!-- The window's minimum size, specified as a width/height pair in pixels, such as "400 200". Optional. -->
<!-- <minSize></minSize> -->
<!-- The window's initial maximum size, specified as a width/height pair in pixels, such as "1600 1200". Optional. -->
<!-- <maxSize></maxSize> -->
</initialWindow>
<!-- We recommend omitting the supportedProfiles element, -->
<!-- which in turn permits your application to be deployed to all -->
<!-- devices supported by AIR. If you wish to restrict deployment -->
<!-- (i.e., to only mobile devices) then add this element and list -->
<!-- only the profiles which your application does support. -->
<!-- <supportedProfiles>desktop extendedDesktop mobileDevice extendedMobileDevice</supportedProfiles> -->
<!-- The subpath of the standard default installation location to use. Optional. -->
<!-- <installFolder></installFolder> -->
<!-- The subpath of the Programs menu to use. (Ignored on operating systems without a Programs menu.) Optional. -->
<!-- <programMenuFolder></programMenuFolder> -->
<!-- The icon the system uses for the application. For at least one resolution,
specify the path to a PNG file included in the AIR package. Optional. -->
<icon>
<image16x16>assets/icon16.png</image16x16>
<image32x32>assets/icon32.png</image32x32>
<image36x36>assets/icon36.png</image36x36>
<image48x48>assets/icon48.png</image48x48>
<image72x72>assets/icon72.png</image72x72>
<image128x128>assets/icon128.png</image128x128>
</icon>
<!-- Whether the application handles the update when a user double-clicks an update version
of the AIR file (true), or the default AIR application installer handles the update (false).
Optional. Default false. -->
<!-- <customUpdateUI></customUpdateUI> -->
<!-- Whether the application can be launched when the user clicks a link in a web browser.
Optional. Default false. -->
<!-- <allowBrowserInvocation></allowBrowserInvocation> -->
<!-- Listing of file types for which the application can register. Optional. -->
<!-- <fileTypes> -->
<!-- Defines one file type. Optional. -->
<!-- <fileType> -->
<!-- The name that the system displays for the registered file type. Required. -->
<!-- <name></name> -->
<!-- The extension to register. Required. -->
<!-- <extension></extension> -->
<!-- The description of the file type. Optional. -->
<!-- <description></description> -->
<!-- The MIME content type. -->
<!-- <contentType></contentType> -->
<!-- The icon to display for the file type. Optional. -->
<!-- <icon>
<image16x16></image16x16>
<image32x32></image32x32>
<image48x48></image48x48>
<image128x128></image128x128>
</icon> -->
<!-- </fileType> -->
<!-- </fileTypes> -->
<!-- Specify Android specific tags that get passed to AndroidManifest.xml file. -->
<android>
<manifestAdditions>
<![CDATA[
<manifest android:installLocation="auto">
<!-- Added for Internet and debugging support -->
<uses-permission android:name="android.permission.INTERNET"/>
<!-- Added for Geolocation support -->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<!-- Added for NetworkInfo Support -->
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<!-- Added for Camera Support -->
<uses-permission android:name="android.permission.CAMERA" />
<!-- Added for Microphone Support -->
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<!-- Added to keep Android Device Awake -->
<uses-permission android:name="android.permission.WAKE_LOCK" />
<!-- Added to keep Android Device from Locking -->
<uses-permission android:name="android.permission.DISABLE_KEYGUARD" />
<!-- -->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-configuration android:reqFiveWayNav="true"/>
<supports-screens android:normalScreens="true"/>
<uses-feature android:required="true" android:name="android.hardware.touchscreen.multitouch"/>
<application android:enabled="true">
<activity android:excludeFromRecents="false">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
</application>
</manifest>
]]>
</manifestAdditions>
</android>
<!-- End of the schema for adding the android specific tags in AndroidManifest.xml file -->
</application>
<application xmlns="http://ns.adobe.com/air/application/2.5">
<!-- Adobe AIR Application Descriptor File Template.
Specifies parameters for identifying, installing, and launching AIR applications.
xmlns - The Adobe AIR namespace: http://ns.adobe.com/air/application/2.5
The last segment of the namespace specifies the version
of the AIR runtime required for this application to run.
minimumPatchLevel - The minimum patch level of the AIR runtime required to run
the application. Optional.
-->
<!-- A universally unique application identifier. Must be unique across all AIR applications.
Using a reverse DNS-style name as the id is recommended. (Eg. com.example.ExampleApplication.) Required. -->
<id>com.unitedmindset.Gestures</id>
<!-- Used as the filename for the application. Required. -->
<filename>Gestures</filename>
<!-- The name that is displayed in the AIR application installer.
May have multiple values for each language. See samples or xsd schema file. Optional. -->
<name>Gestures</name>
<!-- A string value of the format <0-999>.<0-999>.<0-999> that represents application version which can be used to check for application upgrade.
Values can also be 1-part or 2-part. It is not necessary to have a 3-part value.
An updated version of application must have a versionNumber value higher than the previous version. Required for namespace >= 2.5 . -->
<versionNumber>1.0.0</versionNumber>
<!-- A string value (such as "v1", "2.5", or "Alpha 1") that represents the version of the application, as it should be shown to users. Optional. -->
<!-- <versionLabel></versionLabel> -->
<!-- Description, displayed in the AIR application installer.
May have multiple values for each language. See samples or xsd schema file. Optional. -->
<!-- <description></description> -->
<!-- Copyright information. Optional -->
<!-- <copyright></copyright> -->
<!-- Publisher ID. Used if you're updating an application created prior to 1.5.3 -->
<!-- <publisherID></publisherID> -->
<!-- Settings for the application's initial window. Required. -->
<initialWindow>
<!-- The main SWF or HTML file of the application. Required. -->
<!-- Note: In Flash Builder, the SWF reference is set automatically. -->
<content>[This value will be overwritten by Flash Builder in the output app.xml]</content>
<!-- The title of the main window. Optional. -->
<!-- <title></title> -->
<!-- The type of system chrome to use (either "standard" or "none"). Optional. Default standard. -->
<!-- <systemChrome></systemChrome> -->
<!-- Whether the window is transparent. Only applicable when systemChrome is none. Optional. Default false. -->
<!-- <transparent></transparent> -->
<!-- Whether the window is initially visible. Optional. Default false. -->
<visible>true</visible>
<!-- Whether the user can minimize the window. Optional. Default true. -->
<!-- <minimizable></minimizable> -->
<!-- Whether the user can maximize the window. Optional. Default true. -->
<!-- <maximizable></maximizable> -->
<!-- Whether the user can resize the window. Optional. Default true. -->
<!-- <resizable></resizable> -->
<!-- The window's initial width in pixels. Optional. -->
<width>480</width>
<!-- The window's initial height in pixels. Optional. -->
<height>762</height>
<!-- The window's initial x position. Optional. -->
<!-- <x></x> -->
<!-- The window's initial y position. Optional. -->
<!-- <y></y> -->
<!-- The window's minimum size, specified as a width/height pair in pixels, such as "400 200". Optional. -->
<!-- <minSize></minSize> -->
<!-- The window's initial maximum size, specified as a width/height pair in pixels, such as "1600 1200". Optional. -->
<!-- <maxSize></maxSize> -->
</initialWindow>
<!-- We recommend omitting the supportedProfiles element, -->
<!-- which in turn permits your application to be deployed to all -->
<!-- devices supported by AIR. If you wish to restrict deployment -->
<!-- (i.e., to only mobile devices) then add this element and list -->
<!-- only the profiles which your application does support. -->
<!-- <supportedProfiles>desktop extendedDesktop mobileDevice extendedMobileDevice</supportedProfiles> -->
<!-- The subpath of the standard default installation location to use. Optional. -->
<!-- <installFolder></installFolder> -->
<!-- The subpath of the Programs menu to use. (Ignored on operating systems without a Programs menu.) Optional. -->
<!-- <programMenuFolder></programMenuFolder> -->
<!-- The icon the system uses for the application. For at least one resolution,
specify the path to a PNG file included in the AIR package. Optional. -->
<icon>
<image16x16>assets/icon16.png</image16x16>
<image32x32>assets/icon32.png</image32x32>
<image36x36>assets/icon36.png</image36x36>
<image48x48>assets/icon48.png</image48x48>
<image72x72>assets/icon72.png</image72x72>
<image128x128>assets/icon128.png</image128x128>
</icon>
<!-- Whether the application handles the update when a user double-clicks an update version
of the AIR file (true), or the default AIR application installer handles the update (false).
Optional. Default false. -->
<!-- <customUpdateUI></customUpdateUI> -->
<!-- Whether the application can be launched when the user clicks a link in a web browser.
Optional. Default false. -->
<!-- <allowBrowserInvocation></allowBrowserInvocation> -->
<!-- Listing of file types for which the application can register. Optional. -->
<!-- <fileTypes> -->
<!-- Defines one file type. Optional. -->
<!-- <fileType> -->
<!-- The name that the system displays for the registered file type. Required. -->
<!-- <name></name> -->
<!-- The extension to register. Required. -->
<!-- <extension></extension> -->
<!-- The description of the file type. Optional. -->
<!-- <description></description> -->
<!-- The MIME content type. -->
<!-- <contentType></contentType> -->
<!-- The icon to display for the file type. Optional. -->
<!-- <icon>
<image16x16></image16x16>
<image32x32></image32x32>
<image48x48></image48x48>
<image128x128></image128x128>
</icon> -->
<!-- </fileType> -->
<!-- </fileTypes> -->
<!-- Specify Android specific tags that get passed to AndroidManifest.xml file. -->
<android>
<manifestAdditions>
<![CDATA[
<manifest android:installLocation="auto">
<!-- Added for Internet and debugging support -->
<uses-permission android:name="android.permission.INTERNET"/>
<!-- Added for Geolocation support -->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<!-- Added for NetworkInfo Support -->
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<!-- Added for Camera Support -->
<uses-permission android:name="android.permission.CAMERA" />
<!-- Added for Microphone Support -->
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<!-- Added to keep Android Device Awake -->
<uses-permission android:name="android.permission.WAKE_LOCK" />
<!-- Added to keep Android Device from Locking -->
<uses-permission android:name="android.permission.DISABLE_KEYGUARD" />
<!-- -->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-configuration android:reqFiveWayNav="true"/>
<supports-screens android:normalScreens="true"/>
<uses-feature android:required="true" android:name="android.hardware.touchscreen.multitouch"/>
<application android:enabled="true">
<activity android:excludeFromRecents="false">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
</application>
</manifest>
]]>
</manifestAdditions>
</android>
<!-- End of the schema for adding the android specific tags in AndroidManifest.xml file -->
</application>
[...] This post was mentioned on Twitter by Jonathan Campos and Antonio Holguin, Matthew Wallace. Matthew Wallace said: RT @jonbcampos: Air for Android Gestures http://bit.ly/9Gk7oO [...]
[...] Flash Player Gestures Gesztusok kezeléseinek alapjaiba vezet be ez a rövid leírás. [...]
[...] I talked about Flash Player Gestures and how to handle these gestures in your applications. However these gestures are provided by the [...]
[...] Examples: Geolocation Accelerometer HTML Web View Home, Menu, Back, and Search buttons Gestures Screen Orientation Text Messages, Emails, and Phone Calls Camera and Camera Roll Access Microphone [...]