tutorials

I’ve made a new menu system and a post about how to use it, all feedback on these posts and the system itself is greatly appriciated! Links to the source: [Download Source, Download Source with example]

Related posts: [Example Game, Compound Menu, Understanding it]

To use the menu-system

• Create a MenuHandler
• Create your menues
• Add the menues to the MenuHandler

import com.talonfc.menu.MenuHandler;

private var _menu:MenuHandler;

package com.menu
{
	import com.talonfc.menu.Menu;
	[Embed(source='../../../lib/MenuGraphics.swf', symbol='ExampleMenu')]
	public dynamic class ExampleMenu extends Menu
	{
		public function ExampleMenu(main:Main)
		{
			super(main);
			SetStart(new Vector3D(-180,0,0),new Vector3D(0, 0, 0),new Vector3D(.5,.5,1),1);
			SetMid(new Vector3D(0,0,0),new Vector3D(0, 0, 0),new Vector3D(1,1,1),1);
			SetEnd(new Vector3D(180,0,0),new Vector3D(0, 0, 0),new Vector3D(1,1,1),1);
			UseTweenMovement();
		}
	}

}

There are some important things in this class, I’ll go through it line by line.

• Line 1. It’s good to organize your class-files in folders so here I have created a folder called com and in the a folder called menu, this is where I will save all my menu files. So you should have the filestructure “ProjectFolder/com/menu”. 
• Line 3. We import the Menu base class from the package com.talonfc.menu.
• Line 4. Embed the graphics, to access a symbol in an exported sfw-file you must give it a linkage name in the properties window. 
• Line 5. If you make your menu in Flash and create buttons that you want to access by their instance names the class needs to be dynamic. Also it extends the Menu class which we imported earlier.
• Line 7. The constructor, here you supply the reference to the Main class where the MenuHandler instance is created. 
• Line 9. Pass the main instance to the super class constructor.
• Line 10. The SetStart method takes four arguments, rotation, position, scale and alpha. The first three arguments should be in the Vector3D format since we can modify x, y and z values of those three, and the last alpha is a single Number value ranging from 0 to 1. In the example above we specify that the menu should start with a x-rotation of minus 180 degrees, position we leave at 0 on all axis, and we set that the starting x- and y-scale at .5 which means that the menu should start at 50% of it’s original size, we leave alpha at 1 at all times. 
• Line 11. The SetMid method, same as above but we have changed the rotation to 0 and alpha to 1, so that there will be no rotation on the menu and it will be fully visible. The mid position is the state as the menu will be shown as the user interacts to it.
• Line 12. Then we have the SetEnd method where you set the end rotation, position, scale and alpha and all we do here is changing the end x-rotation. 
• Line 13. Next we set up the movement type, the system supports three different movement types, Tween, Wobbly and Static, we’ll look into that later.   Now we have an example menu so the next step is instantiate the MenuHandler, add our menu to it and then show the menu. This is done in the Main.as class.

_menu = new MenuHandler(this);
_menu.Add(new ExampleMenu(this));
_menu.Show(MainMenu,_canvas);

When you create the MenuHandler and ExampleMenu you provide “this” which is the instance of the Main class as an argument. When you call the _menu.Show method you provide two arguments, the first is the classname of the menu you want to show and the second is the DisplayObject that you want the menu to be added to, for simplicity here we add it to the Main class itself. You can provide an extra argument to the Show method that is at what depth to add the menu, the default vale is -1 and will add the menu on top of everything else in the container. Setting up the movement behavior. The three movement types, UseStaticMovement, UseTweenMovement and UseWobblyMovement should always be called after the super statement in the constructor of the menu as shown in the example above. The UseStaticMovementmethod takes to arguments, the first is how many frames it will take the menu to go from the start position to the mid position, and the second is how long it will take to go from the mid position to the end position. This method will make the menu move at a constant speed.

UseStaticMovement(numberOfFramesToShow:int = 15, numberOfFramesToHide:int = 15):void

The UseTweenMovement method also takes two arguments, the first is how many percent of the remaining distance from start to mid it will move each frame and the second is the same but for moving from mid to end. This method will make the menu move at a higher speed at the beginning and slow down towards the end.

public function UseTweenMovement(showTween:Number = .7, hideTween:Number = .7):void

The UseWobblyMovement method takes five arguments, the first two are for the start to mid distance and the next two are the same but for the mid to end distance. The two pairs are acceleration (showAcceleration and hideAcceleration) and slowdown (showSlowdown and hideSlowdown). The last argument is the vectorTolerance, this is how much two vectors can differ but still be considered equal. This method will make the menu shoot over its target position and then wobble back and fourth until it has slowed down to a stop.

public function UseWobblyMovement(showAcceleration:Number = .7, showSlowdown:Number = .5, hideAcceleration:Number = .7, hideSlowdown:Number = .5, vectorTolerance:Number = .5):void