Flash and ActionScript tutorials – flashadvanced

Warning: file_get_contents(): URL file-access is disabled in the server configuration in /srv/www/vhosts/flashadvanced.com/httpdocs/wp-content/plugins/sociable-italia/sociable.php on line 672 Warning: file_get_contents(http://tinyurl.com/api-create.php?url=http%3A%2F%2Fflashadvanced.com%2Factionscript-3-basics%2Fanimated-buttons-with-as3%2F): failed to open stream: no suitable wrapper could be found in /srv/www/vhosts/flashadvanced.com/httpdocs/wp-content/plugins/sociable-italia/sociable.php on line 672

Today I will show you how to create cool animated buttons using Flash CS3 and ActionScript 3.
Let’s get started!

1. Create a new Flash CS3 document with size 600 x 100 and a dark background color.
2. Take the rectangle tool and draw a rectangle with size 100 x 30. We will use it for an invisible button. Convert the rectangle to Button symbol and give it an instance name “clickArea”. Go to the button’s timeline and drag the keyframe like shown in the picture.

3. Convert the invisible button to Movie Clip with registration point top left and linkage it to a class named “Button”. Go to the new created movie clip’s timeline. Rename the invisible button’s layer to “click area”. Select frame 10 and insert frame. Then under this layer create a new layer called “label”. Create a new dynamic text field with instance name “label”. Don’t forget to embed the fonts. Convert the text field to movie clip with instance name item_label. Now select frame 10 and convert it to keyframe. On this frame you have to change the label’s position. So move the label few pixels up. Now select a frame between first and last frame and create motion tween. In the properties panel choose 100 for easing. Finally, the last step. Take the rectangle tool and draw a rectangle with size 100 x 30, choose “no stroke” and for fill color choose #CCCCCC. Place it in the same position as the invisible button. Convert it to movie clip with instance name “anim”. Select frame 10 and convert it to movie clip. In the properties panel select “Tint” for color and choose #99FF00 at 80%. Go back to frame 1, select the movie clip, go to the properties panel again and choose Alpha = 0% for color. Click somewhere between frame 1 and 10 and insert Motion Tween with Easing = 100.
That was all! Our button is ready. Go back to the main timeline, remove the button from the stage and create a new layer called “actions”.
4. Open the actions panel.

//setting the frame rate to 60 fps
stage.frameRate = 60;
//creating an array for our items
var menuArray:Array = new Array("Home", "About",
		"Tutorials|http://flashadvanced.com", "Articles", "Sources");
//spacing between the items
var spacing:Number = 5;
//we create a container for the items
var menuContainer:MovieClip = new MovieClip();
//adding the container to the stage
stage.addChild(menuContainer);

//we are looping through the menuArray
for(var i:int = 0; i < menuArray.length; i++){
	//creating a new Button class instance
	var btn:Button = new Button();
	//placing the buttons on the stage
	btn.x = 35 + (btn.width + spacing) * i;
	btn.y = 35;
	btn.itemNumber = i;
	//we check the button status every frame
	btn.addEventListener(Event.ENTER_FRAME, buttonStatus);
	//we want to split the buttons array so we can get both "label" and "URL"
	var splitArr:Array = menuArray[i].split("|");
	//the first element of the new array is the label of our button
	btn.item_label.label.text = splitArr[0];
	//the second is the URL address
	btn.itemURL = splitArr[1];
	//adding the buttons to the container
	menuContainer.addChild(btn);
}

function mouseOverHandler(e:MouseEvent):void{
	//if the cursor is over the button we set the "over" status to "true"
	e.target.over = true;
}

function mouseOutHandler(e:MouseEvent):void{
	//in the other case we set it to "false"
	e.target.over = false;
}

function mouseClickHandler(e:MouseEvent):void{
	var mc = e.target.parent;
	//on click we navigate to the specified URL
	if( mc.itemURL != undefined )
		navigateToURL(new URLRequest(mc.itemURL));
	else
		changePage(mc.itemNumber);
}

function buttonStatus(e:Event):void{
	var mc = e.target;
	//we check the button status
	if(mc.over == true)
		//if the cursor is over the button we play the animation
		mc.nextFrame();
	else
		//else we go to the previous frames
		mc.prevFrame();
}

function changePage(num:int):void{
	//we loop through the objects of our container
	for( var i:int = 0; i < menuContainer.numChildren; i++ ){
		var mc:MovieClip = MovieClip(menuContainer.getChildAt(i));
		mc.over = false;
		mc.clickArea.visible = true;
		//adding event listeners
		mc.addEventListener(MouseEvent.ROLL_OVER, mouseOverHandler);
		mc.addEventListener(MouseEvent.ROLL_OUT, mouseOutHandler);
		mc.addEventListener(MouseEvent.CLICK, mouseClickHandler);
	}

	var mcSelected = MovieClip(menuContainer.getChildAt(num));
	//when selected the button is not clickable
	mcSelected.over = true;
	mcSelected.clickArea.visible = false;
	//we remove the event listeners from the selected item
	mcSelected.removeEventListener(MouseEvent.ROLL_OVER, mouseOverHandler);
	mcSelected.removeEventListener(MouseEvent.ROLL_OUT, mouseOutHandler);
	mcSelected.removeEventListener(MouseEvent.CLICK, mouseClickHandler);

}

//we go to the homepage by default
changePage(0);

Here is the final result: