Giorgio Natili's Forum Nokia Blog

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.

Recently...

• [Flash Lite 1.1 scrolling menu]
• Flash Lite 1.1 collisions
• 2007 flash lite game contest
• Flash Lite 1.1 scrolling background
• Congratulations!

Categories

• Browsing [0]
• Business Opportunities/Services [0]
• CDMA [0]
• Connectivity [0]
• Enterprise [0]
• Entertainment [0]
• Event [1]
• Flash [3]
• Games [1]
• General [1]
• Java [0]
• Location Based Services [0]
• Maemo [0]
• Messaging [0]
• Open C [0]
• Python [0]
• S60 [0]
• Series 40 [0]
• Series 80 [0]
• Symbian C++ [0]
• Testing [0]
• Web Run-Time (WRT) [0]
• Widget [0]

Syndicate

• RSS 0.90
• RSS 1.0
• RSS 2.0
• Atom