<?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/"
	xmlns:georss="http://www.georss.org/georss" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" xmlns:media="http://search.yahoo.com/mrss/"
	>

<channel>
	<title>Swingpant&#039;s Game Lab &#187; Gradient</title>
	<atom:link href="http://swingpants.com/tag/gradient/feed/" rel="self" type="application/rss+xml" />
	<link>http://swingpants.com</link>
	<description>Swingpant&#039;s Code Nurdlings</description>
	<lastBuildDate>Tue, 08 May 2012 21:07:53 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.com/</generator>
<cloud domain='swingpants.com' port='80' path='/?rsscloud=notify' registerProcedure='' protocol='http-post' />
<image>
		<url>http://0.gravatar.com/blavatar/4a88693aa17d6b5e1d453a6684bc1c68?s=96&#038;d=http%3A%2F%2Fs2.wp.com%2Fi%2Fbuttonw-com.png</url>
		<title>Swingpant&#039;s Game Lab &#187; Gradient</title>
		<link>http://swingpants.com</link>
	</image>
	<atom:link rel="search" type="application/opensearchdescription+xml" href="http://swingpants.com/osd.xml" title="Swingpant&#039;s Game Lab" />
	<atom:link rel='hub' href='http://swingpants.com/?pushpress=hub'/>
		<item>
		<title>Gradients and masks in actionscript</title>
		<link>http://swingpants.com/2009/04/30/gradients-and-masks-in-actionscript/</link>
		<comments>http://swingpants.com/2009/04/30/gradients-and-masks-in-actionscript/#comments</comments>
		<pubDate>Thu, 30 Apr 2009 09:24:55 +0000</pubDate>
		<dc:creator>swingpants</dc:creator>
				<category><![CDATA[Actionscript]]></category>
		<category><![CDATA[Code Snippet]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Alpha]]></category>
		<category><![CDATA[AS2]]></category>
		<category><![CDATA[as3]]></category>
		<category><![CDATA[blendMode]]></category>
		<category><![CDATA[cacheAsBitmap]]></category>
		<category><![CDATA[Gradient]]></category>
		<category><![CDATA[Layer]]></category>
		<category><![CDATA[Masks]]></category>

		<guid isPermaLink="false">http://swingpants.com/?p=124</guid>
		<description><![CDATA[Quick post to describe how to apply a gradient mask to a display object in AS3 (&#38; AS2). #1 Put your gradient mask on the stage &#8211; lets call it gmask #2 Put the object to be masked on the stage. #3 Set both the mask and the &#8216;object to be masked&#8217; to cacheAsBitmap #4 [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=swingpants.com&#038;blog=5703708&#038;post=124&#038;subd=flashlabs&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<p>Quick post to describe how to apply a gradient mask to a display object in AS3 (&amp; AS2).</p>
<p><strong>#1</strong> Put your gradient mask on the stage &#8211; lets call it gmask<br />
<strong>#2</strong> Put the object to be masked on the stage.<br />
<strong>#3</strong> Set both the mask and the &#8216;object to be masked&#8217; to cacheAsBitmap<br />
<strong>#4</strong> Apply the mask to the object</p>
<p><strong>In #AS3</strong><br />
  <em>gmask.cacheAsBitmap = true<br />
  obj_to_be_masked.cacheAsBitmap = true<br />
  obj_to_be_masked.mask =gmask</em></p>
<p><strong>In #AS2</strong><br />
  <em>gmask.cacheAsBitmap = true<br />
  obj_to_be_masked.cacheAsBitmap = true<br />
  obj_to_be_masked.setMask(mask)</em></p>
<p>It really is as simple as this.<br />
<strong><em>Note to designers</em></strong>: Gradient masks can&#8217;t obviously be done directly from the IDE (see below), but these  three lines can be placed on the timeline if so desired.</p>
<p>To put a gradient mask on dynamic text you will need to place the text within a container (movieclip/sprite) and mask that. </p>
<p>The object to be masked can also contain animation, text or video though this will require a bit more processor as the bitmap will need to redraw on each frame. Often this is well worth it as the effect can be great.</p>
<p><strong>There is a way of achieving this same effect with no code at all and here it is:</strong></p>
<p><strong>#1</strong> Put your gradient mask on the stage &#8211; lets call it gmask<br />
<strong>#2</strong> Put the object to be masked on the stage.<br />
<strong>#3</strong> Put both of these items into a movieclip/sprite (the container) making sure the mask is on a layer above the object<br />
<strong>#4</strong> Give the mask a blend mode of &#8216;Alpha&#8217;<br />
<strong>#5</strong> Give the &#8216;container&#8217; a blend mode of &#8216;Layer&#8217;</p>
<p>And there you have it. Gradient masking achieved with blendModes and absolutely no code.</p>
<p><strong>Benchmarking the two gradient mask methods</strong>:<br />
I used each method to mask an embedded video &#8211; then placed an instance on the display list and ran at varying frame rates.<br />
Initially there was negligible difference between the code and blend mask methods. I ramped up the FPS to 120 and put four instances of the video on screen. With this set up the code method (cacheAsBitmap) was up to <strong>4%</strong> faster than the blendMode Mask method.</p>
<p>Conclusion: The code method is faster but very marginally. If you are desperate for a bit of extra juice go with code.</p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/flashlabs.wordpress.com/124/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/flashlabs.wordpress.com/124/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/flashlabs.wordpress.com/124/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/flashlabs.wordpress.com/124/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/flashlabs.wordpress.com/124/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/flashlabs.wordpress.com/124/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/flashlabs.wordpress.com/124/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/flashlabs.wordpress.com/124/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/flashlabs.wordpress.com/124/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/flashlabs.wordpress.com/124/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/flashlabs.wordpress.com/124/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/flashlabs.wordpress.com/124/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/flashlabs.wordpress.com/124/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/flashlabs.wordpress.com/124/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=swingpants.com&#038;blog=5703708&#038;post=124&#038;subd=flashlabs&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://swingpants.com/2009/04/30/gradients-and-masks-in-actionscript/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/1cebf29489913586137c5bdad0414c88?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">swingpants</media:title>
		</media:content>
	</item>
	</channel>
</rss>
