<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Flash and ActionScript tutorials - flashadvanced &#187; glow filter</title>
	<atom:link href="http://flashadvanced.com/tag/glow-filter/feed/" rel="self" type="application/rss+xml" />
	<link>http://flashadvanced.com</link>
	<description>Become an advanced flash developer</description>
	<lastBuildDate>Mon, 11 Jan 2010 22:14:13 +0000</lastBuildDate>
	
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Glowing Button Effect</title>
		<link>http://flashadvanced.com/actionscript-3-basics/glowing-button-effect/</link>
		<comments>http://flashadvanced.com/actionscript-3-basics/glowing-button-effect/#comments</comments>
		<pubDate>Thu, 13 Aug 2009 13:44:45 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[ActionScript 3.0 Basics]]></category>
		<category><![CDATA[animated buttons]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[glow filter]]></category>

		<guid isPermaLink="false">http://flashadvanced.com/?p=426</guid>
		<description><![CDATA[


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&#8217;s get started

1. Open a new Flash document and save it under &#8220;GlowingButton.fla&#8221;. Set the color to #000000 and the frame rate to [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://flashadvanced.com/?p=426"><br />
<img src="http://flashadvanced.com/wp-content/upload/glowing/glowing.jpg" /><br />
</a></p>
<p>In this <strong>quick tutorial</strong> 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&#8217;s get started</p>
<p><span id="more-426"></span></p>
<p><span style="color: #ff0000;">1.</span> Open a new Flash document and save it under &#8220;GlowingButton.fla&#8221;. Set the color to #000000 and the frame rate to 24 fps.</p>
<p><span style="color: #ff0000;">2.</span> Take the rectangle tool and from the properties panel set the values like this:</p>
<p><img src="http://flashadvanced.com/wp-content/upload/glowing/properties.jpg" /></p>
<p>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:</p>
<p><img src="http://flashadvanced.com/wp-content/upload/glowing/selection.jpg" /></p>
<p>Change the color of the selected half to #FDD535. The button background is now ready. Nice effect, right?</p>
<p><span style="color: #ff0000;">3.</span> Select the whole rectangle and convert it to Movie Clip symbol. Type &#8220;golden_btn&#8221; 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.</p>
<p><span style="color: #ff0000;">4.</span> Click on frame 20 and convert it to <strong>Keyframe</strong>. Now, on frame 20, select the movie clip, then open the Filters Panel and select the <strong>Glow</strong> filter like this:</p>
<p><img src="http://flashadvanced.com/wp-content/upload/glowing/filter.jpg" /></p>
<p>For filter color choose #FFCC00.<br />
Now select a frame between frame 1 and 20 and create <strong>Motion Tween</strong>. From the properties panel set the tween <strong>easing</strong> to 100. Select the whole 20 frames and then by right clicking select Copy Frames:</p>
<p><img src="http://flashadvanced.com/wp-content/upload/glowing/copy.jpg" /></p>
<p>Select frame <strong>21</strong> and by right clicking select Paste Frames.<br />
Now select the copied frames and again by right clicking select Reverse Frames.</p>
<p><span style="color: #ff0000;">5.</span> Create new layer called &#8220;text&#8221;. 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.<br />
When you are still on frame 20, select the text field movie clip, go to Properties Panel and under Color choose <strong>Tint</strong>. For color choose #000000:</p>
<p><img src="http://flashadvanced.com/wp-content/upload/glowing/tint.jpg" /></p>
<p>Click somewhere between frame 1 and frame 20 and create Motion Tween. Repeat the step where you copy, paste and reverse the frames.</p>
<p><span style="color: #ff0000;">6.</span> Create a new layer called &#8220;actions&#8221; and convert frame 20 and 40 to Keyframes. On frames 1, 20, 40 open the actions panel and type &#8220;<strong>stop();</strong>&#8220;.</p>
<p>Our glowing button is ready! All we have to do is to go back to the main Scene and type some actionscript.</p>
<p><span style="color: #ff0000;">7.</span> On the main Scene, create a new layer called &#8220;actions&#8221; and open the Actions Panel.</p>
<pre><code>
//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"));
}
</pre>
<p></code></p>
<p>That's all!</p>
<h4>Here is the final result:</h4>
<p><object width="150" height="60"><param name="movie" value="http://flashadvanced.com/wp-content/upload/glowing/GlowingButton.swf"><embed src="http://flashadvanced.com/wp-content/upload/glowing/GlowingButton.swf" width="150" height="60"></embed></object></p>
<p style="text-align: left; margin: 40px 40px 40px 0;"><a href="http://www.flashadvanced.com/wp-content/upload/glowing/glowing.zip"><img src="http://flashadvanced.com/wp-content/upload/other/download.jpg" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://flashadvanced.com/actionscript-3-basics/glowing-button-effect/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>
