Mobile and Devices Developer Center

Building an external XML-driven photo gallery in Flash Lite 2.0

In this article, I discuss how to build an external XML-driven photo gallery in Flash Lite 2.0 (see Figure 1). The focus of this tutorial is primarily on creating the dynamic list that can load multiple numbers of thumbnails and some text, along with some value assigned to each of these text to be manipulated at the runtime.

Figure 1. Final application

Requirements

To complete this tutorial you'll need to install the following software and have access to a Flash Lite 2.0–enabled mobile device:

Flash Professional 8 (with the appropriate device profile update)

• Try
• Buy

Sample files:

• xml_list.zip (ZIP, 201K)

Examining the application

The basic elements of this application are as follows:

• List with four tabs where each tab has two fields to display the title of the image and related data—which in this case is the date when the photo was taken
• Scrollbar that gives the impression to the user how much is left in the list to scroll through
• Image loader movie clip that simply loads a photo depending upon the item chosen from the list

The project contains three folders to keep data source and assets, which you can get from the sample files linked to above. The photo folder has eight images which have their respective thumbnails (to be displayed in the list) present in the thumbnail folder. The details of these images are listed in the XML file named xmllist.xml in the folder named xml (see Figure 2).

Figure 2. Files for this project

The XML file structure for the project is a very simple XML file (see Figure 3) where each node has three attributes, namely labelname that will be the title of the image, date that is another text value I wish to display in the list, and itemvalue, which is a value I wish to attach to each of the images to be manipulated in the Flash application.

Figure 3. XML file structure for the project

Building the application

Open xmllist.fla. You will see that there are two frames in the _root timeline. In the first frame there is the list that will load the data from the external XML file. In the second frame an image, a loader movie clip will load the image selected through the list.

Next open the ActionScript panel in frame 1. Here you will find the ActionScript 2.0 code required to make the list come alive:

stop();

I need this so that the movie will stop at the first frame.

Now I use the following fscommand2 command to make the screen stretch to fit the screen. After all, I need all the space there is available on the mobile screen for my use!

fscommand2("FullScreen", true);

As you saw in the XML file, there are three attributes for each node. So I need to create three arrays to keep each of these nodes. Moreover, in the list I need to point to any particular nodes of the XML so that for that node, I can display the related three attributes. So I need another array to store the node values. This means I need four arrays to store all the data available in the XML file. Here they are:

var listArray:Array = new Array();
var photos:Array = new Array();
var labelname:Array = new Array();
var date:Array = new Array();

The next task is to load the XML file and populate these arrays with the required values. Here is the ActionScript code that does that:

var xmlFile:XML = new XML();
xmlFile.ignoreWhite = true;
xmlFile.load("xml/imagelist.xml");

xmlFile.onLoad = function(success) {
    
     listArray = this.firstChild.childNodes;
    for (i=0; i<listArray.length; i++) {
        photos.push(listArray[i].attributes.itemvalue);
        labelname.push(listArray[i].attributes.labelname);
        date.push(listArray[i].attributes.date);
    }

setListValues();


};

Here I have used a for loop to look for all nodes in the XML files and push these values to corresponding arrays. You can see the setListValues(); function inside the onLoad function of the XML file in the above script. This function will display the values for the first four tabs in the list.

Here is the code that defines setListValues(); function:

function setListValues(){

//set the active tab
    
    moveValue = (maxLength/(photos.length));
    select = 1;
    list1.gotoAndStop(2);
    
    //load first four tumbnails of the  tabs
    
    loadMovie("thumbnails/rose_thumb_"+photos[0]+".gif", "box1");
    loadMovie("thumbnails/rose_thumb_"+photos[1]+".gif", "box2");
    loadMovie("thumbnails/rose_thumb_"+photos[2]+".gif", "box3");
    loadMovie("thumbnails/rose_thumb_"+photos[3]+".gif", "box4");
    
    
    
//Set initial text filed values of each tab
    
    list1.labelnameValue = labelname[0];
    list1.dateValue = date[0];
    
    
    list2.labelnameValue = labelname[1];
    list2.dateValue = date[1];
    
    list3.labelnameValue = labelname[2];
    list3.dateValue = date[2];
    
    list0.labelnameValue = labelname[3];
    list0.dateValue = date[3];
    
// Set initial values for _root timeline variables
    
    _root.labelnameValue = labelname[0];
    _root.dateValue = date[0];
    _root.activeItemValue = photos[0];

There are four tabs of the list (four copies of the movie clip, each representing a tab of the list) on the stage with instance names list1, list2, list3, and list0.

In each tab movie clip, there are two frames: the default frame representing the default unselected tab state and the second frame displaying the state of the tab (in a light shade of green) when a user selects it (see Figure 4).

Figure 4. State of the tab in a light shade of green when a user selects it

In each frame there are two dynamic text fields. The first one is linked with the variable labelnameValue and the second one is linked to dateValue (see Figure 5).

Figure 5. Two dynamic text fields in each tab

In the layer named imageloader in the _root timeline, there are four copies of the movie clip over the four tabs where the thumbnails will be loaded. These thumbnail loaders are given the following instance names: box1, box2, box3, and box4 (see Figure 6).

Figure 6. Thumbnail loaders

The reason why I have named the instance of the fourth tab list0 is as follows. I wish to display the whole list using only four tabs. At the same time, I wish to highlight the selected tab when user moves to it using the device's Up or Down keys.

For example, if the user presses the Down arrow when at the first tab, the second tab from the top will be highlighted (see Figure 7). Pressing the Down arrow again highlights the third tab; pressing it again highlights the fourth tab.

Figure 7. Pressing the Down key when any of the first three tabs is already selected highlights the next tab (list shows the same values)

But now when the user is at the fourth tab and presses the Down key, the highlight should move to the first tab and, at the same time, the values of the four tabs should move to the next four values of the respective arrays (see Figure 8).

Figure 8. Pressing the Down key when the fourth tab is already selected results in the first tab being highlighted (list displays the next set of values from the array)

You can achieve this by taking the modulo value of the position number of the data from the array.

For this I have taken a variable select, which will act as a counter and set the initial value at 1. When either the Up or Down key is pressed, this counter value increases or decreases by 1, respectively. Now you can see that whenever the value of the select is either 4 or any multiple value of 4, the value of (select % 4) will be 1.

Controlling the navigation of the list will be as follows, which is assigned to a generic button in the layer named Button control, which I placed outside the stage:

on (keyPress "<Down>") {
    if (select<photos.length) {
        _root["list"+select%4].gotoAndStop(1);
        setProperty("scrollBar_mc/thumb_mc", _y, getProperty("scrollBar_mc/thumb_mc", _y)+moveValue);
        _root.select = select+1;
        //trace(select);
        //trace("thumbnails/"+photos[select-1]+"")
        if ((select%4) == 1) {
            loadMovie("thumbnails/rose_thumb_"+photos[select-1]+".gif", "box1");
            list1.labelnameValue = labelname[select-1];
            list1.dateValue = date[select-1];
            loadMovie("thumbnails/rose_thumb_"+photos[select]+".gif", "box2");
            list2.labelnameValue = labelname[select];
            list2.dateValue = date[select];
            loadMovie("thumbnails/rose_thumb_"+photos[select+1]+".gif", "box3");
            list3.labelnameValue = labelname[select+1];
            list3.dateValue = date[select+1];
            loadMovie("thumbnails/rose_thumb_"+photos[select+2]+".gif", "box4");
            list0.labelnameValue = labelname[select+2];
            list0.dateValue = date[select+2];
        }
        _root["list"+select%4].gotoAndStop(2);
    }
    _root.labelnameValue = labelname[select-1];
    _root.dateValue = date[select-1];
    _root.activeItemValue = photos[select-1];
}
on (keyPress "<Up>") {
    if (select>1) {
        _root["list"+select%4].gotoAndStop(1);
        _root.select = select-1;
        //trace(select);
        setProperty("scrollBar_mc/thumb_mc", _y, getProperty("scrollBar_mc/thumb_mc", _y)-moveValue);
        if ((select%4) == 0) {
            loadMovie("thumbnails/rose_thumb_"+photos[select-1]+".gif", "box4");
            list0.labelnameValue = labelname[select-1];
            list0.dateValue = date[select-1];
            loadMovie("thumbnails/rose_thumb_"+photos[select-2]+".gif", "box3");
            list3.labelnameValue = labelname[select-2];
            list3.dateValue = date[select-2];
            loadMovie("thumbnails/rose_thumb_"+photos[select-3]+".gif", "box2");
            list2.labelnameValue = labelname[select-3];
            list2.dateValue = date[select-3];
            loadMovie("thumbnails/rose_thumb_"+photos[select-4]+".gif", "box1");
            list1.labelnameValue = labelname[select-4];
            list1.dateValue = date[select-4];
        }
        _root.labelnameValue = labelname[select-1];
        _root.dateValue = date[select-1];
        _root.activeItemValue = photos[select-1];
        _root["list"+select%4].gotoAndStop(2);
    }
}
on (keyPress "<Enter>") {
    _root.gotoAndStop(2);
}

As you can see in Figure 9, when the user moves to frame 2 in the _root timeline by pressing the Enter key, there is an image loader movie clip in frame 2, with the instance name imageLoader; above it are two text fields linked to variables, _root.labelnameValue and _root.dateValue, to display the title of the image.

Figure 9. Application shell

Now you have created an easy-to-use, external-data–driven photo gallery in Flash Lite 2.0 that you can use for many purposes.

Where to go from here

Read Foundation XML for Flash by Sas Jacobs (Friends of ED Publishers, 2005) to improve your knowledge in XML parsing so you can create more dynamic, complex applications in Flash Lite 2.0.

About the author