Swami Charan's Blog My personal blog…

Simple Menu in Flash AS3

Hi all, upon request from people, here i am with a small tutorial on 'Creating a Simple Menu' in Flash AS3.

Final Output:

In Flash Authoring, first create two movieclips 'btn_mc' and 'movie_mc' in the Library and make sure you select 'Export to Actionscript' checkbox in Symbol Properties of these movieclips to make use of them in .as file.

Once these two movieclips are created, save this fla as 'test.fla' and create a new ActionScript File named 'test.as' in the same directory. We will be using this actionscript file as a Document Class for 'test.fla'. Inorder to use this .as file as a document class, we have to enter the name of the class(test) in ActionScript file in 'Class' textField under Publish Settings.

Once Document class is set, we are done with 'test.fla'. Move to 'test.as' to start with coding.

Initially we import required classes and start with class declaration:

package {

	import flash.display.MovieClip;
	import flash.display.Stage;
	import flash.events.MouseEvent;
	import fl.transitions.Tween;
	import fl.transitions.TweenEvent;
	import fl.transitions.easing.*;

	public class test extends MovieClip {
		public function test() {
                                   setup();
		}
	}
}

Note: Make sure the public class name is same as the name of .as file.

Declare some variabled we need as class member variables.

private var activeMovie:String="";
private var tempArray:Array=[];
private var names:Array=["home","profile","projects","contact","about"];
private var movie:MovieClip;
private var fwdTween:Tween;
private var bkTween:Tween;

Inside the constructor we have a function setup() called. We will look into this function now. First we need to arrange the buttons at the bottom on the stage by instantiating 'btn_mc' and giving 'x' and 'y' positions. Using 'name' property of the movieclip, give names to these buttons to know which button is being clicked.

var temp:MovieClip;

for (var i:int=0; i<5; i++) {
	temp = new btn_mc();
	temp.name=names[i];
	temp.x = i*(temp.width+10)+temp.width/2+10;
	temp.y=350;

	addChild(temp);
	tempArray.push(temp);
	temp.addEventListener(MouseEvent.CLICK, onClick);
}

We have declared an eventListener for MouseEvent.CLICK to handle click events.

By default we will show an instance of 'movie_mc' which shows the a label as Home with a Tween motion..

movie = new movie_mc();
movie.label_txt.text=names[0];
movie.x=-240;
movie.y=210;
addChild(movie);
fwdTween=new Tween(movie,"x",Elastic.easeInOut,-240,240,1,true);

Till now, we have arranged the buttons at the bottom and default movieclip that appears on launching the swf.

On clicking any of the button at the bottom, that specific movieclip should be displayed and the exisiting movie should go off the stage. This we will be doing inside the eventListener onClick().

On clicking a specific button, move the existing movie off the stage first, changing the label of moive_mc.label_txt to desired one and getting the new movieclip to the stage.

private function onClick(event:MouseEvent):void {

	if (event.target.name==activeMovie) {
		//Do nothing
	} else {
		bkTween=new Tween(movie,"x",Regular.easeOut,240,-240,0.5,true);
		bkTween.addEventListener(TweenEvent.MOTION_FINISH, newMotion);

		movie.label_txt.text=event.target.name;
		movie.x=-240;
		movie.y=210;
		addChild(movie);

		activeMovie=event.target.name;
	}
}

private function newMotion(e:TweenEvent):void{
	fwdTween=new Tween(movie,"x",Regular.easeOut,-240,240,0.5,true);
}

As this is a simple menu, we are just changing the label the movie_mc. Incase if the content of the movie_mc varies with different tabs, we can add that specific content into movie_mc based on the tab clicked.

Final test.as:

package {

	import flash.display.MovieClip;
	import flash.display.Stage;
	import flash.events.MouseEvent;
	import fl.transitions.Tween;
	import fl.transitions.TweenEvent;
	import fl.transitions.easing.*;

	public class test extends MovieClip {
		private var activeMovie:String="";
		private var tempArray:Array=[];
		private var names:Array=["home","profile","projects","contact","about"];
		private var movie:MovieClip;
		private var fwdTween:Tween;
		private var bkTween:Tween;

		public function test() {
			setup();
		}

		private function setup():void {
			var temp:MovieClip;

			for (var i:int=0; i<5; i++) {
				temp = new btn_mc();
				temp.name=names[i];
				temp.x = i*(temp.width+10)+temp.width/2+10;
				temp.y=350;

				addChild(temp);
				tempArray.push(temp);
				temp.addEventListener(MouseEvent.CLICK, onClick);
			}

			movie = new movie_mc();
			movie.label_txt.text=names[0];
			movie.x=-240;
			movie.y=210;
			addChild(movie);
			fwdTween=new Tween(movie,"x",Elastic.easeInOut,-240,240,1,true);
		}

		private function onClick(event:MouseEvent):void {

			if (event.target.name==activeMovie) {
				//Do Nothing
			} else {
				bkTween=new Tween(movie,"x",Regular.easeOut,240,-240,0.5,true);
				bkTween.addEventListener(TweenEvent.MOTION_FINISH, newMotion);

				movie.label_txt.text=event.target.name;
				movie.x=-240;
				movie.y=210;
				addChild(movie);

				activeMovie=event.target.name;
			}
		}

		private function newMotion(e:TweenEvent):void{
			fwdTween=new Tween(movie,"x",Regular.easeOut,-240,240,0.5,true);
		}
	}
}

This is all we need to do to start with a basic menu in Profiles in Flash. This is just a way to do it. There are many different ways to do it.

You can get the source files here.

Just Explore Flash AS3