How can I use buttons to navigate through a tilelist in flash AS3.0?

Question

I have a photo gallery using the TileList and the UILoader. It works perfectly fine. When I click the thumbnail in the TileList, the whole picture shows up in the UILoader, but I am trying to add next and previous buttons to it and be able to navigate through the pictures. I am just not sure how to create functions/write code to be able to do this. Do I need to use a loop? Is this possible?? I have searched through Google and could not find an answer. I did find [this][1] something close but there is no code provided and that question is for Flex.

Here is my code so far:

import flash.display.Loader;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.events.MouseEvent;
import fl.data.DataProvider;
import fl.controls.TileList;
import fl.controls.ScrollBarDirection;
import fl.transitions.Tween;
import fl.transitions.easing.None;

var XMLgallery:XML = <items>        
        <item source="img/DSC_0.jpg" />
        <item source="img/DSC_1.jpg" />
        <item source="img/DSC_2.jpg" />
        <item source="img/DSC_3.jpg" />
        <item source="img/DSC_4.jpg" />
        <item source="img/DSC_5.jpg" />
        <item source="img/DSC_6.jpg" />
        <item source="img/DSC_7.jpg" />
        <item source="img/DSC_8.jpg" />
        <item source="img/DSC_9.jpg" />
        <item source="img/DSC_10.jpg" />
        <item source="img/DSC_11.jpg" />
        <item source="img/DSC_12.jpg" />
        <item source="img/DSC_13.jpg" />
        <item source="img/DSC_14.jpg" />
        <item source="img/DSC_15.jpg" />
    </items>;
tileList.dataProvider = new DataProvider(XMLgallery);
tileList.setSize(795, 130);
tileList.columnWidth = 195;
tileList.rowHeight = 130;
tileList.direction = ScrollBarDirection.HORIZONTAL;
tileList.addEventListener(Event.CHANGE, imageChanger);
progressBar.visible = false;

mainLoader.load(new URLRequest("img/DSC_0.jpg"));

function imageChanger(event:Event):void{
    progressBar.visible = true;
    mainLoader.source = tileList.selectedItem.source;
    var myTween:Tween = new Tween(mainLoader, "alpha", None.easeNone,.3,1,18,false);
}

mainLoader.addEventListener(Event.COMPLETE, completeHandler);

function completeHandler(event:Event):void{
    progressBar.visible = false;
}
prev_mc.addEventListener(MouseEvent.CLICK, prevF);
next_mc.addEventListener(MouseEvent.CLICK, nextF);

Answer 1

You have to use the selectedIndex property of the TileList class, just retrieve which is the current index of the selected picture and increase/decrease it by one in your next/prev functions.

You will also need some logic to disable the prev button when the first picture is selected, and disable the next button when the last picture is selected, and enable them both when necessary.

Something like this should work:

function prevF(e:Event):void
{
  if(tileList.selectedIndex >0)
  {
    tileList.selectedIndex = tileList.selectedIndex-1;

    //trigger image change
    //(no event is dispatched on selectedIndex set)
    imageChanger(null);

    //reenable next button
    next_mc.enabled=true;
  }

  //disable prev button if first
  if(tileList.selectedIndex==0)
  {
    prev_mc.enabled=false;
  }
}

function prevF(e:Event):void
{
  if(tileList.selectedIndex < (tileList.length-1))
  {
    tileList.selectedIndex = tileList.selectedIndex+1;

    //trigger image change
    //(no event is dispatched on selectedIndex set)
    imageChanger(null);

    //reenable prev button
    prev_mc.enabled=true;
  }

  //disable next button if last
  if(tileList.selectedIndex==(tileList.length-1))
  {
    next_mc.enabled=false;
  }
}

Hope this helps!