In this quick tutorial I am going to show you how to create a nice glowing button effect using Flash and few lines of AS3 code in order to control the button. Let’s get started

1. Open a new Flash document and save it under “GlowingButton.fla”. Set the color to #000000 and the frame rate to 24 fps.

2. Take the rectangle tool and from the properties panel set the values like this:

Choose #FFCC00 for color and draw a rectangle with size 120px wide by 30px high. Now take the Selection tool and select the half of the rectangle like this:

Change the color of the selected half to #FDD535. The button background is now ready. Nice effect, right?

3. Select the whole rectangle and convert it to Movie Clip symbol. Type “golden_btn” for instance name. Now double click the movie clip to go inside its timeline. Once again, select the whole rectangle and convert it to Movie Clip symbol.

4. Click on frame 20 and convert it to Keyframe. Now, on frame 20, select the movie clip, then open the Filters Panel and select the Glow filter like this:

For filter color choose #FFCC00.
Now select a frame between frame 1 and 20 and create Motion Tween. From the properties panel set the tween easing to 100. Select the whole 20 frames and then by right clicking select Copy Frames:

Select frame 21 and by right clicking select Paste Frames.
Now select the copied frames and again by right clicking select Reverse Frames.

5. Create new layer called “text”. Take the text tool and type something. For font choose Tahoma, bold, size 18, color #990000. Convert the text field to movie clip. Click on frame 20 and convert it to Keyframe.
When you are still on frame 20, select the text field movie clip, go to Properties Panel and under Color choose Tint. For color choose #000000:

Click somewhere between frame 1 and frame 20 and create Motion Tween. Repeat the step where you copy, paste and reverse the frames.

6. Create a new layer called “actions” and convert frame 20 and 40 to Keyframes. On frames 1, 20, 40 open the actions panel and type “stop();“.

Our glowing button is ready! All we have to do is to go back to the main Scene and type some actionscript.

7. On the main Scene, create a new layer called “actions” and open the Actions Panel.

//setting the button properties
golden_btn.mouseChildren = false;
golden_btn.buttonMode = true;

//adding event listeners to our button
golden_btn.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
golden_btn.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
golden_btn.addEventListener(MouseEvent.CLICK, mouseClickHandler);

function mouseOverHandler(e:MouseEvent):void{
	golden_btn.gotoAndPlay(2);
}

function mouseOutHandler(e:MouseEvent):void{
	golden_btn.gotoAndPlay(21);
}

function mouseClickHandler(e:MouseEvent):void{
	//navigating to URL on click
	navigateToURL(new URLRequest("http://flashadvanced.com"));
}

That's all!

Here is the final result:

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: