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%2Fglowing-button-effect%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

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: