Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Archived:How to create a dynamic fisheye menu in Flash Lite

From Wiki
Jump to: navigation, search

Archived.pngArchived: This article is archived because it is not considered relevant for third-party developers creating commercial solutions today. If you think this article is still relevant, let us know by adding the template {{ReviewForRemovalFromArchive|user=~~~~|write your reason here}}.

We do not recommend Flash Lite development on current Nokia devices, and all Flash Lite articles on this wiki have been archived. Flash Lite has been removed from all Nokia Asha and recent Series 40 devices and has limited support on Symbian. Specific information for Nokia Belle is available in Flash Lite on Nokia Browser for Symbian. Specific information for OLD Series 40 and Symbian devices is available in the Flash Lite Developers Library.

This article explains how to create a dynamic fisheye menu component in Flash Lite. A video preview of the source code proposed in this article is available here: Flash Lite fisheye menu demo video.

Article Metadata
Code Example
Source file: FisheyeMenu.zip
Article
Created: jappit (19 Feb 2009)
Last edited: hamishwillee (14 May 2013)

Contents

The FisheyeMenu source code

Step 1. The menu MovieClip and external class

Let's create the FisheyeMenu ActionScript class, that will extend MovieClip, that will be used to implement the actual menu logic:

class FisheyeMenu extends MovieClip
{
}

Then, create an empty movie clip in your library, export it, and associate it with the FisheyeMenu class.

Fl fisheye create mc.gif

Step 2. Initializing the menu

First, define these 4 menu properties, that will hold some useful values:

// focus index of the selected menu item
var focusedIndex:Number;
 
// total number of menu items
var itemsNum:Number;
 
// width of single menu items (in pixels)
var itemWidth:Number;
 
// the MovieClip that will contain the menu items
var itemsContainer:MovieClip;

Let's also define an utility function that returns the currently focused item index:

public function getFocusedIndex()
{
return this.focusedIndex;
}

And then, implement a function that will be used to initialize the menu with the items you want.

public function initializeMenu(itemIds:Array, itemWidth:Number)
{
this.itemsNum = itemIds.length;
 
this.focusedIndex = 0;
 
this.itemWidth = itemWidth;
 
this.initItems(itemIds);
}
private function initItems(itemIds:Array)
{
this.itemsContainer = this.createEmptyMovieClip('itemsContainer', this.getNextHighestDepth());
 
for(var i:Number = 0; i < itemIds.length; i++)
{
var item:MovieClip = itemsContainer.attachMovie(itemIds[i], 'item_' + i, itemsContainer.getNextHighestDepth(), {_x: itemWidth * i, _y: 0});
 
if(i > 0)
{
item._xscale = 50;
item._yscale = 50;
}
}
}

The initializeMenu() function is the function you will call to initialize your fisheye menu with the items you want. Its arguments are:

  • an Array containing the id of MovieClip symbols to be used as items
  • the width of single menu items

Once called, initializeMenu() initializes the menu properties and then calls the initItems() function, that will actually attach the item instances, scaling down the unselected items and translating the menu itself to its starting position.

The getMenuLeft() function returns the x position to be used for the itemsContainer MovieClip, and depends on the focused item index:

private function getMenuLeft():Number
{
return - itemWidth * focusedIndex;
}

Step 3. Implement sliding funcionality

When the user presses LEFT and RIGHT keys, you want the menu to perform these steps:

  • change the focused item, scaling down the previously focused one, and scaling up the new
  • translate the menu to be centered on the new focused item

In ActionScript, you can do it this way:

public function shiftItem(itemDelta:Number)
{
var nextIndex:Number = focusedIndex + itemDelta;
 
if(nextIndex >= 0 && nextIndex < itemsNum)
{
scaleItem(focusedIndex, true);
 
focusedIndex = nextIndex;
 
scaleItem(focusedIndex, false);
 
moveMenu();
}
}
private function moveMenu():Void
{
new Tween(itemsContainer, "_x", None.easeNone, itemsContainer._x, getMenuLeft(), .50, true);
}
private function scaleItem(itemIndex:Number, scaleDown:Boolean):Void
{
var item:MovieClip = itemsContainer['item_' + itemIndex];
 
var fromScale:Number = scaleDown ? 100 : 50;
var toScale:Number = scaleDown ? 50 : 100;
 
new Tween(item, "_xscale", None.easeNone, fromScale, toScale, .50, true);
new Tween(item, "_yscale", None.easeNone, fromScale, toScale, .50, true);
}

In this code snippet, there are 3 functions:

  • shiftItem() is the function called to change the focused Item index by the passed delta argument. It checks if the change is ok, and then calls the following 2 functions:
  • moveMenu() actually translates the items container, to have the new focused item horizontally centered
  • scaleItem() scales up or down, depending on the scaleDown argument, the item corresponding at the index passed as argument

Since here we use the Tween class, we have to add these 2 import lines at the beginning of the ActionScript file:

import mx.transitions.Tween;
import mx.transitions.easing.*;

How to use the fisheye-menu

Step 4. Create the menu items symbols

Let's create 3 symbols that we will use as items within the fisheye menu. Also, remember to check the "Export for ActionScript" option, to have them actually usable from ActionScript itself.

Fl fisheye menu items.gif

Step 5. Attach and initialize the menu

Now, attach a FisheyeMenu istance directly to the _root, and initialize it with the ID of the symbols created in the previous step:

var menu:MovieClip = _root.attachMovie('FisheyeMenu', 'main_menu', _root.getNextHighestDepth());
 
var items:Array = new Array('Item0', 'Item1', 'Item2');
 
menu._x = 120;
menu._y = 120;
 
menu.initializeMenu(items, 50);

Step 6. Create a KeyListener to interact with the menu

The KeyListener will be really simple, since it will simply call the shiftItem() function when the user press LEFT or RIGHT keys, and will call a custom function when the user press the ENTER key, to trace the index of the current focused item:

var keyListener:Object = new Object();
 
keyListener.onKeyDown = function()
{
var key:Number = Key.getCode();
 
if(key == Key.RIGHT)
{
menu.shiftItem(1);
}
else if(key == Key.LEFT)
{
menu.shiftItem(-1);
}
else if(key == Key.ENTER)
{
menuFireAction();
}
}
Key.addListener(keyListener);
 
function menuFireAction()
{
trace("MENU ITEM PRESSED: " + menu.getFocusedIndex());
}

Downloads

You can download full source code (FLA + ActionScript file) of this example here:

This page was last modified on 14 May 2013, at 06:11.
61 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×