AS3 Scrolling List for Android and iOS devices
I created a very simple AS3 list that works with the both Android and iOS devices. The project files include a Flash Professional project created with Flash Builder 4. You will need Adobe AIR for Android or the packager for iPhone to create naive create native iOS (iPhone, iPad) or Android.
If you only want to build for Android, then I recommend you check out Adobe Flash Builder Burrito and the Flex Hero SDK (or SDK 4.5). There is already a list control in the Flex Hero SDK (or SDK 4.5) for Android devices. However for iOS devices, you will need a scrolling list that works with AS3 and CS5 for packaging.
The list I created is an AS3 list that works for multiple devices, touch scrolls, and uses custom item renderers that detect user interaction. Here is an example AS3 project with the list in action. Just use your mouse like you would your finger on a mobile device to scroll the list and select items.
AS Scrolling List (click to view)
The list is suited best for smaller sets of data because the list does not recycle list items. But for most mobile applications you don’t normally have that many items to scroll. Adobe also recommends that you not use the drawing API in Flash because of its memory consumption on mobile devices. It would be better to create a MovieClip or Sprite in Flash and use that as the background of your item renderer. However, int this project I used the drawing API to change the selection color of the list item throwing all caution to the wind.
TouchList
The TouchList class creates the list, adds items and handles touch events dispatched by the item renderers. You might notice that I didn’t use any actual TouchEvent listeners in the list. This is because a TouchEvent is essentially a MouseEvent and I couldn’t see any difference in using one over the other. The TouchList class has a built in delay to differentiate between a scrolling and touch action. Like the Android phone, you can’t select an item while scrolling and pressed items are deselected if you scroll while pressed.
TouchListItemRenderer
TouchListItemRenderer implements ITouchListItemRenderer and renders the display of the items in the list data. This renderer can be customized to show whatever type of data you want in the list. List items can also be variable height.
ITouchListItemRenderer
If you want to create an item renderer for the list, then it must implement the ITouchListItemRenderer interface. This interface gives the renderer basic functionality to interact with user selection and touch events used by the list.
ListItemEvent
The list item event is a custom custom ListItemEvent dispached when a list item renderer is pressed. The event contains the event payload and a instance of the item renderer selected.
Installation
Included in the GitHub repository is the working project files for that I created in Flash Builder 4 that handles adding the list to the stage, screen orientation on the device, stage resize, and other functions for an Android AIR application. To install, just checkout the project file and import it into Flash Builder. I have also included Android .apk file if you want to deploy it directly to your Android phone.
The AS3ScrollinList project is located on GitHub.
If you do use the list in a project, be sure to drop me a note or mention me in your will. This list is actually a combination of my efforts and those of others in the Flash community. So please share what you build as well. If you have improvements, just post them back to this post or feel free to fork the GitHub code.
Work Cited
-Mister
Trackbacks & Pingbacks
- Quick Tip: stage.mouseX on Android at Jozef Chúťka's blog
- Android: Phoenix Traffic Cams
- AIR for Android: Phoenix Traffic Application
- Phoenix Traffic Released in Android Market « Thanks, Mister!
- AIR: Phoenix Traffic Released in Android Market « Thanks, Mister!
- AIR for Android: Phoenix Traffic Application « Thanks, Mister!
Looks very interesting. I did spot one issue, you fix the height of the list area to 800. On Droid’s the screen size in 854, so having a fixed height would be an issue.
Well that is the height passed in when first building the list, it would be up to the developer to resize the list appropriately for the device. I am not sure how you determine the size of the screen in advance for modifying the list to any device. I guess you could make the application full screen and then measure the application size before instantiating the list.
I have included a method to resize the list on screen orientation, but again, you need a way to get the dimensions of the application. You could also place the lis in a Flex application and resize it based on application constraints.
I think instead of passing in a set width/height (like the 480×800 template setting for the CS5 FLA Android template), you should be able to adjust the list to the device resolution by doing something like this:
// add our list and listener
touchList = new TouchList(stage.stageWidth, stage.stageHeight);
touchList.addEventListener(ListItemEvent.ITEM_SELECTED, handlelistItemSelected);
addChild(touchList);
Using stage.stageWidth and stage.stageHeight to adjust the dimensions of the list. Since I only have a NexusOne to test on, I can’t tell if this works for something like the Droid, with a screen size of 854. I will try to test this with the emulator.
Nice job, going to give this a shot on an app I’m developing and let you know how it works.
Cool man, I am also dropping it in an application I am working on, let me know how it goes or if you run into any issues. Working out the bugs
.
Ah, you guys are the ones behind mWine, way cool app man!!
I noticed that sometimes the TouchList would call the destroy method when the list was updated, so I changed the addEventListener(Event.REMOVED, destroy) to addEventListener(Event.REMOVED_FROM_STAGE, destroy) in all instances.
The TouchList removeListItems method was also killing the timer. I updated the code to the following:
[as]
/**
* Clear the list of all item renderers.
* */
public function removeListItems():void
{
tapDelayTime = 0;
isTouching = false;
scrollListHeight = 0;
while(list.numChildren > 0) {
var item:DisplayObject = list.removeChildAt(0);
item.removeEventListener(ListItemEvent.ITEM_SELECTED, handleItemSelected);
item.removeEventListener(ListItemEvent.ITEM_PRESS, handleItemPress);
item = null;
}
}
[/as]
i would like to suggest a little adding to touchlist class. if someone wants to manage internal buttons in an item renderer he/she has to disable mouse up and mouse down in all item renderers during scrolling. in order to make things easy we can set mouseChildren property to false during mouse_move event handling and set it true during the mouse_up event handling.
obviously the item renderer interface implementation needs to manage the reset of each button inserted
if I’m wrong or there are some unattended behaviors please let me know
I think that sounds like a reasonable addition, have you tested the modification on a device?
Just tried your list on iOS. Scrolls nicely. I like how you’ve emulated the iOS scroll bar. At first I didn’t think the list item was reacting to a finger-tap. On my iPhone 3GS I have to tap and hold for a moment for the item to appear selected. Is delay an intentional workaround to differentiate between a scroll interaction and a tap?
Right, the delay is intentional and can be adjusted to tweak the list to your needs. The current delay for the tap is set for Android and matches closely to the default Android list behavior. There is a variable at the top of the List.as to set the sensitivity for the tap time delay.
Very nice component, good work. I’ve modified it slightly to use an ENTER_FRAME event instead of a Timer object, which makes it a little smoother (on my HTC Desire anyway).
I went with a timer over Timer over an ENTER_FRAME event because it was recommended as a way to optimize your mobile applications by Adobe. You can read more here: http://help.adobe.com/en_US/as3/mobile/WS4bebcd66a74275c36cfb8137124318eebc6-7ffb.html.
However, for the list, it might be better to use ENTER_FRAME. Initially I tried to start/stop the time between touch events to optimize it further, but that wasn’t possible, so the timer is always running.
You will also notice that the timer is used for the tap events as well.
I tried it on my iPhone 4G and the scrolling was very slow.
@Andrew
Can you tell me what “Rendering” option you used (CPU, GPU or Auto)?
I don’t think that in this instance you will achieve any better results using GPU over CPU with the list. The list doesn’t cache anything nor is it heavy on the graphics to render. You can read more about GPU rendering here: http://blogs.adobe.com/cantrell/archives/2010/10/gpu-rendering-in-adobe-air-for-android.html.
You may be able to speed scrolling on iPhone by making the timer have smaller intervals or using an ENTER_FRAME event instead of a timer. The other possibility is to increase the totalY value that the list is moved. Right now we use “totalY = minY – Math.sqrt(minY – totalY);” within our onMouseMove method, but you can modify this to scroll the list further when released.
no unfortunately my iphone was one of that device affected by the wifi issue, a question for andrew: did you add some cacheAsBitmap or other modification in order to accelerate list rendering?
I have tested my addition and unfortunately could generate a list block, this behaviour is intended for a multiple scrolling list interaction. My apologize to everybody.
i made that question because on adobe developer guide for PFI it’s loudly said that graphics must be avoided and that rotation, scale and alpha are better rendered through GPU, ergo you have to use cacheAsBitmap and cacheAsBitmapMatrix
thanks for your answers
Hi mister, i would like to resize a single item of the scrolling list, could you tell me where i have to make changings in order to update width and height (especially height)?
@massimo
In the AndroidScroll.as file you can see where we add the item renderers to the list:
for(var i:int = 0; i < 50; i++) {
var item:TouchListItemRenderer = new TouchListItemRenderer();
item.index = i;
item.data = "This is list item " + String(i);
item.itemHeight = 80;
touchList.addListItem(item);
}
The item.itemHeight property is where you would change the list item height. How you identify which individual items need different eights could be a property of the data. Alternatively, you could modify TouchListItemRenderer to size itself based on the data or text size. The list evaluates each TouchListItemRenderer size to determine its overall size in the addListItem method of the TouchList.as file.
thanks mister, useful as always
So, how do you change “item.data = “This is list item ” + String(i);” to your own data? How do I change it so that I could have “Apples”, “Bananas”, “Oranges”, etc. in the list? Would it be an array?
How do you change “item.data = “This is list item ” + String(i);” to your own data? How do I change it so that I could have “Apples”, “Bananas”, “Oranges”, etc. in the list? Would it be an array?
You can pass in an array of custom object that you create into the item renderer. Very basic example is to create a bunch of custom objects and put them into an Array, then cycle through that array to build your item data:
var myObj:Object = new Object();
myObj.label = “whatever i want”; // label text to display
myObj.id = 1; // unique id
myObj.height = 90; //pixel height of item renderer
myData.push(myObj);
for each (var obj:Object in myData){
item.data = obj;
}
You can produce an array of custom objects and pass them into the data. It should be pretty basic.
Mister, last time i forgot a little detail, i have to resize single item from the inside of an itemrenderer and i have replaced the rectangle with a Sprite. this one contains all the interface. I know that this make things complicated but it was the only way to simplify user interface building for non coders.
Moreover i have replaced the string Object with a general Object instance, this allows me to exploit custom object as well as standard classes
Then you do like you would in any Flash project, create your item renderer first, layout the elements within it, then measure it to lay it out in the list.
i have tried to resize it in this way when the itemrenderer is in the list but works only before addlistitem, when it is added the size of the element doesn’t change even if you change element’s height
The item renderer height is completely arbitrary. If you create an itemrenderer instance, and measure its height after its created and done its layout, you can pass that height into the list. The list takes whatever height you say for the item renderer. It adds tallies all the renderer heights to report its own height. As long as your itemrenderer height is established and set before adding it to the list then it will work. If you are trying to measure the height of the item renderer before its done its layout then its not going to report the correct height. This is a just something you have to do in creating Flash components, you have to know how and when to measure their height after they are created.
“Ah, you guys are the ones behind mWine, way cool app man!!”
Thank you! This scroller works great, i’m instituting it into a music app I’m doing for a band, when it’s released I’ll make sure to give you credit in the blog post I do about the app. Great stuff.
hi
i downloaded your files and loaded into flash cs5. when i press ctrl + enter i get the following.
AndroidScrollTest\AndroidScrollTest.as, Line 80 1046: Type was not found or was not a compile-time constant: StageOrientationEvent.
Did you read the information in the post that says you need to have the latest AIR installed?
Wow! Thanks so much, REALLY helped my app as your coding is very good for mobile devices. Tested on my N1(480×800), Emulator(320×480 & 480×854),iPhone3G(320×480) and all worked really well. Thanks again.
Hi, thanks for making the above code available!. It was very useful.
To Johnny who posted about “Line 80 1046: Type was not found or was not a compile-time constant: StageOrientationEvent.”. As mentioned in the reply, you have to install AIR. Besides that, you have to go to File > Publish Settings > Flash > Player > AIR Android. That will get rid of the error which you’re experiencing with StageOrientationEvent.
I spent a pretty great deal of time on this problem. Just thought it would be helpful to share!
i set the list height and width as this
touchList = new TouchList(stage.stageWidth/2, stage.stageHeight/2);
when scrolling if your finger leaves the touchlist area before lifting your finger the mouseUp event does not fire causing problems with the scroller next time you press inside the touchlist
what Event listener do i need to add to watch for this. basically to fire the mouseUp code when fingure leaves the the touchlist.
i figured it out. At first I tried using the MOUSE_OUT event but that was a no go.
what did work was using ROLL_OUT
I added this on the onMouseDown function
addEventListener(MouseEvent.ROLL_OUT, onMouseUp);
and then removed it in the onMouseUp function
worked well
Flash no longer has a release outside event so I would have recommended adding a global listener to stage for mouse up event and then in event handler check if the target is the same as list, if so, reset list appropriately.
this is great but I can get it to populate the list with an xml file… any tips?
You will transform the XML nodes to objects or rework the list properties to accept XML.
Hi Mister, can you make a tutorial how to list data from local database (sqlite)? that will be very interesting. I’m working now with Flash CS5 and I have listed my data from a local dababase (70 rows) into a movieclip. To scroll the list, I use drag & drop method to drag movieclip where data be listed. It works fine on PC, but when I test on emulator, the list scroll very very slow. How do you think about the method I use? Do you have any tips for me. Thank you
Since this list doesn’t recycle items, having large list items or many list items will slow down the performance of scrolling. There is not much that you can do about the scrolling issue other than work with a list that recycles its list items, such as those being developed for the Hero controls in Flash Builder Burrito.
Hi Mister, thanks for making this great component. Everything works fine except the removeListItems() method seems to generate an error. My application populates the touchlist, but later the user can bring in new data through a search function. I had planned on eliminating all the list items and repopulating the touchlist, but when I call removeListItems I get this error:
ArgumentError: Error #1063: Argument count mismatch on com.company.client.app.view.ui.touchlist::TouchListItemRenderer/destroy(). Expected 0, got 1.
at flash.display::DisplayObjectContainer/removeChildAt()
I tried to track down what was causing this, but no no dice. Any ideas?
Hey
Hey Dan,
I was wondering if you had figured out your issue. I am getting the same
ArgumentError: Error #1063: Argument count mismatch on com.company.client.app.view.ui.touchlist::TouchListItemRenderer/destroy(). Expected 0, got 1.
at flash.display::DisplayObjectContainer/removeChildAt()
any help would be appreciated. Thanks.
The event parameter is not defined in ::TouchListItemRenderer/destroy().
protected function destroy(event:Event):void
Please check the latest code on Github for the fix.
I actually JUST made sure that I had the most recent right before I posted. It’s not in the AS3ScrollingList.zip. I manually put it in and now its working.
I am trying to place the list into a MC and its not displaying. Trying to make a smaller menu then i can display some alternate information next to it. Then a ‘close’ button will removeChild(menuContainer):
menuContainer = new MovieClip();addChild(menuContainer);
menuList = new TouchList(150, 400);
menuList t.addEventListener(ListItemEvent.ITEM_SELECTED, handlelistItemSelected);addChild(menuList); // Fill our list with item rendreres that extend ITouchListRenderer. for(var c:int = 0; c < itemArray.length; c++) { var item:TouchListItemRenderer = new TouchListItemRenderer(); item.index = c; item.data = itemArray[c]; item.itemHeight = 50; menuList.addListItem(item); }
menuContainer.addChild(menuList); // <— if i add the menuList to the menuContainer there is nothing there
If i dont place it in the MC its fine.
Thanks again for the component and the help. Really useful.
I don’t think the zip file is updated, I should remove that from GitHub and just let people check out the code using the Git itself. Sounds interesting what you are doing, would like to see it when your done. Thanks!
-Mr
Would it be possible to get a copy of the .fla file for the Android Touch List?
Isn’t the file located inside the zip file provided?
All I want to do is link the swf from another swf but it keeps throwing me an error.
Basically I create a .FLA with Flash CS5 and place a movieclip button in there which when clicked should load the AS3ScrollingList.swf. When I click the button I get this error message:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at AS3ScrollingList()[C:\Users\Matt\Desktop\thanksmister-as3scrollinglist-d09ff77\AS3ScrollingList.as:36]
Line 36 points to [as] stage.scaleMode = StageScaleMode.NO_SCALE; [/as]
From looking on other forums it may be because a SWF is loaded but there is no check to see if the Stage has been completely loaded before the constructor has invoked.
Now I am a Flash AS3 noob so Im struggling to work out what to do but if someone could help spell out in steps how to solve the problem by showing what exact code I need it will be much appreciated!
@mister Great work. Really nice component. Thanks.
To answers dan’s comment, the event parameter is not defined in ::TouchListItemRenderer/destroy().
protected function destroy(event:Event):void
Yeah, I just updated that code on GitHub for the fix. I am also working on update to the list that uses object pools to recycle the item renderers. I will post soon!
Here is a link to a new scrolling list for Android and iOS that recycles item renderers using an object pool. http://goo.gl/K2tjv
Im still having problems linking the AS3ScrollingList.swf to my swf. I just want to have a menu screen that has a button in it that when clicked will load the AS3ScrollingList but I cant even get this working which is frustrating. Can anyone point me in the right direction please?
Where do you add your list to this? What I would like is a list of items and then when you click on an item it would take you to a different frame “gotoFrame(2);” for example. Is that possible? If so, how do I go about it?
TIA
OK, I’m a newb… how do you get your list in this? I see where you have “item.data” and that it puts the list, generically, in by code but how do I get my list in here. Also, if I want an item in the list to link to a frame or URL how to I do that?
Thanks!
I am just developing for iOS currently and wondering how to get rid of the StageOrientationEvent error? Just comment out until no erros? Is there a version for the iOS/Flash CS5? Thank you for this code and your help.
Hi Mister,
Thanks for posting this code here. I’m trying to create an alarm clock app similar to iPhone default. Its for a school project. I’m not very good in programming, still learning, therefore I would appreciate if you could advise me on some questions I have.
1) Does the code you provided work in Flash CS5? I’m getting some errors, which I believe is because the .fla only works in Adobe AIR?
2) Is there a way to call the iphone keyboard input menu from Flash ? I’ve been searching for days, but it seems that nobody uses Flash cs5 to call the keyboard input buttons on the iPhone.
I don’t really want to start on Xcode because there will be no one I know who can help if anything goes wrong. Please advise, I’d really appreciate it. Thanks.
@Lawrs
This is a CS5 Flash Professional project, you should be able to open the Flash file in CS5 and make sure you have Android settings. You could alternatively create a new Flash Android/iOS project and point the Document class to the class file.
Take a look at the AIR 2.6 SDK, that will provide you with information for what’s available or not when creating an iOS/Android AS3 project. You will need to be familiar with those API’s in order to talk to the keyboard on the mobile device.
I am having trouble with a basic issue. I can run the class by putting AS3RecycleList in the Document class however if I try to instantiate it via
[as]
import com.thanksmister.touchlist.as3original.*;
var myList:AS3RecycleList = new AS3RecycleList;
addChild (myList);
[/as]
I get runtime errors. Any help would be greatly appreciated.
@Kracker
You wouldn’t add AS3ReycleList class, you would add the TouchList class. AS3RecycleList is the document class or root project classe and demonstrates how to add the TouchList to the stage and use it.
Thank you for you help I got it working!!! Cheers
I am looking for a horizontal scrolling list, like the one that iOS has (the closest I have found is http://activeden.net/item/mouse-touchscroll-mobile-like-scrolling/154033)
Do you think we could have something like this based on the vertical scrolling list you have?
What parameter would I adjust to keep lowercase letters such as j and y from getting cutoff. I have tried every combination I could think of.Thank you
Thanks for posting the code
Hi Mr!
great component.. but i have some problem with ListItemEvent.ITEM_SELECTED. it’s not dispatched…
never mind i realized now what tapDelayTime is..
Is there any way I can use a movie clip in my library for item.data in AS3ScrollingList.as? That’d be awesome. Here’s what I’m trying to do (right after the for loop that creates all “This is list item #”)…
var redBox:RedBox = new RedBox();
item.index = 50;
item.data = redBox;
item.itemHeight = 210;
touchList.addListItem(item);
With that code, it shows up as “[object RedBox]” at the bottom of my list instead of showing the actual movie clip. Help is much appreciated!
Great job with this project! And, of course, Thanks, Mister!
Figured it out. Sort of a hack but it works for my case. I just have my whole app in one movie clip and want it to scroll smoothly for the varying length of screens. In the set data method, I just took out the draw function, added an instance of my movie clip from the library, and called addChild. If anyone else would like to do the same, just let me know and I detail it if need be.
Hi Great component.
Question – is it possible to select an item in code.
In the standard android list control you’d use something like
List.selectedIndex = 14;
and this would select the item that matched that index?
many thanks
Ian
You would have to add that method to the class file, but it would be possible to select any item in the list by index if that index and item existed. Just check out the Github repository or feel free to branch it and add the new method to your branch.
Great stuff, I have one question, can I use all the standard methods which are usually in list components? Did you extend the standard list component in any way?
Greetings,
Gerard
This is a completely custom list, it’s not using any “standard” list components.
HI,
Iv’e implemented the control works great for single use.
However iv’e come to a snag on recycling the control.
that is I populate the dataprovider with an array of say 10 items.
addchild – wondeful.
but when i want to use the same instance of the control again and populate it with 20 items.
Only the first 10 of the new items appear.
I am using the removeAllListItems();
to reset the control before re-populating.
What am I doing wrong or is there a flag I need to set to make it work?
Thanks
Ian
Hmm… maybe the list sprite inside TouchList.as isn’t resizing properly after the children are removed? In the removeListItems(), try resetting these values after the list is cleared. If that doesn’t work, then just remove the instance of the scrolling list and add a new instance to the display. Not ideal, but last resort.
list
listHeight
listWidth
Also, to be sure, are you using the latest GitHub code? In the repository on GitHub there is no removeAllListItems() method in TouchList.as.
This is great, I definitely plan on using this. One thing I am noticing on my control is the text is cut off. but only lower case letters like ‘jgp’ as the bottoms seem to get chopped off. Any thoughts on how to fix this?
The list is meant for you to customize the look of your list items. Try to make your own list renderer or edit the example to adjust the text
I have been trying all day to get this working right but I cannot seem to figure it out. I am trying to:
- Load list – works great
- Populate List from array/SQL – no problem there
- Select Item From list – capturing event no prob
- Handle the list event and kill the list – cannot kill the event or remove the list items without a runtime error. Removing it using RemoveChild also generates errors. What is the best way to scrap the list? Any feedback or help would be greatly appreciated.
The list comes with a remove items method. I can’t help if removing the list from the display with removechild bards, that is entirely driven by the way you add sprites to your display. I can only recommended that you examine your code again and be sure to use the latest github repository. Be sure to go through the code to find all the public methods.
Thanks. I figured it all out! This is pretty awesome.
can you tell us what do you do to remove items from the list whitout runtime errors.
i always get this error.
Error: Error #2094: Event dispatch recursion overflow.
at flash.display::DisplayObjectContainer/removeChild()
when call the touchList.removeListItems();
thnaks.
I love this, works like a charm. However speed is not that great i think, even on android (at least on a Desire HD). Has anyone tried to change the Timer for an ENTER_FRAME solution? Combined with bitmaps instead of using the graphics API, and maybe even bitmap text rendering if you use text in your scrollable items? I’d very like to know this for deciding on wether or not to use the TouchList :> Thanks Mister
I had it on enter frame, the timer just worked better. The ideas for speeding up graphics are valid and worth a try. However, this list doesn’t recycle its children, so it renders the entire list. Performance will go down as the number of objects increase.
Hi
Thanks VERY much for all your hard work on this item and for making it available.
I have played around with it and even managed to add my own items to the list. I have also managed to play around with the font and font size in the list.
The only problem I have encountered, (hope it hasnt already been answered cause then I am just wasting your time), is the following;
If My list consists of names, for example,
John, Edgar, Paul …….
The tail of the “g” in Edgar keeps getting chopped off. I have played around with changing item height or font size but it still happens. I suspect the text is inside a frame of some sort and the tail is being chopped because it underhangs the bottom of the frame but I could be wrong.
Any ideas where I can fix this?
Thanks again.
Paul
Hi, I.m totally new to this.
Is there any of your examples having a similar scroll for contents of a movie clip ?
Like a vertical scroll for a movie clip menu
thanxx aloot and alooot mister for that ^_^
excuse me , can u tell me in the project u give us , how i can make orders for each one of buttons to do something?
for example if i wanna to let the first one to go to to the frame 10 for example , the code will be :
button_1.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndPlayFromFrame);
function fl_ClickToGoToAndPlayFromFrame(event:MouseEvent):void
{
gotoAndPlay(5);
}
but how can i put it in and put others for each of buttons
i hope u help meee dearrrr ^ ^
and so sooo thanx about that
sorry i mean
gotoAndPlay(10);