Flash Android Touch Checker

this is the first in a 3 part blog series i am doing on flash mobile technology. with the release of flash builder 4.5 , flash and flex now have support for building mobile applications that target android and, with an update coming out on 6/20, also iphone and blackberry devices. in my opinion, this is now the best platform for building cross-platform mobile applications available today.

when targeting applications for mobile development you both have different constraints due to screen size and limited cpu/memory, as well as additional opportunities for enhancing your application by taking advantage of features like multitouch, the accelerometer, and the gps. in this blog i chose to focus on multitouch, because it is something that every application should take advantage of.

flash supports 5 different multitouch gestures. the following table describes the gestures and includes a figure demonstrating the multitouch action needed to trigger it.

gesture	name	event	description
	pan	gesturepan	place two fingers on the screen, and drag left or right; commonly used for scrolling the contents of the whole screen
	rotate	gesturerotate	touch the screen with two fingers, and move them in an arc. this is an interactive gesture that will often be used to perform arbitrary rotation of objects.
	zoom	gesturezoom	place two fingers on the screen, and move them apart or together along a single line. moving the fingers apart indicates zooming in, and moving the fingers together indicates zooming out.
	swipe	gestureswipe	place one finger on the screen, and quickly swipe it in a single line of travel. swipes are commonly used to change the screen contents or take an alternate action, such as deleting an item from a list.
	two-finger tap	gesturetwofingertap	lightly tap the screen with two fingers, making only brief contact. this can be used as an alternative or secondary click where more than one action is required.

pictures courtesy of gestureworks

to discover if the device your application is running on supports gestures and to query the gesture capabilities dynamically, you can call the following static methods on the multitouch class:

• multitouch.supportsgestureevents: whether the device you are running on supports emitting gesture events
• multitouch.supportedgestures: a list of strings, one for each of the supported multitouch events

flash has two different modes of multitouch recognition that are mutually exclusive. you can either get the raw multitouch events by setting inputmode to touch_point or can recognize gestures by choosing an inputmode of gesture. before using gesture events, you should ensure that the inputmode to gesture input mode like this:

multitouch.inputmode = multitouchinputmode.gesture;

this is also happens to be the default input mode, so if you haven’t explicitly set it to touch_point then you should be fine.

to both demonstrate the use of gestures as well as to test the availability of different gesture events on your device, we will create a simple flex application called gesture check.

the first thing we will do to create the application is to build a declarative xml layout for the ui. for this we are going to use some of the basic layout and ui classes of flex, including the following:
h/vgroup: the hgroup and vgroup classes let you arrange a set of components in a simple vertical or horizontal stacked layout. the components are laid out in order, with the distance between set by the gap property.

• label: a simple component that displays an uneditable text string; this is commonly used as the label for another control in a form.
• image: the image class lets you display a graphic that can be loaded from a gif, jpeg, png, svg, or swf file. in this example, we will be using transparent pngs.
• checkbox: a form control that has a value of either selected or unselected with a visual indicator; it also includes a text description as part of the display.

using these layouts and controls, we can put together a simple user interface that displays the status of whether a particular multitouch gesture is enabled on the device and whether the user has successfully tested the gesture. the code for the first gesture of “swipe” can be created declaratively as follows:

<?xml version="1.0" encoding="utf-8"?>
<s:view xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    title="supported gestures" initialize="init()">
  <s:vgroup paddingtop="15" paddingbottom="15"
                    paddingleft="20" paddingright="20" gap="10">
    <s:hgroup verticalalign="middle" gap="20">
      <s:label text="swipe" fontsize="36" width="110"/>
      <s:image source="@embed('/gestures/swipe.png')" width="137"/>
      <s:vgroup gap="10">
        <s:checkbox content="enabled" mouseenabled="false"/>
        <s:checkbox content="tested" mouseenabled="false"/>
      </s:vgroup>
    </s:hgroup>
  </s:vgroup>
</s:view>

next, we need to add some actionscript code that will set the checkbox to enabled if the gesture is supported and will tick the tested box once the user successfully performs the gesture. to find the list of supported gestures we will use the supportedgestures variable described earlier, which we can iterate over to mark the checkboxes.

to test for successful gesture actions, we can add event listeners programmatically using the the addeventlistener() function. it takes two parameters, the gesture to listen for, followed by a callback function.
the completed code is shown here:

<?xml version="1.0" encoding="utf-8"?>
<s:view xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    title="supported gestures" initialize="init()">
  <fx:script>
    <![cdata[
      import flash.ui.multitouch;
 
      private function init():void {
        for each(var gesture:string in multitouch.supportedgestures) {
          this[gesture+"enabled"].selected = true;
          addeventlistener(gesture, function(e:gestureevent):void {
            e.currenttarget[e.type+"tested"].selected = true;
          });
        }
      }
    ]]>
  </fx:script>
  <s:vgroup paddingtop="15" paddingbottom="15"
                    paddingleft="20" paddingright="20" gap="10">
    <s:hgroup verticalalign="middle" gap="20">
      <s:label text="pan" fontsize="36" width="110"/>
      <s:image source="@embed('/gestures/pan.png')" width="137"/>
      <s:vgroup gap="10">
        <s:checkbox id="gesturepanenabled" content="enabled" mouseenabled="false"/>
        <s:checkbox id="gesturepantested" content="tested" mouseenabled="false"/>
      </s:vgroup>
    </s:hgroup>
    <s:hgroup verticalalign="middle" gap="20">
      <s:label text="rotate" fontsize="36" width="110"/>
      <s:image source="@embed('/gestures/rotate.png')" width="137"/>
      <s:vgroup gap="10">
        <s:checkbox id="gesturerotateenabled" content="enabled" mouseenabled="false"/>
        <s:checkbox id="gesturerotatetested" content="tested" mouseenabled="false"/>
      </s:vgroup>
    </s:hgroup>
    <s:hgroup verticalalign="middle" gap="20">
      <s:label text="zoom" fontsize="36" width="110"/>
      <s:image source="@embed('/gestures/zoom.png')" width="137"/>
      <s:vgroup gap="10">
        <s:checkbox id="gesturezoomenabled" content="enabled" mouseenabled="false"/>
        <s:checkbox id="gesturezoomtested" content="tested" mouseenabled="false"/>
      </s:vgroup>
    </s:hgroup>
    <s:hgroup verticalalign="middle" gap="20">
      <s:label text="swipe" fontsize="36" width="110"/>
      <s:image source="@embed('/gestures/swipe.png')" width="137"/>
      <s:vgroup gap="10">
        <s:checkbox id="gestureswipeenabled" content="enabled" mouseenabled="false"/>
        <s:checkbox id="gestureswipetested" content="tested" mouseenabled="false"/>
      </s:vgroup>
    </s:hgroup>
    <s:hgroup verticalalign="middle" gap="20">
      <s:label text="two-finger tap" fontsize="36" width="110"/>
      <s:image source="@embed('/gestures/twofingertap.png')" width="137"/>
      <s:vgroup gap="10">
        <s:checkbox id="gesturetwofingertapenabled" content="enabled" mouseenabled="false"/>
        <s:checkbox id="gesturetwofingertaptested" content="tested" mouseenabled="false"/>
      </s:vgroup>
    </s:hgroup>
    <s:label text="graphics courtesy of gestureworks.com" fontsize="12"/>
  </s:vgroup>
</s:view>

notice that we have added a few ids to the checkboxes in order to reference them from the initialize function. the naming convention is the gesture name appended with the words “enabled” or “tested”. the same naming convention is used in the code that sets the selected state.

upon running this example you will see the following:

most modern android devices support the full complement of gestures, so you will get back 100% enabled when running on device. however, running in the emulator it will depend on what platform you are running on.

try testing all 5 gestures and see if you can successfully test them on your own device.

from http://flash.steveonjava.com/flash-android-touch-checker/