You Are Here:

Community: Wiki

This page was last modified on 5 September 2009, at 06:20.

Creating a Dynamic List with scrollbar in Flash Lite

From Forum Nokia Wiki

Reviewer Approved   

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.

Image: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.

Image: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

Related Wiki Articles

No related wiki articles found

Rate This

 
Bookmark this page: DeliciousDiggFacebookGoogleYahooStumbleUponRedditDiigoTechnocratiTwitter  Share this page Share this page Print this Page Print this page Invite a friend Invite a friend
京ICP备05048969号    Email Newsletters Press Terms & Conditions Privacy Policy Sitemap Contact Us © 2009 Nokia 
RDF Facets: qdcZdescriptionQSxEa0E20WikiE20javaE20symbianE5fosE20s60E20maemoE20cE2bE2bE20WikiE20HomeE20WikiE20HelpE20OverviewE20GlossaryE20CreateE20PageE20ProposeE20anE20ArticleE20SpotlightE20TopicE20E2dE20WE52TE20WidgetsE20ProgrammingE20E4canguageE20E2dE20SymbianE20CE2bE2bE20E2dE20OpenE20CE2fCE2bE2bE20E2dE20JavaE20E2dE20FlashE20E4citeE20E2dE20PythonE20WebE20TechnologiesE20E2dE20WE52TE20WidgetsE20E2dE20WidSetsE20ToolsE20andE20SE44KE20CodeE20E45E78amplesE20KnowledgeE20BaseE20TechnologyE20AreasE20SoftwareE20PlatformsE20E44evelopmentE20ProcessE20E3fE3fWikiE20ChineseE20E3fE3fE3fWikiE20JapaneseE20PortugueseE2fBrazilianE20E52ussianE20WhatE20linksE20hereE20UploadE20fileE20SpecialE20pagesE20PrintableE20versionE44ownloadE20asE20PE44FE20GoE20ToE20E2eE2eE2eX qdcZidentifierQSxhttpE3aE2fE2fwikiE2eforumE2enokiaE2ecomE2findeE78E2ephpE2fIntroductionE5ftoE5ffscommandsX qdcZpublisherQUxhttpE3aE2fE2fswE2enokiaE2ecomE2fidE2fc764fd1cE2d8b06E2d499aE2d9a6aE2d17c3903d5a65E2fforumE5fnokiaE5fcrawlerE5fagentX qdcZtitleQSxIntroductionE20toE20fscommandsE20E2dE20ForumE20NokiaE20WikiX qdcZtypeQUqfnZE45E78cludedFromGeneralE4cistingsQ qdcZtypeQUqfntypeZCommunityContentQ qdcZtypeQUqfntypeZE52esourceQ qdcZtypeQUqfntypeZWebpageQ qdcZtypeQUqfntypeZWikiContentQ qdcZtypeQUqmarsZManagedE52esourceQ qdcZtypeQUqwebZInformationE52esourceQ qdcZtypeQUqwebZPageQ qdcZtypeQUqwebZE52esourceQ qdcZtypeQUqrdfsZE52esourceQ qrssZdescriptionQSxEa0E20WikiE20javaE20symbianE5fosE20s60E20maemoE20cE2bE2bE20WikiE20HomeE20WikiE20HelpE20OverviewE20GlossaryE20CreateE20PageE20ProposeE20anE20ArticleE20SpotlightE20TopicE20E2dE20WE52TE20WidgetsE20ProgrammingE20E4canguageE20E2dE20SymbianE20CE2bE2bE20E2dE20OpenE20CE2fCE2bE2bE20E2dE20JavaE20E2dE20FlashE20E4citeE20E2dE20PythonE20WebE20TechnologiesE20E2dE20WE52TE20WidgetsE20E2dE20WidSetsE20ToolsE20andE20SE44KE20CodeE20E45E78amplesE20KnowledgeE20BaseE20TechnologyE20AreasE20SoftwareE20PlatformsE20E44evelopmentE20ProcessE20E3fE3fWikiE20ChineseE20E3fE3fE3fWikiE20JapaneseE20PortugueseE2fBrazilianE20E52ussianE20WhatE20linksE20hereE20UploadE20fileE20SpecialE20pagesE20PrintableE20versionE44ownloadE20asE20PE44FE20GoE20ToE20E2eE2eE2eX qfnZdistributionQUxhttpE3aE2fE2fwikiE2eforumE2enokiaE2ecomE2fX qfnZtopicQUqfnTopicZflashQRqmarsZrelevanceQNx100X qfnZtopicQUqfnTopicZflashE5fliteQRqdcZtypeQUqrdfsZE52esourceQRqmarsZrelevanceQNx100X qfnZtypeQUqfntypeZCommunityContentQ qfnZtypeQUqfntypeZE52esourceQ qfnZtypeQUqfntypeZWebpageQ qfnZtypeQUqfntypeZWikiContentQ qfnZupdatedQDx2008E2d10E2d03X qfnZuserE5ftagQSxflashX qfnZuserE5ftagQSxflashE2dliteX qmarsZdescriptionQSxEa0E20WikiE20javaE20symbianE5fosE20s60E20maemoE20cE2bE2bE20WikiE20HomeE20WikiE20HelpE20OverviewE20GlossaryE20CreateE20PageE20ProposeE20anE20ArticleE20SpotlightE20TopicE20E2dE20WE52TE20WidgetsE20ProgrammingE20E4canguageE20E2dE20SymbianE20CE2bE2bE20E2dE20OpenE20CE2fCE2bE2bE20E2dE20JavaE20E2dE20FlashE20E4citeE20E2dE20PythonE20WebE20TechnologiesE20E2dE20WE52TE20WidgetsE20E2dE20WidSetsE20ToolsE20andE20SE44KE20CodeE20E45E78amplesE20KnowledgeE20BaseE20TechnologyE20AreasE20SoftwareE20PlatformsE20E44evelopmentE20ProcessE20E3fE3fWikiE20ChineseE20E3fE3fE3fWikiE20JapaneseE20PortugueseE2fBrazilianE20E52ussianE20WhatE20linksE20hereE20UploadE20fileE20SpecialE20pagesE20PrintableE20versionE44ownloadE20asE20PE44FE20GoE20ToE20E2eE2eE2eX qmarsZlanguageQUxhttpE3aE2fE2fswE2enokiaE2ecomE2flanguageE2d1E2fenX qrdfZtypeQUqfnZE45E78cludedFromGeneralE4cistingsQ qrdfZtypeQUqfntypeZCommunityContentQ qrdfZtypeQUqfntypeZE52esourceQ qrdfZtypeQUqfntypeZWebpageQ qrdfZtypeQUqfntypeZWikiContentQ qrdfZtypeQUqmarsZManagedE52esourceQ qrdfZtypeQUqwebZInformationE52esourceQ qrdfZtypeQUqwebZPageQ qrdfZtypeQUqwebZE52esourceQ qrdfZtypeQUqrdfsZE52esourceQ