Question

I want to if it is possible to scroll a tileList without showing the scroll bars, and by clicking a right or left arrow

Thanks in advance

Answer 1

Yes, it possible:

var tileList:TileList = addChild(new TileList()) as TileList;
tileList.setSize(500,50);
tileList.dataProvider = dp;//assumes there's already a DataProvider instance ready

tileList.scrollPolicy = ScrollPolicy.OFF;//' without showing the scroll bars'
stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPressed);// right or left arrow
function onKeyPressed(event:KeyboardEvent):void{
    if(event.keyCode == Keyboard.LEFT)  tileList.horizontalScrollPosition -=10;
    if(event.keyCode == Keyboard.RIGHT) tileList.horizontalScrollPosition +=10;
}

You can use your own arrow clips and mouse events instead of keyboard, but the logic is the same. Notice that the tileList in my example is 500×50, hence horizontalScrollPosition, use verticalScrollPosition for the vertical aspect ratio. Also, currently the scroll size is 10, but it will probably depend on the size of each rendered cell/speed, etc.

Another option is to use the scrollToIndex() method:

var tileList:TileList = addChild(new TileList()) as TileList;
tileList.setSize(500,50);
tileList.dataProvider = dp;
var index:int = 0;//scroll index
var total:int = tileList.dataProvider.length;

tileList.scrollPolicy = ScrollPolicy.OFF;
stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPressed);
function onKeyPressed(event:KeyboardEvent):void{
    if(event.keyCode == Keyboard.LEFT)  index--;
    if(event.keyCode == Keyboard.RIGHT) index++;
    if(index < 0    ) index = total-1;//loop to last
    if(index > total) index = 0;//loop to first
    tileList.scrollToIndex(si);
    trace('scroll index:',si);
}

Also, you might find the Carousel component from the Yahoo! Astra components set useful as it sound like your description and it’s compatible with Flash’s V3 components (e.g. uses the same data provider( fl.data.DataProvider ), etc.):

and here’s their sample snippet:

var carouselData:Array =  
[  
    { label: "Ayers Rock", source: "uluru.jpg" },  
    { label: "Kata Tjuta", source: "katatjuta.jpg" },  
    { label: "Moraine", source: "morraine.jpg" },  
    { label: "Museum", source: "museum.jpg" },  
    { label: "Japan", source: "japan.jpg" },  
    { label: "YUI", source: "yui.jpg" }  
];  

var carousel:Carousel = new Carousel();  

carousel.dataProvider = new DataProvider( carouselData );  
carousel.labelField = "label";  
carousel.sourceField = "source";  

carousel.move( 54, 45 );  
carousel.setSize( 302, 102 );  
this.addChild( carousel );