<?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>GhostWire Studios &#187; Filters</title>
	<atom:link href="http://www.ghostwire.com/blog/archives/tag/filters/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.ghostwire.com/blog</link>
	<description>Flash UI Components</description>
	<lastBuildDate>Thu, 22 Apr 2010 03:33:15 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>uiWindow: Background Drop Shadow + Glow Effect</title>
		<link>http://www.ghostwire.com/blog/archives/uiwindow-background-drop-shadow-glow-effect/</link>
		<comments>http://www.ghostwire.com/blog/archives/uiwindow-background-drop-shadow-glow-effect/#comments</comments>
		<pubDate>Sat, 12 Dec 2009 16:02:47 +0000</pubDate>
		<dc:creator>sunny</dc:creator>
				<category><![CDATA[Aspire UI]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[Actionscript]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[Filters]]></category>
		<category><![CDATA[Flash Components]]></category>
		<category><![CDATA[Themes]]></category>
		<category><![CDATA[Window]]></category>

		<guid isPermaLink="false">http://www.ghostwire.com/blog/?p=1600</guid>
		<description><![CDATA[The default behavior of the uiWindow container is to cast a drop shadow when it is active in the foreground, and not do so when it is inactive or when it is maximized to fill the stage.  This behavior is determined by the component instance&#8217;s background property value.

Default Shadow
The following is the default background [...]]]></description>
			<content:encoded><![CDATA[<p>The default behavior of the <a href="http://www.ghostwire.com/aspireui/docs/usage/uiwindow">uiWindow</a> container is to cast a drop shadow when it is active in the foreground, and not do so when it is inactive or when it is maximized to fill the stage.  This behavior is determined by the component instance&#8217;s <code>background</code> property value.</p>
<p><span id="more-1600"></span><br />
<strong>Default Shadow</strong><br />
The following is the default <code>background</code> property value for all <code>uiWindow</code> instances:<br />
<code>{shadow_up:0x000000, shadow_up_maximized:-1};</code><br />
That tells the instance it should render a drop shadow of color 0&#215;000000 when its visual state is &#8220;up&#8221;, and not render any drop shadow when its visual state is &#8220;up_maximized&#8221; (when it is maximized, the drop shadow cannot be seen so applying the effect will be pointless).</p>
<p><img src="http://www.ghostwire.com/blog/wp-content/uploads/winxp.png" alt="winxp" title="winxp" width="480" height="416" class="alignleft size-full wp-image-1608" /></p>
<p><!-- --><br />
<strong>Always Cast Drop Shadow</strong><br />
To make a <code>uiWindow</code> instance <em>always</em> cast a drop shadow, you can set its background property as below:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">var</span> win:uiWindow = <span style="color: #000000; font-weight: bold;">new</span> uiWindow<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
win.<span style="color: #0066CC;">background</span> = <span style="color: #66cc66;">&#123;</span>shadow:0x000000<span style="color: #66cc66;">&#125;</span>;</pre></div></div>

<p><img src="http://www.ghostwire.com/blog/wp-content/uploads/winxp_always.png" alt="winxp_always" title="winxp_always" width="480" height="416" class="alignleft size-full wp-image-1610" /></p>
<p><!-- --><br />
<strong>Never Cast Drop Shadow</strong><br />
To make a <code>uiWindow</code> instance <em>never</em> cast a drop shadow, you can set its background property to <code>null</code>:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">var</span> win:uiWindow = <span style="color: #000000; font-weight: bold;">new</span> uiWindow<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
win.<span style="color: #0066CC;">background</span> = <span style="color: #000000; font-weight: bold;">null</span>;</pre></div></div>

<p><img src="http://www.ghostwire.com/blog/wp-content/uploads/winxp_none.png" alt="winxp_none" title="winxp_none" width="480" height="416" class="alignleft size-full wp-image-1611" /></p>
<p><!-- --><br />
<strong>Glow Effect</strong><br />
As of v1.3.0+, you can also get the <code>uiWindow</code> instance (any <code>uiComponent</code>, actually) to cast a glow effect:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">var</span> win:uiWindow = <span style="color: #000000; font-weight: bold;">new</span> uiWindow<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
win.<span style="color: #0066CC;">background</span> = <span style="color: #66cc66;">&#123;</span>glow_up:0x000000, glow_up_maximized:-<span style="color: #cc66cc;">1</span><span style="color: #66cc66;">&#125;</span>;</pre></div></div>

<p><img src="http://www.ghostwire.com/blog/wp-content/uploads/wingraylic_glow.png" alt="wingraylic_glow" title="wingraylic_glow" width="480" height="416" class="alignleft size-full wp-image-1616" /></p>
<p><!-- --><br />
<strong>Drop Shadow + Glow</strong><br />
In the &#8220;vista&#8221; theme, the <code>uiWindow</code> instances use drop shadow + glow effects:<br />
<img src="http://www.ghostwire.com/blog/wp-content/uploads/winvista.png" alt="winvista" title="winvista" width="480" height="416" class="alignleft size-full wp-image-1609" /></p>
<p>See: <a href="http://www.ghostwire.com/blog/archives/aspire-ui-components-theme-vista-released/">&#8220;vista&#8221; themed uiWindow demo</a></p>
<p><!-- --><br />
<strong>Specifying Default uiWindow Background Property</strong><br />
If you wish to override the default background property value, ie set the default value for all <code>uiWindow</code> instances, you can do so by defining it in the theme folder&#8217;s &#8220;rules.xml&#8221;:</p>

<div class="wp_syntax"><div class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;Window</span> <span style="color: #000066;">edge</span>=<span style="color: #ff0000;">&quot;5,5,5&quot;</span> <span style="color: #000066;">slices</span>=<span style="color: #ff0000;">&quot;up,out,up_maximized,out_maximized&quot;</span> <span style="color: #000066;">prefs</span>=<span style="color: #ff0000;">&quot;padding|5|background|shadow_up,0,shadow_up_maximized,-1,glow,0,glowDepth,12,glow_up_maximized,-1&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span></pre></div></div>

<p><!-- --><br />
<strong>Aspire UI Components</strong><br />
Aspire UI is a library of Actionscript 3.0 (AS3) classes for building flexible and lightweight UI elements in Adobe Flash applications. Key features include easy skinning using PNG image files, automatic tab focus ordering, CSS text styles, and layout management. This is a pure AS3 library with no dependency on the Flex framework.</p>
<p>You may experiment with the various features by <a href="/aspireui/download/">downloading the trial version</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ghostwire.com/blog/archives/uiwindow-background-drop-shadow-glow-effect/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[AS3] Drawing Outline on Text Glyphs</title>
		<link>http://www.ghostwire.com/blog/archives/as3-drawing-outline-on-text-glyphs/</link>
		<comments>http://www.ghostwire.com/blog/archives/as3-drawing-outline-on-text-glyphs/#comments</comments>
		<pubDate>Wed, 18 Nov 2009 09:20:51 +0000</pubDate>
		<dc:creator>sunny</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Flash AS3]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[Actionscript]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[Filters]]></category>
		<category><![CDATA[Fonts]]></category>
		<category><![CDATA[TextField]]></category>

		<guid isPermaLink="false">http://ghostwire.com/blog/?p=429</guid>
		<description><![CDATA[Here is how you can draw an outline on text glyphs during run-time via ActionScript. This method works with embedded as well as non-embedded fonts.

First, set up the TextField:

// ActionScript 3.0
var txt:TextField = new TextField&#40;&#41;;
// new TextFormat(font, size, color)
txt.defaultTextFormat = new TextFormat&#40;&#34;DejaVu Sans&#34;, 21, 0xFFFFFF&#41;;
txt.antiAliasType = AntiAliasType.ADVANCED;
txt.autoSize = TextFieldAutoSize.LEFT;
txt.text = &#34;The quick brown fox jumps [...]]]></description>
			<content:encoded><![CDATA[<p>Here is how you can draw an outline on text glyphs during run-time via ActionScript. This method works with embedded as well as non-embedded fonts.</p>
<p><span id="more-429"></span><br />
First, set up the TextField:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #808080; font-style: italic;">// ActionScript 3.0</span>
<span style="color: #000000; font-weight: bold;">var</span> txt:<span style="color: #0066CC;">TextField</span> = <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #0066CC;">TextField</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #808080; font-style: italic;">// new TextFormat(font, size, color)</span>
txt.<span style="color: #006600;">defaultTextFormat</span> = <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #0066CC;">TextFormat</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;DejaVu Sans&quot;</span>, <span style="color: #cc66cc;">21</span>, 0xFFFFFF<span style="color: #66cc66;">&#41;</span>;
txt.<span style="color: #006600;">antiAliasType</span> = AntiAliasType.<span style="color: #006600;">ADVANCED</span>;
txt.<span style="color: #0066CC;">autoSize</span> = TextFieldAutoSize.<span style="color: #0066CC;">LEFT</span>;
txt.<span style="color: #0066CC;">text</span> = <span style="color: #ff0000;">&quot;The quick brown fox jumps over the lazy dog.&quot;</span>;
txt.<span style="color: #006600;">x</span> = <span style="color: #cc66cc;">5</span>;
txt.<span style="color: #006600;">y</span> = <span style="color: #cc66cc;">5</span>;
addChild<span style="color: #66cc66;">&#40;</span>txt<span style="color: #66cc66;">&#41;</span>;</pre></div></div>

<p><!-- --><br />
<strong>Drawing The Outline</strong><br />
To draw an outline around the text glyphs, use the <code>flash.filters.GlowFilter</code>:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #808080; font-style: italic;">// new GlowFilter(color, alpha, blurX, blurY, strength)</span>
txt.<span style="color: #006600;">filters</span> = <span style="color: #66cc66;">&#91;</span><span style="color: #000000; font-weight: bold;">new</span> GlowFilter<span style="color: #66cc66;">&#40;</span>0x000000, <span style="color: #cc66cc;">1.0</span>, <span style="color: #cc66cc;">2</span>, <span style="color: #cc66cc;">2</span>, <span style="color: #cc66cc;">4</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#93;</span>;</pre></div></div>

<p><img src="http://ghostwire.com/blog/wp-content/uploads/outlinetext_4.png" alt="outline text weight 4" title="outline text weight 4" width="596" height="96" class="alignleft size-full wp-image-433" /></p>
<p><!-- --><br />
<strong>Adjusting The Outline Thickness</strong><br />
To thicken the outline, increase the values for &#8220;blurX&#8221;, &#8220;blurY&#8221; and &#8220;strength&#8221;.  The value of &#8220;blurX&#8221;/&#8221;blurY&#8221; should be the same.  You can try various values to suit your needs, but the value of &#8220;strength&#8221; should be kept at double that of &#8220;blurX&#8221;/&#8221;blurY&#8221;.  For example, if I were to use value of 4 for &#8220;blurX&#8221;/&#8221;blurY&#8221;, I would set &#8220;strength&#8221; as 8.  Setting &#8220;strength&#8221; too low will cause blurring to be visible; setting it excessively high and the outline may become distorted.</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #808080; font-style: italic;">// new GlowFilter(color, alpha, blurX, blurY, strength)</span>
txt.<span style="color: #006600;">filters</span> = <span style="color: #66cc66;">&#91;</span><span style="color: #000000; font-weight: bold;">new</span> GlowFilter<span style="color: #66cc66;">&#40;</span>0x000000, <span style="color: #cc66cc;">1.0</span>, <span style="color: #cc66cc;">4</span>, <span style="color: #cc66cc;">4</span>, <span style="color: #cc66cc;">8</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#93;</span>;</pre></div></div>

<p><img src="http://ghostwire.com/blog/wp-content/uploads/outlinetext_8.png" alt="outline text weight 8" title="outline text weight 8" width="596" height="96" class="alignleft size-full wp-image-432" /></p>
<p><!-- --><br />
<strong>Aspire UI</strong><br />
If you are using the <a href="http://www.ghostwire.com/aspireui/download/">Aspire UI library</a>, this feature is already built-in via the <code>uiTextStyles</code> manager:<br />
<a href="http://ghostwire.com/aspireui/docs/textstyles/outline-and-shadow">http://ghostwire.com/aspireui/docs/textstyles/outline-and-shadow</a><br />
The &#8220;outlineWeight&#8221; text style property (v1.2.2+) determines the thickness of the outline.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ghostwire.com/blog/archives/as3-drawing-outline-on-text-glyphs/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[AS3] Applying BitmapFilters In The Correct Order</title>
		<link>http://www.ghostwire.com/blog/archives/as3-applying-bitmapfilters-in-the-correct-order/</link>
		<comments>http://www.ghostwire.com/blog/archives/as3-applying-bitmapfilters-in-the-correct-order/#comments</comments>
		<pubDate>Sat, 08 Aug 2009 06:15:14 +0000</pubDate>
		<dc:creator>sunny</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Flash AS3]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[Actionscript]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[Filters]]></category>

		<guid isPermaLink="false">http://ghostwire.com/blog/?p=631</guid>
		<description><![CDATA[In the flash.filters package, you can find several image filter effects you can apply to any DisplayObject instance &#8211; BevelFilter, BlurFilter, ColorMatrixFilter, ConvolutionFilter, DisplacementMapFilter, DropShadowFilter, GlowFilter, GradientBevelFilter, and GradientGlowFilter.
To apply one or more of these image filter effects to a display object, set the filters property of the respective DisplayObject instance to an Array containing [...]]]></description>
			<content:encoded><![CDATA[<p>In the <code>flash.filters</code> package, you can find several image filter effects you can apply to any <code>DisplayObject</code> instance &#8211; <code>BevelFilter</code>, <code>BlurFilter</code>, <code>ColorMatrixFilter</code>, <code>ConvolutionFilter</code>, <code>DisplacementMapFilter</code>, <code>DropShadowFilter</code>, <code>GlowFilter</code>, <code>GradientBevelFilter</code>, and <code>GradientGlowFilter</code>.</p>
<p>To apply one or more of these image filter effects to a display object, set the <code>filters</code> property of the respective <code>DisplayObject</code> instance to an Array containing the filter object(s).</p>
<p><span id="more-631"></span><strong>Single Effect</strong><br />
For example, to give a Sprite a drop shadow:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">var</span> sp:Sprite = <span style="color: #000000; font-weight: bold;">new</span> Sprite<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
sp.<span style="color: #006600;">graphics</span>.<span style="color: #0066CC;">beginFill</span><span style="color: #66cc66;">&#40;</span>0x0000FF<span style="color: #66cc66;">&#41;</span>;
sp.<span style="color: #006600;">graphics</span>.<span style="color: #006600;">drawRect</span><span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">0</span>,<span style="color: #cc66cc;">0</span>,<span style="color: #cc66cc;">20</span>,<span style="color: #cc66cc;">20</span><span style="color: #66cc66;">&#41;</span>;
sp.<span style="color: #006600;">graphics</span>.<span style="color: #0066CC;">endFill</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
sp.<span style="color: #006600;">x</span> = <span style="color: #cc66cc;">10</span>;
sp.<span style="color: #006600;">y</span> = <span style="color: #cc66cc;">10</span>;
addChild<span style="color: #66cc66;">&#40;</span>sp<span style="color: #66cc66;">&#41;</span>;
&nbsp;
sp.<span style="color: #006600;">filters</span> = <span style="color: #66cc66;">&#91;</span><span style="color: #000000; font-weight: bold;">new</span> DropShadowFilter<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#93;</span>; <span style="color: #808080; font-style: italic;">// flash.filters.DropShadowFilter</span></pre></div></div>

<p><img src="http://ghostwire.com/blog/wp-content/uploads/applying_filters_0.png" alt="DropShadow" title="DropShadow" width="40" height="40" class="alignleft size-full wp-image-662" /></p>
<p>To give the Sprite a glow effect:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;">sp.<span style="color: #006600;">filters</span> = <span style="color: #66cc66;">&#91;</span><span style="color: #000000; font-weight: bold;">new</span> GlowFilter<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#93;</span>; <span style="color: #808080; font-style: italic;">// flash.filters.GlowFilter</span></pre></div></div>

<p><img src="http://ghostwire.com/blog/wp-content/uploads/applying_filters_1.png" alt="GlowFilter" title="GlowFilter width="40" height="40" class="alignleft size-full wp-image-662" /></p>
<p>Take note that after setting the <code>filters</code> property to an array, modifying the array itself will have no effect on the display object. In order to modify the filter effects on the display object, you must <em>set</em> the <code>filters</code> property:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;">sp.<span style="color: #006600;">filters</span> = <span style="color: #66cc66;">&#91;</span><span style="color: #000000; font-weight: bold;">new</span> DropShadowFilter<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#93;</span>;
sp.<span style="color: #006600;">filters</span><span style="color: #66cc66;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#93;</span> = <span style="color: #000000; font-weight: bold;">new</span> GlowFilter<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #808080; font-style: italic;">// NO EFFECT!</span>
sp.<span style="color: #006600;">filters</span> = <span style="color: #66cc66;">&#91;</span><span style="color: #000000; font-weight: bold;">new</span> GlowFilter<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#93;</span>;</pre></div></div>

<p><!-- --><br />
<strong>Composite Effect</strong><br />
If you are applying more than one effect to the same instance, take careful note of the index order of the filter objects in the array. The effects are applied in the same order as their index order in the array, ie the filter object in index position 0 is applied first, followed by the filter in position 1, and so on.  Swapping the positions of the filter objects in the array will obviously give you different results.</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;">sp.<span style="color: #006600;">filters</span> = <span style="color: #66cc66;">&#91;</span><span style="color: #000000; font-weight: bold;">new</span> GlowFilter<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>, <span style="color: #000000; font-weight: bold;">new</span> DropShadowFilter<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#93;</span>; <span style="color: #808080; font-style: italic;">// Glow, followed by DropShadow</span></pre></div></div>

<p><img src="http://ghostwire.com/blog/wp-content/uploads/applying_filters_2.png" alt="GlowFilter+DropShadow" title="GlowFilter+DropShadow width="40" height="40" class="alignleft size-full wp-image-662" /></p>
<p>If we change the positions:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;">sp.<span style="color: #006600;">filters</span> = <span style="color: #66cc66;">&#91;</span><span style="color: #000000; font-weight: bold;">new</span> DropShadowFilter<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>, <span style="color: #000000; font-weight: bold;">new</span> GlowFilter<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#93;</span>; <span style="color: #808080; font-style: italic;">// DropShadow, followed by Glow</span></pre></div></div>

<p><img src="http://ghostwire.com/blog/wp-content/uploads/applying_filters_3.png" alt="DropShadow+GlowFilter" title="DropShadow+GlowFilter width="40" height="40" class="alignleft size-full wp-image-662" /></p>
<p>Notice that the Glow now wraps around the DropShadow as well, because the drop shadow is drawn first, and so when the glow is drawn, it is rendered around the whole image which includes the drop shadow.</p>
<p>Therefore, when applying multiple image filter effects to the same display object, always take careful note of their index order in the <code>filters</code> array.</p>
<p><!-- --><br />
<strong>Adobe Flash IDE</strong><br />
The above applies when setting filters during run-time via ActionScript. If you are creating artwork using the Adobe Flash authoring IDE and applying filters via the Filters Panel, you can adjust the order of the effects by moving a filter up/down the list in the panel (click-and-hold on a filter, then drag and move it up/down to change its position in the list).</p>
<p><!-- --><br />
<strong>Reminder:</strong><br />
The <code>cacheAsBitmap</code> property of a display object is automatically set to <code>true</code> whenever you apply a filter to it (when its <code>filters</code> property is not <code>null</code>), ie the<code>cacheAsBitmap</code> property is reported as <code>true</code> for that display object, even if you set the property to <code>false</code>. If you clear all filters for a display object, the <code>cacheAsBitmap</code> setting changes to what it was last set to.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ghostwire.com/blog/archives/as3-applying-bitmapfilters-in-the-correct-order/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>[AS3] Embossed and Engraved Text Effects (Embedded Fonts)</title>
		<link>http://www.ghostwire.com/blog/archives/as3-embossed-and-engraved-text-effects-embedded-fonts/</link>
		<comments>http://www.ghostwire.com/blog/archives/as3-embossed-and-engraved-text-effects-embedded-fonts/#comments</comments>
		<pubDate>Tue, 14 Jul 2009 06:45:02 +0000</pubDate>
		<dc:creator>sunny</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Flash AS3]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[Actionscript]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[Embedded Fonts]]></category>
		<category><![CDATA[Filters]]></category>
		<category><![CDATA[Fonts]]></category>
		<category><![CDATA[TextField]]></category>

		<guid isPermaLink="false">http://ghostwire.com/blog/?p=368</guid>
		<description><![CDATA[Here is how to apply embossed (and engraved) text effect during run-time easily using ActionScript.  This works only when the TextField instance is using embedded font and its antiAliasType property is set to AntiAliasType.ADVANCED.

Set up the TextField:

// ActionScript 3.0
var txt:TextField = new TextField&#40;&#41;;
// new TextFormat(font, size, color, bold)
txt.defaultTextFormat = new TextFormat&#40;&#34;DejaVu Sans&#34;, 21, 0x000000, [...]]]></description>
			<content:encoded><![CDATA[<p>Here is how to apply embossed (and engraved) text effect during run-time easily using ActionScript.  This works only when the TextField instance is using embedded font and its antiAliasType property is set to AntiAliasType.ADVANCED.</p>
<p><span id="more-368"></span><br />
Set up the TextField:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #808080; font-style: italic;">// ActionScript 3.0</span>
<span style="color: #000000; font-weight: bold;">var</span> txt:<span style="color: #0066CC;">TextField</span> = <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #0066CC;">TextField</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #808080; font-style: italic;">// new TextFormat(font, size, color, bold)</span>
txt.<span style="color: #006600;">defaultTextFormat</span> = <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #0066CC;">TextFormat</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;DejaVu Sans&quot;</span>, <span style="color: #cc66cc;">21</span>, 0x000000, <span style="color: #000000; font-weight: bold;">true</span><span style="color: #66cc66;">&#41;</span>;
txt.<span style="color: #0066CC;">embedFonts</span> = <span style="color: #000000; font-weight: bold;">true</span>; <span style="color: #808080; font-style: italic;">// the font must be embedded</span>
txt.<span style="color: #006600;">antiAliasType</span> = AntiAliasType.<span style="color: #006600;">ADVANCED</span>;
txt.<span style="color: #0066CC;">autoSize</span> = TextFieldAutoSize.<span style="color: #0066CC;">LEFT</span>;
txt.<span style="color: #0066CC;">selectable</span> = <span style="color: #000000; font-weight: bold;">false</span>;
txt.<span style="color: #0066CC;">text</span> = <span style="color: #ff0000;">&quot;The quick brown fox jumps over the lazy dog.&quot;</span>;
txt.<span style="color: #006600;">x</span> = <span style="color: #cc66cc;">5</span>;
txt.<span style="color: #006600;">y</span> = <span style="color: #cc66cc;">5</span>;
addChild<span style="color: #66cc66;">&#40;</span>txt<span style="color: #66cc66;">&#41;</span>;</pre></div></div>

<p><strong>Embossed Text</strong><br />
To apply an embossed text effect, use the flash.filters.BevelFilter:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;">txt.<span style="color: #006600;">filters</span> = <span style="color: #66cc66;">&#91;</span><span style="color: #000000; font-weight: bold;">new</span> BevelFilter<span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">1.5</span>, <span style="color: #cc66cc;">45</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#93;</span>; <span style="color: #808080; font-style: italic;">// distance, angle</span></pre></div></div>

<p><img src="http://ghostwire.com/blog/wp-content/uploads/embossedtext1.png" alt="embossed text" title="embossed text" width="596" height="96" class="alignnone size-full wp-image-389" /></p>
<p><strong>Engraved Text</strong><br />
To apply an engraved text effect, ie having the text look like it is etched into the surface, rotate the bevel angle by 180 degrees:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;">txt.<span style="color: #006600;">filters</span> = <span style="color: #66cc66;">&#91;</span><span style="color: #000000; font-weight: bold;">new</span> BevelFilter<span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">1.5</span>, <span style="color: #cc66cc;">225</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#93;</span>; <span style="color: #808080; font-style: italic;">// distance, angle</span></pre></div></div>

<p><img src="http://ghostwire.com/blog/wp-content/uploads/engravedtext1.png" alt="engraved text" title="engraved text" width="596" height="96" class="alignnone size-full wp-image-390" /></p>
<p>The first parameter of the BevelFilter is the bevel distance &#8211; you can try various values, but I have found 1.5 to work well for most font sizes, to give the text a subtle yet visible embossed/engraved look.</p>
<p>Do bear in mind that in order for the effects to be visible, there must be reasonable amount of painted area on the text glyphs. If you use a small, thin font, then the effects are not going to be very visible. On the other hand, using a large, bold font is going make the effect more obvious.</p>
<p>If you are going to use the same filter(s) in multiple places, consider placing the filter(s) in a constant:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #0066CC;">private</span> const embossFilter:BevelFilter = <span style="color: #000000; font-weight: bold;">new</span> BevelFilter<span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">1.5</span>, <span style="color: #cc66cc;">45</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #0066CC;">private</span> const engraveFilter:BevelFilter = <span style="color: #000000; font-weight: bold;">new</span> BevelFilter<span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">1.5</span>, <span style="color: #cc66cc;">225</span><span style="color: #66cc66;">&#41;</span>;</pre></div></div>

<p>You can then apply the filter as follows:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;">txt.<span style="color: #006600;">filters</span> = <span style="color: #66cc66;">&#91;</span>embossFilter<span style="color: #66cc66;">&#93;</span>;</pre></div></div>

<p>NOTE:<br />
Notice that in the example above, the &#8220;selectable&#8221; property of the TextField instance is set to &#8220;false&#8221;.  This is not really necessary, but it is important to note if the property is left as &#8220;true&#8221;, ie the text if left selectable, then when the text is selected, the portion that is selected loses the embossed/engraved effect.  This is because the BevelFilter is applied to the TextField as a whole, not each alphabet individually &#8211; when there is a selection, and the background is highlighted (painted), the filter is applied to the background rather than the text in the foreground.<br />
<img src="http://ghostwire.com/blog/wp-content/uploads/embossedtexts.png" alt="embossed text selected" title="embossed text selected" width="596" height="96" class="alignnone size-full wp-image-388" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ghostwire.com/blog/archives/as3-embossed-and-engraved-text-effects-embedded-fonts/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
