Tutorial: Flash Glow Buttons Menu

In this tutorial I’ll show you how to use the glow filter in Actionscript 3. I’ll create a vertical menu that will have a good looking glow effect for each item. Along with the glow I’ll add a tween to have a smooth transition. So let’s begin.

Here is what we’ll end up with:

1. Open up Flash and create a new ActionScript 3.0 file.

2. Create a new MovieClip (Insert->New Symbol). I named it “about”. Draw a rounded rectangle (I put 10 for the roundness) and create a TextField for the button’s name.(I typed ABOUT). Check the image bellow.

3. For the other two menu items duplicate the about MovieClip(right click on it in the library – Duplicate). Drag each buttons on the stage, align them and give each an instance name. (about, work, contact)

4. Open the Actions tab and import this classes.

import flash.filters.BitmapFilterQuality;
import flash.filters.GlowFilter;
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;

5. We’ll make each MovieClip to behave like a button. The aux1 variable is used on the mouseOverHandler to know witch item must have the glow effect. Attach for each button the mouse handler functions for rollOver and rollOut.

var aux1;

about.mouseChildren = false;
about.buttonMode = true;
about.useHandCursor = true;

work.mouseChildren = false;
work.buttonMode = true;
work.useHandCursor = true;

contact.mouseChildren = false;
contact.buttonMode = true;
contact.useHandCursor = true;

about.addEventListener("mouseOver", mouseOverHandler);
about.addEventListener("mouseOut", mouseOutHandler);
work.addEventListener("mouseOver", mouseOverHandler);
work.addEventListener("mouseOut", mouseOutHandler);
contact.addEventListener("mouseOver", mouseOverHandler);
contact.addEventListener("mouseOut", mouseOutHandler);

6. Create the glow filters and attach them for each button.

var aboutGlow:GlowFilter = new GlowFilter(0xD13083, 1, 2, 2, 2, 3, false, false);
var workGlow:GlowFilter = new GlowFilter(0xD13083, 1, 2, 2, 2, 3, false, false);
var contactGlow:GlowFilter = new GlowFilter(0xD13083, 1, 2, 2, 2, 3, false, false);

var aboutGlowX:Tween = new Tween(aboutGlow, "blurX", Regular.easeOut, 2, 2, 1, true);
var aboutGlowY:Tween = new Tween(aboutGlow, "blurY", Regular.easeOut, 2, 2, 1, true);
var workGlowX:Tween = new Tween(workGlow, "blurX", Regular.easeOut, 2, 2, 1, true);
var workGlowY:Tween = new Tween(workGlow, "blurY", Regular.easeOut, 2, 2, 1, true);
var contactGlowX:Tween = new Tween(contactGlow, "blurX", Regular.easeOut, 2, 2, 1, true);
var contactGlowY:Tween = new Tween(contactGlow, "blurY", Regular.easeOut, 2, 2, 1, true);

aboutGlowX.addEventListener("motionChange", aboutFunc);
workGlowX.addEventListener("motionChange", workFunc);
contactGlowX.addEventListener("motionChange", contactFunc);

function aboutFunc(e:TweenEvent) {
	about.filters = [aboutGlow];
}
function workFunc(e:TweenEvent) {
	work.filters = [workGlow];
}
function contactFunc(e:TweenEvent) {
	contact.filters = [contactGlow];
}

7. The mouse handler functions for rollOver and rollOut.

function mouseOverHandler(e:MouseEvent):void {
	aux1 = e.target.name;
	switch (aux1) {
		case "about" :
			{
				aboutGlowX.continueTo(10, 0.5);
				aboutGlowY.continueTo(10, 0.5);
				break;

			};
		case "work" :
			{
				workGlowX.continueTo(10, 0.5);
				workGlowY.continueTo(10, 0.5);
				break;

			};
		case "contact" :
			{
				contactGlowX.continueTo(10,  0.5);
				contactGlowY.continueTo(10,  0.5);
				break;

		}
	}
};
function mouseOutHandler(e:MouseEvent):void {
	aboutGlowX.continueTo(2, 1);
	aboutGlowY.continueTo(2, 1);
	workGlowX.continueTo(2, 1);
	workGlowY.continueTo(2, 1);
	contactGlowX.continueTo(2, 1);
	contactGlowY.continueTo(2, 1);

}

8. All code:

import flash.filters.BitmapFilterQuality;
import flash.filters.GlowFilter;
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;

var aux1;

about.mouseChildren = false;
about.buttonMode = true;
about.useHandCursor = true;

work.mouseChildren = false;
work.buttonMode = true;
work.useHandCursor = true;

contact.mouseChildren = false;
contact.buttonMode = true;
contact.useHandCursor = true;

about.addEventListener("mouseOver", mouseOverHandler);
about.addEventListener("mouseOut", mouseOutHandler);
work.addEventListener("mouseOver", mouseOverHandler);
work.addEventListener("mouseOut", mouseOutHandler);
contact.addEventListener("mouseOver", mouseOverHandler);
contact.addEventListener("mouseOut", mouseOutHandler);

var aboutGlow:GlowFilter = new GlowFilter(0xD13083, 1, 2, 2, 2, 3, false, false);
var workGlow:GlowFilter = new GlowFilter(0xD13083, 1, 2, 2, 2, 3, false, false);
var contactGlow:GlowFilter = new GlowFilter(0xD13083, 1, 2, 2, 2, 3, false, false);

var aboutGlowX:Tween = new Tween(aboutGlow, "blurX", Regular.easeOut, 2, 2, 1, true);
var aboutGlowY:Tween = new Tween(aboutGlow, "blurY", Regular.easeOut, 2, 2, 1, true);
var workGlowX:Tween = new Tween(workGlow, "blurX", Regular.easeOut, 2, 2, 1, true);
var workGlowY:Tween = new Tween(workGlow, "blurY", Regular.easeOut, 2, 2, 1, true);
var contactGlowX:Tween = new Tween(contactGlow, "blurX", Regular.easeOut, 2, 2, 1, true);
var contactGlowY:Tween = new Tween(contactGlow, "blurY", Regular.easeOut, 2, 2, 1, true);

aboutGlowX.addEventListener("motionChange", aboutFunc);
workGlowX.addEventListener("motionChange", workFunc);
contactGlowX.addEventListener("motionChange", contactFunc);

function aboutFunc(e:TweenEvent) {
	about.filters = [aboutGlow];
}
function workFunc(e:TweenEvent) {
	work.filters = [workGlow];
}
function contactFunc(e:TweenEvent) {
	contact.filters = [contactGlow];
}
function mouseOverHandler(e:MouseEvent):void {
	aux1 = e.target.name;
	switch (aux1) {
		case "about" :
			{
				aboutGlowX.continueTo(10, 0.5);
				aboutGlowY.continueTo(10, 0.5);
				break;

			};
		case "work" :
			{
				workGlowX.continueTo(10, 0.5);
				workGlowY.continueTo(10, 0.5);
				break;

			};
		case "contact" :
			{
				contactGlowX.continueTo(10,  0.5);
				contactGlowY.continueTo(10,  0.5);
				break;

		}
	}
};
function mouseOutHandler(e:MouseEvent):void {
	aboutGlowX.continueTo(2, 1);
	aboutGlowY.continueTo(2, 1);
	workGlowX.continueTo(2, 1);
	workGlowY.continueTo(2, 1);
	contactGlowX.continueTo(2, 1);
	contactGlowY.continueTo(2, 1);

}

flashuser

Hi, there! I'm Alin the founder of Flashuser.net. My passions are related to web and graphic design, photography and climbing. You can find me at Twitter and Facebook