<?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>Atomic Robot Design &#187; actionscript</title>
	<atom:link href="http://atomicrobotdesign.com/blog/tag/actionscript/feed/" rel="self" type="application/rss+xml" />
	<link>http://atomicrobotdesign.com/blog</link>
	<description>Design From The Future &#124; Blog</description>
	<lastBuildDate>Mon, 06 Feb 2012 03:13:03 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>On the Web, everything is dying&#8230;or it&#8217;s not</title>
		<link>http://atomicrobotdesign.com/blog/web-development/on-the-web-everything-is-dying-or-its-not/</link>
		<comments>http://atomicrobotdesign.com/blog/web-development/on-the-web-everything-is-dying-or-its-not/#comments</comments>
		<pubDate>Thu, 11 Aug 2011 04:04:58 +0000</pubDate>
		<dc:creator>Mike</dc:creator>
				<category><![CDATA[web development]]></category>
		<category><![CDATA[actionscript]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[python]]></category>
		<category><![CDATA[ruby]]></category>

		<guid isPermaLink="false">http://atomicrobotdesign.com/blog/?p=1136</guid>
		<description><![CDATA[When I first entered the web development world, I began looking for something beyond HTML and CSS to work with, so I started to check out all the different programming languages out. I knew some PHP from school, but I’d &#8230; <a href="http://atomicrobotdesign.com/blog/web-development/on-the-web-everything-is-dying-or-its-not/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>When I first entered the web development world, I began looking for something beyond HTML and CSS to work with, so I started to check out all the different programming languages out. I knew some PHP from school, but I’d also heard a bit about Ruby and Python. At the time, I was totally into Flash, so ActionScript won out. But I knew one thing for sure, Java sucked and was dying, so I wasn’t going even going to give it a first look.</p>
<p>Regardless of your opinion on Java, that was 4 years ago and I think Java is still kicking around. In fact, every once in a while I see a blog post about how Java doesn’t suck that bad and there is still a lot of work out there for Java developers. Of course, the response is usually, Java should die and people the work with it should switch. In fact, the same thing is going on with Flash. HTML5 has been killing Flash for a while now, yet I still see comments from Flash developers saying they’re as busy as they’ve ever been.</p>
<p>But this doesn’t just apply to languages that the cool kids don’t like. I’ve even seen a blog post or two stating that Ruby was done because it wasn’t the cool language anymore because the amount of Ruby devs had plateaued or even decreased a little. I can’t find the post, but from what I remember, the author stated Ruby was dying because people had realized Python was better and had moved on. Of course, the response from commenters was less than positive.</p>
<p>And if you’ve spend more than a couple of months as a web developer, you’ve worked with PHP, which is either the greatest thing ever or the worse invention in the history of humankind. I think PHP is a long way from dying but that still doesn’t stop Ruby and Python devs out there saying it’s on a slow decline. Personally, I think PHP is safe for years to come because you can pretty much make anything you need but copy and pasting code that’s already out there.</p>
<p>It’s amazing how many people are as opinionated as web developers. They’ll argue everything from what operating system you should use to what code editor to what language. And after a while you’ll realize that a lot of the time the languages people are declaring dead or dying are the ones they don’t like. I learned a long time ago, it doesn’t matter how you made it, or what you used to make it, if it’s cool and works, then that’s all that matters. In the end, if it’s a project you’re doing on your own to lean or to experiment, then use whatever language you want. But if it’s for a client, make sure you use the best tech for the job. As long as developers are making good apps and sites, I doubt any of the programming languages will ever really die. Look at JavaScript, I’m pretty sure 6 years ago, people were just waiting for it to go away.</p>
]]></content:encoded>
			<wfw:commentRss>http://atomicrobotdesign.com/blog/web-development/on-the-web-everything-is-dying-or-its-not/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Seriously, you need to code every day if you want to be good</title>
		<link>http://atomicrobotdesign.com/blog/general/seriously-you-need-to-code-every-day-if-you-want-to-be-good/</link>
		<comments>http://atomicrobotdesign.com/blog/general/seriously-you-need-to-code-every-day-if-you-want-to-be-good/#comments</comments>
		<pubDate>Mon, 25 Apr 2011 03:51:28 +0000</pubDate>
		<dc:creator>Mike</dc:creator>
				<category><![CDATA[general]]></category>
		<category><![CDATA[actionscript]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://atomicrobotdesign.com/blog/?p=1024</guid>
		<description><![CDATA[When I was younger, I wanted to be a comic book artist, something I think most comic fans want when they’re younger. But, I wasn’t a great artist when I first started drawing, well, even a good one. I compared &#8230; <a href="http://atomicrobotdesign.com/blog/general/seriously-you-need-to-code-every-day-if-you-want-to-be-good/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>When I was younger, I wanted to be a comic book artist, something I think most comic fans want when they’re younger. But, I wasn’t a great artist when I first started drawing, well, even a good one. I compared my work as a 12 year-old to Jim Lee and decided that I wasn’t good enough to draw comics. The thing I didn’t understand back then and it would take me years to realize, Jim Lee worked damn hard to get that good, he wasn’t great from the start. When I was in school and we were learning ActionScript and Flash, I would spend a lot of time looking at what the top Flash developers were doing and getting frustrated when I couldn’t build the same things.</p>
<p>Eventually I bought Colin Moock’s Essential ActionScript 3.0 and I worked my way through it from front to back, almost every day. That’s when I made a huge leap from beginner to experienced programmer. Not only because of the information I got from the book, but also from training my brain to think in code. This is how I got to the point where, for the most part, I’m able to start writing the code in my head as soon as I know what I’m going to be building. This is the point I think you can stop considering yourself a beginner, when you don’t have to search Google to figure out where to even start with your code.</p>
<p>This isn’t something that’s ground breaking or just applies to coding. If you want to be a good artist or writer, you have to do it every day. It’s simple and you would think it would be more obvious then it is, but I’m amazed at how many people I talk to that think that you’re either good at coding or you aren’t. That the fact you can’t build an amazing game using ActionScript or JavaScript your first time, then you aren’t ever going to be able to do it. I remember watching Lee Brimelow’s gotoAndLearn tutorials and being amazed at how quickly and simply he was able to code things up. I couldn’t figure out why he was able to do that and I wasn’t. I didn’t realize it was experience and the drive to get better that I needed to get there.</p>
<p>It’s doesn’t have to be something big. Sometimes you can learn more from a quick ten minute coding session then you can from a 6 hour one. Concepts that I’ve struggled to understand, I’ve figured out while messing around on <a href="http://jsbin.com/">jsbin</a> while watching a baseball game. That’s all you have to do, just pick something you want to learn and mess around for a while. Sometimes I give myself a project, something I haven’t done before, so that I force myself to learn concepts and techniques I haven’t needed yet, but might need in the future.</p>
<p>Code every day. Even if it’s just for 10 minutes. Try something new. Maybe you’re coding at work, but if you’re like me, then you’re not getting the opportunities to do new things as frequently as you would like. And now that I’ve increased my JavaScript and jQuery knowledge on my own time, I’ve been able to suggest things at work to clients because I already have the knowledge to build them.</p>
]]></content:encoded>
			<wfw:commentRss>http://atomicrobotdesign.com/blog/general/seriously-you-need-to-code-every-day-if-you-want-to-be-good/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Make a resizable, movable box in Flash</title>
		<link>http://atomicrobotdesign.com/blog/flash/make-a-resizable-movable-box-in-flash/</link>
		<comments>http://atomicrobotdesign.com/blog/flash/make-a-resizable-movable-box-in-flash/#comments</comments>
		<pubDate>Thu, 29 Apr 2010 04:19:18 +0000</pubDate>
		<dc:creator>Mike</dc:creator>
				<category><![CDATA[flash]]></category>
		<category><![CDATA[actionscript]]></category>
		<category><![CDATA[coding]]></category>

		<guid isPermaLink="false">http://atomicrobotdesign.com/blog/?p=406</guid>
		<description><![CDATA[I&#8217;m going to show how to make a box that you can resize by dragging the corners. It&#8217;s not that hard but it does take some figuring out to get it to work right. Here&#8217;s what we&#8217;re going to make: &#8230; <a href="http://atomicrobotdesign.com/blog/flash/make-a-resizable-movable-box-in-flash/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>I&#8217;m going to show how to make a box that you can resize by dragging the corners. It&#8217;s not that hard but it does take some figuring out to get it to work right. Here&#8217;s what we&#8217;re going to make:</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="400" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://atomicrobotdesign.com/blog_media/reSizer.swf" /><embed type="application/x-shockwave-flash" width="550" height="400" src="http://atomicrobotdesign.com/blog_media/reSizer.swf"></embed></object></p>
<p><a href="http://atomicrobotdesign.com/blog_media/reSizer_final.zip">Download the files.</a></p>
<p>Start off with a new Flash file. And build this on your stage. The red box can be four instances of the same movie clip. For the document class, put ReSizerControl.</p>
<p><img src="http://atomicrobotdesign.com/blog/wp-content/uploads/2010/04/box_names.jpg" alt="" title="box_names" width="707" height="506" class="alignnone size-full wp-image-408" /></p>
<p>Create a new ActionScript file and use this code as the base for it:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #9900cc; font-weight: bold;">package</span><br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.display</span><span style="color: #000066; font-weight: bold;">.</span><a href="http://www.google.com/search?q=movieclip%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:movieclip.html"><span style="color: #004993;">MovieClip</span></a><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.events</span><span style="color: #000066; font-weight: bold;">.</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.events</span><span style="color: #000066; font-weight: bold;">.</span><a href="http://www.google.com/search?q=mouseevent%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:mouseevent.html"><span style="color: #004993;">MouseEvent</span></a><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #9900cc; font-weight: bold;">class</span> ReSizerControl <span style="color: #0033ff; font-weight: bold;">extends</span> <a href="http://www.google.com/search?q=movieclip%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:movieclip.html"><span style="color: #004993;">MovieClip</span></a><br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> ReSizerControl<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
<span style="color: #000000;">&#125;</span></div></td></tr></tbody></table></div>
<p>Save this as ReSizerControl.as in the same folder as your .fla file.</p>
<p>What we&#8217;re going to do here is make functions to control the resizing when the corners are moused down on. But we&#8217;re also going to make it so we can move the black box around the stage which makes it a bit more difficult to set up the resizing functions. I&#8217;m going to put most of the explanations in the code, so that if you need to use this later, you&#8217;ll still have that info in there. The first thing, we&#8217;re going to do is get the bottom right corner to resize the box when you drag it around.</p>
<p>First, inside the constructor function, ReSizerControl(), put this:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #009900; font-style: italic;">//adds the listeners to the stage</span><br />
addListeners<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span></div></td></tr></tbody></table></div>
<p>Next, below ReSizerControl(), create this function:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> addListeners<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; reSizer_br<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=mouseevent%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:mouseevent.html"><span style="color: #004993;">MouseEvent</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">MOUSE_DOWN</span><span style="color: #000066; font-weight: bold;">,</span> onResizerDown<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; reSizer_br<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=mouseevent%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:mouseevent.html"><span style="color: #004993;">MouseEvent</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">MOUSE_UP</span><span style="color: #000066; font-weight: bold;">,</span> onResizerUp<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; reSizer_br<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">buttonMode</span> = <span style="color: #0033ff; font-weight: bold;">true</span><span style="color: #000066; font-weight: bold;">;</span><br />
<span style="color: #000000;">&#125;</span></div></td></tr></tbody></table></div>
<p>Ok, not we have to create the functions, onResizerDown and onResizerUp. They&#8217;re going to be pretty similar, one activates the resizing and the other one cancels it.</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> onResizerDown<span style="color: #000000;">&#40;</span>e<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=mouseevent%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:mouseevent.html"><span style="color: #004993;">MouseEvent</span></a><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span><br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//create a variable that we can use to check which red block has been clicked on</span><br />
&nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//converts the name of the object to a string so we can check it</span><br />
&nbsp; &nbsp; <span style="color: #6699cc; font-weight: bold;">var</span> targetName<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=string%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:string.html"><span style="color: #004993;">String</span></a> = e<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">target</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">name</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">toString</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//checks to see if the red block being clicked on is the one called 'reSizer_br'</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>targetName == <span style="color: #990000;">'reSizer_br'</span><span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//if it is, then add the listener for reSize_br</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> reSize_br<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//enable the user drag the clicked on block around the stage</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; e<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">target</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">startDrag</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
<span style="color: #000000;">&#125;</span><br />
<br />
<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> onResizerUp<span style="color: #000000;">&#40;</span>e<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=mouseevent%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:mouseevent.html"><span style="color: #004993;">MouseEvent</span></a><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span><br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #6699cc; font-weight: bold;">var</span> targetName<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=string%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:string.html"><span style="color: #004993;">String</span></a> = e<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">target</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">name</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">toString</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>targetName == <span style="color: #990000;">'reSizer_br'</span><span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//Removes the listeners and stops the box from changing size</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">removeEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> reSize_br<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; e<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">target</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">stopDrag</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
<span style="color: #000000;">&#125;</span></div></td></tr></tbody></table></div>
<p>Now that we have that, we have to create the reSize_br function, but first we need this below the ReSizerControl extends MovieClip and about the ReSizerControl function:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #6699cc; font-weight: bold;">var</span> blockWidth<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=number%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:number.html"><span style="color: #004993;">Number</span></a><span style="color: #000066; font-weight: bold;">;</span><br />
<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #6699cc; font-weight: bold;">var</span> newWidth<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=number%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:number.html"><span style="color: #004993;">Number</span></a><span style="color: #000066; font-weight: bold;">;</span><br />
<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #6699cc; font-weight: bold;">var</span> blockHeight<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=number%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:number.html"><span style="color: #004993;">Number</span></a><span style="color: #000066; font-weight: bold;">;</span><br />
<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #6699cc; font-weight: bold;">var</span> newHeight<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=number%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:number.html"><span style="color: #004993;">Number</span></a><span style="color: #000066; font-weight: bold;">;</span></div></td></tr></tbody></table></div>
<p>These variables are going to enable us to resize the block&#8217;s width and height. Here&#8217;s the reSize_br function:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> reSize_br<span style="color: #000000;">&#40;</span>e<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span><br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//finds the mouse position and resizes the black box</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span><span style="color: #004993;">mouseX</span> <span style="color: #000066; font-weight: bold;">&gt;</span> block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> <span style="color: #000066; font-weight: bold;">+</span> <span style="color: #000000; font-weight:bold;">20</span><span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; newWidth = reSizer_br<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; blockWidth = newWidth <span style="color: #000066; font-weight: bold;">-</span> block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">width</span> = blockWidth<span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span><span style="color: #004993;">mouseY</span> <span style="color: #000066; font-weight: bold;">&gt;</span> block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> <span style="color: #000066; font-weight: bold;">+</span> <span style="color: #000000; font-weight:bold;">20</span><span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; newHeight = reSizer_br<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; blockHeight = newHeight <span style="color: #000066; font-weight: bold;">-</span> block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">height</span> = blockHeight<span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
&nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//checks if the red block is too close another one and stops it from moving</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span><span style="color: #004993;">mouseX</span> <span style="color: #000066; font-weight: bold;">&lt;</span> block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> <span style="color: #000066; font-weight: bold;">+</span> <span style="color: #000000; font-weight:bold;">20</span><span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; reSizer_br<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> = block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> <span style="color: #000066; font-weight: bold;">+</span> <span style="color: #000000; font-weight:bold;">21</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span><span style="color: #004993;">mouseY</span> <span style="color: #000066; font-weight: bold;">&lt;</span> block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> <span style="color: #000066; font-weight: bold;">+</span> <span style="color: #000000; font-weight:bold;">20</span><span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; reSizer_br<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> = block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> <span style="color: #000066; font-weight: bold;">+</span> <span style="color: #000000; font-weight:bold;">21</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
<span style="color: #000000;">&#125;</span></div></td></tr></tbody></table></div>
<p>Now if you test it, it should allow you to drag the bottom right red block and resize the block box. Now let&#8217;s make the bottom left one work. Add this to the addListeners function:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">reSizer_bl<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=mouseevent%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:mouseevent.html"><span style="color: #004993;">MouseEvent</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">MOUSE_DOWN</span><span style="color: #000066; font-weight: bold;">,</span> onResizerDown<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
reSizer_bl<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=mouseevent%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:mouseevent.html"><span style="color: #004993;">MouseEvent</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">MOUSE_UP</span><span style="color: #000066; font-weight: bold;">,</span> onResizerUp<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
reSizer_bl<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">buttonMode</span> = <span style="color: #0033ff; font-weight: bold;">true</span><span style="color: #000066; font-weight: bold;">;</span></div></td></tr></tbody></table></div>
<p>And this to the bottom of the onResizeDown function:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>targetName == <span style="color: #990000;">'reSizer_bl'</span><span style="color: #000000;">&#41;</span><br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> reSize_bl<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; e<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">target</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">startDrag</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
<span style="color: #000000;">&#125;</span></div></td></tr></tbody></table></div>
<p>And this to the bottom of the onResizeUp function:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>targetName == <span style="color: #990000;">'reSizer_bl'</span><span style="color: #000000;">&#41;</span><br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #004993;">removeEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> reSize_bl<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; e<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">target</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">stopDrag</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
<span style="color: #000000;">&#125;</span></div></td></tr></tbody></table></div>
<p>And here&#8217;s our reSize_bl function:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> reSize_bl<span style="color: #000000;">&#40;</span>e<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span><br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span><span style="color: #004993;">mouseX</span> <span style="color: #000066; font-weight: bold;">&gt;</span> <span style="color: #000000; font-weight:bold;">0</span><span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> = reSizer_bl<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; blockWidth = reSizer_br<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> <span style="color: #000066; font-weight: bold;">-</span> block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">width</span> = blockWidth<span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span><span style="color: #004993;">mouseY</span> <span style="color: #000066; font-weight: bold;">&gt;</span> block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> <span style="color: #000066; font-weight: bold;">+</span> <span style="color: #000000; font-weight:bold;">20</span><span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; newHeight = reSizer_bl<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; blockHeight = newHeight <span style="color: #000066; font-weight: bold;">-</span> block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">height</span> = blockHeight<span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>reSizer_bl<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> <span style="color: #000066; font-weight: bold;">&gt;</span> <span style="color: #000000;">&#40;</span>reSizer_br<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> <span style="color: #000066; font-weight: bold;">-</span> <span style="color: #000000; font-weight:bold;">20</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; reSizer_bl<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> = <span style="color: #000000;">&#40;</span>reSizer_br<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> <span style="color: #000066; font-weight: bold;">-</span> <span style="color: #000000; font-weight:bold;">21</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>reSizer_bl<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> <span style="color: #000066; font-weight: bold;">&lt;</span> <span style="color: #000000;">&#40;</span>block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> <span style="color: #000066; font-weight: bold;">+</span> <span style="color: #000000; font-weight:bold;">20</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; reSizer_bl<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> = <span style="color: #000000;">&#40;</span>block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> <span style="color: #000066; font-weight: bold;">+</span> <span style="color: #000000; font-weight:bold;">21</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
<span style="color: #000000;">&#125;</span></div></td></tr></tbody></table></div>
<p>The reSizer_bl function is pretty much the same, just minor differences in how it resizes the black box. Figuring out the differences will really help you understand how this works. Now, let&#8217;s get the top two red blocks working. Add this to the onResizeDown function:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>targetName == <span style="color: #990000;">'reSizer_tr'</span><span style="color: #000000;">&#41;</span><br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> reSize_tr<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; e<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">target</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">startDrag</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
<span style="color: #000000;">&#125;</span><br />
<span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>targetName == <span style="color: #990000;">'reSizer_tl'</span><span style="color: #000000;">&#41;</span><br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> reSize_tl<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; e<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">target</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">startDrag</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
<span style="color: #000000;">&#125;</span></div></td></tr></tbody></table></div>
<p>And this to the onResizeUp function:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>targetName == <span style="color: #990000;">'reSizer_tr'</span><span style="color: #000000;">&#41;</span><br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #004993;">removeEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> reSize_tr<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; e<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">target</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">stopDrag</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
<span style="color: #000000;">&#125;</span><br />
<span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>targetName == <span style="color: #990000;">'reSizer_tl'</span><span style="color: #000000;">&#41;</span><br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #004993;">removeEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> reSize_tl<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; e<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">target</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">stopDrag</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
<span style="color: #000000;">&#125;</span></div></td></tr></tbody></table></div>
<p>And we need to add these two functions:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />35<br />36<br />37<br />38<br />39<br />40<br />41<br />42<br />43<br />44<br />45<br />46<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> reSize_tr<span style="color: #000000;">&#40;</span>e<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span><br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span><span style="color: #004993;">mouseX</span> <span style="color: #000066; font-weight: bold;">&gt;</span> block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> <span style="color: #000066; font-weight: bold;">+</span> <span style="color: #000000; font-weight:bold;">20</span><span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; newWidth = reSizer_tr<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; blockWidth = newWidth <span style="color: #000066; font-weight: bold;">-</span> block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">width</span> = blockWidth<span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span><span style="color: #004993;">mouseY</span> <span style="color: #000066; font-weight: bold;">&gt;</span> <span style="color: #000000; font-weight:bold;">0</span><span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> = reSizer_tr<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; blockHeight = reSizer_br<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> <span style="color: #000066; font-weight: bold;">-</span> block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">height</span> = blockHeight<span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span><span style="color: #004993;">mouseX</span> <span style="color: #000066; font-weight: bold;">&lt;</span> block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> <span style="color: #000066; font-weight: bold;">+</span> <span style="color: #000000; font-weight:bold;">20</span><span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; reSizer_tr<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> = block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> <span style="color: #000066; font-weight: bold;">+</span> <span style="color: #000000; font-weight:bold;">21</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span><span style="color: #004993;">mouseY</span> <span style="color: #000066; font-weight: bold;">&gt;</span> reSizer_br<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> <span style="color: #000066; font-weight: bold;">+</span> <span style="color: #000000; font-weight:bold;">20</span><span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; reSizer_tr<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> = reSizer_br<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> <span style="color: #000066; font-weight: bold;">+</span> <span style="color: #000000; font-weight:bold;">21</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
<span style="color: #000000;">&#125;</span><br />
<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> reSize_tl<span style="color: #000000;">&#40;</span>e<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span><br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span><span style="color: #004993;">mouseX</span> <span style="color: #000066; font-weight: bold;">&gt;</span> <span style="color: #000000; font-weight:bold;">0</span><span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> = reSizer_tl<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; blockWidth = reSizer_tr<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> <span style="color: #000066; font-weight: bold;">-</span> block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">width</span> = blockWidth<span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span><span style="color: #004993;">mouseY</span> <span style="color: #000066; font-weight: bold;">&gt;</span> <span style="color: #000000; font-weight:bold;">0</span><span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> = reSizer_tl<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; blockHeight = reSizer_bl<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> <span style="color: #000066; font-weight: bold;">-</span> block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">height</span> = blockHeight<span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span><span style="color: #004993;">mouseX</span> <span style="color: #000066; font-weight: bold;">&gt;</span> reSizer_tr<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> <span style="color: #000066; font-weight: bold;">-</span> <span style="color: #000000; font-weight:bold;">20</span><span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; reSizer_tl<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> = reSizer_tr<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> <span style="color: #000066; font-weight: bold;">-</span> <span style="color: #000000; font-weight:bold;">21</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span><span style="color: #004993;">mouseY</span> <span style="color: #000066; font-weight: bold;">&gt;</span> reSizer_bl<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> <span style="color: #000066; font-weight: bold;">-</span> <span style="color: #000000; font-weight:bold;">20</span><span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; reSizer_tl<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> = reSizer_bl<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> <span style="color: #000066; font-weight: bold;">-</span> <span style="color: #000000; font-weight:bold;">21</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
<span style="color: #000000;">&#125;</span></div></td></tr></tbody></table></div>
<p>And of course, this to the onResizeDown function:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>targetName == <span style="color: #990000;">'reSizer_tr'</span><span style="color: #000000;">&#41;</span><br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> reSize_tr<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; e<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">target</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">startDrag</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
<span style="color: #000000;">&#125;</span><br />
<span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>targetName == <span style="color: #990000;">'reSizer_tl'</span><span style="color: #000000;">&#41;</span><br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> reSize_tl<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; e<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">target</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">startDrag</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
<span style="color: #000000;">&#125;</span></div></td></tr></tbody></table></div>
<p>And to the onResizeUp function:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>targetName == <span style="color: #990000;">'reSizer_tr'</span><span style="color: #000000;">&#41;</span><br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #004993;">removeEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> reSize_tr<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; e<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">target</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">stopDrag</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
<span style="color: #000000;">&#125;</span><br />
<span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>targetName == <span style="color: #990000;">'reSizer_tl'</span><span style="color: #000000;">&#41;</span><br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #004993;">removeEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> reSize_tl<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; e<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">target</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">stopDrag</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
<span style="color: #000000;">&#125;</span></div></td></tr></tbody></table></div>
<p>Now add this to the addListeners function:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">reSizer_tr<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=mouseevent%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:mouseevent.html"><span style="color: #004993;">MouseEvent</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">MOUSE_DOWN</span><span style="color: #000066; font-weight: bold;">,</span> onResizerDown<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
reSizer_tr<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=mouseevent%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:mouseevent.html"><span style="color: #004993;">MouseEvent</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">MOUSE_UP</span><span style="color: #000066; font-weight: bold;">,</span> onResizerUp<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
reSizer_tr<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">buttonMode</span> = <span style="color: #0033ff; font-weight: bold;">true</span><span style="color: #000066; font-weight: bold;">;</span><br />
reSizer_tl<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=mouseevent%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:mouseevent.html"><span style="color: #004993;">MouseEvent</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">MOUSE_DOWN</span><span style="color: #000066; font-weight: bold;">,</span> onResizerDown<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
reSizer_tl<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=mouseevent%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:mouseevent.html"><span style="color: #004993;">MouseEvent</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">MOUSE_UP</span><span style="color: #000066; font-weight: bold;">,</span> onResizerUp<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
reSizer_tl<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">buttonMode</span> = <span style="color: #0033ff; font-weight: bold;">true</span><span style="color: #000066; font-weight: bold;">;</span></div></td></tr></tbody></table></div>
<p>At this point all the corners should be able to resize the box, but we have one problem, they don&#8217;t move if they aren&#8217;t the one being clicked on. So we need to add this, just stick it at the bottom of the code:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> positionReSizer_bl<span style="color: #000000;">&#40;</span>e<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span><br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; reSizer_bl<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> = block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; reSizer_bl<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> = block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> <span style="color: #000066; font-weight: bold;">+</span> block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">height</span><span style="color: #000066; font-weight: bold;">;</span><br />
<span style="color: #000000;">&#125;</span><br />
<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> positionReSizer_br<span style="color: #000000;">&#40;</span>e<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span><br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; reSizer_br<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> = block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> <span style="color: #000066; font-weight: bold;">+</span> block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">height</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; reSizer_br<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> = block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> <span style="color: #000066; font-weight: bold;">+</span> block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">width</span><span style="color: #000066; font-weight: bold;">;</span><br />
<span style="color: #000000;">&#125;</span><br />
<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> positionReSizer_tl<span style="color: #000000;">&#40;</span>e<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span><br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; reSizer_tl<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> = block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; reSizer_tl<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> = block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span><span style="color: #000066; font-weight: bold;">;</span><br />
<span style="color: #000000;">&#125;</span><br />
<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> positionReSizer_tr<span style="color: #000000;">&#40;</span>e<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span><br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; reSizer_tr<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> = block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> <span style="color: #000066; font-weight: bold;">+</span> block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">width</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; reSizer_tr<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> = block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span><span style="color: #000066; font-weight: bold;">;</span><br />
<span style="color: #000000;">&#125;</span></div></td></tr></tbody></table></div>
<p>To use these functions, we need to change our onResizerDown and onResizeUp functions:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />35<br />36<br />37<br />38<br />39<br />40<br />41<br />42<br />43<br />44<br />45<br />46<br />47<br />48<br />49<br />50<br />51<br />52<br />53<br />54<br />55<br />56<br />57<br />58<br />59<br />60<br />61<br />62<br />63<br />64<br />65<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> onResizerDown<span style="color: #000000;">&#40;</span>e<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=mouseevent%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:mouseevent.html"><span style="color: #004993;">MouseEvent</span></a><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span><br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #6699cc; font-weight: bold;">var</span> targetName<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=string%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:string.html"><span style="color: #004993;">String</span></a> = e<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">target</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">name</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">toString</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>targetName == <span style="color: #990000;">'reSizer_br'</span><span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> reSize_br<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> positionReSizer_bl<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> positionReSizer_tr<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; e<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">target</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">startDrag</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>targetName == <span style="color: #990000;">'reSizer_bl'</span><span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> reSize_bl<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> positionReSizer_br<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> positionReSizer_tl<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; e<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">target</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">startDrag</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>targetName == <span style="color: #990000;">'reSizer_tr'</span><span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> reSize_tr<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> positionReSizer_br<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> positionReSizer_tl<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; e<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">target</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">startDrag</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>targetName == <span style="color: #990000;">'reSizer_tl'</span><span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> reSize_tl<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> positionReSizer_tr<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> positionReSizer_bl<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; e<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">target</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">startDrag</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
<span style="color: #000000;">&#125;</span><br />
<br />
<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> onResizerUp<span style="color: #000000;">&#40;</span>e<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=mouseevent%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:mouseevent.html"><span style="color: #004993;">MouseEvent</span></a><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span><br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #6699cc; font-weight: bold;">var</span> targetName<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=string%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:string.html"><span style="color: #004993;">String</span></a> = e<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">target</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">name</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">toString</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>targetName == <span style="color: #990000;">'reSizer_br'</span><span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">removeEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> reSize_br<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">removeEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> positionReSizer_bl<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">removeEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> positionReSizer_tr<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; e<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">target</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">stopDrag</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>targetName == <span style="color: #990000;">'reSizer_bl'</span><span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">removeEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> reSize_bl<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">removeEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> positionReSizer_br<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">removeEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> positionReSizer_tl<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; e<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">target</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">stopDrag</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>targetName == <span style="color: #990000;">'reSizer_tr'</span><span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">removeEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> reSize_tr<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">removeEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> positionReSizer_br<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">removeEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> positionReSizer_tl<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; e<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">target</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">stopDrag</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>targetName == <span style="color: #990000;">'reSizer_tl'</span><span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">removeEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> reSize_tl<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">removeEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> positionReSizer_tr<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">removeEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> positionReSizer_bl<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; e<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">target</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">stopDrag</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
<span style="color: #000000;">&#125;</span></div></td></tr></tbody></table></div>
<p>Now the red blocks should stay attached to the corner when you&#8217;re resizing the block box. Now we have one final thing to do, make it so we can drag the black box around. It&#8217;s really simple, add this to the addListeners function:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=mouseevent%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:mouseevent.html"><span style="color: #004993;">MouseEvent</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">MOUSE_DOWN</span><span style="color: #000066; font-weight: bold;">,</span> onBlockDown<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=mouseevent%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:mouseevent.html"><span style="color: #004993;">MouseEvent</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">MOUSE_UP</span><span style="color: #000066; font-weight: bold;">,</span> onBlockUp<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">buttonMode</span> = <span style="color: #0033ff; font-weight: bold;">true</span><span style="color: #000066; font-weight: bold;">;</span></div></td></tr></tbody></table></div>
<p>And then add there two functions at the bottom of the code:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> onBlockDown<span style="color: #000000;">&#40;</span>e<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=mouseevent%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:mouseevent.html"><span style="color: #004993;">MouseEvent</span></a><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span><br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; e<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">target</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">startDrag</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> positionReSizer_br<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> positionReSizer_bl<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> positionReSizer_tr<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> positionReSizer_tl<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
<span style="color: #000000;">&#125;</span><br />
<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> onBlockUp<span style="color: #000000;">&#40;</span>e<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=mouseevent%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:mouseevent.html"><span style="color: #004993;">MouseEvent</span></a><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span><br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; e<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">target</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">stopDrag</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #004993;">removeEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> positionReSizer_br<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #004993;">removeEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> positionReSizer_bl<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #004993;">removeEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> positionReSizer_tr<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #004993;">removeEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> positionReSizer_tl<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
<span style="color: #000000;">&#125;</span></div></td></tr></tbody></table></div>
<p>Now you should be able to drag the box around and the red blocks will follow. Because we didn&#8217;t use any hard values in the resizing functions, we are able to make the black box dragable, which increase the usefulness of this, if you want to use it as a mask or something similar.</p>
]]></content:encoded>
			<wfw:commentRss>http://atomicrobotdesign.com/blog/flash/make-a-resizable-movable-box-in-flash/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>A simple external file loader for ActionScript 3</title>
		<link>http://atomicrobotdesign.com/blog/flash/a-simple-external-file-loader-for-actionscript-3/</link>
		<comments>http://atomicrobotdesign.com/blog/flash/a-simple-external-file-loader-for-actionscript-3/#comments</comments>
		<pubDate>Tue, 09 Mar 2010 03:11:17 +0000</pubDate>
		<dc:creator>Mike</dc:creator>
				<category><![CDATA[flash]]></category>
		<category><![CDATA[actionscript]]></category>
		<category><![CDATA[download]]></category>

		<guid isPermaLink="false">http://atomicrobotdesign.com/blog/?p=283</guid>
		<description><![CDATA[One of the big mistakes that beginners make when they&#8217;re making their first Flash projects is importing all the graphics and making movieclips with tons of frames, resulting in a Flash file that is huge. The bigger the .swf, the &#8230; <a href="http://atomicrobotdesign.com/blog/flash/a-simple-external-file-loader-for-actionscript-3/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>One of the big mistakes that beginners make when they&#8217;re making their first Flash projects is importing all the graphics and making movieclips with tons of frames, resulting in a Flash file that is huge. The bigger the .swf, the longer it will take to load. The simplest way to fix this is to load larger files externally. Loading files is pretty easy in ActionScript 3 so I&#8217;m not going to show you how, I&#8217;ve just made this ExternalLoader class that does the job and I use it a lot at work. And to use it is the same as loading anything else in AS3. Just download the zip file and put the class wherever you save your custom classes.</p>
<p><a href="http://www.atomicrobotdesign.com/blog_media/ExternalLoader.zip">Download the .zip file</a></p>
<p>To use it, you just need three lines of code:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #0033ff; font-weight: bold;">import</span> com<span style="color: #000066; font-weight: bold;">.</span>atomicrobot<span style="color: #000066; font-weight: bold;">.</span>ExternalLoader<span style="color: #000066; font-weight: bold;">;</span><br />
<br />
<span style="color: #6699cc; font-weight: bold;">var</span> image<span style="color: #000066; font-weight: bold;">:</span>ExternalLoader = <span style="color: #0033ff; font-weight: bold;">new</span> ExternalLoader<span style="color: #000000;">&#40;</span><span style="color: #990000;">&quot;externalfile.blah&quot;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
<br />
<span style="color: #004993;">addChild</span><span style="color: #000000;">&#40;</span>image<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span></div></td></tr></tbody></table></div>
<p>And you&#8217;re good to go. You can use it as many times as you need in your project and it will help keep down your file size.</p>
]]></content:encoded>
			<wfw:commentRss>http://atomicrobotdesign.com/blog/flash/a-simple-external-file-loader-for-actionscript-3/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>The &#8220;AH-HA!&#8221; moment</title>
		<link>http://atomicrobotdesign.com/blog/general/the-ah-ha-moment/</link>
		<comments>http://atomicrobotdesign.com/blog/general/the-ah-ha-moment/#comments</comments>
		<pubDate>Mon, 08 Mar 2010 00:37:09 +0000</pubDate>
		<dc:creator>Mike</dc:creator>
				<category><![CDATA[general]]></category>
		<category><![CDATA[actionscript]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[html]]></category>

		<guid isPermaLink="false">http://atomicrobotdesign.com/blog/?p=280</guid>
		<description><![CDATA[My high school physics teacher always told his students that you shouldn&#8217;t worry if you didn&#8217;t understand what he was teaching right away, just keep at it and one day you&#8217;ll have that moment where BANG!, everything makes sense and &#8230; <a href="http://atomicrobotdesign.com/blog/general/the-ah-ha-moment/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>My high school physics teacher always told his students that you shouldn&#8217;t worry if you didn&#8217;t understand what he was teaching right away, just keep at it and one day you&#8217;ll have that moment where BANG!, everything makes sense and how you see the world will change. Having that &#8220;ah-ha!&#8221; moment and having a greater understanding HTML/CSS, PHP, or ActionScript or any other web language won&#8217;t change how you see the world, but it will change your understanding of the Internet and suddenly everything you build will be more efficient and streamlined.</p>
<p>For me, it&#8217;s been different for everything I&#8217;ve tried to learn. For HTML/CSS I never had an moment where I just got it, I lucked out and understood what was going on right away. It&#8217;s one of those things where I have trouble talking about it and explaining it to people because I&#8217;ve never really had to think things through in a way that I would be able to communicate to others. ActionScript, on the other hand, is something I&#8217;ve had to put a lot of time into and while I found the beginning stuff not too difficult, when trying to move from simple stuff up to the more interesting and complicated, I found it a struggle sometimes to wrap my heads around some concepts. So what did I do? I kept at it. I looked at as many sources as I could to learn. I bought books by different authors, did as many tutorials as I could, because sometimes things aren&#8217;t explained in a way the I really understood. But then, every time I built something, whether for work or just for fun, I learned a little more. And along the way I had a series of small &#8220;ah-ha&#8221; moments that eventually lead to me being able to build things faster and with more efficient code.</p>
<p>I don&#8217;t believe you can force one of these moments but you can set yourself up to have one. A lot of the time when I figure things out, I have them when I&#8217;m no where near a computer. I&#8217;ll have them when I&#8217;m walking to work, thinking about what I&#8217;m working on and what I&#8217;m going to try to do that day. Sometimes I do a tutorial and one little part of it helps me realize the solution to something that&#8217;s been bugging me for weeks.</p>
<p>But beware, that &#8220;ah-ha&#8221; moment might never come. Sometimes your brain just isn&#8217;t wired to figure some stuff out. One thing I really wanted to do, was be able to make great digital art with Photoshop, but after watching a lot of videos and doing a bunch of tutorials, I found myself being constantly amazed by creativity when using some of the filters in Photoshop. No matter how much I tried, I just can&#8217;t think like that. And there&#8217;s nothing wrong with that, I can do a lot of stuff with Photoshop, but I&#8217;ll never be able to make some of the things I wish I could. The key is to find something that you both enjoy working with and are able to do, there&#8217;s no sense in beating your head against a brick wall.</p>
<p>So what&#8217;s the point of all this? Keep at it and eventually you&#8217;ll figure it out, something will click and you&#8217;ll look back at your old stuff and wonder what the hell you were thinking! Trust me, that&#8217;s actually a good thing.</p>
]]></content:encoded>
			<wfw:commentRss>http://atomicrobotdesign.com/blog/general/the-ah-ha-moment/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Using Tweens in ActionScript 3</title>
		<link>http://atomicrobotdesign.com/blog/flash/using-tweens-in-actionscript-3/</link>
		<comments>http://atomicrobotdesign.com/blog/flash/using-tweens-in-actionscript-3/#comments</comments>
		<pubDate>Thu, 25 Feb 2010 03:46:20 +0000</pubDate>
		<dc:creator>Mike</dc:creator>
				<category><![CDATA[flash]]></category>
		<category><![CDATA[actionscript]]></category>
		<category><![CDATA[tutorial]]></category>

		<guid isPermaLink="false">http://atomicrobotdesign.com/blog/?p=245</guid>
		<description><![CDATA[Last week ActiveTuts put up a quick tutorial about building a sliding menu paddle, which isn&#8217;t anything too complicated but it was the first time I&#8217;d done anything with the built in Tween Class in ActionScript 3. Usually I&#8217;d use &#8230; <a href="http://atomicrobotdesign.com/blog/flash/using-tweens-in-actionscript-3/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>Last week <a href="http://active.tutsplus.com/">ActiveTuts</a> put up a quick tutorial about <a href="http://active.tutsplus.com/tutorials/actionscript/quick-tip-how-to-build-a-horizontal-sliding-menu-paddle/">building a sliding menu paddle</a>, which isn&#8217;t anything too complicated but it was the first time I&#8217;d done anything with the built in Tween Class in ActionScript 3. Usually I&#8217;d use something like <a href="http://code.google.com/p/tweener/">Tweener</a> or <a href="http://www.greensock.com/tweenmax/">TweenMax</a>, but I thought I would see what you could do with this. What I decided to make was something that I would have loved to have been able to make with code when I was just beginning to learn AS3, a Flash site with sliding content. This would have been something I would have used movieclips I created in Flash and then created keyframe tweens to get the effect I wanted. This isn&#8217;t the most complex thing to create but it will help out beginners.</p>
<p>Here&#8217;s what we are going to build:</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="400" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://atomicrobotdesign.com/blog_media/TweenSite.swf" /><embed type="application/x-shockwave-flash" width="550" height="400" src="http://atomicrobotdesign.com/blog_media/TweenSite.swf"></embed></object></p>
<p>Start a new Flash file (AS3), mine&#8217;s the default &#8211; 550&#215;400 with a white background and the framerate at 24. This is about the functionality, not the design, you can add that in after you get the all working. Save it as whatever you want, I called mine TweenSite.fla. Next, using the Text tool (T), type out something like button 1 on the stage. Make sure the button is set to Dynamic Text and the instance name is buttonText. This will allow us to control what the button says in our ActionScript file.</p>
<p><img src="http://atomicrobotdesign.com/blog/wp-content/uploads/2010/02/buttonText.jpg" alt="" title="buttonText" width="353" height="363" class="alignnone size-full wp-image-249" /></p>
<p>Now turn the text into a movieclip, F8 or Modify > Convert to Symbol. Call it MyButton, set the registration point to the top left and check the Export for ActionScript box.</p>
<p><img src="http://atomicrobotdesign.com/blog/wp-content/uploads/2010/02/MyButton.jpg" alt="" title="MyButton" width="446" height="584" class="alignnone size-full wp-image-248" /></p>
<p>Delete the MyButton from the stage, we&#8217;re going to add it using ActionScript. Finally, one the Document Class field, type Main. This will link our ActionScript file to the .fla. If you don&#8217;t know how the document class works, there&#8217;s a great video at gotoAndLearn.com.</p>
<p><img src="http://atomicrobotdesign.com/blog/wp-content/uploads/2010/02/DocumentClass.jpg" alt="" title="DocumentClass" width="313" height="307" class="alignnone size-full wp-image-251" /></p>
<p>And that is everything we are going to make in the .fla. Everything else now will be created with ActionScript.</p>
<p>Create a new ActionScript file, File > New&#8230; > New ActionScript File. Call it Main and save it in the same folder as your .fla. Instead of writing all the code in the .fla or even in just one .as file, we are going to build this OOP style, to make it easier to customize after it&#8217;s been built.</p>
<p>Here&#8217;s the code we are going to start with in Main.fla:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #9900cc; font-weight: bold;">package</span><br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//We have to import the classes we are going to use</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.display</span><span style="color: #000066; font-weight: bold;">.</span><a href="http://www.google.com/search?q=movieclip%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:movieclip.html"><span style="color: #004993;">MovieClip</span></a><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #9900cc; font-weight: bold;">class</span> Main <span style="color: #0033ff; font-weight: bold;">extends</span> <a href="http://www.google.com/search?q=movieclip%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:movieclip.html"><span style="color: #004993;">MovieClip</span></a><br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//This creates an instance of the button we made</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #6699cc; font-weight: bold;">var</span> button1<span style="color: #000066; font-weight: bold;">:</span>MyButton = <span style="color: #0033ff; font-weight: bold;">new</span> MyButton<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> Main<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//This calls the init function which gets everything going</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">init</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> <span style="color: #004993;">init</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//This adds the button to the stage</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">addChild</span><span style="color: #000000;">&#40;</span>button1<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
<span style="color: #000000;">&#125;</span></div></td></tr></tbody></table></div>
<p>If you test this now, you should just be able to see the bottom and right side of our button. This because the position of something added to the stage is automatically 0,0. So just add this under addChild(button1):</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">button1<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> = <span style="color: #000000; font-weight:bold;">30</span><span style="color: #000066; font-weight: bold;">;</span><br />
button1<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> = <span style="color: #000000; font-weight:bold;">50</span><span style="color: #000066; font-weight: bold;">;</span></div></td></tr></tbody></table></div>
<p>This just positions our button the stage. Now to make this work the way we want to, we need more than one button, up with the other variable add this:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #6699cc; font-weight: bold;">var</span> button2<span style="color: #000066; font-weight: bold;">:</span>MyButton = <span style="color: #0033ff; font-weight: bold;">new</span> MyButton<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #6699cc; font-weight: bold;">var</span> button3<span style="color: #000066; font-weight: bold;">:</span>MyButton = <span style="color: #0033ff; font-weight: bold;">new</span> MyButton<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #6699cc; font-weight: bold;">var</span> button4<span style="color: #000066; font-weight: bold;">:</span>MyButton = <span style="color: #0033ff; font-weight: bold;">new</span> MyButton<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span></div></td></tr></tbody></table></div>
<p>What we&#8217;re doing here is making three more instances of the same button, but we&#8217;ll use our code to change the text. Underneath button.y = 50 add this:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #004993;">addChild</span><span style="color: #000000;">&#40;</span>button2<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
button2<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> = <span style="color: #000000; font-weight:bold;">30</span><span style="color: #000066; font-weight: bold;">;</span><br />
button2<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> = <span style="color: #000000; font-weight:bold;">90</span><span style="color: #000066; font-weight: bold;">;</span><br />
<span style="color: #004993;">addChild</span><span style="color: #000000;">&#40;</span>button3<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
button3<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> = <span style="color: #000000; font-weight:bold;">30</span><span style="color: #000066; font-weight: bold;">;</span><br />
button3<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> = <span style="color: #000000; font-weight:bold;">130</span><span style="color: #000066; font-weight: bold;">;</span><br />
<span style="color: #004993;">addChild</span><span style="color: #000000;">&#40;</span>button4<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
button4<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> = <span style="color: #000000; font-weight:bold;">30</span><span style="color: #000066; font-weight: bold;">;</span><br />
button4<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> = <span style="color: #000000; font-weight:bold;">170</span><span style="color: #000066; font-weight: bold;">;</span></div></td></tr></tbody></table></div>
<p>Here we are adding the three other buttons to the stage and positioning them 40 pixels apart. Now if you test it, the buttons will all line up vertically but they all say button 1! So, how do we fix that? At the bottom of the init function add this:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">button1<span style="color: #000066; font-weight: bold;">.</span>buttonText<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">text</span> = <span style="color: #990000;">&quot;Button 1&quot;</span><span style="color: #000066; font-weight: bold;">;</span><br />
button2<span style="color: #000066; font-weight: bold;">.</span>buttonText<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">text</span> = <span style="color: #990000;">&quot;Button 2&quot;</span><span style="color: #000066; font-weight: bold;">;</span><br />
button3<span style="color: #000066; font-weight: bold;">.</span>buttonText<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">text</span> = <span style="color: #990000;">&quot;Button 3&quot;</span><span style="color: #000066; font-weight: bold;">;</span><br />
button4<span style="color: #000066; font-weight: bold;">.</span>buttonText<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">text</span> = <span style="color: #990000;">&quot;Button 4&quot;</span><span style="color: #000066; font-weight: bold;">;</span></div></td></tr></tbody></table></div>
<p>Now if you test the movie, the text should have changed to what we have here. Now as it stands now, our &#8220;buttons&#8221; don&#8217;t really act like buttons. If you mouse over them, you won&#8217;t get the hand cursor that tells people that it&#8217;s a clickable button. We can fix this a couple of ways. One way would be in our Main.as file to set the buttonMode to true and something called mouseChildren to false for each button, but that would be a lot of code, and if we wanted to change something, like the names of buttons, we would have to change a lot. The simple way to do this is to make a new ActionScript file and put the settings in there. So create a new ActionScript file and save it as MyButton in the same folder as our other files. If you named your button something else, you have to name this file the same as your button because our Main file is going to import these settings and apply them to our buttons. Here&#8217;s the entire code for our MyButton.as:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #9900cc; font-weight: bold;">package</span><br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.display</span><span style="color: #000066; font-weight: bold;">.</span><a href="http://www.google.com/search?q=movieclip%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:movieclip.html"><span style="color: #004993;">MovieClip</span></a><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #9900cc; font-weight: bold;">class</span> MyButton <span style="color: #0033ff; font-weight: bold;">extends</span> <a href="http://www.google.com/search?q=movieclip%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:movieclip.html"><span style="color: #004993;">MovieClip</span></a><br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> MyButton<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//This gives movieclips the same properties as buttons, so the hand cursor appears</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">buttonMode</span> = <span style="color: #0033ff; font-weight: bold;">true</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//This stops the text from inside the MyButton movieclip from being selectable</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">mouseChildren</span> = <span style="color: #0033ff; font-weight: bold;">false</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
<span style="color: #000000;">&#125;</span></div></td></tr></tbody></table></div>
<p>Now if you test the movie, you&#8217;ll see that now the hand cursor appears and the text isn&#8217;t selectable. This is the main advantage of OOP, with a few lines of code, we have affected our entire navigation. Now, let&#8217;s add the gray block to our movie. Create a new ActionScript file and save it as Block.as. Here&#8217;s the code for Block:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #9900cc; font-weight: bold;">package</span><br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.display</span><span style="color: #000066; font-weight: bold;">.</span><a href="http://www.google.com/search?q=movieclip%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:movieclip.html"><span style="color: #004993;">MovieClip</span></a><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #9900cc; font-weight: bold;">class</span> Block <span style="color: #0033ff; font-weight: bold;">extends</span> <a href="http://www.google.com/search?q=movieclip%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:movieclip.html"><span style="color: #004993;">MovieClip</span></a><br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> Block<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//Draws the block using actionscript to keep file size down</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//First part is color, second is the alpha</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">graphics</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">beginFill</span><span style="color: #000000;">&#40;</span>0xCCCCCC<span style="color: #000066; font-weight: bold;">,</span> <span style="color: #000000; font-weight:bold;">1</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//This draws a rectangle(x,y,width,height)</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">graphics</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">drawRect</span><span style="color: #000000;">&#40;</span><span style="color: #000000; font-weight:bold;">0</span><span style="color: #000066; font-weight: bold;">,</span><span style="color: #000000; font-weight:bold;">0</span><span style="color: #000066; font-weight: bold;">,</span><span style="color: #000000; font-weight:bold;">102</span><span style="color: #000066; font-weight: bold;">,</span><span style="color: #000000; font-weight:bold;">36</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">graphics</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">endFill</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
<span style="color: #000000;">&#125;</span></div></td></tr></tbody></table></div>
<p>Now back in Main.as we have some code to add. First add this up with the other variables:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #6699cc; font-weight: bold;">var</span> block<span style="color: #000066; font-weight: bold;">:</span>Block = <span style="color: #0033ff; font-weight: bold;">new</span> Block<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span></div></td></tr></tbody></table></div>
<p>Same as with the buttons, we are creating an instance of our Block class. Next in the init function, at the top, before all the buttons put this:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #004993;">addChild</span><span style="color: #000000;">&#40;</span>block<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span></div></td></tr></tbody></table></div>
<p>Now at the bottom of the init function add this:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> = button1<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span><span style="color: #000066; font-weight: bold;">;</span><br />
block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> = button1<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span><span style="color: #000066; font-weight: bold;">;</span></div></td></tr></tbody></table></div>
<p>Now when we test our movie, the block will appear behind the top button. Next we&#8217;ll give our block something to do, at the top where we are importing the MovieClip class add this:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.events</span><span style="color: #000066; font-weight: bold;">.</span><a href="http://www.google.com/search?q=mouseevent%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:mouseevent.html"><span style="color: #004993;">MouseEvent</span></a><span style="color: #000066; font-weight: bold;">;</span><br />
<span style="color: #0033ff; font-weight: bold;">import</span> fl<span style="color: #000066; font-weight: bold;">.</span>transitions<span style="color: #000066; font-weight: bold;">.</span>Tween<span style="color: #000066; font-weight: bold;">;</span><br />
<span style="color: #0033ff; font-weight: bold;">import</span> fl<span style="color: #000066; font-weight: bold;">.</span>transitions<span style="color: #000066; font-weight: bold;">.</span>easing<span style="color: #000066; font-weight: bold;">.*;</span></div></td></tr></tbody></table></div>
<p>This is going to allow us to have mouse events and tween events in our Flash movie. Next with our other variables, add this:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #6699cc; font-weight: bold;">var</span> barY<span style="color: #000066; font-weight: bold;">:</span>Tween<span style="color: #000066; font-weight: bold;">;</span></div></td></tr></tbody></table></div>
<p>Here we are creating our first tween. Now we need to tell our tween what to do:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> onNavClick<span style="color: #000000;">&#40;</span>e<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=mouseevent%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:mouseevent.html"><span style="color: #004993;">MouseEvent</span></a><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span><br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//First we say what to tween, what property to affect, set what kind of ease(if any) we want to use, where to start the tween, where to end, how long to take, and the true means the time is in seconds, if it's set to false the tween is in frames</span><br />
&nbsp; &nbsp; barY = <span style="color: #0033ff; font-weight: bold;">new</span> Tween<span style="color: #000000;">&#40;</span>block<span style="color: #000066; font-weight: bold;">,</span> <span style="color: #990000;">&quot;y&quot;</span><span style="color: #000066; font-weight: bold;">,</span> Back<span style="color: #000066; font-weight: bold;">.</span>easeOut<span style="color: #000066; font-weight: bold;">,</span> block<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span><span style="color: #000066; font-weight: bold;">,</span> e<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">target</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span><span style="color: #000066; font-weight: bold;">,</span> <span style="color: #000000; font-weight:bold;">1</span><span style="color: #000066; font-weight: bold;">,</span> <span style="color: #0033ff; font-weight: bold;">true</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
<span style="color: #000000;">&#125;</span></div></td></tr></tbody></table></div>
<p>I&#8217;ve described what the Tween does in comments in the code. Next we need to add some listeners to call this function so it actually does something, what I usually do with listeners is create a function addListeners():</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> addListeners<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; button1<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=mouseevent%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:mouseevent.html"><span style="color: #004993;">MouseEvent</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">CLICK</span><span style="color: #000066; font-weight: bold;">,</span> onNavClick<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; button2<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=mouseevent%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:mouseevent.html"><span style="color: #004993;">MouseEvent</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">CLICK</span><span style="color: #000066; font-weight: bold;">,</span> onNavClick<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; button3<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=mouseevent%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:mouseevent.html"><span style="color: #004993;">MouseEvent</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">CLICK</span><span style="color: #000066; font-weight: bold;">,</span> onNavClick<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; button4<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=mouseevent%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:mouseevent.html"><span style="color: #004993;">MouseEvent</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">CLICK</span><span style="color: #000066; font-weight: bold;">,</span> onNavClick<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
<span style="color: #000000;">&#125;</span></div></td></tr></tbody></table></div>
<p>We need to add a listener to each button so that the block knows which button to go to. Inside the Main function add:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">addListeners<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span></div></td></tr></tbody></table></div>
<p>Now if you test the movie, you should get this:</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="400" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://atomicrobotdesign.com/blog_media/HalfwayExample.swf" /><embed type="application/x-shockwave-flash" width="550" height="400" src="http://atomicrobotdesign.com/blog_media/HalfwayExample.swf"></embed></object></p>
<p>OK, now let&#8217;s make those buttons control something. What we are going to do is just make four big blocks that slide into view. Once again, we aren&#8217;t designing anything we are just building the functionality. The block can be easily replaced with images, movieclips or external .swfs. To do this we are going to make a new ActionScript file and call it ContentBox.as. We&#8217;re going to make all the boxes in on class instead of making a separate one for each box. It&#8217;s just easier and it&#8217;s not too hard to build more custom classes for your own stuff later. Here&#8217;s the code for ContentBox:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #9900cc; font-weight: bold;">package</span><br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.display</span><span style="color: #000066; font-weight: bold;">.</span><a href="http://www.google.com/search?q=movieclip%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:movieclip.html"><span style="color: #004993;">MovieClip</span></a><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #9900cc; font-weight: bold;">class</span> ContentBox <span style="color: #0033ff; font-weight: bold;">extends</span> <a href="http://www.google.com/search?q=movieclip%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:movieclip.html"><span style="color: #004993;">MovieClip</span></a><br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> ContentBox<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">graphics</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">beginFill</span><span style="color: #000000;">&#40;</span>0x999999<span style="color: #000066; font-weight: bold;">,</span><span style="color: #000000; font-weight:bold;">1</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">graphics</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">drawRect</span><span style="color: #000000;">&#40;</span><span style="color: #000000; font-weight:bold;">0</span><span style="color: #000066; font-weight: bold;">,</span><span style="color: #000000; font-weight:bold;">0</span><span style="color: #000066; font-weight: bold;">,</span><span style="color: #000000; font-weight:bold;">345</span><span style="color: #000066; font-weight: bold;">,</span><span style="color: #000000; font-weight:bold;">360</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">graphics</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">endFill</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">graphics</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">beginFill</span><span style="color: #000000;">&#40;</span>0x666666<span style="color: #000066; font-weight: bold;">,</span><span style="color: #000000; font-weight:bold;">1</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">graphics</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">drawRect</span><span style="color: #000000;">&#40;</span><span style="color: #000000; font-weight:bold;">345</span><span style="color: #000066; font-weight: bold;">,</span><span style="color: #000000; font-weight:bold;">0</span><span style="color: #000066; font-weight: bold;">,</span><span style="color: #000000; font-weight:bold;">345</span><span style="color: #000066; font-weight: bold;">,</span><span style="color: #000000; font-weight:bold;">360</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">graphics</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">endFill</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">graphics</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">beginFill</span><span style="color: #000000;">&#40;</span>0x333333<span style="color: #000066; font-weight: bold;">,</span><span style="color: #000000; font-weight:bold;">1</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">graphics</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">drawRect</span><span style="color: #000000;">&#40;</span><span style="color: #000000; font-weight:bold;">690</span><span style="color: #000066; font-weight: bold;">,</span><span style="color: #000000; font-weight:bold;">0</span><span style="color: #000066; font-weight: bold;">,</span><span style="color: #000000; font-weight:bold;">345</span><span style="color: #000066; font-weight: bold;">,</span><span style="color: #000000; font-weight:bold;">360</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">graphics</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">endFill</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">graphics</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">beginFill</span><span style="color: #000000;">&#40;</span>0x000000<span style="color: #000066; font-weight: bold;">,</span><span style="color: #000000; font-weight:bold;">1</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">graphics</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">drawRect</span><span style="color: #000000;">&#40;</span><span style="color: #000000; font-weight:bold;">1035</span><span style="color: #000066; font-weight: bold;">,</span><span style="color: #000000; font-weight:bold;">0</span><span style="color: #000066; font-weight: bold;">,</span><span style="color: #000000; font-weight:bold;">345</span><span style="color: #000066; font-weight: bold;">,</span><span style="color: #000000; font-weight:bold;">360</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">graphics</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">endFill</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
<span style="color: #000000;">&#125;</span></div></td></tr></tbody></table></div>
<p>Really simple stuff here, we&#8217;re just creating four boxes that are 345 by 360 and positioning them along the x-axis. I&#8217;ve also made each one a different shade of gray that way we can see the boxes move but we won&#8217;t blind ourselves with bright colors. Next, up with the variables, put this:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #6699cc; font-weight: bold;">var</span> contentBox<span style="color: #000066; font-weight: bold;">:</span>ContentBox = <span style="color: #0033ff; font-weight: bold;">new</span> ContentBox<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span></div></td></tr></tbody></table></div>
<p>And at the bottom of the inut function, add this:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #004993;">addChild</span><span style="color: #000000;">&#40;</span>contentBox<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
contentBox<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> = <span style="color: #000000; font-weight:bold;">185</span><span style="color: #000066; font-weight: bold;">;</span><br />
contentBox<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> = <span style="color: #000000; font-weight:bold;">20</span><span style="color: #000066; font-weight: bold;">;</span></div></td></tr></tbody></table></div>
<p>Same stuff we did with the buttons, so you should know what&#8217;s going on here. If you test your movie now, you&#8217;ll see the first box and part of the second box, which isn&#8217;t really what we want, we just want to see the first box. To do this, we&#8217;ll just add a mask to our stage. Make a new ActionScript file and save it as MyMask.as. Here&#8217;s the code:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #9900cc; font-weight: bold;">package</span><br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.display</span><span style="color: #000066; font-weight: bold;">.</span><a href="http://www.google.com/search?q=movieclip%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:movieclip.html"><span style="color: #004993;">MovieClip</span></a><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #9900cc; font-weight: bold;">class</span> MyMask <span style="color: #0033ff; font-weight: bold;">extends</span> <a href="http://www.google.com/search?q=movieclip%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:movieclip.html"><span style="color: #004993;">MovieClip</span></a><br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> MyMask<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">graphics</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">beginFill</span><span style="color: #000000;">&#40;</span>0xFF0000<span style="color: #000066; font-weight: bold;">,</span><span style="color: #000000; font-weight:bold;">1</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">graphics</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">drawRect</span><span style="color: #000000;">&#40;</span><span style="color: #000000; font-weight:bold;">0</span><span style="color: #000066; font-weight: bold;">,</span><span style="color: #000000; font-weight:bold;">0</span><span style="color: #000066; font-weight: bold;">,</span><span style="color: #000000; font-weight:bold;">345</span><span style="color: #000066; font-weight: bold;">,</span><span style="color: #000000; font-weight:bold;">360</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">graphics</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">endFill</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
<span style="color: #000000;">&#125;</span></div></td></tr></tbody></table></div>
<p>Pretty much the same as our ContentBox class, but with this our mask, the color isn&#8217;t going to matter. Now back in our Main.as file, add this code up with the other variables:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #6699cc; font-weight: bold;">var</span> myMask<span style="color: #000066; font-weight: bold;">:</span>MyMask = <span style="color: #0033ff; font-weight: bold;">new</span> MyMask<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span></div></td></tr></tbody></table></div>
<p>And then add this at the end of the init function:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #004993;">addChild</span><span style="color: #000000;">&#40;</span>myMask<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
myMask<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> = <span style="color: #000000; font-weight:bold;">185</span><span style="color: #000066; font-weight: bold;">;</span><br />
myMask<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> = <span style="color: #000000; font-weight:bold;">20</span><span style="color: #000066; font-weight: bold;">;</span></div></td></tr></tbody></table></div>
<p>Now if we test this, there&#8217;s a red box over top of the first gray box, which I don&#8217;t think is quite what we&#8217;re going for here. So let&#8217;s add this line of code right under the last stuff we added:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">contentBox<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">mask</span> = myMask<span style="color: #000066; font-weight: bold;">;</span></div></td></tr></tbody></table></div>
<p>Now if we test it, the first gray box is back and we can&#8217;t see the other box anymore. Now we have one final thing to do and it&#8217;s not that major, we&#8217;re just going to apply the Tween code we used on our navigation to the boxes to make them slide into view when a button is clicked. First off, add this to your other variables:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #6699cc; font-weight: bold;">var</span> contentX<span style="color: #000066; font-weight: bold;">:</span>Tween<span style="color: #000066; font-weight: bold;">;</span></div></td></tr></tbody></table></div>
<p>Next we need to add these listeners, which are pretty much the same as the other listeners, they are just calling another function:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">button1<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=mouseevent%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:mouseevent.html"><span style="color: #004993;">MouseEvent</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">CLICK</span><span style="color: #000066; font-weight: bold;">,</span> moveContent<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
button2<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=mouseevent%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:mouseevent.html"><span style="color: #004993;">MouseEvent</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">CLICK</span><span style="color: #000066; font-weight: bold;">,</span> moveContent<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
button3<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=mouseevent%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:mouseevent.html"><span style="color: #004993;">MouseEvent</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">CLICK</span><span style="color: #000066; font-weight: bold;">,</span> moveContent<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
button4<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=mouseevent%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:mouseevent.html"><span style="color: #004993;">MouseEvent</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">CLICK</span><span style="color: #000066; font-weight: bold;">,</span> moveContent<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span></div></td></tr></tbody></table></div>
<p>Now we have to make the moveContent function:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> moveContent<span style="color: #000000;">&#40;</span>e<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=mouseevent%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:mouseevent.html"><span style="color: #004993;">MouseEvent</span></a><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span><br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>e<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">target</span> == button1<span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; contentX = <span style="color: #0033ff; font-weight: bold;">new</span> Tween<span style="color: #000000;">&#40;</span>contentBox<span style="color: #000066; font-weight: bold;">,</span> <span style="color: #990000;">&quot;x&quot;</span><span style="color: #000066; font-weight: bold;">,</span> Regular<span style="color: #000066; font-weight: bold;">.</span>easeIn<span style="color: #000066; font-weight: bold;">,</span> contentBox<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span><span style="color: #000066; font-weight: bold;">,</span> <span style="color: #000000; font-weight:bold;">183.95</span><span style="color: #000066; font-weight: bold;">,</span> <span style="color: #000000; font-weight:bold;">1</span><span style="color: #000066; font-weight: bold;">,</span> <span style="color: #0033ff; font-weight: bold;">true</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>e<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">target</span> == button2<span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; contentX = <span style="color: #0033ff; font-weight: bold;">new</span> Tween<span style="color: #000000;">&#40;</span>contentBox<span style="color: #000066; font-weight: bold;">,</span> <span style="color: #990000;">&quot;x&quot;</span><span style="color: #000066; font-weight: bold;">,</span> Regular<span style="color: #000066; font-weight: bold;">.</span>easeIn<span style="color: #000066; font-weight: bold;">,</span> contentBox<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span><span style="color: #000066; font-weight: bold;">,</span> <span style="color: #000066; font-weight: bold;">-</span><span style="color: #000000; font-weight:bold;">161.55</span><span style="color: #000066; font-weight: bold;">,</span> <span style="color: #000000; font-weight:bold;">1</span><span style="color: #000066; font-weight: bold;">,</span> <span style="color: #0033ff; font-weight: bold;">true</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>e<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">target</span> == button3<span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; contentX = <span style="color: #0033ff; font-weight: bold;">new</span> Tween<span style="color: #000000;">&#40;</span>contentBox<span style="color: #000066; font-weight: bold;">,</span> <span style="color: #990000;">&quot;x&quot;</span><span style="color: #000066; font-weight: bold;">,</span> Regular<span style="color: #000066; font-weight: bold;">.</span>easeIn<span style="color: #000066; font-weight: bold;">,</span> contentBox<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span><span style="color: #000066; font-weight: bold;">,</span> <span style="color: #000066; font-weight: bold;">-</span><span style="color: #000000; font-weight:bold;">507.10</span><span style="color: #000066; font-weight: bold;">,</span> <span style="color: #000000; font-weight:bold;">1</span><span style="color: #000066; font-weight: bold;">,</span> <span style="color: #0033ff; font-weight: bold;">true</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>e<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">target</span> == button4<span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; contentX = <span style="color: #0033ff; font-weight: bold;">new</span> Tween<span style="color: #000000;">&#40;</span>contentBox<span style="color: #000066; font-weight: bold;">,</span> <span style="color: #990000;">&quot;x&quot;</span><span style="color: #000066; font-weight: bold;">,</span> Regular<span style="color: #000066; font-weight: bold;">.</span>easeIn<span style="color: #000066; font-weight: bold;">,</span> contentBox<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span><span style="color: #000066; font-weight: bold;">,</span> <span style="color: #000066; font-weight: bold;">-</span><span style="color: #000000; font-weight:bold;">852.65</span><span style="color: #000066; font-weight: bold;">,</span> <span style="color: #000000; font-weight:bold;">1</span><span style="color: #000066; font-weight: bold;">,</span> <span style="color: #0033ff; font-weight: bold;">true</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
<span style="color: #000000;">&#125;</span></div></td></tr></tbody></table></div>
<p>Here we&#8217;re just using if statements to see which button was clicked and then telling contentBox what to change it&#8217;s x value to. Now if you test the movie you&#8217;ll see contentBox slide to the color that corresponds with the button we clicked on.</p>
<p>I hope this helped you out, this framework should be pretty easy to customize and allow you to build stuff pretty quickly.</p>
]]></content:encoded>
			<wfw:commentRss>http://atomicrobotdesign.com/blog/flash/using-tweens-in-actionscript-3/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>3 Great Books to Help You Learn ActionScript 3</title>
		<link>http://atomicrobotdesign.com/blog/flash/3-great-books-to-help-you-learn-actionscript-3/</link>
		<comments>http://atomicrobotdesign.com/blog/flash/3-great-books-to-help-you-learn-actionscript-3/#comments</comments>
		<pubDate>Mon, 15 Feb 2010 04:41:57 +0000</pubDate>
		<dc:creator>Mike</dc:creator>
				<category><![CDATA[flash]]></category>
		<category><![CDATA[actionscript]]></category>
		<category><![CDATA[books]]></category>

		<guid isPermaLink="false">http://atomicrobotdesign.com/blog/?p=227</guid>
		<description><![CDATA[The great thing about the Flash community is all the sharing. You can pretty much find the solution to any problem or question you have. There&#8217;s tons of blogs and forums out there that are full of information on Flash &#8230; <a href="http://atomicrobotdesign.com/blog/flash/3-great-books-to-help-you-learn-actionscript-3/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>The great thing about the Flash community is all the sharing. You can pretty much find the solution to any problem or question you have. There&#8217;s tons of blogs and forums out there that are full of information on Flash and ActionScript. And you can learn a lot from these resources, but, for me, I&#8217;ve found it easier and sometimes a lot more convenient to have a book or two you have look through. Since Flash was a class I took at school, I actually started learning about it from a book before I ever realized there was all this information out on the web and I think that the best way to get into Flash and ActionScript is to start with a book and then use online resources once you get a basic understanding.</p>
<p>1. <a href="http://www.amazon.com/Learning-ActionScript-3-0-Beginners-Guide/dp/059652787X/ref=pd_sim_b_4">Learning ActionScript 3.0: A Beginner&#8217;s Guide</a> by Rich Shupe and Zevan Rosser</p>
<p>Learning ActionScript 3.0 is a great book for someone just getting started with AS, someone migrating from AS2 to AS3 and even for an experienced Flash designer. It has an easy reading style moves you along at a quick pace. There&#8217;s also a great companion website at <a href="http://www.learningactionscript3.com/">learningactionscript3.com</a>. I can&#8217;t recommend this for an experienced developer because it covers just the basics of ActionScript 3 but it wouldn&#8217;t be a bad book to use as a refresher. While it&#8217;s a great book to for an introduction to AS3 and Flash, this book isn&#8217;t set up to be used as a reference text, it&#8217;s really just what it says it is, an introduction to ActionScript. I wish that this book had been out when I was in school, it would have been perfect for my switch to AS3.</p>
<p>2. <a href="http://www.amazon.com/Essential-ActionScript-3-0-Colin-Moock/dp/0596526946/ref=pd_sim_b_2">Essential ActionScript 3.0</a> by Colin Moock</p>
<p>As the title says, this is pretty much the essential book for any serious ActionScript developer. This book has 946 pages and, from what I can tell, covers every aspect of ActionScript 3. While a beginner could be in over their head, an experienced programmer will find this book to be a great introduction ActionScript 3. Colin Moock has a huge rep in the Flash community and is a great teacher. This book, along with the companion <a href="http://oreilly.com/catalog/9780596801526/">Lost ActionScript Weekend</a> dvds, is a must have for any serious developer or designer the wants to take Flash to the next level.</p>
<p>3. <a href="http://www.amazon.com/ActionScript-3-0-Quick-Reference-Guide/dp/0596517351/ref=pd_sim_b_7">The ActionScript 3.0 Quick Reference Guide</a> by David Stiller, Rich Shupe, Jen deHaan and Darren Richardson</p>
<p>This book is a little different than the other 2 on the list, it&#8217;s not really a step by step how to of using Flash and ActionScript. A bit newer than the other books, this one includes info on how to use Flash CS4 and migration from AS2 to AS3. About half the book is a How-To section, including topics like How Do I Work With Events and How Do I Work With XML. This shouldn&#8217;t be your first book when trying to learning AS3 but beside the other two it works really well, especially if you need to learn how to do something that you haven&#8217;t done before.</p>
<p>There&#8217;s a bunch of books out there, but these 3 are the ones that I&#8217;ve found helped me the most.</p>
]]></content:encoded>
			<wfw:commentRss>http://atomicrobotdesign.com/blog/flash/3-great-books-to-help-you-learn-actionscript-3/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Step 5 in Building a Shooter Game in AS3</title>
		<link>http://atomicrobotdesign.com/blog/flash/step-5-in-building-a-shooter-game-in-as3/</link>
		<comments>http://atomicrobotdesign.com/blog/flash/step-5-in-building-a-shooter-game-in-as3/#comments</comments>
		<pubDate>Wed, 10 Feb 2010 06:16:50 +0000</pubDate>
		<dc:creator>Mike</dc:creator>
				<category><![CDATA[flash]]></category>
		<category><![CDATA[actionscript]]></category>
		<category><![CDATA[spaceshooter]]></category>
		<category><![CDATA[tutorial]]></category>

		<guid isPermaLink="false">http://atomicrobotdesign.com/blog/?p=216</guid>
		<description><![CDATA[On to the final step in making our shooter! You can go back and check Step 1, Step 2, Step 3 and Step 4 if you missed something. In this step, we&#8217;re going to add a score and set up &#8230; <a href="http://atomicrobotdesign.com/blog/flash/step-5-in-building-a-shooter-game-in-as3/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>On to the final step in making our shooter! You can go back and check <a href="http://atomicrobotdesign.com/blog/?p=107">Step 1</a>, <a href="http://atomicrobotdesign.com/blog/?p=166">Step 2</a>, <a href="http://atomicrobotdesign.com/blog/?p=175">Step 3</a> and <a href="http://atomicrobotdesign.com/blog/?p=192">Step 4</a> if you missed something. In this step, we&#8217;re going to add a score and set up our rocket so it can be hit by the enemy ships. This one&#8217;s going to be pretty simple, the point of this whole tutorial was to show the basics of building a game in AS3. If you want to take it farther, it won&#8217;t be that difficult and will be a great learning experience.</p>
<p>The first thing we are going to do is use the Text Tool (T) to add a dynamic text block to the stage. I put mine in the bottom left, but you can put it anywhere. Make sure that it&#8217;s set to dynamic text, not static or input and give it an instance name of scoreTxt. Because it&#8217;s dynamic we can change the contents with ActionScript and it&#8217;s only going to take a few lines of code to do this. First, we need to add this to the bottom of the other variables:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #009900; font-style: italic;">//Sets the variable score as an integer</span><br />
<span style="color: #6699cc; font-weight: bold;">var</span> score<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=int%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:int.html"><span style="color: #004993;">int</span></a> = <span style="color: #000000; font-weight:bold;">0</span><span style="color: #000066; font-weight: bold;">;</span></div></td></tr></tbody></table></div>
<p>Next, in the rocketMovement function, right before the closing bracket, add:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">scoreTxt<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">text</span> = <span style="color: #990000;">&quot;Score: &quot;</span> <span style="color: #000066; font-weight: bold;">+</span> score<span style="color: #000066; font-weight: bold;">;</span></div></td></tr></tbody></table></div>
<p>This sets the text inside our scoreTxt textfield with the text() method. We&#8217;re telling it to display the word Score plus our variable score, whose value we will assign next in our Enemy class. The reason at we are putting this line of code in the rocketMovement function is because we are listening for any changes to score every frame. We could create a new function just to update the score, but since rocketMovement is doing what we want anyway, we can just add it in there.</p>
<p>Now in the Enemy.as file we just have to had one little line of code. Put this in the moveEnemy function:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">_root<span style="color: #000066; font-weight: bold;">.</span>score <span style="color: #000066; font-weight: bold;">+</span>= <span style="color: #000000; font-weight:bold;">5</span><span style="color: #000066; font-weight: bold;">;</span></div></td></tr></tbody></table></div>
<p>Now, when the enemy ship is destroyed, the game will add 5 to the score.</p>
<p>The easiest way I&#8217;ve found to end the game is to use a Boolean. In the main code, I created a variable called dead, typed it to Boolean and set it to false:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #6699cc; font-weight: bold;">var</span> dead<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=boolean%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:boolean.html"><span style="color: #004993;">Boolean</span></a> = <span style="color: #0033ff; font-weight: bold;">false</span><span style="color: #000066; font-weight: bold;">;</span></div></td></tr></tbody></table></div>
<p>Now go into the Enemy.as file and add this code to moveEnemy function:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #009900; font-style: italic;">//tests to see if the enemy ship has hit the rocket movieclip</span><br />
<span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span><span style="color: #0033ff; font-weight: bold;">this</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">hitTestObject</span><span style="color: #000000;">&#40;</span>_root<span style="color: #000066; font-weight: bold;">.</span>rocket<span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span><br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//if it has, dead is set to true</span><br />
&nbsp; &nbsp; _root<span style="color: #000066; font-weight: bold;">.</span>dead = <span style="color: #0033ff; font-weight: bold;">true</span><span style="color: #000066; font-weight: bold;">;</span><br />
<span style="color: #000000;">&#125;</span><br />
<span style="color: #009900; font-style: italic;">//check to see if dead equals true &nbsp; &nbsp;</span><br />
<span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>_root<span style="color: #000066; font-weight: bold;">.</span>dead == <span style="color: #0033ff; font-weight: bold;">true</span><span style="color: #000000;">&#41;</span><br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//remove listener and the ship from the stage</span><br />
&nbsp; &nbsp; <span style="color: #004993;">removeEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> moveEnemy<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; _root<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">removeChild</span><span style="color: #000000;">&#40;</span><span style="color: #0033ff; font-weight: bold;">this</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//add the game over text to the stage</span><br />
&nbsp; &nbsp; <span style="color: #6699cc; font-weight: bold;">var</span> gameOver<span style="color: #000066; font-weight: bold;">:</span>GameOver = <span style="color: #0033ff; font-weight: bold;">new</span> GameOver<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; _root<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">addChild</span><span style="color: #000000;">&#40;</span>gameOver<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; gameOver<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> = <span style="color: #000000; font-weight:bold;">125</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; gameOver<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> = <span style="color: #000000; font-weight:bold;">100</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//move the rocket off the stage</span><br />
&nbsp; &nbsp; &nbsp;_root<span style="color: #000066; font-weight: bold;">.</span>rocket<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> = <span style="color: #000066; font-weight: bold;">-</span><span style="color: #000000; font-weight:bold;">100</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp;_root<span style="color: #000066; font-weight: bold;">.</span>rocket<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> = <span style="color: #000066; font-weight: bold;">-</span><span style="color: #000000; font-weight:bold;">100</span><span style="color: #000066; font-weight: bold;">;</span><br />
<span style="color: #000000;">&#125;</span></div></td></tr></tbody></table></div>
<p>I&#8217;ve created a moveclip that says Game Over, I named it gameOver and checked the Export for ActionScript box. When an enemy ship hits our rocket, the game will remove all the ships from the stage, move our rocket off of it and add the Game Over movieclip. The reason we are moving the rocket movieclip off the stage instead of removing it is because we put it on the stage in our .fla, if we had added it with addChild() we could remove it easier, but it&#8217;s not that big of a deal.</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="400" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://atomicrobotdesign.com/blog_media/rocket_demo_final.swf" /><embed type="application/x-shockwave-flash" width="550" height="400" src="http://atomicrobotdesign.com/blog_media/rocket_demo_final.swf"></embed></object></p>
<p>That&#8217;s it! Now you should have the basics of a shooter game that you can build on, adding lives and more than one kind of enemy shouldn&#8217;t be too hard. I hoped this helped and now I have to figure out what to build next.</p>
]]></content:encoded>
			<wfw:commentRss>http://atomicrobotdesign.com/blog/flash/step-5-in-building-a-shooter-game-in-as3/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Step 4 in Building a Shooter Game in AS3</title>
		<link>http://atomicrobotdesign.com/blog/flash/step-4-in-building-a-shooter-game-in-as3/</link>
		<comments>http://atomicrobotdesign.com/blog/flash/step-4-in-building-a-shooter-game-in-as3/#comments</comments>
		<pubDate>Fri, 29 Jan 2010 05:29:29 +0000</pubDate>
		<dc:creator>Mike</dc:creator>
				<category><![CDATA[flash]]></category>
		<category><![CDATA[actionscript]]></category>
		<category><![CDATA[spaceshooter]]></category>
		<category><![CDATA[tutorial]]></category>

		<guid isPermaLink="false">http://atomicrobotdesign.com/blog/?p=192</guid>
		<description><![CDATA[So far, we&#8217;ve made a ship move, shoot lasers and make enemies move around. Now we are going to make the lasers hit the enemies. This was probably the hardest part of my AS2 game to switch over to AS3, &#8230; <a href="http://atomicrobotdesign.com/blog/flash/step-4-in-building-a-shooter-game-in-as3/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>So far, we&#8217;ve made a <a href="http://atomicrobotdesign.com/blog/?p=107">ship move</a>, <a href="http://atomicrobotdesign.com/blog/?p=166">shoot lasers</a> and make <a href="http://atomicrobotdesign.com/blog/?p=175">enemies move around</a>. Now we are going to make the lasers hit the enemies.</p>
<p>This was probably the hardest part of my AS2 game to switch over to AS3, because all the code in AS2 was in the actual .fla. Since the code for both the laser and the enemies were actually on the stage, it wasn&#8217;t too hard to make them interact. But since we are making this is in AS3 and the code of the laser and enemy ships are in their own AS files, we have to figure out a way to have the enemy ship code know where the lasers are on the stage. The easiest way to do this is to just add a movie clip to the stage and put the lasers inside it. This way, we can keep track of where the lasers are and how many there are. So, the first thing we have to do is add this code to the top of the main code in your Flash file:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #6699cc; font-weight: bold;">var</span> laserHolder<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=movieclip%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:movieclip.html"><span style="color: #004993;">MovieClip</span></a> = <span style="color: #0033ff; font-weight: bold;">new</span> <a href="http://www.google.com/search?q=movieclip%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:movieclip.html"><span style="color: #004993;">MovieClip</span></a><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
<span style="color: #004993;">addChild</span><span style="color: #000000;">&#40;</span>laserHolder<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span></div></td></tr></tbody></table></div>
<p>And down where the laser is added to the stage, change it to this:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">laserHolder<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">addChild</span><span style="color: #000000;">&#40;</span>newLaser<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span></div></td></tr></tbody></table></div>
<p>Alright, that&#8217;s all we are going to change in the main .fla. Next, we have one thing to add to Enemy.as, put this in the moveEnemy function:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #009900; font-style: italic;">//Make a loop that contains the number of lasers on the stage</span><br />
<span style="color: #0033ff; font-weight: bold;">for</span> <span style="color: #000000;">&#40;</span><span style="color: #6699cc; font-weight: bold;">var</span> i<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=int%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:int.html"><span style="color: #004993;">int</span></a> = <span style="color: #000000; font-weight:bold;">0</span><span style="color: #000066; font-weight: bold;">;</span> i <span style="color: #000066; font-weight: bold;">&lt;</span> _root<span style="color: #000066; font-weight: bold;">.</span>laserHolder<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">numChildren</span><span style="color: #000066; font-weight: bold;">;</span> i<span style="color: #000066; font-weight: bold;">++</span><span style="color: #000000;">&#41;</span><br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//add a new movieclip for each laser on the stage</span><br />
&nbsp; &nbsp; <span style="color: #6699cc; font-weight: bold;">var</span> laserTarget<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=movieclip%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:movieclip.html"><span style="color: #004993;">MovieClip</span></a> = _root<span style="color: #000066; font-weight: bold;">.</span>laserHolder<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">getChildAt</span><span style="color: #000000;">&#40;</span>i<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//check if any of the lasers has hit this enemy</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span><span style="color: #004993;">hitTestObject</span><span style="color: #000000;">&#40;</span>laserTarget<span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//if it has, then remove this enemy ship from the stage and remove all the listeners</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #004993;">removeEventListener</span><span style="color: #000000;">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html"><span style="color: #004993;">Event</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">ENTER_FRAME</span><span style="color: #000066; font-weight: bold;">,</span> moveEnemy<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; _root<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">removeChild</span><span style="color: #000000;">&#40;</span><span style="color: #0033ff; font-weight: bold;">this</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//this removes the laser</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; _root<span style="color: #000066; font-weight: bold;">.</span>laserHolder<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">removeChild</span><span style="color: #000000;">&#40;</span>laserTarget<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//this removes the laser's listeners</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; laserTarget<span style="color: #000066; font-weight: bold;">.</span>removeListeners<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
<span style="color: #000000;">&#125;</span></div></td></tr></tbody></table></div>
<p>I commented the code because it&#8217;s easier than explaining it here. We just have to make one more change or we&#8217;ll get an error. If we left it like this, the laserTaget.removeListeners() line would give us an error. The reason for this is pretty simple, we are trying to access a function in the Laser.as file from the Enemy.as file and that function, removeListeners() is a private function. In order for Enemy.as to access this function, we just need to switch it to public. So in Laser.as, change:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> removeListeners<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span></div></td></tr></tbody></table></div>
<p>to:</p>
<div class="codecolorer-container actionscript3 twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:600px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br /></div></td><td><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> removeListeners<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span></div></td></tr></tbody></table></div>
<p>That&#8217;s it, now we can shoot the enemies!</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="400" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://atomicrobotdesign.com/blog_media/rocket_demo_5.swf" /><embed type="application/x-shockwave-flash" width="550" height="400" src="http://atomicrobotdesign.com/blog_media/rocket_demo_5.swf"></embed></object></p>
]]></content:encoded>
			<wfw:commentRss>http://atomicrobotdesign.com/blog/flash/step-4-in-building-a-shooter-game-in-as3/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Some Flash stuff I came across</title>
		<link>http://atomicrobotdesign.com/blog/flash/some-flash-stuff-i-came-across/</link>
		<comments>http://atomicrobotdesign.com/blog/flash/some-flash-stuff-i-came-across/#comments</comments>
		<pubDate>Tue, 26 Jan 2010 03:41:03 +0000</pubDate>
		<dc:creator>Mike</dc:creator>
				<category><![CDATA[flash]]></category>
		<category><![CDATA[actionscript]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[links]]></category>
		<category><![CDATA[rant]]></category>

		<guid isPermaLink="false">http://atomicrobotdesign.com/blog/?p=186</guid>
		<description><![CDATA[I came across a link on Twitter for FlashMoto.com, Top Flash Trends for 2010. There&#8217;s nothing crazy here, Augmented Reality and Adobe AIR 2.0, stuff like that. But #6 caught me off guard a bit, The Mass Creation of Flash &#8230; <a href="http://atomicrobotdesign.com/blog/flash/some-flash-stuff-i-came-across/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>I came across a link on Twitter for FlashMoto.com, <a href="http://www.flashmoto.com/blog/project-news/top-flash-trends-for-2010/">Top Flash Trends for 2010</a>. There&#8217;s nothing crazy here, Augmented Reality and Adobe AIR 2.0, stuff like that. But #6 caught me off guard a bit, The Mass Creation of Flash Content Management Systems. Whaa?? Flash CMS? In all the reading I&#8217;ve done, I can&#8217;t recall reading anything about Flash CMS becoming a big thing. I&#8217;ve never been to FlashMoto before, so I went to their home page and, surprise, surprise, they sell a Flash CMS. I&#8217;m not ripping on their business or anything, but that&#8217;s just kinda funny to me.</p>
<p>In a post that&#8217;s not selling you anything, Warm Forest has a nice post called <a href="http://www.warmforestflash.com/blog/2010/01/11-myths-about-flash-that-wont-die/">11 Myths About Flash That Won&#8217;t Die</a>. Stuff like You can’t select and copy text on Flash sites and Flash isn’t supported on mobile devices are stuff I hear all the time. It&#8217;s a good post to show to your boss at work who never lets you build anything in Flash and ActionScript. Unless, like me, you have 6 months of being annoying to make them see it your way!</p>
<p>Finally, I don&#8217;t know why but some software developers just have a hate on for Flash. I&#8217;m not saying Flash is perfect and I&#8217;m not thrilled that it&#8217;s proprietary, but it let&#8217;s you do some sweet stuff and it looks and works the same no matter what browser it&#8217;s in. But, this guy, <a href="http://ossguy.com/?p=226">OSS Guy</a>, has declared Flash dead and says all Flash developers should stop now and start working in HTML5/CSS3, which of course, means you&#8217;re now cutting out anyone that uses any version of IE and considering how well Microsoft has been doing at implementing CSS as it is now, I&#8217;m sure they&#8217;re going to be right on the bandwagon for CSS3. And it seems to me, a lot of software developers forget that one of the main uses of Flash is animation and if Flash is dead, then <a href="http://www.teletoon.com/index.php">Teletoon</a> is screwed when it comes to making their own shows! Plus, does anyone have any tutorials on how I can make HTML5 games? I&#8217;d really like to remake Frogger using it.</p>
]]></content:encoded>
			<wfw:commentRss>http://atomicrobotdesign.com/blog/flash/some-flash-stuff-i-came-across/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

