The library is available on github at bustardcelly/as3flobile. You can read more detailed information on the wiki. You can also look at the online docs. Continue reading if you enjoy rambling explanations.
As per usual, i had started a personal project that focused on refining parts of an old application and ended up creating a new library. This time, that application was going to get a face lift as i tried to port some code over to AS3-only views with the goal of targeting Android devices. What seemed like a little side project turned into a fun, can’t-stop-thinking-about suite of custom ActionScript 3 components.
You can view the components here: http://www.custardbelly.com/android/froyo/as3flobile/. If you have a Flash-enabled device, please check them out and let me know how they run. I have only really tested on my Nexus 1.
A full list of the current components is available on the project’s wiki in github. The main intent of creating these controls was to start thinking about user gesture as recognition and navigation within a control. My first task was to forget about scrollbars. They have essentially become useless on touch-devices in the context of navigating through content of a defined area. Though as3flobile does provide scrollbars in a sense (they are called Sliders) they are meant for selecting a value within a range, not as a handrail to hold onto to traverse items in a list. As a visual clue, the scrollbar still makes sense. As a user-input model, it is slowly not.
In any event, scrolling was the first gesture tackled. So I mainly started out making a ScrollViewport and then went crazy making all these other controls i know i would need if i ever got back to the original task at hand 
I could talk more in depth on how i tackled scrolling and how i kept the API open for you to create your own scrolling contexts and plug them in in later posts if you’d like.
There is some tap recognition, such as when selecting a list item or a RadioButton, but most of the focus is on swipe gesture for scrolling. I would like to start diving into other gestures (ie. zoom) which would probably make me rethink the architecture of a custom component for a touch-device, not only in its gesture recognition but also how you interact to access information. For instance, does a drop down really make any sense any more? (though there is a DropDown in as3flobile) I don’t know if i am the only one, but it really feels antiquated to me. I wonder if there will come a time when we are old and we look at old pictures of the online forms we used to fill out with there funny old clunky controls… how much time was wasted.
You keep talking, but can you skin them?
Yes, you can skin them. There really isn’t a skinning architecture in as3flobile per se. Any control that is a subclass of AS3FlobileComponent (which all the controls in the library currently are) can accept an ISkin and can maintain a state related to or rather accessible by an ISkin. Furthermore, the assignment, targeting and update to the skins is handled within AS3FlobileComponent with protected hook-ins you can override if seen fit.
However, if you look at the default skins within as3flobile, in com.custardbelly.as3flobile.skins.*, you’ll see that the ISkin implementations actually reference their target controls directly to access the graphic displays needed for custom skinning. I figured there was no reason to add extra overhead by creating interfaces for a control strictly for skinning purposes. If you create a custom skin for a control, it is assumed you know what the control needs to look like; so access it directly. Though the target property of ISkin is ISkinnable (which AS3FlobileComponent implements), the target is most times cast to the specific control that is being skinned. If people are really interested in these components and curious as to how to skin them, i can definitely fire up some more posts on that.
In any event, i hope you check out the as3flobile project in github and/or get down to business as Gary always seems to do. If you do check out the as3flobile project, suggestions, comments and questions are always appreciated. I am sure there are some bugs and some aspects of the controls that i just didn’t think of that may be needed.
Great work. Tried it on my Nexus One works great.
A few comments:
- The picker is great, very nice how it snaps to selected item.
- The native drop down concept with a modal window is better on the small screens, fought the same fight with some components I was building
- All the sliding worked fantastic, very nice
If you are interested, check out Skinnable MinimalComponents, http://dgrigg.com/post.cfm/04/28/2010/Alpha-Release-of-Skinnable-Minimal-Components it might give you some food for thought on adding skinning to the components.
I just tried them on my Droid with 10.1 b3. Worked well but checkbox hit took a few presses to enable. Nice work!
Thanks, Jonathan! Yeah the checkbox was a hit and miss for me. Technically it has a smaller default size than the other buttons, just because it looked so gaudy being that big. But i guess that lost on usability. The touch recognition on most screens is not as accurate as that of an iPhone. So the touch point really is the first point your skin touches the screen as is not based on heat. Was thinking of including a proximity touch inspector at the core to more accurately find if a user wanted to focus on a control. Something to think about…
Thanks, Derek!
I am very familiar with the Skinnable MinimalComponents and you’ve done some great work there as well.
Very nice Todd!
Thanks Todd!
I’m a newbie… how does one use these components in Flash. How/where do you install them?
Hi Todd,
Great work. A help to thousands. I will be using it extensively in my AS3 project and try to provide feedback as I go. I did log that “Picker.getSelectedIndex() always returns -1″ issue.Thanks for solving it.
Also, a code example on using custom ScrollListRenderer (instead of DefaultScrollListItemRenderer) would be of great help. For example, I would like to have a right aligned text and a radio button for each item in my list. Thanks.
hi Todd,
thanks very much for this lib, great.
I’m having a problem though with ScrollList, and same for AndroidScrollList, in that it only display resp. 13 or 14 items when I add 20 items. I’m simply using your example code:
_verticalLayout = new ScrollListVerticalLayout();
_verticalLayout.itemHeight = 60;
_verticalLayout.useVariableHeight = false;
_list = new ScrollList();
_list.width = 480;
_list.height = 300;
_list.y = 90;
_list.layout = _verticalLayout
addChild( _list );
_dataProvider = getList( 20 );
_list.dataProvider = _dataProvider;
Any idea why?
Jeff.
hello Todd,
does your ScrollViewPort distuingish between mouse click and drag, so that users do not click a item accidentally when they drag? It’s a bit hard to see for me in your online scrollviewport o flex demo (btw mine is an as3 project). I know that you have it in the scroll list, but how about this one? If not, what would be a good place in your code to built in something like that, using a timer? I cannot find the code that listens for the mouse down and up events..
Hey stefan,
ScrollViewport only listens for Mouse down, move and up events by default. It does so by utilizing the ScrollViewportMouseContext with an assigned strategy to update the target container. It relies on bubbled events and then determines the global position and vector of movement. Take a look at ScrollViewport:getDefaultViewportContext().
On the ScrollViewportMouseContext there is a tap threshold, which is used to determine the the user tried to drag based on the delta between mouse down and up.
And, because it relies on bubbled mouse events, it does not interfere with anything you may wish to do with elements within the ScrollViewport container. As such, you should be able to stop propagation on events you dont want to broadcast to the ScrollViewport to enable its drag.
The ScrollList works a little differently as it turns off interaction on its children and uses a TapMediator to determine the position within the list that a tap was detected, then find the child under that point. Check out ScrollList:getDefaultTapMediator()
If you just don’t want them to click on something while the ScrollViewport is being dragged, i would suggest assigning a Signal handler to ScrollViewport.scrollStart and then setting mouseChildren=false on the container you set as the content for the ScrollViewport.