<?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>X-Com &#187; Labs</title>
	<atom:link href="http://www.x-com.se/category/labs/feed" rel="self" type="application/rss+xml" />
	<link>http://www.x-com.se</link>
	<description>X-Com är en digital produktionsbyrå i Eskilstuna som producerar kampanjer, spel, tävlingar, webbplatser och applikationer.</description>
	<lastBuildDate>Thu, 15 Dec 2011 09:53:11 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Memory Game</title>
		<link>http://www.x-com.se/labs/html5/memory-game.html</link>
		<comments>http://www.x-com.se/labs/html5/memory-game.html#comments</comments>
		<pubDate>Fri, 26 Nov 2010 13:56:02 +0000</pubDate>
		<dc:creator>Jani</dc:creator>
				<category><![CDATA[CSS3]]></category>
		<category><![CDATA[HTML5]]></category>

		<guid isPermaLink="false">http://www.x-com.se/?p=1648</guid>
		<description><![CDATA[
if(RegExp(" AppleWebKit/").test(navigator.userAgent))
{
document.write('');
}
else {
document.write('');
}

First of all, I&#8217;m mainly a web designer, ...]]></description>
			<content:encoded><![CDATA[<p><script>
if(RegExp(" AppleWebKit/").test(navigator.userAgent))
{
document.write('<br/><iframe style="border: 1px solid #d1d1d1; background: #fff; padding: 2px;" src="http://www.x-com.se/xcom-labs/html5/memory/index.html" width="600" height="450" scrolling="no" frameborder="0" border="0"></iframe>');
}
else {
document.write('<br/><img src="/wp-content/uploads/2010/11/only-webkit.jpg" />');
}
</script></p>
<p>First of all, I&#8217;m mainly a web designer, but I was curious about all the buzz surrounding HTML5 and CSS3 so I decided to do a little project.</p>
<p>In this project I made the classic memory game where you have to turn cards and find pairs. The purpose of this project was to test out the basic HTML5 layout with the built in audio tag and some nifty animations with transition in CSS3. Therefore the game only works with modern webkit browsers like Safari and Chrome.</p>
<p><span id="more-1648"></span></p>
<h2>HTML</h2>
<p>Let&#8217;s start with the HTML layout. Here I have used the following new HTML5 tags: doctype, header, section, footer and audio. The rest is pretty basic with an unordered list for the cards.</p>
<p>The reason for using two audio tags with different id&#8217;s is that I didn&#8217;t want any conflict if the user rapidly clicked on two cards. With one audio tag the sound was disrupted.</p>
<div class="codesnip-container-wrapper">
<div class="codesnip-container-innerwrapper">
<div class="codesnip-container" >
<div class="javascript codesnip" style="font-family:monospace;"><span class="sy0">&lt;!</span>DOCTYPE html<span class="sy0">&gt;</span><br />
<span class="sy0">&lt;</span>html<span class="sy0">&gt;</span><br />
<span class="sy0">&lt;</span>head<span class="sy0">&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="sy0">&lt;</span>meta http<span class="sy0">-</span>equiv<span class="sy0">=</span><span class="st0">&quot;Content-Type&quot;</span> content<span class="sy0">=</span><span class="st0">&quot;text/html; charset=utf-8&quot;</span><span class="sy0">/&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="sy0">&lt;</span>title<span class="sy0">&gt;</span>Memory<span class="sy0">&lt;/</span>title<span class="sy0">&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="sy0">&lt;</span>link rel<span class="sy0">=</span><span class="st0">&quot;stylesheet&quot;</span> type<span class="sy0">=</span><span class="st0">&quot;text/css&quot;</span> href<span class="sy0">=</span><span class="st0">&quot;css/style.css&quot;</span> <span class="sy0">/&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="sy0">&lt;</span>script type<span class="sy0">=</span><span class="st0">&quot;text/javascript&quot;</span> src<span class="sy0">=</span><span class="st0">&quot;scripts/jquery-1.4.2.min.js&quot;</span><span class="sy0">&gt;&lt;/</span>script<span class="sy0">&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="sy0">&lt;</span>script type<span class="sy0">=</span><span class="st0">&quot;text/javascript&quot;</span> src<span class="sy0">=</span><span class="st0">&quot;scripts/game.js&quot;</span><span class="sy0">&gt;&lt;/</span>script<span class="sy0">&gt;</span><br />
<span class="sy0">&lt;/</span>head<span class="sy0">&gt;</span><br />
<span class="sy0">&lt;</span>body<span class="sy0">&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="sy0">&lt;</span>div id<span class="sy0">=</span><span class="st0">&quot;background-vignett&quot;</span><span class="sy0">&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sy0">&lt;</span>img src<span class="sy0">=</span><span class="st0">&quot;img/vignett.png&quot;</span><span class="sy0">&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="sy0">&lt;/</span>div<span class="sy0">&gt;</span></p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; <span class="sy0">&lt;</span>audio id<span class="sy0">=</span><span class="st0">&quot;flip-sound-1&quot;</span> autobuffer<span class="sy0">&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sy0">&lt;</span>source src<span class="sy0">=</span><span class="st0">&quot;sound/flip-sound.mp3&quot;</span><span class="sy0">&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="sy0">&lt;/</span>audio<span class="sy0">&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="sy0">&lt;</span>audio id<span class="sy0">=</span><span class="st0">&quot;flip-sound-2&quot;</span> autobuffer<span class="sy0">&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sy0">&lt;</span>source src<span class="sy0">=</span><span class="st0">&quot;sound/flip-sound.mp3&quot;</span><span class="sy0">&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="sy0">&lt;/</span>audio<span class="sy0">&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="sy0">&lt;</span>header<span class="sy0">&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sy0">&lt;</span>h1<span class="sy0">&gt;</span>Memory game<span class="sy0">&lt;/</span>h1<span class="sy0">&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sy0">&lt;</span>h2<span class="sy0">&gt;</span>with &nbsp;HTML5<span class="sy0">,</span> CSS3 and jQuery<span class="sy0">&lt;/</span>h2<span class="sy0">&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="sy0">&lt;/</span>header<span class="sy0">&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="sy0">&lt;</span>section<span class="sy0">&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sy0">&lt;</span>ul<span class="sy0">&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sy0">&lt;</span>li <span class="kw2">class</span><span class="sy0">=</span><span class="st0">&quot;card&quot;</span><span class="sy0">&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sy0">&lt;</span>div <span class="kw2">class</span><span class="sy0">=</span><span class="st0">&quot;front&quot;</span><span class="sy0">&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sy0">&lt;</span>div <span class="kw2">class</span><span class="sy0">=</span><span class="st0">&quot;grey&quot;</span><span class="sy0">&gt;&lt;/</span>div<span class="sy0">&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sy0">&lt;/</span>div<span class="sy0">&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sy0">&lt;</span>div <span class="kw2">class</span><span class="sy0">=</span><span class="st0">&quot;back&quot;</span><span class="sy0">&gt;&lt;/</span>div<span class="sy0">&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sy0">&lt;/</span>li<span class="sy0">&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#8230;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sy0">&lt;/</span>ul<span class="sy0">&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="sy0">&lt;/</span>section<span class="sy0">&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="sy0">&lt;</span>footer<span class="sy0">&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sy0">&lt;</span>p<span class="sy0">&gt;&lt;</span>span <span class="kw2">class</span><span class="sy0">=</span><span class="st0">&quot;num-turns&quot;</span><span class="sy0">&gt;</span>0<span class="sy0">&lt;/</span>span<span class="sy0">&gt;</span> card<span class="sy0">&lt;</span>span <span class="kw2">class</span><span class="sy0">=</span><span class="st0">&quot;plural&quot;</span><span class="sy0">&gt;</span>s<span class="sy0">&lt;/</span>span<span class="sy0">&gt;</span> flipped in<span class="sy0">&lt;/</span>p<span class="sy0">&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sy0">&lt;</span>p<span class="sy0">&gt;&lt;</span>span <span class="kw2">class</span><span class="sy0">=</span><span class="st0">&quot;time&quot;</span><span class="sy0">&gt;</span><span class="nu0">0</span><span class="sy0">&lt;/</span>span<span class="sy0">&gt;</span> seconds<span class="sy0">&lt;/</span>p<span class="sy0">&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="sy0">&lt;/</span>footer<span class="sy0">&gt;</span><br />
<span class="sy0">&lt;/</span>body<span class="sy0">&gt;</span><br />
<span class="sy0">&lt;/</span>html<span class="sy0">&gt;</span></div>
</div>
</div>
</div>
<p><br/></p>
<h2>CSS</h2>
<p>I&#8217;ve picked out the most interesting parts in the CSS that uses CSS3 for gradients, shadows and animations. No need to go through all the code.</p>
<p>First we need to initialize start values for the animation for every div in the card class. Here we set duration, easing and hide backface.</p>
<div class="codesnip-container-wrapper">
<div class="codesnip-container-innerwrapper">
<div class="codesnip-container" >
<div class="css codesnip" style="font-family:monospace;"><span class="re1">.card</span> div <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; -webkit-transition-duration<span class="sy0">:</span> .3s<span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; -webkit-transition-timing-function<span class="sy0">:</span> ease-out<span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; -webkit-backface-<span class="kw1">visibility</span><span class="sy0">:</span> <span class="kw2">hidden</span><span class="sy0">;</span><br />
<span class="br0">&#125;</span></div>
</div>
</div>
</div>
<p><br/></p>
<p>Here we style the front and back of the card with border radius, gradients, shadows etc.. Front class also gets a starting value of -180 degrees for the rotation. For back class we don&#8217;t need to apply any starting value for the rotation because the default value is 0 degrees, which is what we want.</p>
<div class="codesnip-container-wrapper">
<div class="codesnip-container-innerwrapper">
<div class="codesnip-container" >
<div class="css codesnip" style="font-family:monospace;"><span class="re1">.card</span> <span class="re1">.back</span><span class="sy0">,</span> <span class="re1">.card</span> <span class="re1">.front</span> <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">top</span><span class="sy0">:</span> <span class="re3">0px</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">left</span><span class="sy0">:</span> <span class="re3">0px</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">width</span><span class="sy0">:</span> <span class="re3">80px</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">height</span><span class="sy0">:</span> <span class="re3">80px</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#fff</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; -webkit-border-radius<span class="sy0">:</span> <span class="re3">8px</span><span class="sy0">;</span> -moz-border-radius<span class="sy0">:</span> <span class="re3">8px</span><span class="sy0">;</span> border-radius<span class="sy0">:</span> <span class="re3">8px</span><span class="sy0">;</span><br />
<span class="br0">&#125;</span></p>
<p><span class="re1">.card</span> <span class="re1">.front</span> <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">z-index</span><span class="sy0">:</span> <span class="nu0">100</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; -webkit-transform<span class="sy0">:</span> rotateY<span class="br0">&#40;</span>-180deg<span class="br0">&#41;</span><span class="sy0">;</span><br />
<span class="br0">&#125;</span></p>
<p><span class="re1">.card</span> <span class="re1">.back</span> <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">z-index</span><span class="sy0">:</span> <span class="nu0">200</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; -moz-box-shadow<span class="sy0">:</span> 0 0 <span class="re3">4px</span> <span class="re0">#323232</span><span class="sy0">;</span> -webkit-box-shadow<span class="sy0">:</span> 0 0 <span class="re3">4px</span> <span class="re0">#323232</span><span class="sy0">;</span> box-shadow<span class="sy0">:</span> 0 0 <span class="re3">4px</span> <span class="re0">#323232</span><span class="sy0">;</span><br />
<span class="br0">&#125;</span></p>
<p><span class="re1">.card</span> <span class="re1">.back</span> <span class="re1">.graphic</span> <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">top</span><span class="sy0">:</span> <span class="re3">5px</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">left</span><span class="sy0">:</span> <span class="re3">5px</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">width</span><span class="sy0">:</span> <span class="re3">70px</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">height</span><span class="sy0">:</span> <span class="re3">70px</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">background</span><span class="sy0">:</span> -moz-linear-gradient<span class="br0">&#40;</span><span class="re3"><span class="nu0">100</span>%</span> <span class="re3"><span class="nu0">100</span>%</span> 90deg<span class="sy0">,</span> <span class="re0">#bdeeee</span><span class="sy0">,</span> <span class="re0">#e0f0f1</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">background</span><span class="sy0">:</span> -webkit-gradient<span class="br0">&#40;</span>linear<span class="sy0">,</span> <span class="re3"><span class="nu0">0</span>%</span> <span class="re3"><span class="nu0">0</span>%</span><span class="sy0">,</span> <span class="re3"><span class="nu0">0</span>%</span> <span class="re3"><span class="nu0">100</span>%</span><span class="sy0">,</span> from<span class="br0">&#40;</span><span class="re0">#bdeeee</span><span class="br0">&#41;</span><span class="sy0">,</span> to<span class="br0">&#40;</span><span class="re0">#e0f0f1</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; -webkit-border-radius<span class="sy0">:</span> <span class="re3">8px</span><span class="sy0">;</span> -moz-border-radius<span class="sy0">:</span> <span class="re3">8px</span><span class="sy0">;</span> border-radius<span class="sy0">:</span> <span class="re3">8px</span><span class="sy0">;</span><br />
<span class="br0">&#125;</span></div>
</div>
</div>
</div>
<p><br/></p>
<p>As you may have noticed in the code above, front class doesn&#8217;t have any shadow applied. That&#8217;s because of one problem I encountered when both front and back of the card had a shadow. Somehow Chrome didn&#8217;t want to hide the backface so I got double set of shadows. Therefore this class below was set if users were using Safari to prevent two instances of shadows in Chrome.</p>
<div class="codesnip-container-wrapper">
<div class="codesnip-container-innerwrapper">
<div class="codesnip-container" >
<div class="css codesnip" style="font-family:monospace;"><span class="re1">.card</span><span class="re1">.shadow_hack</span> <span class="re1">.front</span> <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; -moz-box-shadow<span class="sy0">:</span> 0 0 <span class="re3">4px</span> <span class="re0">#323232</span><span class="sy0">;</span> -webkit-box-shadow<span class="sy0">:</span> 0 0 <span class="re3">4px</span> <span class="re0">#323232</span><span class="sy0">;</span> box-shadow<span class="sy0">:</span> 0 0 <span class="re3">4px</span> <span class="re0">#323232</span><span class="sy0">;</span><br />
<span class="br0">&#125;</span></div>
</div>
</div>
</div>
<p><br/></p>
<p>When users hover the back of a card we add a customhover class with jQuery which animates the card. We also show another shadow to make the illusion of lifting the card from the table.</p>
<div class="codesnip-container-wrapper">
<div class="codesnip-container-innerwrapper">
<div class="codesnip-container" >
<div class="css codesnip" style="font-family:monospace;"><span class="re1">.card</span><span class="re1">.customhover</span> <span class="re1">.back</span> <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; -webkit-transform<span class="sy0">:</span> scale<span class="br0">&#40;</span>1.1<span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; -webkit-box-shadow<span class="sy0">:</span> <span class="re0">#666</span> 0 <span class="re3">5px</span> <span class="re3">10px</span><span class="sy0">;</span><br />
<span class="br0">&#125;</span></div>
</div>
</div>
</div>
<p><br/></p>
<p>When card is clicked jQuery applies selected class on card and then CSS3 rotates the back object from 0 degrees to 180 degrees on the Y axis, and the front object rotates from -180 degrees to 0 degrees. Both sides of the cards needs to rotate 180 degrees to give a realistic animation.</p>
<div class="codesnip-container-wrapper">
<div class="codesnip-container-innerwrapper">
<div class="codesnip-container" >
<div class="css codesnip" style="font-family:monospace;"><span class="re1">.selected</span> <span class="re1">.back</span> <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">z-index</span><span class="sy0">:</span> <span class="nu0">300</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; -webkit-transform<span class="sy0">:</span> rotateY<span class="br0">&#40;</span>180deg<span class="br0">&#41;</span><span class="sy0">;</span><br />
<span class="br0">&#125;</span></p>
<p><span class="re1">.selected</span> <span class="re1">.front</span> <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">z-index</span><span class="sy0">:</span> <span class="nu0">400</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; -webkit-transform<span class="sy0">:</span> rotateY<span class="br0">&#40;</span>0deg<span class="br0">&#41;</span><span class="sy0">;</span><br />
<span class="br0">&#125;</span></div>
</div>
</div>
</div>
<p><br/></p>
<p>To sum this up. I have encountered some problems in this project when trying to make the backface of the cards hidden. Maybe there is a workaround but Chrome didn&#8217;t seem to work well on that point. Chrome seems also to have difficulties to render graphic that is rotated. Graphics look allot smoother in Safari. I have also experienced that the sound may be out of sync sometimes.</p>
<p>Feel free to download all the code and play around.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.x-com.se/labs/html5/memory-game.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>WaterFX &#8211; a much faster solution</title>
		<link>http://www.x-com.se/labs/flash/waterfx-a-much-faster-solution.html</link>
		<comments>http://www.x-com.se/labs/flash/waterfx-a-much-faster-solution.html#comments</comments>
		<pubDate>Mon, 22 Nov 2010 19:55:30 +0000</pubDate>
		<dc:creator>Andreas</dc:creator>
				<category><![CDATA[Flash]]></category>

		<guid isPermaLink="false">http://www.x-com.se/?p=1613</guid>
		<description><![CDATA[Yes, the previous water effect I introduced is nice, sure, ...]]></description>
			<content:encoded><![CDATA[<p>Yes, the previous water effect I introduced is nice, sure, but it is actually pretty useless as it is eats up way too much processor power. As I still need a fancy effect for my little game I&#8217;m planning I had to come up with something else. Simulate water/light distortion IS not an easy task when it comes to processor power but here is an attempt for 800&#215;600. Let&#8217;s first check the result:</p>
<p><a rel="shadowbox;width=800;height=600" href="/wp-content/uploads/2010/11/Wave2.swf"><img title="WaterFX-2" src="/wp-content/uploads/2010/11/screen.jpg" alt="WaterFX-2" width="600" height="426" /></a></p>
<p>Neat huh? Let&#8217;s dig into the code&#8230;<br />
<span id="more-1613"></span></p>
<p>If you checked my previous lab with water you realize that I am still using the DisplacementFilter. What I have done to increase speed is that I&#8217;ve focused on the bitmapdata that defines the filter. I decided to create a wave-class that is animated and can be used to draw the bitmapdata. I called this class WaveAnim.as &#8211; Let&#8217;s get started!</p>
<div class="codesnip-container-wrapper">
<div class="codesnip-container-innerwrapper">
<div class="codesnip-container" >
<div class="actionscript codesnip" style="font-family:monospace;">package<br />
<span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> com.<span class="me1">greensock</span>.<span class="me1">TweenMax</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> com.<span class="me1">greensock</span>.<span class="me1">easing</span>.<span class="me1">Linear</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">display</span>.<span class="me1">Bitmap</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">display</span>.<span class="me1">BitmapData</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">display</span>.<span class="me1">BlendMode</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">display</span>.<span class="me1">Sprite</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">class</span> WaveAnim <span class="kw3">extends</span> Sprite<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">var</span> bmpd:BitmapData;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">var</span> animWidth:<span class="kw3">Number</span>; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">var</span> animHeight:<span class="kw3">Number</span>; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">var</span> animSpeed:<span class="kw3">Number</span> = <span class="nu0">2</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">var</span> wave1:Sprite<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">var</span> wave2:Sprite<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">function</span> WaveAnim<span class="br0">&#40;</span>bmpd:BitmapData,animWidth:<span class="kw3">Number</span>,animHeight:<span class="kw3">Number</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">super</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">this</span>.<span class="me1">bmpd</span> = bmpd;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">this</span>.<span class="me1">animWidth</span> = animWidth;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">this</span>.<span class="me1">animHeight</span> = animHeight;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; wave1 = <span class="kw2">new</span> Sprite<span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; wave2 = <span class="kw2">new</span> Sprite<span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// determine amount tiles to cover the whole area AND be able to anim one tile.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> numX:<span class="kw3">int</span> = <span class="kw3">Math</span>.<span class="kw3">ceil</span><span class="br0">&#40;</span>animWidth<span class="sy0">/</span>bmpd.<span class="kw3">width</span><span class="br0">&#41;</span>+1<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> numY:<span class="kw3">int</span> = <span class="kw3">Math</span>.<span class="kw3">ceil</span><span class="br0">&#40;</span>animHeight<span class="sy0">/</span>bmpd.<span class="kw3">height</span><span class="br0">&#41;</span>+1<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> bmp1:Bitmap<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> bmp2:Bitmap<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// creating all tiles and placing them in both wave-sprites.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">for</span> <span class="br0">&#40;</span><span class="kw2">var</span> j:<span class="kw3">int</span> = <span class="nu0">0</span>;j<span class="sy0">&lt;</span> numY;j++<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">for</span> <span class="br0">&#40;</span><span class="kw2">var</span> i:<span class="kw3">int</span> = <span class="nu0">0</span>;i<span class="sy0">&lt;</span> numX;i++<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bmp1 = <span class="kw2">new</span> Bitmap<span class="br0">&#40;</span>bmpd<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bmp2 = <span class="kw2">new</span> Bitmap<span class="br0">&#40;</span>bmpd<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bmp1.<span class="me1">x</span> = bmp2.<span class="me1">x</span> = i<span class="sy0">*</span>bmpd.<span class="kw3">width</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bmp1.<span class="me1">y</span> = bmp2.<span class="me1">y</span> = j<span class="sy0">*</span>bmpd.<span class="kw3">width</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; wave1.<span class="me1">addChild</span><span class="br0">&#40;</span>bmp1<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; wave2.<span class="me1">addChild</span><span class="br0">&#40;</span>bmp2<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// TweenMax rocks as usual. Convenient way to put a </span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// colorMatrixFilter on the waves. One RED and one GREEN.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; TweenMax.<span class="me1">to</span><span class="br0">&#40;</span>wave1,0,<span class="br0">&#123;</span>colorMatrixFilter:<span class="br0">&#123;</span>colorize:0xff0000<span class="br0">&#125;</span><span class="br0">&#125;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; TweenMax.<span class="me1">to</span><span class="br0">&#40;</span>wave2,0,<span class="br0">&#123;</span>colorMatrixFilter:<span class="br0">&#123;</span>colorize:0&#215;00ff00<span class="br0">&#125;</span><span class="br0">&#125;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// now offsetting one wave a little so obvious patterns doesnt appear.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; wave2.<span class="me1">y</span> = -bmpd.<span class="kw3">height</span><span class="sy0">*</span>.3;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// using the ADD BlendMode makes the Red channel (wave1) visible </span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// through the green one (wave2) as the sprites channels are added together.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; wave2.<span class="me1">blendMode</span> = BlendMode.<span class="kw3">ADD</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; addChild<span class="br0">&#40;</span>wave1<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; addChild<span class="br0">&#40;</span>wave2<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">function</span> startAnim<span class="br0">&#40;</span>speed:<span class="kw3">Number</span>=-1<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>speed <span class="sy0">!</span>= -1<span class="br0">&#41;</span>animSpeed = speed;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// Tween both waves to scroll horizontally. </span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// Wave1 to the right and Wave2 to the left. </span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// restarts itself when done (reseting initial positions)</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; TweenMax.<span class="me1">to</span><span class="br0">&#40;</span>wave1,animSpeed,<span class="br0">&#123;</span>startAt:<span class="br0">&#123;</span>x:-bmpd.<span class="kw3">width</span><span class="br0">&#125;</span>,x:0,ease:Linear.<span class="me1">easeNone</span><span class="br0">&#125;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; TweenMax.<span class="me1">to</span><span class="br0">&#40;</span>wave2,animSpeed,<span class="br0">&#123;</span>startAt:<span class="br0">&#123;</span>x:0<span class="br0">&#125;</span>,x:-bmpd.<span class="kw3">width</span>,ease:Linear.<span class="me1">easeNone</span>,onComplete:startAnim<span class="br0">&#125;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">function</span> stopAnim<span class="br0">&#40;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; TweenMax.<span class="me1">killAll</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
<span class="br0">&#125;</span></div>
</div>
</div>
</div>
<p>WaveAnim is taking a bitmapdata, copying it into two layers (one green and one red) and scrolling them horizontally towards each other.<br />
The reason why I am colouring the sprites is that the DisplacementFilter will check the colourchannels and red will control all pixels vertically meanwhile the green channel controls the waterpixels vertically (pushes them back and forth).<br />
In this little lab I decided to use this texture, my collegue thought it was way too many waves in it so I added some &#8220;blank&#8221; areas to calm the water down occassionally.<br />
<img src="http://www.x-com.se/wp-content/uploads/2010/11/wave.jpg" alt="Bitmapdata for WaveAnim" /></p>
<p>To make the water a little more alive and also to showcase that you can add anything on top on the WaveAnim I decided to create a simple class extending this Sprite:<br />
<img src="http://www.x-com.se/wp-content/uploads/2010/11/Bild-1.png" alt="Drop" /><br />
The Sprite is animating itself and in the end also removing itself from the displaylist afterwards. Here&#8217;s that little class:</p>
<div class="codesnip-container-wrapper">
<div class="codesnip-container-innerwrapper">
<div class="codesnip-container" >
<div class="actionscript codesnip" style="font-family:monospace;">package<br />
<span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> com.<span class="me1">greensock</span>.<span class="me1">TweenLite</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">display</span>.<span class="me1">Sprite</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">class</span> Drop <span class="kw3">extends</span> Sprite<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">function</span> Drop<span class="br0">&#40;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">super</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scaleX = scaleY = .1;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alpha = .7;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; TweenLite.<span class="me1">to</span><span class="br0">&#40;</span><span class="kw3">this</span>,2,<span class="br0">&#123;</span>alpha:0,scaleX:.6,scaleY:.6,onComplete:destroy<span class="br0">&#125;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">function</span> destroy<span class="br0">&#40;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">this</span>.<span class="me1">parent</span>.<span class="me1">removeChild</span><span class="br0">&#40;</span><span class="kw3">this</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
<span class="br0">&#125;</span></div>
</div>
</div>
</div>
<p>Now the only thing to do is to put these classes together and use them in a DisplacementFilter. I do that in the document class Wave2.as (as this is my second attempt). I give you the code first and will comment some afterwards:</p>
<div class="codesnip-container-wrapper">
<div class="codesnip-container-innerwrapper">
<div class="codesnip-container" >
<div class="actionscript codesnip" style="font-family:monospace;">package<br />
<span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">display</span>.<span class="me1">Bitmap</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">display</span>.<span class="me1">BitmapData</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">display</span>.<span class="me1">BitmapDataChannel</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">display</span>.<span class="me1">BlendMode</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">display</span>.<span class="kw3">MovieClip</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">display</span>.<span class="me1">Sprite</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">events</span>.<span class="me1">Event</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">events</span>.<span class="me1">MouseEvent</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">filters</span>.<span class="me1">DisplacementMapFilter</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">geom</span>.<span class="me1">Matrix</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">class</span> Wave2 <span class="kw3">extends</span> Sprite<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">static</span> <span class="kw3">public</span> <span class="kw2">var</span> WATER_WIDTH:<span class="kw3">Number</span> = <span class="nu0">620</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">static</span> <span class="kw3">public</span> <span class="kw2">var</span> WATER_HEIGHT:<span class="kw3">Number</span> = <span class="nu0">600</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">var</span> pondBmp:Bitmap<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">var</span> waveAnim:WaveAnim<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">var</span> bWave:BitmapData<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">var</span> filter:DisplacementMapFilter<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">var</span> counter:<span class="kw3">Number</span> = <span class="nu0">0</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">function</span> Wave2<span class="br0">&#40;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// adding the background to the stage.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pondBmp = <span class="kw2">new</span> Bitmap<span class="br0">&#40;</span><span class="kw2">new</span> Pond<span class="br0">&#40;</span>0,0<span class="br0">&#41;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; addChild<span class="br0">&#40;</span>pondBmp<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// create the bitmapdata to use as a filtersource.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bWave = <span class="kw2">new</span> BitmapData<span class="br0">&#40;</span>WATER_WIDTH,WATER_HEIGHT<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">//Decomment row below to see what the bitmapdata actually looks like in action.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">//addChild(new Bitmap(bWave));</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; filter = <span class="kw2">new</span> DisplacementMapFilter<span class="br0">&#40;</span>bWave,<span class="kw2">null</span>,BitmapDataChannel.<span class="me1">GREEN</span>,BitmapDataChannel.<span class="me1">RED</span>,40,-40<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// create our new WaveAnim.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; waveAnim = <span class="kw2">new</span> WaveAnim<span class="br0">&#40;</span><span class="kw2">new</span> WaveBmpd<span class="br0">&#40;</span>0,0<span class="br0">&#41;</span>,WATER_WIDTH,WATER_HEIGHT<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; waveAnim.<span class="me1">startAnim</span><span class="br0">&#40;</span>10<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// Addin a static image over the pond.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> pondTop:Sprite = <span class="kw2">new</span> TopPond<span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; addChild<span class="br0">&#40;</span>pondTop<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// listener for mouseclick &#8211; adding a drop in the water.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pondTop.<span class="me1">addEventListener</span><span class="br0">&#40;</span>MouseEvent.<span class="me1">MOUSE_DOWN</span>,mouseIsDown<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">this</span>.<span class="me1">addEventListener</span><span class="br0">&#40;</span>Event.<span class="me1">ENTER_FRAME</span>,onTick<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">function</span> mouseIsDown<span class="br0">&#40;</span><span class="kw3">e</span>:MouseEvent<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// drop where mouse is now!</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> drop:Drop = <span class="kw2">new</span> Drop<span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; drop.<span class="me1">x</span> = mouseX<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; drop.<span class="me1">y</span> = mouseY<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; waveAnim.<span class="me1">addChild</span><span class="br0">&#40;</span>drop<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">function</span> addDrop<span class="br0">&#40;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// add a random drop in water.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> drop:Drop = <span class="kw2">new</span> Drop<span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; drop.<span class="me1">x</span> = <span class="kw3">Math</span>.<span class="kw3">random</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">*</span>WATER_WIDTH;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; drop.<span class="me1">y</span> = <span class="kw3">Math</span>.<span class="kw3">random</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">*</span>WATER_HEIGHT;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; waveAnim.<span class="me1">addChild</span><span class="br0">&#40;</span>drop<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">function</span> onTick<span class="br0">&#40;</span><span class="kw3">e</span>:Event<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// just adding a few drops in the water (every sixth frame);</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; counter+=<span class="nu0">1</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>counter <span class="sy0">&gt;</span> 5<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; counter = <span class="nu0">0</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; addDrop<span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// draw a new bmpd-copy of the waveAnim and use it in the filter.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bWave.<span class="me1">lock</span><span class="br0">&#40;</span><span class="br0">&#41;</span>; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bWave.<span class="me1">draw</span><span class="br0">&#40;</span>waveAnim<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; filter.<span class="me1">mapBitmap</span> = bWave;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pondBmp.<span class="me1">filters</span> = <span class="br0">&#91;</span>filter<span class="br0">&#93;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bWave.<span class="me1">unlock</span><span class="br0">&#40;</span><span class="br0">&#41;</span>; <span class="co1">// unlocks the bitmapdata again. &nbsp; &nbsp; &nbsp; &nbsp;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
<span class="br0">&#125;</span></div>
</div>
</div>
</div>
<p>For this sample I used this image as a source for the waves:<br />
<img src="http://www.x-com.se/wp-content/uploads/2010/11/pond.jpg" alt="Background for Wave2" /><br />
And on top of all I created a &#8220;masked&#8221; image that is not affected by the water so it gives the illusion that only the water inside the pond is moving.<br />
<img src="http://www.x-com.se/wp-content/uploads/2010/11/pondTop.jpg" alt="Overlay for Wave2" /></p>
<p>If you haven&#8217;t discovered TweenMax yet, just go get it at: <a href="http://www.greensock.com/">http://www.greensock.com/</a> .. its a must-have for all flashdevelopers.<br />
Have fun!</p>
<p>/Andreas</p>
]]></content:encoded>
			<wfw:commentRss>http://www.x-com.se/labs/flash/waterfx-a-much-faster-solution.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>SmokeFX &#8211; An experiment with Bezier Curves</title>
		<link>http://www.x-com.se/labs/flash/smokefx-an-experiment-with-bezier-curves.html</link>
		<comments>http://www.x-com.se/labs/flash/smokefx-an-experiment-with-bezier-curves.html#comments</comments>
		<pubDate>Thu, 26 Aug 2010 11:33:30 +0000</pubDate>
		<dc:creator>Andreas</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[as3]]></category>
		<category><![CDATA[bezier]]></category>
		<category><![CDATA[beziercurves]]></category>
		<category><![CDATA[colourcurves]]></category>
		<category><![CDATA[curve]]></category>
		<category><![CDATA[effect]]></category>
		<category><![CDATA[effects]]></category>
		<category><![CDATA[smoke]]></category>

		<guid isPermaLink="false">http://www.x-com.se/?p=1222</guid>
		<description><![CDATA[Since the dawn of the computer people has always created ...]]></description>
			<content:encoded><![CDATA[<p>Since the dawn of the computer people has always created colourful art using curves. Either they have moved around on the screen or just being drawn with small adjustments creating mesmerizing patterns.<br />
Being inspired by the latest PS3 boot menu I decided to create a nice looking (and dynamic) effect using Bezier curves. Here&#8217;s the treat:<br />
<a rel="shadowbox;width=900;height=450" href="/wp-content/uploads/2010/08/colourCurves.swf"><img title="ColourCurves" src="/wp-content/uploads/2010/08/colourCurves_preview.png" alt="ColourCurves" width="600" height="340" /></a></p>
<p><span id="more-1222"></span><br />
Now, from start, there is a problem here. AS3 doesn&#8217;t support more than one control point (via the curveTo() method). To be a able to draw nice continuous curves we need 2 control points (Cubic Bezier).</p>
<p>Luckily I don&#8217;t have to worry about that as I could find <a href="http://www.cartogrammar.com/blog/actionscript-curves-update/">this great class</a> taking care of all that math I lost out as a very happy but maybe not so focused student. Wonderful! Most of the work done already, let&#8217;s put it to use!</p>
<p>I decided to divide the whole effect into 3 classes.</p>
<p><strong>WaveData</strong> &#8211; Holding all the data about the wave including controlpoint-position. The Class is also controlling the logical animation of the controlpoints + the colour of the wave, using our beloved tweenengine <a href="http://www.greensock.com/tweenmax/">TweenMax</a>.</p>
<p><strong>Wave</strong> &#8211; Being the DisplayObject that is the actual visual representation of the WaveData (being a SINGLE wave that is)</p>
<p><strong>Canvas</strong> &#8211; This is the area that will be visual on the screen. All Waves are draw to the canvas and a few pretty effects are added to the canvas. We&#8217;ll get to that.</p>
<p>Now let&#8217;s get started with the WaveData:</p>
<div class="codesnip-container-wrapper">
<div class="codesnip-container-innerwrapper">
<div class="codesnip-container" >
<div class="actionscript codesnip" style="font-family:monospace;">package<br />
<span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> com.<span class="me1">greensock</span>.<span class="me1">TweenMax</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> com.<span class="me1">greensock</span>.<span class="me1">easing</span>.<span class="me1">Sine</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">geom</span>.<span class="me1">Point</span>;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">class</span> WaveData<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">var</span> controlPoints:<span class="kw3">int</span> = 7<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">var</span> minRadius:<span class="kw3">Number</span> = <span class="nu0">0.1</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">var</span> maxRadius:<span class="kw3">Number</span>= <span class="nu0">1</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">var</span> waveAlpha:<span class="kw3">Number</span> = 0.08<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">var</span> lineWidth:<span class="kw3">Number</span> = <span class="nu0">0</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">var</span> minSpeed:<span class="kw3">Number</span> = <span class="nu0">5</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">var</span> maxSpeed:<span class="kw3">Number</span> = <span class="nu0">8</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">var</span> <span class="kw3">color</span>:<span class="kw3">int</span> = <span class="nu0">0</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">var</span> aPoints:<span class="kw3">Array</span>&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// no constructor needed. Best practise?? Naah, maybe not but hey, I get to write a comment instead of a constructor.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// resets the wavedata and starts the animation of the controlpoints and the wavecolour.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">function</span> reset<span class="br0">&#40;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> y:<span class="kw3">Number</span> <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> p:Point;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; aPoints = <span class="br0">&#91;</span><span class="br0">&#93;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// create all controlpoints and place them within the radius. They all starts at x:0</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">for</span> <span class="br0">&#40;</span><span class="kw2">var</span> i:<span class="kw3">int</span> = <span class="nu0">0</span>;i<span class="sy0">&lt;</span>controlPoints;i++<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span> &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y = 2<span class="sy0">*</span><span class="br0">&#40;</span><span class="kw3">Math</span>.<span class="kw3">random</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">*</span><span class="br0">&#40;</span>maxRadius-minRadius<span class="br0">&#41;</span>+minRadius<span class="br0">&#41;</span>-maxRadius;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; p = <span class="kw2">new</span> Point<span class="br0">&#40;</span>0,y<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; aPoints.<span class="kw3">push</span><span class="br0">&#40;</span>p<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; startAnim<span class="br0">&#40;</span>p<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; animColour<span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">function</span> animColour<span class="br0">&#40;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> newColor = <span class="kw3">Math</span>.<span class="kw3">random</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">*</span>0xffffff;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; TweenMax.<span class="me1">to</span><span class="br0">&#40;</span><span class="kw3">this</span>, 9, <span class="br0">&#123;</span>hexColors:<span class="br0">&#123;</span><span class="kw3">color</span>:newColor<span class="br0">&#125;</span>,onComplete:animColour<span class="br0">&#125;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">function</span> startAnim<span class="br0">&#40;</span>p:Point<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// no, it&#8217;s not an optimized way to find the point but it&#8217;s a lab, remember? ;)</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> ip:<span class="kw3">int</span> = aPoints.<span class="kw3">indexOf</span><span class="br0">&#40;</span>p<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> newY:<span class="kw3">Number</span> = <span class="kw3">Math</span>.<span class="kw3">random</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">*</span><span class="br0">&#40;</span>maxRadius-minRadius<span class="br0">&#41;</span>+minRadius<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// x is being set &quot;somewhat&quot; around the section where it should be.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> newX:<span class="kw3">Number</span> = &nbsp;<span class="br0">&#40;</span>ip==0<span class="br0">&#41;</span>?0:<span class="br0">&#40;</span><span class="br0">&#40;</span>ip<span class="sy0">/</span><span class="br0">&#40;</span>controlPoints-1<span class="br0">&#41;</span>+<span class="br0">&#40;</span><span class="kw3">Math</span>.<span class="kw3">random</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">*</span><span class="br0">&#40;</span>1<span class="sy0">/</span><span class="br0">&#40;</span>controlPoints-1<span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">*</span>4<span class="br0">&#41;</span><span class="br0">&#41;</span>-<span class="br0">&#40;</span>2<span class="sy0">*</span><span class="br0">&#40;</span>1<span class="sy0">/</span><span class="br0">&#40;</span>controlPoints-1<span class="br0">&#41;</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// is the direction of the controlpoint going UP or DOWN?</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>p.<span class="me1">y</span> <span class="sy0">&gt;</span> 0<span class="br0">&#41;</span> newY=-newY;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">//animate!</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; TweenMax.<span class="me1">to</span><span class="br0">&#40;</span>p,<span class="br0">&#40;</span><span class="kw3">Math</span>.<span class="kw3">random</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">*</span><span class="br0">&#40;</span>maxSpeed-minSpeed<span class="br0">&#41;</span><span class="br0">&#41;</span>+minSpeed,<span class="br0">&#123;</span>ease:Sine.<span class="me1">easeInOut</span>,y:newY,x:newX,onComplete:startAnim,onCompleteParams:<span class="br0">&#91;</span>p<span class="br0">&#93;</span><span class="br0">&#125;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
<span class="br0">&#125;</span></div>
</div>
</div>
</div>
<p>Pay attention to the fact that the controlpoints are just moving between  1 to -1 . This means that they are not having their physical width in here but will be multiplied later on in the Wave-class So let&#8217;s get going. Next class please!</p>
<div class="codesnip-container-wrapper">
<div class="codesnip-container-innerwrapper">
<div class="codesnip-container" >
<div class="actionscript codesnip" style="font-family:monospace;">package<br />
<span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">display</span>.<span class="me1">Sprite</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">events</span>.<span class="me1">Event</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">geom</span>.<span class="me1">Point</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">class</span> Wave <span class="kw3">extends</span> Sprite<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">var</span> waveWidth:<span class="kw3">Number</span> = <span class="nu0">650</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">var</span> waveHeight:<span class="kw3">Number</span> = <span class="nu0">150</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">var</span> <span class="kw3">data</span>:WaveData<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">function</span> Wave<span class="br0">&#40;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">super</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// creates data and starts the animation</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">data</span> = <span class="kw2">new</span> WaveData<span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">data</span>.<span class="me1">reset</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">function</span> update<span class="br0">&#40;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// creating real coordinates from Wave-data controlpoints</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> counter:<span class="kw3">int</span> = <span class="nu0">0</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> coord:<span class="kw3">Array</span> = <span class="br0">&#91;</span><span class="br0">&#93;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">for</span> <span class="kw1">each</span><span class="br0">&#40;</span><span class="kw2">var</span> p:Point <span class="kw1">in</span> <span class="kw3">data</span>.<span class="me1">aPoints</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; coord.<span class="kw3">push</span> <span class="br0">&#40;</span><span class="kw2">new</span> Point<span class="br0">&#40;</span>p.<span class="me1">x</span><span class="sy0">*</span>waveWidth,p.<span class="me1">y</span><span class="sy0">*</span>waveHeight<span class="br0">&#41;</span><span class="br0">&#41;</span>;;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// draw curve</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; graphics.<span class="kw3">clear</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; graphics.<span class="kw3">lineStyle</span><span class="br0">&#40;</span><span class="kw3">data</span>.<span class="me1">lineWidth</span>,<span class="kw3">data</span>.<span class="kw3">color</span>,<span class="kw3">data</span>.<span class="me1">waveAlpha</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; CubicBezier.<span class="me1">curveThroughPoints</span><span class="br0">&#40;</span>graphics,coord<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
<span class="br0">&#125;</span></div>
</div>
</div>
</div>
<p>Now the wave is clearly a fully animated wave. If you add this one to the stage you will see a thin line waving around.. but we want more, right? Next class please!</p>
<div class="codesnip-container-wrapper">
<div class="codesnip-container-innerwrapper">
<div class="codesnip-container" >
<div class="actionscript codesnip" style="font-family:monospace;">package<br />
<span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">display</span>.<span class="me1">Bitmap</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">display</span>.<span class="me1">BitmapData</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">display</span>.<span class="me1">BlendMode</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">display</span>.<span class="me1">Sprite</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">events</span>.<span class="me1">Event</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">filters</span>.<span class="me1">BitmapFilter</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">filters</span>.<span class="me1">BlurFilter</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">geom</span>.<span class="me1">Matrix</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">geom</span>.<span class="me1">Point</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">geom</span>.<span class="me1">Rectangle</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">class</span> Canvas <span class="kw3">extends</span> Sprite<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">var</span> bmpd:BitmapData<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">var</span> aWaves:<span class="kw3">Array</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">var</span> w:<span class="kw3">int</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">var</span> h:<span class="kw3">int</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">function</span> Canvas<span class="br0">&#40;</span>w:<span class="kw3">int</span> = 900,h:<span class="kw3">int</span> = 450<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">super</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// set the width and height of the canvas</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">this</span>.<span class="me1">w</span> = w;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">this</span>.<span class="me1">h</span> = h;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; aWaves=<span class="br0">&#91;</span><span class="br0">&#93;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// adding a bitmap to stage</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bmpd = <span class="kw2">new</span> BitmapData<span class="br0">&#40;</span>w,h,<span class="kw2">false</span>,0<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> bmp:Bitmap = <span class="kw2">new</span> Bitmap<span class="br0">&#40;</span>bmpd<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; addChild<span class="br0">&#40;</span>bmp<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">function</span> addWave<span class="br0">&#40;</span>wave:Wave<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// adding a wave to the canvas</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; aWaves.<span class="kw3">push</span><span class="br0">&#40;</span>wave<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">function</span> startDraw<span class="br0">&#40;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; addEventListener<span class="br0">&#40;</span>Event.<span class="me1">ENTER_FRAME</span>,onTick<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">function</span> onTick<span class="br0">&#40;</span><span class="kw3">e</span>:Event<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// each wave is now drawn onto the canvas using the ADD Blendmode.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">for</span> <span class="kw1">each</span> <span class="br0">&#40;</span> <span class="kw2">var</span> wave:Wave <span class="kw1">in</span> aWaves<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; wave.<span class="me1">update</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> m:Matrix = <span class="kw2">new</span> Matrix<span class="br0">&#40;</span>1,0,0,1,26,bmpd.<span class="kw3">height</span><span class="sy0">*</span>.5<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bmpd.<span class="me1">draw</span><span class="br0">&#40;</span>wave,m,<span class="kw2">null</span>,BlendMode.<span class="kw3">ADD</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span> <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// the canvas is now blurred out giving a blurred AND transitionout effect.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> filter:BlurFilter = <span class="kw2">new</span> BlurFilter<span class="br0">&#40;</span>3,3<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bmpd.<span class="me1">applyFilter</span><span class="br0">&#40;</span>bmpd, <span class="kw2">new</span> Rectangle<span class="br0">&#40;</span>0,0,w,h<span class="br0">&#41;</span>,<span class="kw2">new</span> Point<span class="br0">&#40;</span>0,0<span class="br0">&#41;</span>, filter<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// the bitmapdata is now scrolled to the right giving a &quot;moving feeling&quot; to the effect.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bmpd.<span class="kw3">scroll</span><span class="br0">&#40;</span><span class="nu0">5</span>,<span class="nu0">0</span><span class="br0">&#41;</span>&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
<span class="br0">&#125;</span></div>
</div>
</div>
</div>
<p>Wow, amazing what a few postfilters can do. Just a blur and a pixelpush to the right does the trick. Now let&#8217;s put this all together in a Main class and try it out:</p>
<div class="codesnip-container-wrapper">
<div class="codesnip-container-innerwrapper">
<div class="codesnip-container" >
<div class="actionscript codesnip" style="font-family:monospace;">package<br />
<span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">display</span>.<span class="me1">Sprite</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">class</span> Main <span class="kw3">extends</span> Sprite<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">function</span> Main<span class="br0">&#40;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> c:Canvas = <span class="kw2">new</span> Canvas<span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// adding a few waves</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">for</span> <span class="br0">&#40;</span><span class="kw2">var</span> i:<span class="kw3">int</span> = <span class="nu0">0</span>;i <span class="sy0">&lt;</span> <span class="nu0">3</span>;i++<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> w:Wave = <span class="kw2">new</span> Wave<span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; c.<span class="me1">addWave</span><span class="br0">&#40;</span>w<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; addChild<span class="br0">&#40;</span>c<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; c.<span class="me1">startDraw</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
<span class="br0">&#125;</span></div>
</div>
</div>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.x-com.se/labs/flash/smokefx-an-experiment-with-bezier-curves.html/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Realistic water &#8211; Showing off DisplacementMapFilter</title>
		<link>http://www.x-com.se/labs/flash/realistic-water-showing-off-displacementmapfilter.html</link>
		<comments>http://www.x-com.se/labs/flash/realistic-water-showing-off-displacementmapfilter.html#comments</comments>
		<pubDate>Thu, 15 Jul 2010 13:57:39 +0000</pubDate>
		<dc:creator>Andreas</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[as3]]></category>
		<category><![CDATA[displacementmap]]></category>
		<category><![CDATA[displacementmapfilter]]></category>
		<category><![CDATA[effect]]></category>
		<category><![CDATA[water]]></category>

		<guid isPermaLink="false">http://www.x-com.se/?p=1185</guid>
		<description><![CDATA[
Try moving the mouse over the water and maybe click ...]]></description>
			<content:encoded><![CDATA[<p><a rel="shadowbox;width=500;height=300" href="/wp-content/uploads/2010/07/water.swf"><img title="Water" src="/wp-content/uploads/2010/07/water_preview.png" alt="Water" width="600" height="340" /></a><br />
Try moving the mouse over the water and maybe click a few times?</p>
<p>Been playing around with a small idea of a game and for this particular game I would like to have a great top-down watereffect to give a smooth, calm overall feeling.<br />
<span id="more-1185"></span><br />
This was a great way to try out a few new tricks using both the DisplacementMapFilter that has been in Flash for a while and also the lesser known ConvolutionFilter.<br />
The DisplacementMapFilter helps to &#8220;push&#8221; the backgroundpixels in different directions due to the filtercolours which creates the distortion of the background, giving the illusion of the water breaking and distorting the light.<br />
The ConvolutionFilter is normally used to check and alter the neighbouring pixels which in this case is used when the water rings and ripples are growing and &#8220;smoothed&#8221; out. </p>
<p>On top of this, I created a bitmap using PerlinNoise that also distorts the water + gives that nice lighting effect via the SUBTRACT BlendMode.</p>
<p>The result became surprisingly good so I decided to throw it up here right away and will, as soon as I find the time, clean the code out so I can step through it all with you once it&#8217;s done.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.x-com.se/labs/flash/realistic-water-showing-off-displacementmapfilter.html/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Auto generated branches</title>
		<link>http://www.x-com.se/labs/flash/auto-generated-branches.html</link>
		<comments>http://www.x-com.se/labs/flash/auto-generated-branches.html#comments</comments>
		<pubDate>Wed, 28 Apr 2010 09:53:20 +0000</pubDate>
		<dc:creator>Andreas</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Tutorial]]></category>

		<guid isPermaLink="false">http://www.x-com.se/?p=1033</guid>
		<description><![CDATA[I want to create a nice 3D-effect with branches growing, ...]]></description>
			<content:encoded><![CDATA[<p>I want to create a nice 3D-effect with branches growing, flowing and rotating around each other. Just to make sure that my idea is working I decided just to create a proof of concept in 2D. With a few tweaks with the parameters it turned out to be some pretty nice organic trees/bushes.</p>
<p><a rel="shadowbox;width=900;height=400" href="/wp-content/uploads/2010/04/trees.swf"><img title="Trees" src="/wp-content/uploads/2010/04/treeGenerator.jpg" alt="Trees" width="600" height="340" /></a></p>
<p> I&#8217;ll go through the code and explain what it does.<br />
<span id="more-1033"></span></p>
<p>I divided the example into 3 classes. Main.as (just puts the trees on the stage), Tree.as (keeps track of all the branches, updates and destroys them and draws them to the canvas) and Branch.as (holds the information of one single branch).</p>
<p>I believe its easiest if we just start with the smallest component, the branch.</p>
<div class="codesnip-container-wrapper">
<div class="codesnip-container-innerwrapper">
<div class="codesnip-container" >
<div class="actionscript codesnip" style="font-family:monospace;">package <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> com.<span class="me1">greensock</span>.<span class="me1">TweenLite</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> se.<span class="me1">xcom</span>.<span class="kw3">math</span>.<span class="me1">Degrees</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">class</span> Branch<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">var</span> rotZ:<span class="kw3">Number</span>; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">var</span> rotZSpeed:<span class="kw3">Number</span> = <span class="nu0">0</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">var</span> x:<span class="kw3">Number</span>; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">var</span> y:<span class="kw3">Number</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">var</span> thickness:<span class="kw3">Number</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">var</span> speed:<span class="kw3">Number</span> = <span class="nu0">3</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">var</span> rotationSpeedSpan:<span class="kw3">Number</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">var</span> rotationSpeedFragility:<span class="kw3">Number</span> = <span class="nu0">0.2</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">function</span> Branch<span class="br0">&#40;</span>x:<span class="kw3">Number</span>,y:<span class="kw3">Number</span>,rotZ:<span class="kw3">Number</span>,thickness:<span class="kw3">Number</span>,rotationSpeedSpan:<span class="kw3">Number</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">this</span>.<span class="me1">x</span> = x;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">this</span>.<span class="me1">y</span> = y;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">this</span>.<span class="me1">rotZ</span> = rotZ;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">this</span>.<span class="me1">thickness</span> = thickness;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">this</span>.<span class="me1">rotationSpeedSpan</span> = rotationSpeedSpan;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setRotationSpeed<span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span></p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">function</span> update<span class="br0">&#40;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x += Degrees.<span class="me1">dSin</span><span class="br0">&#40;</span>rotZ<span class="br0">&#41;</span><span class="sy0">*</span>speed;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y += Degrees.<span class="me1">dCos</span><span class="br0">&#40;</span>rotZ<span class="br0">&#41;</span><span class="sy0">*</span>speed;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rotZ += rotZSpeed;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; thickness-= <span class="nu0">0.04</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">function</span> destroy<span class="br0">&#40;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// kill the endless loop</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; TweenLite.<span class="me1">killTweensOf</span><span class="br0">&#40;</span><span class="kw3">this</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">function</span> setRotationSpeed<span class="br0">&#40;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// To make sure that the rotation of the branch moves smoothly I decide not to tween the actual rotation but the speed of the rotation.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// This is an endless loop, calling itself when the tween has ended.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> newSpeed:<span class="kw3">Number</span> = <span class="kw3">Math</span>.<span class="kw3">random</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">*</span>rotationSpeedSpan-rotationSpeedSpan<span class="sy0">*</span>.5;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> delay:<span class="kw3">Number</span> = <span class="kw3">Math</span>.<span class="kw3">random</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">*</span>rotationSpeedFragility+rotationSpeedFragility<span class="sy0">*</span>.5;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; TweenLite.<span class="me1">to</span><span class="br0">&#40;</span><span class="kw3">this</span>,delay,<span class="br0">&#123;</span>rotZSpeed:newSpeed,onComplete:setRotationSpeed<span class="br0">&#125;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
<span class="br0">&#125;</span></div>
</div>
</div>
</div>
<p>As you can see, the branch is not a display object. It just carries the info about the branch so <strong>Tree.as</strong> can draw it on it&#8217;s graphics canvas. The <strong>update()</strong> function makes sure that the branch shrinks in thickness, rotates and grows in the current direction it is given. The rotation is is changed through the Tween in <strong>setRotationSpeed()</strong>. Really nothing special (oh and if you are wondering about the Degrees class, it&#8217;s just converting radians into degrees as I hate radians.) Let&#8217;s move on to the Tree.</p>
<div class="codesnip-container-wrapper">
<div class="codesnip-container-innerwrapper">
<div class="codesnip-container" >
<div class="actionscript codesnip" style="font-family:monospace;">package<br />
<span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> com.<span class="me1">greensock</span>.<span class="me1">TweenLite</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">display</span>.<span class="me1">Sprite</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">events</span>.<span class="me1">Event</span>;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">class</span> Tree <span class="kw3">extends</span> Sprite<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">var</span> <span class="kw3">color</span>:<span class="kw3">Number</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">var</span> aBranches:<span class="kw3">Array</span> = <span class="br0">&#91;</span><span class="br0">&#93;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">function</span> Tree<span class="br0">&#40;</span><span class="kw3">color</span>:<span class="kw3">Number</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">this</span>.<span class="kw3">color</span> = <span class="kw3">color</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; reset<span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">super</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">function</span> <span class="kw3">start</span><span class="br0">&#40;</span>delay:<span class="kw3">int</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// Just starts drawing the tree. Implanted only so the trees doesnt start drawing at the same time.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; TweenLite.<span class="me1">delayedCall</span><span class="br0">&#40;</span>delay,<span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#123;</span>addEventListener<span class="br0">&#40;</span>Event.<span class="me1">ENTER_FRAME</span>,onTick<span class="br0">&#41;</span><span class="br0">&#125;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">function</span> onTick<span class="br0">&#40;</span><span class="kw3">e</span>:Event<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// Goes through every branch in the tree.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">for</span> <span class="kw1">each</span><span class="br0">&#40;</span><span class="kw2">var</span> br:Branch <span class="kw1">in</span> aBranches<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// Updates the branch and draws a new line between the old position and the new one.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">with</span> <span class="br0">&#40;</span><span class="kw3">this</span>.<span class="me1">graphics</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">lineStyle</span><span class="br0">&#40;</span>br.<span class="me1">thickness</span>,<span class="kw3">color</span>,1<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">moveTo</span><span class="br0">&#40;</span>br.<span class="me1">x</span>,br.<span class="me1">y</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; br.<span class="me1">update</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">lineTo</span><span class="br0">&#40;</span>br.<span class="me1">x</span>,br.<span class="me1">y</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// Randomly decides wether to create a new branch origin from the current branch.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span><span class="kw3">Math</span>.<span class="kw3">random</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="sy0">&lt;</span> 0.1-<span class="br0">&#40;</span>br.<span class="me1">thickness</span><span class="sy0">*</span>0.01<span class="br0">&#41;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> th:<span class="kw3">int</span> = <span class="br0">&#40;</span>br.<span class="me1">thickness</span><span class="sy0">&gt;</span>0.7<span class="br0">&#41;</span>?<span class="br0">&#40;</span>br.<span class="me1">thickness</span>-1<span class="br0">&#41;</span>:br.<span class="me1">thickness</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> tbr:Branch = <span class="kw2">new</span> Branch<span class="br0">&#40;</span>br.<span class="me1">x</span>,br.<span class="me1">y</span>,br.<span class="me1">rotZ</span>,th,br.<span class="me1">rotationSpeedSpan</span>+14<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; aBranches.<span class="kw3">push</span><span class="br0">&#40;</span>tbr<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// Goes through every branch in the tree (again!) just to destroy the branches that are too small.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">for</span> <span class="br0">&#40;</span><span class="kw2">var</span> i:<span class="kw3">int</span>= aBranches.<span class="me1">length</span>-<span class="nu0">1</span>;i <span class="sy0">&gt;</span> -<span class="nu0">1</span>;i&#8211;<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> tbr:Branch = aBranches<span class="br0">&#91;</span>i<span class="br0">&#93;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>tbr.<span class="me1">thickness</span> <span class="sy0">&lt;</span> 0.4<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tbr.<span class="me1">destroy</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; aBranches.<span class="kw3">splice</span><span class="br0">&#40;</span>i,<span class="nu0">1</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// Checks if there are no &quot;alive&quot; branches left.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>aBranches.<span class="kw3">length</span> == 0<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; TweenLite.<span class="me1">to</span><span class="br0">&#40;</span><span class="kw3">this</span>,2,<span class="br0">&#123;</span>alpha:0,onComplete:reset<span class="br0">&#125;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">function</span> reset<span class="br0">&#40;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">this</span>.<span class="me1">graphics</span>.<span class="kw3">clear</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alpha = <span class="nu0">1</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> tbr:Branch = <span class="kw2">new</span> Branch<span class="br0">&#40;</span>0,0,180,8,5<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; aBranches.<span class="kw3">push</span><span class="br0">&#40;</span>tbr<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
<span class="br0">&#125;</span></div>
</div>
</div>
</div>
<p>As you can see, <strong>start()</strong> sets an Event.ENTER_FRAME listener so it automatically runs <strong>onTick()</strong> every frame. Most of the comments in the code tells you whats happening inside. It takes all the branches it currently has, updates them, draws them, sometimes spawns new branches and finally removes them if their thickness is, well not thick enough.</p>
<p>Only the Main.as class remains. I guess it need&#8217;s no comments. </p>
<div class="codesnip-container-wrapper">
<div class="codesnip-container-innerwrapper">
<div class="codesnip-container" >
<div class="actionscript codesnip" style="font-family:monospace;">package <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">display</span>.<span class="me1">Sprite</span>;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">class</span> Main <span class="kw3">extends</span> Sprite<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">var</span> aTrees:<span class="kw3">Array</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">var</span> aColors:<span class="kw3">Array</span>=<span class="br0">&#91;</span>0xffbb88,0xaaffaa,0xaabbff<span class="br0">&#93;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">var</span> aBranches:<span class="kw3">Array</span> &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">function</span> Main<span class="br0">&#40;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span> &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">for</span> <span class="br0">&#40;</span><span class="kw2">var</span> i:<span class="kw3">int</span> = <span class="nu0">0</span>;i<span class="sy0">&lt;</span><span class="nu0">3</span>;i++<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> tree:Tree = <span class="kw2">new</span> Tree<span class="br0">&#40;</span>aColors<span class="br0">&#91;</span>i<span class="br0">&#93;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tree.<span class="me1">x</span> = 250<span class="sy0">*</span>i+<span class="nu0">200</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tree.<span class="me1">y</span> = <span class="nu0">370</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tree.<span class="kw3">start</span><span class="br0">&#40;</span>i<span class="sy0">*</span>3.5<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; addChild<span class="br0">&#40;</span>tree<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
<span class="br0">&#125;</span></div>
</div>
</div>
</div>
<p>There you go, three tiny trees growing on your screen. There are lots of parameters that could be lifted out and tweaked with giving you more branches, faster drawing, stranger rotation of the branches and so on. But I leave it up to you to lift them out and customize the classes. </p>
<p>/Andreas</p>
]]></content:encoded>
			<wfw:commentRss>http://www.x-com.se/labs/flash/auto-generated-branches.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>ViewportLayers &#8211; In depth (Papervision3D)</title>
		<link>http://www.x-com.se/labs/flash/viewportlayers-in-depth-papervision3d.html</link>
		<comments>http://www.x-com.se/labs/flash/viewportlayers-in-depth-papervision3d.html#comments</comments>
		<pubDate>Wed, 21 Apr 2010 12:12:53 +0000</pubDate>
		<dc:creator>Andreas</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Tutorial]]></category>

		<guid isPermaLink="false">http://www.x-com.se/?p=1005</guid>
		<description><![CDATA[The more I see where people get stuck, using PV3D, ...]]></description>
			<content:encoded><![CDATA[<p>The more I see where people get stuck, using PV3D, the more I feel the need to create a good tutorial regarding ViewportLayers.<br />
Lets start with the simple task of NOT using any layers. First the document class that just adds our BasicView.<br />
<span id="more-1005"></span></p>
<div class="codesnip-container-wrapper">
<div class="codesnip-container-innerwrapper">
<div class="codesnip-container" >
<div class="actionscript codesnip" style="font-family:monospace;">package <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">display</span>.<span class="me1">Sprite</span>;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">class</span> ViewportLayerTest <span class="kw3">extends</span> Sprite<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">function</span> ViewportLayerTest<span class="br0">&#40;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> tView:View3d = <span class="kw2">new</span> View3d<span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; addChild<span class="br0">&#40;</span>tView<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
<span class="br0">&#125;</span></div>
</div>
</div>
</div>
<p>Now let’s build up a scene with a ground, a wall stuck to the ground and a sphere that is stuck right in the middle of the wall.<br />
That would look something like this.</p>
<div class="codesnip-container-wrapper">
<div class="codesnip-container-innerwrapper">
<div class="codesnip-container" >
<div class="actionscript codesnip" style="font-family:monospace;">package<br />
<span class="br0">&#123;</span><br />
&nbsp; &nbsp; <span class="kw3">import</span> org.<span class="me1">papervision3d</span>.<span class="me1">materials</span>.<span class="me1">WireframeMaterial</span>;<br />
&nbsp; &nbsp; <span class="kw3">import</span> org.<span class="me1">papervision3d</span>.<span class="me1">objects</span>.<span class="me1">primitives</span>.<span class="me1">Cube</span>;<br />
&nbsp; &nbsp; <span class="kw3">import</span> org.<span class="me1">papervision3d</span>.<span class="me1">objects</span>.<span class="me1">primitives</span>.<span class="me1">Plane</span>;<br />
&nbsp; &nbsp; <span class="kw3">import</span> org.<span class="me1">papervision3d</span>.<span class="me1">objects</span>.<span class="me1">primitives</span>.<span class="me1">Sphere</span>;<br />
&nbsp; &nbsp; <span class="kw3">import</span> org.<span class="me1">papervision3d</span>.<span class="me1">view</span>.<span class="me1">BasicView</span>;</p>
<p>&nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">class</span> View3d <span class="kw3">extends</span> BasicView<br />
&nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">var</span> sphere:Sphere;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">var</span> cube:Cube;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">var</span> ground:Plane;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">var</span> wall:Plane;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">function</span> View3d<span class="br0">&#40;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">super</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setupScene<span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; startRendering<span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span></p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">function</span> setupScene<span class="br0">&#40;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">camera</span>.<span class="me1">x</span> = <span class="nu0">660</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">camera</span>.<span class="me1">y</span> = &nbsp;<span class="nu0">400</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">camera</span>.<span class="me1">z</span> = -<span class="nu0">700</span>;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ground = <span class="kw2">new</span> Plane<span class="br0">&#40;</span><span class="kw2">new</span> WireframeMaterial<span class="br0">&#40;</span>0&#215;224422<span class="br0">&#41;</span>,1000,1000,1,1<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ground.<span class="me1">rotationX</span> = <span class="nu0">90</span>;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; wall = <span class="kw2">new</span> Plane<span class="br0">&#40;</span><span class="kw2">new</span> WireframeMaterial<span class="br0">&#40;</span>0&#215;556655<span class="br0">&#41;</span>,1000,400,1,1<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; wall.<span class="me1">y</span> = <span class="nu0">200</span>;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sphere = <span class="kw2">new</span> Sphere<span class="br0">&#40;</span><span class="kw2">new</span> WireframeMaterial<span class="br0">&#40;</span>0xff2222<span class="br0">&#41;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sphere.<span class="me1">x</span> = -<span class="nu0">100</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sphere.<span class="me1">y</span> = <span class="nu0">100</span>;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scene.<span class="me1">addChild</span><span class="br0">&#40;</span>ground<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scene.<span class="me1">addChild</span><span class="br0">&#40;</span>wall<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scene.<span class="me1">addChild</span><span class="br0">&#40;</span>sphere<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; <span class="br0">&#125;</span><br />
<span class="br0">&#125;</span></div>
</div>
</div>
</div>
<p>Run that swf and you will see this:<br />
<img class="alignnone size-full wp-image-1011" title="bild-11" src="http://www.x-com.se/wp-content/uploads/2010/04/bild-11.png" alt="bild-11" width="508" height="390" /></p>
<p>Let us now put a little more code in and also change the material into solid colour ones (I put a FlastShader on the sphere so we can see the roundness more easily).</p>
<div class="codesnip-container-wrapper">
<div class="codesnip-container-innerwrapper">
<div class="codesnip-container" >
<div class="actionscript codesnip" style="font-family:monospace;">package<br />
<span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> org.<span class="me1">papervision3d</span>.<span class="me1">lights</span>.<span class="me1">PointLight3D</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> org.<span class="me1">papervision3d</span>.<span class="me1">materials</span>.<span class="me1">ColorMaterial</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> org.<span class="me1">papervision3d</span>.<span class="me1">materials</span>.<span class="me1">shadematerials</span>.<span class="me1">FlatShadeMaterial</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> org.<span class="me1">papervision3d</span>.<span class="me1">objects</span>.<span class="me1">primitives</span>.<span class="me1">Cube</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> org.<span class="me1">papervision3d</span>.<span class="me1">objects</span>.<span class="me1">primitives</span>.<span class="me1">Plane</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> org.<span class="me1">papervision3d</span>.<span class="me1">objects</span>.<span class="me1">primitives</span>.<span class="me1">Sphere</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> org.<span class="me1">papervision3d</span>.<span class="me1">view</span>.<span class="me1">BasicView</span>;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">class</span> View3d <span class="kw3">extends</span> BasicView<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">var</span> light:PointLight3D;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">var</span> sphere:Sphere;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">var</span> cube:Cube;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">var</span> ground:Plane;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">var</span> wall:Plane;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">function</span> View3d<span class="br0">&#40;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">super</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setupScene<span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; startRendering<span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span></p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">function</span> setupScene<span class="br0">&#40;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">camera</span>.<span class="me1">x</span> = <span class="nu0">660</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">camera</span>.<span class="me1">y</span> = &nbsp;<span class="nu0">400</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">camera</span>.<span class="me1">z</span> = -<span class="nu0">700</span>;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; light = <span class="kw2">new</span> PointLight3D<span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; light.<span class="me1">x</span> = -<span class="nu0">400</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; light.<span class="me1">z</span> = -<span class="nu0">1000</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; light.<span class="me1">y</span> = <span class="nu0">200</span>;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ground = <span class="kw2">new</span> Plane<span class="br0">&#40;</span><span class="kw2">new</span> ColorMaterial<span class="br0">&#40;</span>0&#215;224422<span class="br0">&#41;</span>,1000,1000,1,1<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ground.<span class="me1">rotationX</span> = <span class="nu0">90</span>;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; wall = <span class="kw2">new</span> Plane<span class="br0">&#40;</span><span class="kw2">new</span> ColorMaterial<span class="br0">&#40;</span>0&#215;446644<span class="br0">&#41;</span>,800,400,1,1<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; wall.<span class="me1">y</span> = <span class="nu0">200</span>;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sphere = <span class="kw2">new</span> Sphere<span class="br0">&#40;</span><span class="kw2">new</span> FlatShadeMaterial<span class="br0">&#40;</span>light,0xff2222<span class="br0">&#41;</span>,100,10,10<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sphere.<span class="me1">x</span> = -<span class="nu0">100</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sphere.<span class="me1">y</span> = <span class="nu0">100</span>;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scene.<span class="me1">addChild</span><span class="br0">&#40;</span>ground<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scene.<span class="me1">addChild</span><span class="br0">&#40;</span>wall<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scene.<span class="me1">addChild</span><span class="br0">&#40;</span>sphere<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
<span class="br0">&#125;</span></div>
</div>
</div>
</div>
<p>Run it and witness this:</p>
<p><img class="alignnone size-full wp-image-1008" title="bild-2" src="http://www.x-com.se/wp-content/uploads/2010/04/bild-2.png" alt="bild-2" width="510" height="391" /></p>
<p>Now that aint right! This is just the Z-fighting I talked about in an earlier post. Looking at the wireframe one can see that the “centerpoint” of the left triangle in the ground is actually closer to the than many of the sphere and walls centrepoint so that is why we get that strange phenomena. It just is drawn later than it should.</p>
<p>Now lets use layers just like in Flash 2D. (well sort of).</p>
<h2>What are ViewportLayers?</h2>
<p>As I assume that you are familiar to the Flash environment and AS3, I will descripe the ViewportLayers just like layered movieclips on top of each other in a normal DisplayList. The Viewport is rendering all these layers one by one in the order it is told to which gives you the power to control when something is going to be rendered.</p>
<p>Now, the PV3D team has been very ambitious when it comes to layers and therefo you will find many different ways of creating one or even handling one.</p>
<p>First of all, let me say that we already got 2 layers. One is the actual Viewport.containerSprite that is the “root” of every layer.</p>
<p>If we write</p>
<p><strong><em>trace(viewport.containerSprite.childLayers.toString());</em></strong></p>
<p>you will see a layer underneath as well. This is what we got this far.</p>
<p>One approach to working with layers is to just set up a structure of empty layers at first and then fill in the objects that needs to be in which layer.</p>
<p>Let’s try this on our testscene. Put this script after you add the objects to the scene:</p>
<div class="codesnip-container-wrapper">
<div class="codesnip-container-innerwrapper">
<div class="codesnip-container" >
<div class="actionscript codesnip" style="font-family:monospace;"><span class="co1">// create 3 new layers, null says that it will be empty initially.</span><br />
<span class="kw2">var</span> sphereLayer:ViewportLayer = <span class="kw2">new</span> ViewportLayer<span class="br0">&#40;</span>viewport,<span class="kw2">null</span><span class="br0">&#41;</span>;<br />
<span class="kw2">var</span> wallLayer:ViewportLayer = <span class="kw2">new</span> ViewportLayer<span class="br0">&#40;</span>viewport,<span class="kw2">null</span><span class="br0">&#41;</span>;<br />
<span class="kw2">var</span> groundLayer:ViewportLayer = <span class="kw2">new</span> ViewportLayer<span class="br0">&#40;</span>viewport,<span class="kw2">null</span><span class="br0">&#41;</span>;</p>
<p><span class="co1">// add the layers as childs to the &quot;root&quot;-layer</span><br />
viewport.<span class="me1">containerSprite</span>.<span class="me1">addLayer</span><span class="br0">&#40;</span>sphereLayer<span class="br0">&#41;</span>;<br />
viewport.<span class="me1">containerSprite</span>.<span class="me1">addLayer</span><span class="br0">&#40;</span>wallLayer<span class="br0">&#41;</span>;<br />
viewport.<span class="me1">containerSprite</span>.<span class="me1">addLayer</span><span class="br0">&#40;</span>groundLayer<span class="br0">&#41;</span>;</p>
<p><span class="co1">// set the sorting of all childlayers to sort by index</span><br />
viewport.<span class="me1">containerSprite</span>.<span class="me1">sortMode</span> = ViewportLayerSortMode.<span class="me1">INDEX_SORT</span>;</p>
<p><span class="co1">// set the sort index of the new layer</span><br />
groundLayer.<span class="me1">layerIndex</span> = <span class="nu0">1</span>;<br />
wallLayer.<span class="me1">layerIndex</span> = <span class="nu0">2</span>;<br />
sphereLayer.<span class="me1">layerIndex</span> = <span class="nu0">3</span>;</p>
<p><span class="co1">// add our objects to the new layers</span><br />
groundLayer.<span class="me1">addDisplayObject3D</span><span class="br0">&#40;</span>ground<span class="br0">&#41;</span>;<br />
wallLayer.<span class="me1">addDisplayObject3D</span><span class="br0">&#40;</span>wall<span class="br0">&#41;</span>;<br />
sphereLayer.<span class="me1">addDisplayObject3D</span><span class="br0">&#40;</span>sphere<span class="br0">&#41;</span>;</div>
</div>
</div>
</div>
<p>And here’s the result:</p>
<p><img class="alignnone size-full wp-image-1009" title="bild-3" src="http://www.x-com.se/wp-content/uploads/2010/04/bild-3.png" alt="bild-3" width="508" height="390" /></p>
<p>Now the layers are like 3 “sprites” drawn separately on the viewport. First the ground (as it has the lowest index), then the wall, overwriting all of the ground. Finally the sphere. Notice that even though the sphere was half stuck into the wall, we can see the whole sphere now.<br />
As you can put “childLayers” in other layers you can also experiment with nesting layers into each other and sorting them differently depending on your needs.<br />
As I mentioned there are several approaches to creating layers.<br />
If you just erase what we just added we will try another approach.</p>
<div class="codesnip-container-wrapper">
<div class="codesnip-container-innerwrapper">
<div class="codesnip-container" >
<div class="actionscript codesnip" style="font-family:monospace;"><span class="co1">// this time, let&#8217;s use the viewport to create layers, through objects.</span><br />
<span class="co1">// true means that if &#8217;sphere&#8217; does not belong to a layer, create one for it and put it there.</span><br />
<span class="kw2">var</span> sphereLayer:ViewportLayer = viewport.<span class="me1">getChildLayer</span><span class="br0">&#40;</span>sphere, <span class="kw2">true</span><span class="br0">&#41;</span>;<br />
<span class="kw2">var</span> groundLayer:ViewportLayer = viewport.<span class="me1">getChildLayer</span><span class="br0">&#40;</span>sphere, <span class="kw2">true</span><span class="br0">&#41;</span>;<br />
<span class="kw2">var</span> wallLayer:ViewportLayer = viewport.<span class="me1">getChildLayer</span><span class="br0">&#40;</span>sphere, <span class="kw2">true</span><span class="br0">&#41;</span>;<br />
viewport.<span class="me1">containerSprite</span>.<span class="me1">sortMode</span> = ViewportLayerSortMode.<span class="me1">INDEX_SORT</span>;</p>
<p><span class="co1">// set the sort index of the new layer</span><br />
groundLayer.<span class="me1">layerIndex</span> = <span class="nu0">2</span>;<br />
wallLayer.<span class="me1">layerIndex</span> = <span class="nu0">1</span>;<br />
sphereLayer.<span class="me1">layerIndex</span> = <span class="nu0">3</span>;</div>
</div>
</div>
</div>
<p>As I changed the indexorder, the result now looks like this:<br />
<img class="alignnone size-full wp-image-1010" title="bild-4" src="http://www.x-com.se/wp-content/uploads/2010/04/bild-4.png" alt="bild-4" width="510" height="392" /></p>
<p>Notice that<strong><em> viewport.getChildLayer()</em></strong> does create a new layer, put the object in it and also puts the layer in the structurelist of the containerSprite. Easy and simple, but maybe with a little less control of the layers placement in the “layertree”.<br />
A last way of creating layers I want to bring up today is the DO3D.useOwnContainer<br />
It automatically creates a layer for just that object which gives you great control over effects like:<br />
<strong>DO3D.filters<br />
DO3D.blendMode<br />
DO3D.alpha</strong><br />
Try to set this simple variable to true and experiment with these 3 parameters. I know that people are asking a lot about alpha and effects and this is such an easy way to get that.</p>
<p>As long as you think of the layers as single Sprites/MovieClips on top of each other you will be able to come up with great effects. Are you having a problem getting a great buttonMode on all your objects? Put them in a layer and call:<strong><em> layer.buttonMode = true</em></strong></p>
<p>You want some of your cubes to glow? Why don’t you try <em><strong>layer.Filters</strong></em>?</p>
<p>You even have unique control over how OFTEN that special layer will be rendered. In my game I will consider a static overview camera for lowperformance computers. This means that I will only render the ground and the whole Arena ONCE and then only render the units, bullets and explosions. Really a processorsaver! How to do it?</p>
<p>Well, put all layers that will be rendered into an array, eg aLayers:Array</p>
<p>Now send that array into: renderer.renderLayers(scene, camera, viewport, aLayers)</p>
<p>This will tell the renderer to only render those layers.</p>
<p>ViewportLayers holds a lot of secrets and great functionality but I stop here and will probably come out with a more advanced tutorial later on. Now you got the basics to take control over your renderings!</p>
<p>/Andreas</p>
]]></content:encoded>
			<wfw:commentRss>http://www.x-com.se/labs/flash/viewportlayers-in-depth-papervision3d.html/feed</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
		<item>
		<title>Particle system #1 &#8211; Basic particles</title>
		<link>http://www.x-com.se/labs/flash/particle-system-1-basic-particles.html</link>
		<comments>http://www.x-com.se/labs/flash/particle-system-1-basic-particles.html#comments</comments>
		<pubDate>Mon, 19 Apr 2010 13:58:05 +0000</pubDate>
		<dc:creator>Andreas</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Tutorial]]></category>

		<guid isPermaLink="false">http://www.x-com.se/?p=989</guid>
		<description><![CDATA[As I am coming from a background of gameprogramming (and ...]]></description>
			<content:encoded><![CDATA[<p>As I am coming from a background of gameprogramming (and originally from the demo scene in the 90´s) am I very fond of small tips and tricks to create nice special effects. There are few project that I see out there that couldn&#8217;t be spiced up with a nice particle system so I decided to go through some basics of particle systems and how they can be used to create a variety of effects. In this first &#8220;chapter&#8221; I will just go through the basics of a system and how it works and then later on create a more flexible system that can be used in oh so many situations.</p>
<p>Now lets look at what we will create today:</p>
<p><a rel="shadowbox;width=450;height=450" href="/wp-content/uploads/2010/04/supernova.swf"><img title="facewarp" src="/wp-content/uploads/2010/04/supernova.jpg" alt="Facewarp" width="600" height="340" /></a></p>
<p>Neat right? Let&#8217;s dive into the universe of particles&#8230;<br />
<span id="more-989"></span></p>
<p>For a programmer used to flash (which is a very &#8220;visual&#8221; language) it&#8217;s not especially hard to understand the concept of particles as it is nothing less than Displayobjects being placed on screen and adjusted using it&#8217;s normal parameters such as scale, rotation, color and position. In this exampel you see two different particle systems. One with the stars, adjusting their scale, alpha and position to create the illusion of the camera travelling forward in an endless space. The other system is the supernova with a few &#8220;particles&#8221; being placed in the center, scaled, rotated and then fading out with the alpha. Everything is blended with the awesome ADD-blendmode which must be the most used blendmode in any game/demo with some self respect. Both these systems origins from the center of the scene/stage so the Main class of this small app is probably very basic.</p>
<div class="codesnip-container-wrapper">
<div class="codesnip-container-innerwrapper">
<div class="codesnip-container" >
<div class="actionscript codesnip" style="font-family:monospace;">package<br />
<span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">display</span>.<span class="me1">Sprite</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> se.<span class="me1">xcom</span>.<span class="me1">effects</span>.<span class="me1">particle</span>.<span class="me1">NovaEmitter</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> se.<span class="me1">xcom</span>.<span class="me1">effects</span>.<span class="me1">particle</span>.<span class="me1">StarEmitter</span>;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">class</span> LiteTest <span class="kw3">extends</span> Sprite<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">function</span> LiteTest<span class="br0">&#40;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">super</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// create the emitters and adding it to the middle of scene.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> nova:NovaEmitter = <span class="kw2">new</span> NovaEmitter<span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; nova.<span class="me1">x</span> = <span class="kw3">stage</span>.<span class="me1">stageWidth</span><span class="sy0">*</span>.5;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; nova.<span class="me1">y</span> = <span class="kw3">stage</span>.<span class="me1">stageHeight</span><span class="sy0">*</span>.5;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; nova.<span class="me1">scaleX</span> = <span class="nu0">2</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; nova.<span class="me1">scaleY</span> = <span class="nu0">2</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> stars:StarEmitter = <span class="kw2">new</span> StarEmitter<span class="br0">&#40;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; stars.<span class="me1">x</span> = <span class="kw3">stage</span>.<span class="me1">stageWidth</span><span class="sy0">*</span>.5;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; stars.<span class="me1">y</span> = <span class="kw3">stage</span>.<span class="me1">stageHeight</span><span class="sy0">*</span>.5;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; addChild<span class="br0">&#40;</span>nova<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; addChild<span class="br0">&#40;</span>stars<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
<span class="br0">&#125;</span></div>
</div>
</div>
</div>
<p>Ok, lets take a look at one of the systems. All particle systems have some kind of &#8220;emitter&#8221;. You can see it as an object on the scene that is producing particles. It is  not visible itself but the particles it &#8220;emits&#8221; is (most of the time) visible. The emitter is somehow the engine that decides how many particles is being generated, how they behave, rotate, scale etc..  You can see it as a located factory in the screen producing particles. Sometimes it shoots the particles out from the center of itself (just like nova in this example) but it could on the other hand let particles be spawned all around itself just like the stars system.</p>
<div class="codesnip-container-wrapper">
<div class="codesnip-container-innerwrapper">
<div class="codesnip-container" >
<div class="actionscript codesnip" style="font-family:monospace;">package se.<span class="me1">xcom</span>.<span class="me1">effects</span>.<span class="me1">particle</span><br />
<span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">display</span>.<span class="me1">BlendMode</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">display</span>.<span class="me1">Sprite</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">events</span>.<span class="me1">TimerEvent</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">utils</span>.<span class="me1">Timer</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> gs.<span class="me1">TweenMax</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> gs.<span class="me1">easing</span>.<span class="me1">Linear</span>;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">class</span> NovaEmitter <span class="kw3">extends</span> Sprite<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">var</span> emitTimer:Timer<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// Time until next particle is emitted (ms).</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw3">static</span> const EMIT_TIME:<span class="kw3">Number</span> = 1500<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">function</span> NovaEmitter<span class="br0">&#40;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">super</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; emitTimer = <span class="kw2">new</span> Timer<span class="br0">&#40;</span>EMIT_TIME<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; emitTimer.<span class="me1">addEventListener</span><span class="br0">&#40;</span>TimerEvent.<span class="me1">TIMER</span>,onTimer<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; emitTimer.<span class="kw3">start</span><span class="br0">&#40;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// creating a few particles to begin with.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">for</span> <span class="br0">&#40;</span><span class="kw2">var</span> i:uint=<span class="nu0">0</span>;i <span class="sy0">&lt;</span> <span class="nu0">5</span>;i++<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; createParticle<span class="br0">&#40;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">function</span> onTimer<span class="br0">&#40;</span><span class="kw3">e</span>:TimerEvent<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; createParticle<span class="br0">&#40;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">function</span> createParticle<span class="br0">&#40;</span>prog:<span class="kw3">Number</span> = 0<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> part:Sprite = <span class="kw2">new</span> Particle<span class="br0">&#40;</span><span class="br0">&#41;</span> &nbsp;<span class="co1">// is a simple bitmap in flash library converted as a Sprite.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// modifying particle.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; part.<span class="me1">rotation</span> = <span class="kw3">Math</span>.<span class="kw3">random</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">*</span>360<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; part.<span class="me1">scaleX</span> = part.<span class="me1">scaleY</span> = 0.3+<span class="kw3">Math</span>.<span class="kw3">random</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">*</span>0.3<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; part.<span class="me1">blendMode</span> = BlendMode.<span class="kw3">ADD</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; part.<span class="me1">alpha</span> = 0<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> <span class="kw3">time</span>:<span class="kw3">Number</span> = <span class="kw3">Math</span>.<span class="kw3">random</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">*</span>7+5<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> rot:<span class="kw3">Number</span> = <span class="kw3">Math</span>.<span class="kw3">random</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">*</span>180-90<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> scale:<span class="kw3">Number</span> = <span class="kw3">Math</span>.<span class="kw3">random</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">*</span>1.6+0.6<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> posX:<span class="kw3">Number</span> = <span class="kw3">Math</span>.<span class="kw3">random</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">*</span>50-25<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> posY:<span class="kw3">Number</span> = <span class="kw3">Math</span>.<span class="kw3">random</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">*</span>50-25<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; addChild<span class="br0">&#40;</span>part<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; TweenMax.<span class="me1">to</span><span class="br0">&#40;</span>part,<span class="kw3">time</span>,<span class="br0">&#123;</span>x:posX,y:posY,rotation:<span class="kw3">String</span><span class="br0">&#40;</span>rot<span class="br0">&#41;</span>,scaleX:scale,scaleY:scale,ease:Linear.<span class="me1">easeOut</span>, onComplete:killParticle,onCompleteParams:<span class="br0">&#91;</span>part<span class="br0">&#93;</span><span class="br0">&#125;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; TweenMax.<span class="me1">to</span><span class="br0">&#40;</span>part,<span class="kw3">time</span><span class="sy0">/</span>4,<span class="br0">&#123;</span>alpha:1,overwrite:<span class="kw2">false</span><span class="br0">&#125;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; TweenMax.<span class="me1">to</span><span class="br0">&#40;</span>part,<span class="kw3">time</span><span class="sy0">*</span>2<span class="sy0">/</span>3,<span class="br0">&#123;</span>delay:<span class="kw3">time</span><span class="sy0">/</span>3,alpha:0,overwrite:<span class="kw2">false</span><span class="br0">&#125;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">function</span> killParticle<span class="br0">&#40;</span>obj:Sprite<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">this</span>.<span class="me1">removeChild</span><span class="br0">&#40;</span>obj<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; obj = <span class="kw2">null</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
<span class="br0">&#125;</span></div>
</div>
</div>
</div>
<p>As you can see the Nova-system creates a new particle every 1.5 sec. It sets a lot of random parameters for the sprite and then just tweens it using the badass library TweenMax (which can be found <a title="TweenMax" href="http://www.greensock.com/tweenmax/">here.</a> and then destroy&#8217;s itself neatly afterwards. Straightforward huh? The secret with the fluid animation of the nova is mostly because of the blendmode that I previously mentioned.<br />
ADD does exactly what it says. It adds two colours (their rgb-values) into one. this is great for oh so many purposes. First of all it never gives you any black corners as if it&#8217;s black, it just shows the colour behind. Also it is a great way to mask out an effect with a black background without using alphachannels. In fact this is a much faster way for the processor to handle masking than alphachannels are. </p>
<p>Now let&#8217;s look at the stars. They are not different at all.</p>
<div class="codesnip-container-wrapper">
<div class="codesnip-container-innerwrapper">
<div class="codesnip-container" >
<div class="actionscript codesnip" style="font-family:monospace;">package se.<span class="me1">xcom</span>.<span class="me1">effects</span>.<span class="me1">particle</span><br />
<span class="br0">&#123;</span><br />
<span class="kw3">import</span> flash.<span class="me1">display</span>.<span class="me1">BlendMode</span>;<br />
<span class="kw3">import</span> flash.<span class="me1">display</span>.<span class="me1">Sprite</span>;<br />
<span class="kw3">import</span> flash.<span class="me1">events</span>.<span class="me1">TimerEvent</span>;<br />
<span class="kw3">import</span> flash.<span class="me1">utils</span>.<span class="me1">Timer</span>;</p>
<p><span class="kw3">import</span> gs.<span class="me1">TweenMax</span>;<br />
<span class="kw3">import</span> gs.<span class="me1">easing</span>.<span class="me1">Quad</span>;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">class</span> StarEmitter <span class="kw3">extends</span> Sprite<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">var</span> emitTimer:Timer<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw3">static</span> const STAR_TIME:<span class="kw3">Number</span> = 4<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw3">static</span> const EMIT_TIME:<span class="kw3">Number</span> = 1<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">function</span> StarEmitter<span class="br0">&#40;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">super</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; emitTimer = <span class="kw2">new</span> Timer<span class="br0">&#40;</span>EMIT_TIME<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; emitTimer.<span class="me1">addEventListener</span><span class="br0">&#40;</span>TimerEvent.<span class="me1">TIMER</span>,onTimer<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; emitTimer.<span class="kw3">start</span><span class="br0">&#40;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// initiating with some stars</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">for</span> <span class="br0">&#40;</span><span class="kw2">var</span> i:uint=<span class="nu0">0</span>;i <span class="sy0">&lt;</span> <span class="nu0">40</span>;i++<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; createParticle<span class="br0">&#40;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">function</span> onTimer<span class="br0">&#40;</span><span class="kw3">e</span>:TimerEvent<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">for</span> <span class="br0">&#40;</span><span class="kw2">var</span> i:uint=<span class="nu0">0</span>;i <span class="sy0">&lt;</span> <span class="nu0">3</span>;i++<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; createParticle<span class="br0">&#40;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">function</span> createParticle<span class="br0">&#40;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> part:Sprite = <span class="kw2">new</span> Star<span class="br0">&#40;</span><span class="br0">&#41;</span> &nbsp;<span class="co1">// is a simple bitmap in flash library converted as a Sprite.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// modifying particle.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> z:<span class="kw3">Number</span> = <span class="kw3">Math</span>.<span class="kw3">random</span><span class="br0">&#40;</span><span class="br0">&#41;</span>; &nbsp;<span class="co1">// z = 1 means it is in the same Z as the camera</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> posX:<span class="kw3">Number</span> = <span class="br0">&#40;</span><span class="kw3">Math</span>.<span class="kw3">random</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">*</span>1500-750<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> posY:<span class="kw3">Number</span> = <span class="br0">&#40;</span><span class="kw3">Math</span>.<span class="kw3">random</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">*</span>1500-750<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; part.<span class="me1">blendMode</span> = BlendMode.<span class="kw3">ADD</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; part.<span class="me1">alpha</span> = 0<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; part.<span class="me1">scaleX</span> = part.<span class="me1">scaleY</span> =0<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; part.<span class="me1">x</span> = posX<span class="sy0">*</span>z<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; part.<span class="me1">y</span> = posY<span class="sy0">*</span>z<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; addChild<span class="br0">&#40;</span>part<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> t:<span class="kw3">Number</span> = STAR_TIME<span class="sy0">*</span><span class="br0">&#40;</span>1-z<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> endScale:<span class="kw3">Number</span> = <span class="kw3">Math</span>.<span class="kw3">random</span><span class="br0">&#40;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; TweenMax.<span class="me1">to</span><span class="br0">&#40;</span>part,t,<span class="br0">&#123;</span>x:posX,y:posY,scaleX:endScale,scaleY:endScale,ease:Quad.<span class="me1">easeIn</span>, onComplete:killParticle,onCompleteParams:<span class="br0">&#91;</span>part<span class="br0">&#93;</span><span class="br0">&#125;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; TweenMax.<span class="me1">to</span><span class="br0">&#40;</span>part,t<span class="sy0">/</span>2,<span class="br0">&#123;</span>alpha:1,overwrite:<span class="kw2">false</span><span class="br0">&#125;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; TweenMax.<span class="me1">to</span><span class="br0">&#40;</span>part,t<span class="sy0">*</span>1<span class="sy0">/</span>2,<span class="br0">&#123;</span>delay:t<span class="sy0">*</span>1<span class="sy0">/</span>2,alpha:0,overwrite:<span class="kw2">false</span><span class="br0">&#125;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">function</span> killParticle<span class="br0">&#40;</span>obj:Sprite<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">this</span>.<span class="me1">removeChild</span><span class="br0">&#40;</span>obj<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; obj = <span class="kw2">null</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
<span class="br0">&#125;</span></div>
</div>
</div>
</div>
<p>The only difference in this class is the way the particles are positioned and adjusted in the tweens. To give you the illusion of depth/moving forward, I create a fake Z-axis value with the span of 0-1. 1 would be closest to the viewer and positioning the star at posX on the screen with the full scale of 1. Any other lower z-value brings the star towards the middle of the screen and also lowers the scale giving the illusion of the star moving further away from the viewer. Some fancy adjusting with alpha tweening in and out + a nice easeIn so the stars that is further away moves more slowly adds to the illusion even more.</p>
<p>Now, there is a great basic example how to use a few particles. Now is it a real system yet?? Well, there are a lot you could do to make it more dynamic. First of all we shouldn&#8217;t have to create 2 classes for these very similar classes. In the next part I ill give you the basics to create a more dynamic particle system where you can tweak a lot of parameters to be able to create snow, rain, fire, smoke, explosions etc&#8230; exciting, huh?<br />
Have fun!</p>
<p>/Andreas</p>
]]></content:encoded>
			<wfw:commentRss>http://www.x-com.se/labs/flash/particle-system-1-basic-particles.html/feed</wfw:commentRss>
		<slash:comments>15</slash:comments>
		</item>
		<item>
		<title>FaceWarp &#8211; mess up your face.</title>
		<link>http://www.x-com.se/labs/flash/facewarp-mess-up-your-face.html</link>
		<comments>http://www.x-com.se/labs/flash/facewarp-mess-up-your-face.html#comments</comments>
		<pubDate>Fri, 16 Apr 2010 12:59:09 +0000</pubDate>
		<dc:creator>Andreas</dc:creator>
				<category><![CDATA[Flash]]></category>

		<guid isPermaLink="false">http://www.x-com.se/?p=979</guid>
		<description><![CDATA[So we&#8217;ve probably all seen it somehow. Upload an image ...]]></description>
			<content:encoded><![CDATA[<p>So we&#8217;ve probably all seen it somehow. Upload an image of yourself, transform it and then spread it around to your friends.</p>
<p>Here I tried one technique I came up with, using a polygonmesh (using Papervision3D but still keeping it plain without any Z-depth). Using this wired image I can easily string up every vertex in the mesh and move them around, controlling every and each muscle in the face if I want to. For this demo I have two controllers for the eyebrows and lips.<br />
To add some nice extra effect the sliders also control two bitmaplayers alpha. The bitmaps are just wrinkles and dark rings around the eye which is transformed via the UWV so it fits to every image you upload, just move the crosshairs to the center of the eyes and the corners of the mouth.</p>
<p>Enjoy.</p>
<p><a rel="shadowbox;width=380;height=400" href="/wp-content/uploads/2010/04/FaceWarp.swf"><img title="facewarp" src="/wp-content/uploads/2010/04/faceWarp.jpg" alt="Facewarp" width="600" height="340" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.x-com.se/labs/flash/facewarp-mess-up-your-face.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Firebird &#8211; a sound visualization</title>
		<link>http://www.x-com.se/labs/flash/firebird-a-sound-visualization.html</link>
		<comments>http://www.x-com.se/labs/flash/firebird-a-sound-visualization.html#comments</comments>
		<pubDate>Fri, 22 Jan 2010 10:12:18 +0000</pubDate>
		<dc:creator>Andreas</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[firebird]]></category>
		<category><![CDATA[gabriel]]></category>
		<category><![CDATA[peter]]></category>
		<category><![CDATA[sound]]></category>
		<category><![CDATA[spectrum]]></category>
		<category><![CDATA[visualization]]></category>

		<guid isPermaLink="false">http://devx.x-com.se/?p=715</guid>
		<description><![CDATA[The other day I stumbled upon a minimalistic music video ...]]></description>
			<content:encoded><![CDATA[<p>The other day I stumbled upon a minimalistic music video by Peter Gabriel called <a title="Der Rhythmus der Hitze" href="http://www.youtube.com/v/wv4_g5pmFPQ" rel="shadowbox[post-715];player=swf;width=640;height=385;">Der Rhythmus der Hitze</a>. As I&#8217;ve never had the chance to experiment with the Spectrum-functionality in AS3 I thought this would be a perfect first example as I found the birdlike visuals were quite nice and mesmerizing. Here&#8217;s the result.</p>
<p><a rel="shadowbox;width=700;height=550" href="/wp-content/uploads/2010/01/Firebird.swf"><img title="Firebird" src="/wp-content/uploads/2010/01/firebird_preview.jpg" alt="Firebird" width="600" height="340" /></a></p>
<p><span id="more-715"></span></p>
<div class="codesnip-container-wrapper">
<div class="codesnip-container-innerwrapper">
<div class="codesnip-container" >
<div class="actionscript codesnip" style="font-family:monospace;">package<br />
<span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">display</span>.<span class="me1">GradientType</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">display</span>.<span class="me1">Sprite</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">events</span>.<span class="me1">Event</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">filters</span>.<span class="me1">GlowFilter</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">geom</span>.<span class="me1">Matrix</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">media</span>.<span class="me1">SoundMixer</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flash.<span class="me1">utils</span>.<span class="me1">ByteArray</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> se.<span class="me1">xcom</span>.<span class="kw3">math</span>.<span class="me1">DegreesVector</span>;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">class</span> Firebird <span class="kw3">extends</span> Sprite<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> const BAR_WIDTH:<span class="kw3">int</span> = <span class="nu0">1</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">var</span> ba:ByteArray;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">var</span> matrix:Matrix;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">var</span> degrees:DegreesVector;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">var</span> counter:<span class="kw3">int</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">var</span> aColours:<span class="kw3">Array</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">public</span> <span class="kw2">function</span> Firebird<span class="br0">&#40;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">super</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; counter = <span class="nu0">0</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; aColours = <span class="br0">&#91;</span>0xFFFFFF,0xFFFF33,0xFF2200,0xFF0000<span class="br0">&#93;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ba = <span class="kw2">new</span> ByteArray<span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; matrix = <span class="kw2">new</span> Matrix<span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; degrees = <span class="kw2">new</span> DegreesVector<span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">this</span>.<span class="me1">filters</span> = <span class="br0">&#91;</span><span class="kw2">new</span> GlowFilter<span class="br0">&#40;</span>0xFF2211,1,20,30,3,2<span class="br0">&#41;</span><span class="br0">&#93;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">this</span>.<span class="me1">addEventListener</span><span class="br0">&#40;</span>Event.<span class="me1">ENTER_FRAME</span>,onFrameTick<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">private</span> <span class="kw2">function</span> onFrameTick<span class="br0">&#40;</span><span class="kw3">e</span>:Event<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> enhance:<span class="kw3">Number</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> barHeight:<span class="kw3">Number</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> posY:<span class="kw3">Number</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// get new ByteArray from soundmixer</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; SoundMixer.<span class="me1">computeSpectrum</span><span class="br0">&#40;</span>ba,<span class="kw2">true</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// setting up gradientcolours. Using the aColours gives us the flexibility</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// &nbsp;to switch between different colours in the future if we would like to. </span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> gradientColours:<span class="kw3">Array</span> = <span class="br0">&#91;</span>aColours<span class="br0">&#91;</span>3<span class="br0">&#93;</span>, aColours<span class="br0">&#91;</span>2<span class="br0">&#93;</span>, aColours<span class="br0">&#91;</span>1<span class="br0">&#93;</span>, aColours<span class="br0">&#91;</span>0<span class="br0">&#93;</span>, aColours<span class="br0">&#91;</span>1<span class="br0">&#93;</span>, aColours<span class="br0">&#91;</span>2<span class="br0">&#93;</span>, aColours<span class="br0">&#91;</span>3<span class="br0">&#93;</span><span class="br0">&#93;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">with</span><span class="br0">&#40;</span>graphics<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span> &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">clear</span><span class="br0">&#40;</span><span class="br0">&#41;</span>; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">for</span> <span class="br0">&#40;</span><span class="kw2">var</span> i:<span class="kw3">int</span>=<span class="nu0">0</span>; i<span class="sy0">&lt;</span><span class="nu0">256</span>; i+=BAR_WIDTH<span class="br0">&#41;</span> <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span> &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// enhance largen the shape towards the middle. The first 60 bars will be enhanced </span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// (simply to create the birdhead)</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; enhance = 60-i;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; enhance = <span class="br0">&#40;</span>enhance <span class="sy0">&lt;</span>0<span class="br0">&#41;</span>?0:enhance;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// now the bar is moved in Y-axis using a normal sinus curve. (Using a faster custom Sine-class)</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; posY = degrees.<span class="me1">fastSin</span><span class="br0">&#40;</span><span class="kw3">int</span><span class="br0">&#40;</span>counter+i<span class="sy0">*</span>0.65<span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">*</span><span class="nu0">160</span>;&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// bar height is calculated using the sound spectrum in the ByteArray. </span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// It is multiplied and enhanced if close to the middle </span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; barHeight = <span class="br0">&#40;</span>ba.<span class="me1">readFloat</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="sy0">*</span> <span class="br0">&#40;</span>100+enhance<span class="br0">&#41;</span><span class="br0">&#41;</span>; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// creating the gradientbox set up gradientfill.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; matrix.<span class="me1">createGradientBox</span><span class="br0">&#40;</span>BAR_WIDTH,2<span class="sy0">*</span>barHeight,1.57075,0,-barHeight-posY<span class="sy0">*</span>0.5<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">beginGradientFill</span><span class="br0">&#40;</span>GradientType.<span class="me1">LINEAR</span>,gradientColours,<span class="br0">&#91;</span>0,1,1,1,1,1,0<span class="br0">&#93;</span>,<span class="br0">&#91;</span>0,50,110,128,146,205,255<span class="br0">&#93;</span>,matrix<span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// Draing 2 bars. One for each wing. Adding BAR_WIDTH on the left to avoid a gap in the middle.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; drawRect<span class="br0">&#40;</span>i, -barHeight-posY<span class="sy0">*</span>0.5, BAR_WIDTH, 2<span class="sy0">*</span>barHeight<span class="br0">&#41;</span>; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; drawRect<span class="br0">&#40;</span>-i+BAR_WIDTH, -barHeight-posY<span class="sy0">*</span>0.5, BAR_WIDTH, 2<span class="sy0">*</span>barHeight<span class="br0">&#41;</span>; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span> <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// adding counter so the Sine-curve starts one step away next frame (result: the wave motion)</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; counter+=<span class="nu0">1</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
<span class="br0">&#125;</span></div>
</div>
</div>
</div>
<p>The code is quite straight forward.<br />
Every single frame the SoundMixer creates a ByteArray containing Numbers from 0 &#8211; 1 which is used in order to create the bars/lines. The only thing that is custom is the DegreeVector class that converts all Radian to Degrees (as I&#8217;m no fan of radians). What it also does is to use a precalculated array of Sine-values that speedens up the sine-calculations a bit. This is of course not necessary and you could easily use the normal Math.sin functions to get the same result.</p>
<p>Just build a Firebird object in your main class, add it to stage and start playing any sound and Phoenix will manifest itself.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.x-com.se/labs/flash/firebird-a-sound-visualization.html/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

