Categories: How To | Flash Lite

This page was last modified 23:29, 29 July 2008.

From Forum Nokia Wiki

Introduction

This is a Guide to show one a way of making a static menu system for Flash Lite 2.x. Instead of writing a full tutorial, I will provide you with the sample code, and a brie(ish) explanation of the main functionality. I have (tried to :) ) code using best practice, so it should be reasonably easy to follow within the fla.

It incorporates the Tween animation class for a more organic movement of the selection bar, and can be used across a wide variation of applications for a basic navigation system.

Support files

click the link to download the support files link

Files :

animatedMenu.fla

animatedMenu.swf

Overview

I will guide you briefly through a small menu and navigation system I made as illustrated below. Open up animatedMenu.fla in flash 8, and publish it in the phone emulator to see it working.

User Experience

The main screen shows the menu system. Soft Key 2 exits the program as labeled. Up and down moves the highlight bar up and down to select different items of the menu. The select button takes you to the current item on the menu that is highlighted. The SoftKey 2 then takes you back to the main menu, with the last selected menu item highlighted.

Behind the Scenes

The _root timeline contains only one frame, with 6 layers of content ( 7 in total, including the actions layer), see below.

timeline & elements

The layers logoBar, softBar and background contain static graphic shapes.

The softKeyTxt layer contains a dynamic txt box (softKeyRight_txt) which displays the current function of the key at runtime.

Layer menuMc contains a movieclip (mainMenu_mc) which contains all of the menu graphics and functions, and the mainContentMc layer has a movieclip (content_mc) containing all the content pages. (if you hide the menuMc layer on the time line, you will see it underneath).

The basic navigation concept

When the app is loaded, the mainMenu_mc is shown, with the content_mc stopped at frame 1, which is blank.

The highlight bar and menu input is controlled by an invisible ‘key catcher’ button nested within the mainMenu_mc. As the bar is moved it changes a variable called ‘section’ on the main timeline, registering which menu item is selected.

When the select button is pressed, the relevant content frame within the content_mc is called and shown, while at the same time the menu’s _visible property is set to false, hiding it from view. Other benefits of hiding the movieclip is that a) the highlight bar will stay in the same place when you exit back, and b) when it is set to _visible false, the key catcher movieclip no longer functions when the up,down and selection keys are pressed, allowing you to setup another key catcher within the content page.

When the ‘back’ (right softkey) button is pressed, the content_mc’s _visible property is set to false and sent back to the blank frame at the beginning , and the mainMenu_mc is set to true, showing it again.

Actionscript

The script written to control all of this is reasonably self explanatory, and has been written as reusable functions. Instead of going through every line of code, I have given a brief description of each ones function and functionality.

The main timeline

• Flash commands.

These are normally default settings, quality high, no focus rectangle etc.

• Import animation script

These import the tween and easing functions from the mx.transitions class. These will be used and further explained within the menu movieclip to control the movement of the highlight bar. It is however, good practice to import them here so you can access the functions and properties throughout the project.

• Vars

Set’s up the 2 main variables used to define the current selection on the menu.

• Functions

Creates a couple of the functions used.

mainMenuAppear() and hideContent() are both called from within the KeyListener .

updatePosition() is called from within the menu movieclip

• Listeners

This sets up the key listener object for the right soft key, softListener

If the a content page is showing, it acts as the back key to the main menu, or if the main menu is showing, it quits the application.

• Runtime

Stops the movie on this frame, (not really necessary in this example, but I find it good practice.)

Removes any current listener objects, (again, not really necessary in this example, but I find it good practice, as it prevents you building up numerous listeners which can cause serious errors in your application.)

Adds the softListener object.

MainMenu_mc

Frame 1, timeline scene1—mainMenu_mc

I have used this frame to setup the functions that will be called by the onKeyPress events attached to the KeyCatcher button.

Most are self explanatory, but there are a couple to note.

moveSelectionDown() and moveSelectionUp() control the yellow highlight bar which allows the user to see what item they currently have selected on the menu.

The movement of the bar is based on its current _y coordinate. The Static text that represents the menu ‘buttons’ is spaced at exactly 15 pixels apart on the y axis. Therefore if the highlight bar is aligned centrally with the text, to get to the next item would involve a movement of + or - 15 pixels on the y axis. As it moves to the next item, it updates the current position by adding + or – 1 (using the defineSelection() function)to the _root.currentSelection variable we established on the _root timeline.

The if(selectionBar_mc._y == 23 || selectionBar_mc._y == 38 || …. Etc statement makes sure that the bar will only move if it is stationary and directly under the menu item even if the user presses the up or down key before a animated movement has stopped. If this was not in place the bar would very quickly become out of alignment, and in some random location on the stage. ( as I found out to my dismay when I first wrote it J )

new mx.transitions.Tween(selectionBar_mc, “_y”,Regular.easeOut, selectionBar_mc._y, selectionBar_mc._y + 15, .1, true);

This is the line where we define the movement of the highlighter bar using the tween class. By controlling the movement via Actionscript as opposed to timeline animation we have a lot more flexibility in how it moves, and the ability to add over transitional effects such as bounce etc.

selectionBar_mc, “_y” — movieclip to add animation to, and the property to affect.

Regular.easeOut — adds the easing, slowing down as it ends the movement.

selectionBar_mc._y, selectionBar_mc._y + 15 — start and end positions for the movement.

.1 — the time in seconds it takes to complete the animation.

Have a play with changing some of these properties to get some strange effects :)

For a more detailed guide on using this class function, please see Tween Class in the flash 8 help files.

Where to go from here

To see this menu working in context of an application, please view this link.

I hope this guide has been informative, as always, in retrospect there would be many way to improve this code. If you know of any, edit away :)

--Mattpollitt 19:27, 3 May 2007 (UTC)