<?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 User &#187; glow</title>
	<atom:link href="http://www.flashuser.net/tag/glow/feed" rel="self" type="application/rss+xml" />
	<link>http://www.flashuser.net</link>
	<description>Useful and daily inspiration resources from web design, css, wordpress, graphic design, photography, illustrator, photoshop.</description>
	<lastBuildDate>Tue, 07 Feb 2012 10:23:54 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Tutorial: Flash Glow Buttons Menu</title>
		<link>http://www.flashuser.net/flash-menus/tutorial-flash-glow-buttons-menu.html</link>
		<comments>http://www.flashuser.net/flash-menus/tutorial-flash-glow-buttons-menu.html#comments</comments>
		<pubDate>Thu, 10 Sep 2009 15:12:47 +0000</pubDate>
		<dc:creator>flashuser</dc:creator>
				<category><![CDATA[Flash Menus]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[actionscript]]></category>
		<category><![CDATA[buttons]]></category>
		<category><![CDATA[glow]]></category>
		<category><![CDATA[menu]]></category>
		<category><![CDATA[tutorial]]></category>

		<guid isPermaLink="false">http://www.flashuser.net/?p=2077</guid>
		<description><![CDATA[In this tutorial I&#8217;ll show you how to use the glow filter in Actionscript 3. I&#8217;ll create a vertical menu that will have a good looking glow effect for each item. Along with the glow I&#8217;ll add a tween to have a smooth transition. So let&#8217;s begin. Here is what we&#8217;ll end up with: 
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="fm_glow_buttons_menu_1372467310"
			class="flashmovie"
			width="130"
			height="240">
	<param name="movie" value="http://www.flashuser.net/flash-files/tutorials/glow_buttons_menu_as3/glow_buttons_menu.swf" />
	<!--[if !IE]>-->
	<object	type="application/x-shockwave-flash"
			data="http://www.flashuser.net/flash-files/tutorials/glow_buttons_menu_as3/glow_buttons_menu.swf"
			name="fm_glow_buttons_menu_1372467310"
			width="130"
			height="240">
	<!--<![endif]-->
		 
	<!--[if !IE]>-->
	</object>
	<!--<![endif]-->
</object> 1. Open up Flash and create a new ActionScript 3.0 file. 2. Create a new MovieClip (Insert->New Symbol). I named it &#8220;about&#8221;. Draw a rounded rectangle (I put 10 for the roundness) and create a TextField for the button&#8217;s name.(I typed [...]]]></description>
			<content:encoded><![CDATA[<p>In this tutorial I&#8217;ll show you how to use the glow filter in Actionscript 3. I&#8217;ll create a vertical menu that will have a good looking glow effect for each item. Along with the glow I&#8217;ll add a tween to have a smooth transition. So let&#8217;s begin.</p>
<p><span id="more-2077"></span></p>
<p>Here is what we&#8217;ll end up with:</p>
<div align="center" class="border-media">

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="fm_glow_buttons_menu_104363847"
			class="flashmovie"
			width="130"
			height="240">
	<param name="movie" value="http://www.flashuser.net/flash-files/tutorials/glow_buttons_menu_as3/glow_buttons_menu.swf" />
	<!--[if !IE]>-->
	<object	type="application/x-shockwave-flash"
			data="http://www.flashuser.net/flash-files/tutorials/glow_buttons_menu_as3/glow_buttons_menu.swf"
			name="fm_glow_buttons_menu_104363847"
			width="130"
			height="240">
	<!--<![endif]-->
		<br />
 <!-- Begin Alternate Content --></p>
<p>
 <a href="http://adobe.com/go/getflashplayer"><br />
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /><br />
</a>
 </p>
<p><!-- End Alternate Content --></p>

	<!--[if !IE]>-->
	</object>
	<!--<![endif]-->
</object>
</div>
<p><strong>1. </strong>Open up Flash and create a new ActionScript 3.0 file.</p>
<p><strong>2. </strong>Create a new MovieClip (Insert->New Symbol). I named it <strong>&#8220;about&#8221;</strong>. Draw a rounded rectangle (I put 10 for the roundness) and create a TextField for the button&#8217;s name.(I typed <strong>ABOUT</strong>). Check the image bellow.</p>
<div align="center" class="border-media">
<img src="http://www.flashuser.net/wp-content/uploads/2009/09/glow_1.jpg" alt="glow_1" title="glow_1" width="240" height="112" class="alignnone size-full wp-image-2080" />
</div>
<p><strong>3. </strong> For the other two menu items duplicate the <strong>about</strong> MovieClip(right click on it in the library &#8211; Duplicate). Drag each buttons on the stage, align them and give each an instance name. (<strong>about</strong>, <strong>work</strong>, <strong>contact</strong>)</p>
<p><strong>4. </strong> Open the Actions tab and import this classes.</p>
<pre class="brush: as3; title: ; notranslate">
import flash.filters.BitmapFilterQuality;
import flash.filters.GlowFilter;
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;
</pre>
<p><strong>5. </strong> We&#8217;ll make each MovieClip to behave like a button. The <strong>aux1</strong> variable is used on the <strong>mouseOverHandler</strong> to know witch item must have the glow effect. Attach for each button the mouse handler functions for rollOver and rollOut.</p>
<pre class="brush: as3; title: ; notranslate">
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(&quot;mouseOver&quot;, mouseOverHandler);
about.addEventListener(&quot;mouseOut&quot;, mouseOutHandler);
work.addEventListener(&quot;mouseOver&quot;, mouseOverHandler);
work.addEventListener(&quot;mouseOut&quot;, mouseOutHandler);
contact.addEventListener(&quot;mouseOver&quot;, mouseOverHandler);
contact.addEventListener(&quot;mouseOut&quot;, mouseOutHandler);
</pre>
<p><strong>6. </strong>Create the glow filters and attach them for each button.</p>
<pre class="brush: as3; title: ; notranslate">
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, &quot;blurX&quot;, Regular.easeOut, 2, 2, 1, true);
var aboutGlowY:Tween = new Tween(aboutGlow, &quot;blurY&quot;, Regular.easeOut, 2, 2, 1, true);
var workGlowX:Tween = new Tween(workGlow, &quot;blurX&quot;, Regular.easeOut, 2, 2, 1, true);
var workGlowY:Tween = new Tween(workGlow, &quot;blurY&quot;, Regular.easeOut, 2, 2, 1, true);
var contactGlowX:Tween = new Tween(contactGlow, &quot;blurX&quot;, Regular.easeOut, 2, 2, 1, true);
var contactGlowY:Tween = new Tween(contactGlow, &quot;blurY&quot;, Regular.easeOut, 2, 2, 1, true);

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

function aboutFunc(e:TweenEvent) {
	about.filters = [aboutGlow];
}
function workFunc(e:TweenEvent) {
	work.filters = [workGlow];
}
function contactFunc(e:TweenEvent) {
	contact.filters = [contactGlow];
}
</pre>
<p><strong>7. </strong>The mouse handler functions for rollOver and rollOut.</p>
<pre class="brush: as3; title: ; notranslate">
function mouseOverHandler(e:MouseEvent):void {
	aux1 = e.target.name;
	switch (aux1) {
		case &quot;about&quot; :
			{
				aboutGlowX.continueTo(10, 0.5);
				aboutGlowY.continueTo(10, 0.5);
				break;

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

			};
		case &quot;contact&quot; :
			{
				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);

}
</pre>
<p><strong>8. </strong>All code:</p>
<pre class="brush: as3; title: ; notranslate">
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(&quot;mouseOver&quot;, mouseOverHandler);
about.addEventListener(&quot;mouseOut&quot;, mouseOutHandler);
work.addEventListener(&quot;mouseOver&quot;, mouseOverHandler);
work.addEventListener(&quot;mouseOut&quot;, mouseOutHandler);
contact.addEventListener(&quot;mouseOver&quot;, mouseOverHandler);
contact.addEventListener(&quot;mouseOut&quot;, 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, &quot;blurX&quot;, Regular.easeOut, 2, 2, 1, true);
var aboutGlowY:Tween = new Tween(aboutGlow, &quot;blurY&quot;, Regular.easeOut, 2, 2, 1, true);
var workGlowX:Tween = new Tween(workGlow, &quot;blurX&quot;, Regular.easeOut, 2, 2, 1, true);
var workGlowY:Tween = new Tween(workGlow, &quot;blurY&quot;, Regular.easeOut, 2, 2, 1, true);
var contactGlowX:Tween = new Tween(contactGlow, &quot;blurX&quot;, Regular.easeOut, 2, 2, 1, true);
var contactGlowY:Tween = new Tween(contactGlow, &quot;blurY&quot;, Regular.easeOut, 2, 2, 1, true);

aboutGlowX.addEventListener(&quot;motionChange&quot;, aboutFunc);
workGlowX.addEventListener(&quot;motionChange&quot;, workFunc);
contactGlowX.addEventListener(&quot;motionChange&quot;, 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 &quot;about&quot; :
			{
				aboutGlowX.continueTo(10, 0.5);
				aboutGlowY.continueTo(10, 0.5);
				break;

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

			};
		case &quot;contact&quot; :
			{
				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);

}
</pre>
<div id="download-file"><a href="http://www.flashuser.net/flash-files/tutorials/glow_buttons_menu_as3/glow_buttons_menu.zip" color="FF0000" target="_blank"><span>Download the source file</span></a></div>
]]></content:encoded>
			<wfw:commentRss>http://www.flashuser.net/flash-menus/tutorial-flash-glow-buttons-menu.html/feed</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using disk: basic
Page Caching using disk: enhanced

Served from: www.flashuser.net @ 2012-02-07 05:18:36 -->
