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.
Flash |
Next |
Previous |
Comments (15) |
Trackbacks (9)
gioorgionatili | 22/04/2008, 07:39
Hi,
Thanks for your comment and thanks for linking your tricks, they may help users to create better applications!
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??
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!
gioorgionatili | 08/09/2008, 23:31
Hi,
I did another post on order to address some requests, hope it helps...
chaaman | 11/09/2008, 10:18
I need .fla
Can you help me?.
gioorgionatili | 13/09/2008, 12:39
Yes, fire me an e-mail and I'll send the fla to you.
chaaman | 14/09/2008, 06:49
Thnaks you
my E-mail chaaman@yahoo.co.th
chaaman | 14/09/2008, 12:29
So sorry
my e-mail chaa@yahoo.co.th not chaaman@yahoo.co.th
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
pongpan | 11/10/2008, 04:11
I need .fla
my e-mail veerapatra1@hotmail.com
Thnaks you
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
tcdj4l | 24/01/2009, 11:36
Could you please send me the .fla? Thanks a lot!
My e-mail is tcd_j4l@yahoo.com
korbest | 28/01/2009, 22:09
Hi. Great article.
Could you please send me too the .fla file. Thx!
My email: gkordek@gmail.com
Re: [Flash Lite 1.1 scrolling menu]
chall3ng3r | 21/04/2008, 16:46
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 //