Flex 4 List Scrolling on Android with Flash Player 10.1

By James Ward | Published: February 19, 2010

UPDATE 1: The first version of this demo was intended to show how to hook up touch events to the Flex 4 List / DataGroup controls. I’ve posted a new version that adds some optimizations for the touch event handling and adds the kinetic flick behavior.

One of the challenges of running existing web content on mobile devices is that user interactions differ between mediums. For instance, on a normal computer with a mouse, scrolling though lists is often done by clicking on scroll bars or mouse wheels. On mobile devices that lack a pointing device this is not the best interaction paradigm. On devices with touch screens the paradigm for scrolling is usually a swipe gesture.

In Flash Player 10.1 there are APIs for gestures and multitouch events. I thought it would be fun to hook up the list scrolling on a Flex 4 List to the TouchEvent on my Nexus One. Check out the video:

If you want to see how I created this simple demo, check out the source code. Let me know if you have any questions.

This entry was posted in Flash Player, Flex, Mobile. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.
  • Joel Marks

    Is this something that the Flex team will start to include in the Flex SDK?

  • http://flexblog.teerasej.com Paul

    Thank you, Mr. James! You just clarify my concerning about is Flex 4 can be able to render in Mobile Device. Do you mean we can also use Flash Builder to built native application for Nexus Android too?

  • http://www.jamesward.com James Ward

    @Joel I’m not sure if the Flex controls will support gestures out-of-the-box or if this will only be supported in the Flex Mobile Framework.

    @Paul You can use Flex and Flash Builder to build mobile applications for the browser and for AIR. A number of mobile devices will have Flash Player 10.1 and AIR on them.

  • DOGS

    What on earth is the point? HTML can make lists of text and images and can scroll silky smooth.

  • http://pluginmissing.com/ mare

    Succes with the optimization! It looks like it’s needed.

  • http://google.cn MoBUrkhardt

    that seems really slow, how much can you improve it by optimizing it? will it actually perform fast enough to be useful? Why would you need flash to make a list of your twitter feeds?

  • http://twitter.com/thecreative Chris P.

    It’s a little slow?

  • Bob T

    Why bother? This is always going to be slower and generally than a proper native app using the native libraries. User experience is everything on mobile devices.

  • http://teapartynews.us David H Dennis

    Dogs, when I tried a Motorola Droid, I noticed scrolling a HTML page was approximately equal in jitteriness to the Nexus One here. I’m wondering if Android is inherently deficient in scrolling performance. (I know Nexus One has a faster CPU and I don’t know if that would help significantly in this case).

    iPhone’s web browser was far smoother – in fact, perfectly smooth – than Droid in my testing.

    D

  • JulesLt

    Should be noted that Adobe recommend against using standard Flex framework for mobile devices – the Nexus has more memory than most smartphones.

  • Niklas

    If I were to build a mobile site with Flex today, what sort of things should I use (what have you optimized it for)?

  • Hamranhansenhansen

    Running in the browser has zero appeal to me. I’ve been doing that for years now on mobile devices with HTML5, and all the mobiles have WebKit, there is no IE problem on mobiles. It’s been painless for years to do what is demonstrated in this video.

    I also have Flash apps running natively on my iPhone for many months now. They are the first Flash-authored apps I ever paid for. Adding native Android and Blackberry targets would be great.

    But running really slow in the browser? I just don’t see how I’m supposed to be excited about this. FlashPlayer performance and battery use is bad on Intel Core 2 Duo. What magic bullet is going to give FlashPlayer on ARM WebKit-like performance in the browser? Mobiles with big screens like iPad just complicate this further. Running native I can be optimistic, but FlashPlayer?

  • RichardL

    > I’ve been doing that for years now on mobile devices with HTML5

    For years?

  • jdk

    For all those saying, “What’s the point?”. It’s a developer demonstration. If you actually made applications, you’d understand that demonstrating components that are available out-of-the-box is valuable. What’s the point of Tour De Flex? To show off components.

    I, for one, am excited about the potential savings in not having to completely rewrite a bunch of applications for every xyz platform out there. Show me Apple’s solution that bests Flex in capability, penetration, and developer productivity. Understandably, it doesn’t exist. Apple is more interested in device and media lock-in through draconian policies and ruthless business practices to allow an application ecosystem to flourish openly.

    If Flash/Flex doesn’t work well on phones, no one will use it and I’ll be the first to criticize Adobe. Since Apple is unwilling to even work with Adobe on mobile Flash, I guess we’ll never know how it performs on the best mobile device available. Let’s try withholding judgement until the Flash Player 10.1 release.

  • b00giZm

    I would be embarrassed if I had to showcase something like that.

    What is this? Some “proof of concept”? Something that might work well on a machine that has… duuuuuh… 5x times more computing power than a Nexus One?

    Do we have to be impressed now?

  • Andre Richards

    I, for one, am excited about the potential savings in not having to completely rewrite a bunch of applications for every xyz platform out there.

    I’m still waiting for the day when such a system doesn’t turn into more hassle than it’s worth. No single development environment/language is going to work best on every platform, and that’s the problem. As we’ve learned from every attempt so far, there are simply too many trade-offs and too many compromises and the end result is never feels quite good enough. As it is, rewriting for each platform is a reality that we are stuck with as developers and one that isn’t going away any time soon. That’s just reality. My beef with this kind of demo is that it keeps this myth alive that we’re going to be able to code once and deploy everywhere anytime soon. It’s a mirage. Drinks some water and snap out of it.

    Show me Apple’s solution that bests Flex in capability, penetration, and developer productivity. Understandably, it doesn’t exist.

    It’s called XCode and it’s grounded in the reality of things. Apple may not be your cup of tea, but at least they’re not blowing sunshine up your skirt and promising you the moon.

  • http://nathanherald.com Nathan

    Without the gestures, how slow is using the normal controls? Can a normal scroll bar respond to drag events out of the box?

  • Sungmoon

    What is the size of the Flash 10.1 runtime on Android?

  • Pingback: Flex Performance on Mobile Devices

  • http://www.jamesward.com James Ward

    Thanks for all the feedback. As noted above the first version of this demo was intended to show how to hook up touch events to the Flex 4 List / DataGroup controls. I’ve posted a new version that adds some optimizations for the touch event handling and adds the kinetic flick behavior.

    @Sungmoon I’m not sure how big it is / will be. I’m using an early engineering build of Flash Player 10.1 for Android.

  • http://www.podblogr.com Bruce Hopkins

    James,

    Can this list be componentized and made available for the Flash CS5 beta users? Folks on that list have been chatting for a while about the need for a good list component.

    Thanks,

    Bruce

  • http://www.jamesward.com James Ward

    @Bruce I’m not sure since it depends on Flex. I’ve posted the source code some someone with Flash CS5 could certainly give it a try.

  • Pingback: Flex 4 Application Handling Touch Events on Android with Flash Player 10.1 « Sujit Reddy G – The Evangelist

  • Pingback: Adding physics to your gestures | polyGeek.com

  • Pingback: AIR for Android: AS3 Scrolling List (iPhone too!)

  • Pingback: AS3 Scrolling List for Android and iOS devices « Thanks, Mister!

  • Pingback: Phoenix Traffic Android Mobile Application built with AIR « Thanks, Mister!