I had some requests from fellow FL coders that it will be nice to have FL 2.0+ template or tutorial on how to create a navigation system. I decided to write a small step by step description of how I wrote this. I have also attached the source files to this post. Hope it helps.

1. Create a document in Flash CS3/CS4. Here’s what I have set – Stage Size: 240×320, FPS: 12, FL: 2.0, AS: 2.0.
2. Create a MovieClip on stage containing a rectangle of size 150×150 and name it menu_mc. Give it an instance name as “menu_mc”. Here is how it looks on my stage now -



3. Please don’t forget to have the “Registration point” (origin) of the MovieClip on top-left.
4. Now, get into the MovieClip by double clicking it. Convert the rectangle to a symbol (MovieClip) and name it item_mc.
5. Duplicate/copy the item_mc 2 more times and place them side by side, as shown below. Yes, the 2 items go out of the stage. The white area in the image indicates the stage.

   

6. Give the instance names to each box (item) in the menu_mc. Name the items “item_0_mc”, “item_1_mc” and “item_2_mc”.
7. In this tutorial, I am going to treat these three boxes as the three menu items. So I will animate the boxes to show up the active menu item in the middle of the stage.
8. Before we proceed, make sure you have given instance names properly to the MovieClips (menu_mc, item_0_mc, item_1_mc, item_2_mc). This is it with the UI I want to show. We now proceed to writing Action Script.
9. Create a new layer, name it “Actions” and open the Actions Panel for the frame. Write the following action script to start with.

   fscommand2("fullscreen", true);
   
   // FIRST ITEM WILL BE ACTIVE BY DEFAULT
   var item_active = 0;
   
   // NUMBER OF MENU ITEMS (CAN BE MADE DYNAMIC IN FUTURE)
   var item_count = 3;
   
   // AN OBJECT DEFINED FOR KEY LISTENER
   var key_obj:Object;
   var distance = menu_mc.item_1_mc._x;
   var speedX = 2;

10. We have initialized the variables in the above code.
    • “distance” variable is used to store the value of distance between each item inside menu_mc.
    • “key_obj” is used to handle events thrown when the keys are pressed.
    • “speedX” is used to define speed of the animation that happens when switched between menu items. Speed is more if speedX value is decreased and vice versa.
    • “item_count” keeps a record of how many items does the menu_mc contains. This is hardcoded as of now as it is not the motive of this tutorial to fetch menu items, but to handle navigation system.
    • “item_active” informs the item that needs to be active initially. 0 = 1st item, 1 = 2nd item and so on.
11. Let us now define a function to set the menu items to show the “item_active” by default.

    function menu_set() {
    	// SET END POSITIONS OF EACH ITEM
    	var xPos = -(item_active*distance);
    	for (var i = 0; i < item_count; i++) {
    		menu_mc["item_"+i+"_mc"].end_x = xPos+(distance*i);
    	}
    
    	// ANIMATE MENU ITEMS TO THEIR END POSITIONS
    	this.onEnterFrame = function() {
    		for (var i = 0; i < item_count; i++) {
    			menu_mc["item_"+i+"_mc"]._x += (menu_mc["item_"+i+"_mc"].end_x-menu_mc["item_"+i+"_mc"]._x)/speedX;
    		}
    	};
    }

12. In the above code, I use a temporary variable “xPos” to store the starting x position of the menu items inside menu_mc. This is calculated by multiplying distance between each item and the active item and then negating the value. Later, I run through a loop of all elements inside menu_mc to define each item’s “end_x”. The obvious reason why I am not changing the _x property of the items straight away is because I want to animate each item giving an ease-in effect.Once the end_x is defined for each item, I now write an onEnterFrame function to run through a loop and animate each item to reach to their final x positions (end_x). This is done with an ease-in technique.
13. Now that the function is defined, we shall need to call it. So we shall write a function to initialize the menu, define the key listeners and call menu_set function. This is how the code looks like.

    function menu_init() {
    	menu_set();
    
    	key_obj = new Object();
    	key_obj.onKeyDown = function() {
    		var code = Key.getCode();
    		switch (code) {
    			case 37 :
    				menu_switch("previous");
    				break;
    			case 39 :
    				menu_switch("next");
    				break;
    			case 13 :
    				menu_activate();
    				break;
    		}
    	};
    	Key.addListener(key_obj);
    }
    menu_init();

14. We define key_obj as a new Object and assign onKeyDown actions. 37 denotes LEFT arrow key, 39 denotes RIGHT arrow key, 13 denotes ENTER key or the SELECT key. Notice that I have called menu_init after defining it. If you compile and run the SWF, you should notice that first item is shown on the screen. Nothing much really happens.Now is the time to add Key Listeners to define the key actions to navigate through the menu.
15. Notice that a function menu_switch() is called with 2 different parameters, “previous” and “next”. Also a function menu_activate() is called for ENTER key. We shall write the menu_switch() function below.

    function menu_switch(_direction) {
    	// INCREMENT / DECREMENT ACTIVE ITEM
    	if (_direction == "previous") {
    		if (item_active>0) {
    			item_active--;
    		}
    	} else if (_direction == "next") {
    		if (item_active>item_count-1) {
    			item_active++;
    		}
    	}
    
    	menu_set();
    }

16. We call menu_set() as soon as we set item_active variable with next or previous one. This will animate the menu to show our active item on the stage as written in the function using onEnterFrame. Compile and run the SWF and you can see our menu navigating as required.
17. Last thing is to add a function that traces the value of the active item. This is nothing but tracing the variable item_active.

    function menu_activate() {
    	trace(item_active);
    }

18. Further code for your application will have to be written based on the item_active. For this tutorial, I have just traced the value. It should be easy for you to use the template I have provided with this article. The change you need to make is the graphic UI inside each item_mc. Don’t forget to keep them separate MovieClips and put whatever UI you need for your app inside it.
19. You can also set item_active to some other value on Line 5 of my code to show that item by default when your application starts.

DOWNLOAD SOURCE FILE(S)
(170 downloads)
(Adobe Flash CS3 required)

Do mail me if you have any more doubts on this.

This entry was posted on Sunday, February 22nd, 2009 at 11:30 pm and is filed under Articles, Examples, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.