Glow button menu in Actionscript 3

In this tutorial you will learn how to create a glow button menu effect in Actionscript 3. The menu buttons will show a glow effect when the mouse is over the menu items, and the glow effect will disappear when the mouse is off the menu items. You will need the tweenMax plug-in for this tutorial which can be downloaded from blog.greensock.com/tweenmaxas3. If you down know how to install tweenMax checkout this tutorial.


Glow button menu in Actionscript 3

Step 1

Open a new Flash AS3 file.
Select the Rectangle tool (R) and create your buttons on the stage. I have used # #99FF32 colour for my buttons, but you can use whatever colour you wish. When you have created one button, simply duplicate the number of buttons you want. I have placed my buttons horizontally you can place them vertically if you wish.



Step 2

Select the Text tool (T) and enter the name of the menu item you want inside the rectangle. I have used Tahoma bold font with #0000FF colour.



Step 3

Convert each of your menu items in movie clips (F8). The select each item in turn and give them the following instance names accordingly: menu1_mc, menu2_mc and menu3_mc.


Step 4

On the timeline insert a new layer called Actions. Then open up the Actions panel and enter the following code:

//Import the packages needed.
import gs.*;
import gs.easing.*;

//Array to hold all the button instances.
var buttonArr:Array = new Array(menu1_mc,menu2_mc,menu3_mc);

//Loop through all the button instance using the ‘for loop’.
for (var i =0; i < buttonArr.length; i++) {
    buttonArr[i].addEventListener(MouseEvent.MOUSE_OVER, glow);
    buttonArr[i].addEventListener(MouseEvent.MOUSE_OUT, noGlow);
    buttonArr[i].buttonMode = true;
}

//Function to create glow effect.
function glow(event:MouseEvent):void {
TweenMax.to(event.currentTarget, 1, {glowFilter:{color:0x0000ff, alpha:1, blurX:30, blurY:30,strength:1}});
}

//Function to remove glow effect.
function noGlow(event:MouseEvent):void {
TweenMax.to(event.currentTarget, 1, {glowFilter:{alpha:0}});;
}

Step 5

Test your glow button menu Ctrl + Enter. Now move your mouse over the menu items and you should see a glow effect around the button.



You should now have a glow button menu in Actionscript 3.