You Are Here:

Community: Blogs

Giorgio Natili's Forum Nokia Blog

[Flash Lite 1.1 scrolling menu]

gioorgionatili | 21 April, 2008 12:55

One of the most common stuff with Flash Lite is to create menus that can work also with the small screen of the mobile devices.
One solution is to scroll the content of the menu horizontally or vertically in order to show all the icons and / or all the text.
In this post we’ll try to explore the building blocks of an horizontal menu composed by a sequence of icons that react to the LEFT or to the RIGHT key pressure and that shows an enlarged version of the selected icon (fig 1).

 
fig. 1

Each menu icon is a movie clip with two key frames, in the first one is contained the normal status , in the second one is contained the enlarged status (fig. 2).


fig. 2

The main timeline is very simple, it contains a button used in order to handle the key pressure, an instance of the menu and the ActionScript you need to put the application in full screen.
The menu instance’s name is menuContainer_mc, in the script placed on the button we’ll refer to this name in order to control the menu

on(keyPress "<Left>") { 
 tellTarget("menuContainer_mc"){  
  gotoAndPlay("left");  
 } 
}
on(keyPress "<Right>") { 
 tellTarget("menuContainer_mc"){  
  gotoAndPlay("right");  
 }
}


The menu contains in its timeline four labels used in order to keep well organized and separated the code you need (fig. 3).


fig. 3

The init frame initialize the menu, set to invisible the selected icon and enlarge the icon that represent the selected icon

item = 1;
item_total = 6;
item_skip = 3;
move_value = .4;
move_increment = 48;
current_position = _x;
// enlarge first icon
duplicateMovieClip("item_" add item, "enlarged_" add item, 10);
setProperty("item_" add item, _visible, false);
// Move the enlarged icon to the second frame
tellTarget ("enlarged_" add item) {
 gotoAndStop(2);
}

Each time you call the “left” and “right” key frames after the calculation needed in order to select the right icon the menu will handle the visibility of the selected icon, the _x property of the item of the menu that has to be selected and calls the functions script

setProperty("item_" add item, _visible, true);
// Control the _x
setProperty("item_" add next_item, _x, getProperty("item_" add item, _x) + move_increment * item_skip);
// perform various functions
call ("Functions");

The frames contained after the “left” and the “right” labels perform a loop with which you handle the position of the icons container

if ( _x <= destination + 1) { 
 _x = destination;
 gotoAndStop("Pause"); 
} else { 
  _x = _x + Math.round(move_value * (destination - _x));
}

When the destination is reached the Pause key frame is called, in this frame the selected icon is handled and the menu is ready to react again to the user input

// enlarge selected icon
duplicateMovieClip("item_" add item, "enlarged_" add item, 10);
setProperty("item_" add item, _visible, false);
tellTarget ("enlarged_" add item) { 
 gotoAndStop(2);
}

These are the building block of a scrollable menu with Flash Lite 1.1, if you need more details please contact me, I’ll be happy to explain in more details the content of this post.

RSSComments

Re: [Flash Lite 1.1 scrolling menu]

chall3ng3r | 21/04/2008, 16:46

chall3ng3r

Hi,

Nice post. I have used similar techniques for my FL projects.

One more small trick with gotoAndPlay/stop also saves couple of lines of code. Read it at my blog http://blogs.forum.nokia.com/blog/faisal-iqbals-forum-nokia-blog/tipsn-tricks/2008/02/19/flash-lite-effectively-using-gotoandplay-gotoandstop

best,

// chall3ng3r //

Re: [Flash Lite 1.1 scrolling menu]

gioorgionatili | 22/04/2008, 07:39

gioorgionatili

Hi,

Thanks for your comment and thanks for linking your tricks, they may help users to create better applications!

Re: [Flash Lite 1.1 scrolling menu]

treevivek | 22/04/2008, 08:00

nice article :)

Re: [Flash Lite 1.1 scrolling menu]

jraydan | 05/05/2008, 12:43

Hello.

Great info you have here, but I have a question in how to expand this.

I am generating a list of movieclips with duplicateMovieClip. Is a vertical list and I am struggling in how to make it scroll up and down. I am not sure about the handling of movieclips created with the duplicateMovieClip, since I am not sure if I can put those within some sort of container movie clip that I could easily scroll with the phone nav keys.

Do you have any suggestions about this??

Re: [Flash Lite 1.1 scrolling menu]

renekooi | 07/06/2008, 11:16

Could you give a sample with pictures loaded from an file. And could you please post the sample files as well, as I can't seem to get it to work.

Thank you in advance!

Re: [Flash Lite 1.1 scrolling menu]

gioorgionatili | 08/09/2008, 23:31

gioorgionatili

Hi,

I did another post on order to address some requests, hope it helps...

Re: [Flash Lite 1.1 scrolling menu]

chaaman | 11/09/2008, 10:18

I need .fla
Can you help me?.

Re: [Flash Lite 1.1 scrolling menu]

gioorgionatili | 13/09/2008, 12:39

gioorgionatili

Yes, fire me an e-mail and I'll send the fla to you.

Re: [Flash Lite 1.1 scrolling menu]

chaaman | 14/09/2008, 06:49

Thnaks you
my E-mail chaaman@yahoo.co.th

Re: [Flash Lite 1.1 scrolling menu]

chaaman | 14/09/2008, 12:29

So sorry
my e-mail chaa@yahoo.co.th not chaaman@yahoo.co.th

Re: [Flash Lite 1.1 scrolling menu]

artevitale | 23/09/2008, 11:54

Ciao Giorgio puoi mandare il file di esempio anche a me?
la mia mail è
claudioviola82@gmail.com

Grazie 1000
Claudio

Re: [Flash Lite 1.1 scrolling menu]

pongpan | 11/10/2008, 04:11

I need .fla
my e-mail veerapatra1@hotmail.com
Thnaks you

Re: [Flash Lite 1.1 scrolling menu]

ideasviluppo | 04/11/2008, 14:00

Ciao Giorgio grazie per i tuoi tutorial..
mi manderesti il .fla per studiare meglio.
Grazie.

la mail è ideasviluppo@gmail.com

Re: [Flash Lite 1.1 scrolling menu]

tcdj4l | 24/01/2009, 11:36

Could you please send me the .fla? Thanks a lot!

My e-mail is tcd_j4l@yahoo.com

Re: [Flash Lite 1.1 scrolling menu]

korbest | 28/01/2009, 22:09

Hi. Great article.

Could you please send me too the .fla file. Thx!

My email: gkordek@gmail.com

You must login to post comments. Login
 

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: qdcZidentifierQSxhttpE3aE2fE2fblogsE2eforumE2enokiaE2ecomE2fblogE2frobertE2dburdicksE2dforumE2dnokiaE2dblogE2f2008E2f10E2f21E2fabobeE2dmaE78E2d2008E2dsanE2dfranciscoE2dsessionsX qdcZtypeQUqfnZE45E78cludedFromGeneralE4cistingsQ qdcZtypeQUqfntypeZBlogContentQ qdcZtypeQUqfntypeZBlogE45ntryQ qdcZtypeQUqfntypeZCommunityContentQ qdcZtypeQUqfntypeZE52esourceQ qdcZtypeQUqfntypeZWebpageQ qdcZtypeQUqmarsZManagedE52esourceQ qdcZtypeQUqwebZInformationE52esourceQ qdcZtypeQUqwebZPageQ qdcZtypeQUqwebZE52esourceQ qdcZtypeQUqrdfsZE52esourceQ qfnZtopicQUxhttpE3aE2fE2fswE2enokiaE2ecomE2fFNE2d1E2fBlogTopicE2fgeneralX qfnZtopicQUqfnTopicZflashQ qfnZtypeQUqfntypeZBlogContentQ qfnZtypeQUqfntypeZBlogE45ntryQ qfnZtypeQUqfntypeZCommunityContentQ qfnZtypeQUqfntypeZE52esourceQ qfnZtypeQUqfntypeZWebpageQ qfnZuserE5ftagQSxflashX qmarsZlanguageQUxhttpE3aE2fE2fswE2enokiaE2ecomE2flanguageE2d1E2fenX qrdfZtypeQUqfnZE45E78cludedFromGeneralE4cistingsQ qrdfZtypeQUqfntypeZBlogContentQ qrdfZtypeQUqfntypeZBlogE45ntryQ qrdfZtypeQUqfntypeZCommunityContentQ qrdfZtypeQUqfntypeZE52esourceQ qrdfZtypeQUqfntypeZWebpageQ qrdfZtypeQUqmarsZManagedE52esourceQ qrdfZtypeQUqwebZInformationE52esourceQ qrdfZtypeQUqwebZPageQ qrdfZtypeQUqwebZE52esourceQ qrdfZtypeQUqrdfsZE52esourceQ
User Rating: qfnZuserE5FratingQNx4E2E5000X
RDF Facets: qfnZuserE5FtagQSxmenuE20E2DE20boE78X