Tripod5G >> Recipe 22.5. User Navigation for Flash Lite

Perhaps the most complex user interface challenge you will face when designing your Flash Lite movie will be that of user navigation. When designing Flash movies for the Web, you can rely on the user having access to a mouse, trackpad, or other user input device that allows direct access to any area of the stage. When designing for Flash Lite, you cannot make such an assumption. Although PDAs and even some mobile phones (UIQ phones, such as the Sony Ericsson P910, for example) support stylus input, most phones do not.

The most basic Flash Lite 1.1 devices support three-way navigation: Up, Down, and Select. More advanced models additionally provide support for the Left and Right keys (five-way navigation). In either case, Flash Lite provides built-in key-based navigation for the movie based on button instances on the stage. An example of five-way navigation is shown in Figure 22-2.

A button instance is an instance of the Flash button symbol type and is used to respond to user input through various events. Note that unlike Flash movies published for the desktop Flash Player, Flash Lite 1.1 movies do not support movie clip events such as onKeyDown( ), so you will need to use button instances extensively when responding to user input.

There are five basic steps to creating a button instance for your Flash Lite movie:

Insert a new symbol (Insert New Symbol…) and select the Button behavior. The name (exp 3pod.com) you enter will be used to identify this button in the library.
Add content to the stage. This content will serve as the Up state for your button and will be displayed when the button does not have the active focus.
In most cases, you will want to provide alternate content for the Over state. Click on the Over frame and insert a frame (Insert Timeline Frame or F5). Make modifications to the content as desired. Note that the content need not be staticanimated movie clips and other advanced effects can be included as well.
Exit the symbol-editing mode (Edit Edit Document or click on the scene in the Edit Bar).
Drag the button symbol from your library to the stage to create a new instance of the button.

Initially, the Up state of the button will be displayed. After the user has navigated to the button, the Over state will be displayed.

Now that you have a button instance on the stage, you will want to define the actions that should take place when the user interacts with the button instance. To assign ActionScript to these buttons, follow these steps:

Select the button instance on the stage.
Open the Actions panel (Window Development Panels Actions or F9). The title bar of the Actions panel should read ActionsButton.

Figure 22-2. Nokia 7610 handset with five-way navigation keys highlighted

Define on(press), on(rollOver), and/or on(rollOut) handlers for the button, using the following ActionScript as a guideline:

	on(press) {
	   // press actions go here, for example
	   gotoAndPlay("nextSection");
	}
	on(rollOver) {
	   // rollOver actions goes here
	}
	on(rollOut) { 
	   // rollOut actions go here 
	}

ActionScript defined for the press (and release) events will be executed if the user presses the Enter key while the button has the active focus.

ActionScript defined for the rollOver event will be executed when the button gains focus.

ActionScript defined for the rollOut event will be executed when the button loses focus.

In the absence of a mouse, the Flash Lite player makes decisions about which button to highlight based on an internal tab order algorithm. The complete details are slightly more complex, but the tab order is essentially left to right followed by top to bottom. When the user presses up (equivalent to Shift-Tab on the keyboard for the desktop player) the focus moves to the previous button according to the tab order. When the user presses down (equivalent to Tab on the keyboard for the desktop player), the focus moves to the next button.

Tripod >> 3pod Tips & Learning and manuals for educations

Recipe 22.5. User Navigation for Flash Lite

Problem

Solution

Discussion

Figure 22-2. Nokia 7610 handset with five-way navigation keys highlighted

Tripod >> 3pod Botom Tips & Learning and manuals for educations