×
Namespaces

Variants
Actions

Archived:Creating a Dynamic List with scrollbar in Flash Lite

From Nokia Developer Wiki
Jump to: navigation, search

Archived.pngArchived: This article is archived because it is not considered relevant for third-party developers creating commercial solutions today. If you think this article is still relevant, let us know by adding the template {{ReviewForRemovalFromArchive|user=~~~~|write your reason here}}.

We do not recommend Flash Lite development on current Nokia devices, and all Flash Lite articles on this wiki have been archived. Flash Lite has been removed from all Nokia Asha and recent Series 40 devices and has limited support on Symbian. Specific information for Nokia Belle is available in Flash Lite on Nokia Browser for Symbian. Specific information for OLD Series 40 and Symbian devices is available in the Flash Lite Developers Library.

Article Metadata
Code ExampleArticle
Created: raheal_akh (21 May 2008)
Last edited: hamishwillee (14 May 2013)


Contents

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.

DynamicList&ScrollBar.jpg

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.

FinalOutput.jpg


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

This page was last modified on 14 May 2013, at 09:06.
99 page views in the last 30 days.