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.
2 comments:
ReferenceError: Error #1069: Property glowFilter not found on MOVIECLIP and there is no default value.
@Clinto
Make sure you don't have a typo.