Flex 4 Application Handling Touch Events on Android with Flash Player 10.1

March 17, 2010

Developed a simple Flickr search application using Flex 4, targeting Flash Player 10.1 on Google Nexus One. This application lets users search for photos on Flickr and uses the API provided by Flash Player 10.1 to handle touch events.

Here is the video of the application:

It took 3 hours for me to understand the touch events and develop this application and of course used Data-Centric features in Flash Builder 4 to connect to the services exposed by Flickr. In this application I used the following to handle touch events:

  1. TouchEvent.TOUCH_BEGIN
  2. TouchEvent.TOUCH_MOVE
  3. TouchEvent.TOUCH_END
  4. TouchEvent.TAP
  5. Multitouch.supportsTouchEvents
  6. Multitouch.inputMode

Download the source here http://sujitreddyg.com/samples/FlickrMobile.zip

Details on Flash Player 10.1 API for touch, multitouch and gestures can be found in Flex Developer Guide. Also read Multi-touch and gesture support on the Flash Platform by Christian Cantrell and Flex 4 List Scrolling on Android with Flash Player 10.1 by James Ward.

Adobe Rocks 🙂


Application developed using Flex 4 and DCD targeting Flash Player on Android Device

March 4, 2010

Used Flex 4 and Data-Centric Development (DCD) in Flash Builder 4 to create a application which can be used in devices with Flash Player 10.1 support. This applications loads data from tomcat server configured with LiveCycle DS; Lets the user view the data and edit the same. Please find below the screen shots of the application running on Google Nexus One with Flash Player 10.1 🙂

Note: I took the screen shots of the application running on Google Nexus One phone using Dalvik Debug Monitor packaged with Android SDK

I also wanted to see if I can use the same application to target Flash Player running on bigger screens like Mac. Since I used Flex 4, I just created different skins for my custom components so that the applications looks good when launched from a Mac or PC. After creating the skins, all I had to do was to change the <style> tag in the main application to point to the css configured with my new skins and re-compile my application. Please see below the screen shot of the application launched from Firefox on my mac 🙂

The application developed here is consuming data from a Data Management Service destination of LiveCycle DS (LCDS) and so any changes to the data on the mobile devices is pushed to all other clients viewing the same data 🙂 In the last image below, you can see the changes made on the mobile being pushed onto the application running on Mac.

Screen Shots:

View Products

View Products

View Products 2

View Products 2

Edit Product View

Edit Product View

Editing Product Name using Android Keyboard

Editing Product Name using Android Keyboard

Viewing Edited Product

Viewing Edited Product

Application Running on Mac

Application Running on Mac

Adobe Rocks 🙂