<?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>Studio Barliesque &#187; masks</title>
	<atom:link href="http://studio.barliesque.com/blog/tag/masks/feed/" rel="self" type="application/rss+xml" />
	<link>http://studio.barliesque.com/blog</link>
	<description>David Barlia - Flash Developer / Designer / Animator</description>
	<lastBuildDate>Fri, 30 Oct 2009 18:43:19 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>The trouble with getBounds()</title>
		<link>http://studio.barliesque.com/blog/2008/10/the-trouble-with-getbounds/</link>
		<comments>http://studio.barliesque.com/blog/2008/10/the-trouble-with-getbounds/#comments</comments>
		<pubDate>Sat, 04 Oct 2008 00:00:00 +0000</pubDate>
		<dc:creator>barliesque</dc:creator>
				<category><![CDATA[AS3]]></category>
		<category><![CDATA[bug]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[getBounds]]></category>
		<category><![CDATA[masks]]></category>

		<guid isPermaLink="false">http://studio.barliesque.com/blog/?p=6</guid>
		<description><![CDATA[Keeping tabs on the exact position and dimensions of an object on the stage gets tricky when masks are involved.  None of Actionscript's native commands provide reliable results.  Here's an alternate solution...]]></description>
			<content:encoded><![CDATA[<p>What do you do when you want to know the exact details of an objects whereabouts on stage?  Within Actionscript&#8217;s command set, there are a few options, such as the object&#8217;s own <em>.x .y .width .height</em> properties.  However, your best bet is to call the <em>getBounds()</em> function.  That&#8217;ll tell you the extents of what&#8217;s being drawn to the screen.  That is, unless you happen to be using a mask inside the movie clip.</p>
<p>A tiny object being masked by a huge shape will cause <em>getBounds()</em> to return the extents of&#8230; the mask, not the visible object.  It gets even better if your object happens to move beyond the masked area&#8211;thus making it totally invisible.  Now <em>getBounds()</em> exapands to include the area of the giant mask plus that of the tiny object, which is no longer being drawn to the screen at all.</p>
<p>In fact, there appears to be no built-in method for reliably determining the actual screen area a MovieClip is occupying.  Do we call this a bug, or was it really meant to work this way???  <img src='http://studio.barliesque.com/blog/wp-includes/images/smilies/16.png' alt=':S' class='wp-smiley' /> </p>
<p>I decided to try writing a handy dandy function to remedy this problem, and in so doing discovered another serious limitation involving masks.  When you create an arrangement of layers in the Flash IDE with, let&#8217;s say three or four objects being masked by one mask, you&#8217;ve done something that apparently is only possible with the Flash IDE, and not with AS3.  If you have a look at the <em>.mask</em> property of each of those masked objects, they&#8217;ll all be set to NULL.  There&#8217;s no sign of any masking going on, as far as ActionScript is concerned.  Suppose you manually set the <em>.mask</em> property of one of those three or four masked objects?  The result is that all the other objects will be unmasked.  Using the <em>.mask</em> property strictly pairs one mask to one display object.  So now you&#8217;ve got to find a way of duplicating your mask, so each object has its own mask&#8230;!   <img src='http://studio.barliesque.com/blog/wp-includes/images/smilies/46.png' alt=':grit:' class='wp-smiley' /> </p>
<p>Well, nonetheless I wrote my own routine: <em>getVisibility()</em> which reliably tracks down whatever is actually visible, and nothing more.  It&#8217;s reliable, that is, as long as you manually set your masks in code&#8211;one mask for each object.  If a better solution exists, I&#8217;d like to know about it.  For now, here&#8217;s a little demo of my function versus AS3&#8217;s native functions&#8230;</p>
<p><script type="text/javascript" src="http://studio.barliesque.com/blog/wp-content/plugins/pb-embedflash/js/swfobject.js"></script><span class="embedflash" id="swfidd41c8fc9beb086a17f93e20f219b037f"><small>(Please open the article to see the flash file or player.)</small></span><script type="text/javascript">
				var flashvars = {}; var params = {}; var attributes = {};params.allowfullscreen = "true"; params.allowscriptaccess = "always";
				swfobject.embedSWF("http://studio.barliesque.com/blog/media/Visibility.swf","swfidd41c8fc9beb086a17f93e20f219b037f","500","600","9.0.0","http://studio.barliesque.com/blog/wp-content/plugins/pb-embedflash/swf/expressInstall.swf",flashvars,params,attributes);
		</script></p>
<p>There&#8217;s only one error I can detect in the result of <em>getVisibility()</em> &#8230;When objects are rotated, their visibility is based upon a rotated bounding box, rather than the precise shape of the object.  Still, this gets us considerably closer to a solution.</p>
<p>The .fla can be downloaded <a title="Visibility.fla" href="http://studio.barliesque.com/blog/media/Visibility.fla"><strong>HERE</strong></a>.  Here&#8217;s the code for my <em>getVisibility()</em> function&#8230;</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript3" style="font-family:monospace;"><span style="color: #339966; font-weight: bold;">function</span> getVisibility<span style="color: #000000;">&#40;</span>obj<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">DisplayObject</span><span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Rectangle</span> <span style="color: #000000;">&#123;</span>
&nbsp;
	<span style="color: #6699cc; font-weight: bold;">var</span> vis<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Rectangle</span>;
&nbsp;
	<span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>obj.<span style="color: #004993;">parent</span> == <span style="color: #0033ff; font-weight: bold;">null</span><span style="color: #000000;">&#41;</span> <span style="color: #0033ff; font-weight: bold;">return</span> <span style="color: #0033ff; font-weight: bold;">new</span> <span style="color: #004993;">Rectangle</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>;
&nbsp;
	<span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>obj <span style="color: #0033ff; font-weight: bold;">is</span> <span style="color: #004993;">DisplayObjectContainer</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span>
		vis = getChildVisibility<span style="color: #000000;">&#40;</span>obj, obj.<span style="color: #004993;">parent</span><span style="color: #000000;">&#41;</span>;
	<span style="color: #000000;">&#125;</span> <span style="color: #0033ff; font-weight: bold;">else</span> <span style="color: #000000;">&#123;</span>
		vis = obj.<span style="color: #004993;">getBounds</span><span style="color: #000000;">&#40;</span>obj.<span style="color: #004993;">parent</span><span style="color: #000000;">&#41;</span>;
	<span style="color: #000000;">&#125;</span>
&nbsp;
	<span style="color: #009900;">// Is the DisplayObject masked?</span>
	<span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>obj.<span style="color: #004993;">mask</span> <span style="color: #000000; font-weight: bold;">!</span>= <span style="color: #0033ff; font-weight: bold;">null</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span>
		vis = vis.<span style="color: #004993;">intersection</span><span style="color: #000000;">&#40;</span>obj.<span style="color: #004993;">mask</span>.<span style="color: #004993;">getBounds</span><span style="color: #000000;">&#40;</span>obj.<span style="color: #004993;">parent</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span>;
	<span style="color: #000000;">&#125;</span>
&nbsp;
	<span style="color: #009900;">// Is the DisplayObject partly or completely off-stage?</span>
	vis = vis.<span style="color: #004993;">intersection</span><span style="color: #000000;">&#40;</span>obj.<span style="color: #004993;">stage</span>.<span style="color: #004993;">getBounds</span><span style="color: #000000;">&#40;</span>obj.<span style="color: #004993;">parent</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span>;
&nbsp;
	<span style="color: #0033ff; font-weight: bold;">return</span> vis;
<span style="color: #000000;">&#125;</span>
&nbsp;
<span style="color: #339966; font-weight: bold;">function</span> getChildVisibility<span style="color: #000000;">&#40;</span>obj<span style="color: #000000; font-weight: bold;">:*</span>, <span style="color: #004993;">target</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">DisplayObjectContainer</span><span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Rectangle</span> <span style="color: #000000;">&#123;</span>
&nbsp;
	<span style="color: #6699cc; font-weight: bold;">var</span> vis<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Rectangle</span> = <span style="color: #0033ff; font-weight: bold;">new</span> <span style="color: #004993;">Rectangle</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>;
	<span style="color: #6699cc; font-weight: bold;">var</span> <span style="color: #004993;">child</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">DisplayObject</span>;
	<span style="color: #6699cc; font-weight: bold;">var</span> childRect<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Rectangle</span>;
	<span style="color: #6699cc; font-weight: bold;">var</span> i<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">uint</span>;
&nbsp;
	<span style="color: #0033ff; font-weight: bold;">for</span> <span style="color: #000000;">&#40;</span>i = <span style="color: #000000; font-weight:bold;">1</span>; i <span style="color: #000000; font-weight: bold;">&lt;</span>= obj.<span style="color: #004993;">numChildren</span>; i<span style="color: #000000; font-weight: bold;">++</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span>
		<span style="color: #004993;">child</span> = obj.<span style="color: #004993;">getChildAt</span><span style="color: #000000;">&#40;</span>i<span style="color: #000000; font-weight: bold;">-</span><span style="color: #000000; font-weight:bold;">1</span><span style="color: #000000;">&#41;</span>;
&nbsp;
		<span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span><span style="color: #004993;">child</span> <span style="color: #000000; font-weight: bold;">!</span>= <span style="color: #0033ff; font-weight: bold;">null</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span>
			<span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span><span style="color: #004993;">child</span>.<span style="color: #004993;">visible</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span>
				<span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span><span style="color: #004993;">child</span> <span style="color: #0033ff; font-weight: bold;">is</span> <span style="color: #004993;">DisplayObjectContainer</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span>
					childRect = getChildVisibility<span style="color: #000000;">&#40;</span><span style="color: #004993;">child</span>, <span style="color: #004993;">target</span><span style="color: #000000;">&#41;</span>;
				<span style="color: #000000;">&#125;</span> <span style="color: #0033ff; font-weight: bold;">else</span> <span style="color: #000000;">&#123;</span>
					childRect = <span style="color: #004993;">child</span>.<span style="color: #004993;">getBounds</span><span style="color: #000000;">&#40;</span><span style="color: #004993;">target</span><span style="color: #000000;">&#41;</span>;
				<span style="color: #000000;">&#125;</span>
				<span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span><span style="color: #004993;">child</span>.<span style="color: #004993;">mask</span> <span style="color: #000000; font-weight: bold;">!</span>= <span style="color: #0033ff; font-weight: bold;">null</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span>
					childRect = childRect.<span style="color: #004993;">intersection</span><span style="color: #000000;">&#40;</span><span style="color: #004993;">child</span>.<span style="color: #004993;">mask</span>.<span style="color: #004993;">getBounds</span><span style="color: #000000;">&#40;</span><span style="color: #004993;">target</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span>;
				<span style="color: #000000;">&#125;</span>
				vis = vis.<span style="color: #004993;">union</span><span style="color: #000000;">&#40;</span>childRect<span style="color: #000000;">&#41;</span>;
			<span style="color: #000000;">&#125;</span>
		<span style="color: #000000;">&#125;</span>
	<span style="color: #000000;">&#125;</span>
	<span style="color: #0033ff; font-weight: bold;">return</span> vis;
<span style="color: #000000;">&#125;</span></pre></div></div>

<p><br class="spacer_" /></p>
]]></content:encoded>
			<wfw:commentRss>http://studio.barliesque.com/blog/2008/10/the-trouble-with-getbounds/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
	</channel>
</rss>
