Creating a Dynamic List with scrollbar in Flash Lite

From Forum Nokia Wiki

Reviewer Approved

Introduction

Flash Lite developers do not have the privilege to make use of ready made components available to the Desktop version of Flash. One such interesting component is a list component and grid component. This article will demonstrate how to create a dynamic list and associating a picture with each list item. A scrollbar is used to show the tracking of list items as well. This article is targeted to audience possessing intermediate knowledge of Flash

Setting up the Stage

We shall create one list item and duplicate it to create multiple instances of the same movie clip however naming it like this(list_0,list_1,list_2,list_3). We also shall place 4 Image place holders on the stage in similar manner. A scrollbar is manually created in the most simplistic way one can imagine and requires no explanation. refer to the attached source file.

For demonstration purposes an array of 12 elements is created within the code along with 12 images which exist in the library. Every image uses a linkage identifier to associate it with the corresponding list item.

Setup initial parameters

Determine Scrollbar length
Divide scrollbar length over total items to determine the move value
Highlight the first List item on the stage
Set the initial values for the list items on the stage from the Items array
Set up the images for list items

CODE

var maxLength:Number;
var moveValue:Number;
var maxItems:Number;
var select:Number;
var Items:Array;
var myKeyListener:Object; 
 
 
//Call Init Function
Init();
 
function Init()
{   
   //Define a List title names Array
   Items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8", "Item 9", "Item 10", "Item 11","Item 12"];
   //Setting parameters for the Scroll bar
   maxLength= scrollBar_mc.track_mc._height;
   //Initializing parameters
 
   maxItems = Items.length;
   moveValue = maxLength / maxItems;
   select = 1;//List 1 is initially selected
 
   //setup titles & pictures for the first four list items on the screen
   list_0.title = Items[3];
   //id - LinkageName, name - unique name, target depth on the stage
   img3.attachMovie(Items[3], Items[3], 100); 
   list_1.title = Items[0];
   img2.attachMovie(Items[2], Items[2], 100);
   list_2.title = Items[1];
   img1.attachMovie(Items[1], Items[1], 100);
   list_3.title = Items[2];
   img0.attachMovie(Items[0], Items[0], 100);
   _root["list_" + select].gotoAndStop(2);
 
    //Assigning Key Listener
    myKeyListener = new Object();
    Key.addListener(myKeyListener);
    myKeyListener.onKeyUp = onKeyMainMenu;
}

Creating a Key Listener

Now a developer has to worry about smooth transitions from one list item to another. this will be achieved with the help of following actionscript.

CODE

var myKeyListener:Object; 
//Assigning Key Listener
myKeyListener = new Object();
Key.addListener(myKeyListener);
myKeyListener.onKeyUp = onKeyMainMenu;
 
function onKeyMainMenu()
{
var key = Key.getCode();
if (key == Key.DOWN) //DOWN Key is pressed
 {
   if (select < maxItems) 
   {
      //remove focus from the current list item
      _root["list_" + select % 4].gotoAndStop(1);
      //update the scrollbar
      setProperty("/scrollBar_mc/thumb_mc", _y, getProperty("/scrollBar_mc/thumb_mc", _y) + moveValue);
      //increment the select counter
      select = select + 1;
      if (select % 4 == 1)
      {
         //update titles when a screen change occurs
         list_1.title = Items[select - 1];
         list_2.title = Items[select];
	 list_3.title = Items[select + 1];
         list_0.title = Items[select + 2];
 
         //update pictures for the next page's list items
	 img0.attachMovie(Items[select - 1], Items[select - 1], 100);
         img1.attachMovie(Items[select]    , Items[select],     100);
         img2.attachMovie(Items[select + 1], Items[select + 1], 100);
         img3.attachMovie(Items[select + 2], Items[select + 2], 100);
       } // end if
 
       //Highlight next list item 
       _root["list_" + select % 4].gotoAndStop(2);
    } // end if
 } // end if
 if (key == Key.UP)  //UP Key is pressed
 {
  if (select > 1)
  {
    _root["list_" + select % 4].gotoAndStop(1);
    select = select - 1;
    setProperty("/scrollBar_mc/thumb_mc", _y, getProperty("/scrollBar_mc/thumb_mc", _y) - moveValue);
    if (select % 4 == 0)
    {
      list_0.title = Items[select - 1];
      list_3.title = Items[select - 2];
      list_2.title = Items[select - 3];
      list_1.title = Items[select - 4];
 
      img3.attachMovie(Items[select - 1], Items[select - 1], 350);              
      img2.attachMovie(Items[select - 2], Items[select - 2], 350);
      img1.attachMovie(Items[select - 3], Items[select - 3], 350);
      img0.attachMovie(Items[select - 4], Items[select - 4], 350);
      } // end if
      _root["list_" + select % 4].gotoAndStop(2);
     } // end if
  } // end if
} // End of the function

Final Output

Here is what final output will look like.

Download

The download includes full source code for the project.

Download : Media:DynamicList&ScrollBar.zip

--Raheal akh 01:48, 22 May 2008 (EEST) RAHEAL AKHTAR

Community: Wiki