<?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>Touch My Pixel Blog &#187; as3 drawing</title>
	<atom:link href="http://blog.touchmypixel.com/tag/as3-drawing/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.touchmypixel.com</link>
	<description>Games + Web : Interaction Matters</description>
	<lastBuildDate>Thu, 22 Jul 2010 04:18:49 +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>AS2 + AS3 Draw a Dotted Rounded Corner Box</title>
		<link>http://blog.touchmypixel.com/2008/04/as2-as3-draw-a-dotted-rounded-corner-box/</link>
		<comments>http://blog.touchmypixel.com/2008/04/as2-as3-draw-a-dotted-rounded-corner-box/#comments</comments>
		<pubDate>Fri, 25 Apr 2008 06:18:32 +0000</pubDate>
		<dc:creator>tonyp</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[as3 drawing]]></category>

		<guid isPermaLink="false">http://blog.touchmypixel.com/?p=9</guid>
		<description><![CDATA[So you might think that rounded corners is easy in as3 with the new drawing tools. This is only so true if you don't want it dotted.
Thanks to senocular AS2 DashedLine.as which was easily converted to an as3 version DashedLine.as for as3 we can draw dotted lines and curves with actionscript. This left me with [...]]]></description>
			<content:encoded><![CDATA[<p>So you might think that rounded corners is easy in as3 with the new drawing tools. This is only so true if you don't want it dotted.</p>
<p>Thanks to senocular AS2 <a href="http://www.senocular.com/flash/actionscript.php?file=ActionScript_2.0/com/senocular/drawing/DashedLine.as">DashedLine.as</a> which was easily converted to an as3 version <a href="http://blog.touchmypixel.com/wp-content/uploads/2008/04/dashedline.as">DashedLine.as for as3</a><a title="DashedLine.as for as3" href="http://blog.alegitimatebusiness.com/wp-content/uploads/2007/11/dashedline.as"></a> we can draw dotted lines and curves with actionscript. This left me with the task of using the quadratic drawing tools (no i didnt add a cubic curveTo to the Dashed line class) to draw circles (or quarters of circles, for the curners), which isnt the easiest, but i'll spare you the details and simply say, its done!</p>
<p>Using Draw.curvedBox(obj, offsetX, offsetY, width, height, cornerRadius) we can draw into any graphics object (whether it be a normal Sprite.graphics or a DashedLine Object). This is essential as the Dashed line tool doesnt actually give us a fill, so we might need to draw a normal shape for the background.</p>
<div class="igBar"><span id="lactionscript-2"><a href="#" onclick="javascript:showPlainTxt('actionscript-2'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">Actionscript:</span>
<div id="actionscript-2">
<div class="actionscript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #0066CC;">import</span> com.<span style="color: #006600;">senocular</span>.<span style="color: #006600;">drawing</span>.<span style="color: #006600;">DashedLine</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #0066CC;">import</span> com.<span style="color: #006600;">tonp</span>.<span style="color: #006600;">utils</span>.<span style="color: #006600;">Draw</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #000000; font-weight: bold;">var</span> dl = <span style="color: #000000; font-weight: bold;">new</span> DashedLine<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">this</span>,<span style="color: #cc66cc;color:#800000;">1</span>,<span style="color: #cc66cc;color:#800000;">5</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">dl.<span style="color: #0066CC;">lineStyle</span><span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;color:#800000;">3</span>,0x000000,<span style="color: #cc66cc;color:#800000;">1</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">Draw.<span style="color: #006600;">curvedBox</span><span style="color: #66cc66;">&#40;</span>dl,<span style="color: #cc66cc;color:#800000;">10</span>,<span style="color: #cc66cc;color:#800000;">10</span>,<span style="color: #cc66cc;color:#800000;">100</span>,<span style="color: #cc66cc;color:#800000;">100</span>,<span style="color: #cc66cc;color:#800000;">20</span><span style="color: #66cc66;">&#41;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>to draw a curved corner box with a fill, or solid outline, send in mc.graphics as the first attribute (or just the mc in as2)</p>
<div class="externalLinkBlock"><a href="http://blog.touchmypixel.com/wp-content/uploads/2008/04/dashedline.as">Dashedline.as for AS3 ><br />
</a></div>
<div class="externalLinkBlock"><a href="http://blog.touchmypixel.com/wp-content/uploads/2008/04/draw.as">Draw.as for AS3 ></a></div>
<div class="externalLinkBlock"><a href="http://blog.touchmypixel.com/wp-content/uploads/2008/04/draw_as2.as">Draw.as for AS2 ></a></div>
<p>So we can now do a box with curved corners in either AS2 or AS3 and in dotted or normal... phew!</p>
<script type="text/javascript">
var flattr_wp_ver = '0.71';
var flattr_uid = 'tarwin';
var flattr_cat = 'text';
var flattr_tle = 'AS2 + AS3 Draw a Dotted Rounded Corner Box';
var flattr_dsc = 'So you might think that rounded corners is easy in as3 with the new drawing tools. This is only so true if you don\'t want it dotted.  Thanks to senocular AS2 DashedLine.as which was easily converted to an as3 version DashedLine.as for as3 we can draw dotted lines and curves with actionscript. This left me with the task of using the quadratic drawing tools (no i didnt add a cubic curveTo to the Dashed line class) to draw circles (or quarters of circles, for the curners), which isnt the easiest, but i\'ll spare you the details and simply say, its done!  Using Draw.curvedBox(obj, offsetX, offsetY, width, height, cornerRadius) we can draw into any graphics object (whether it be a normal Sprite.graphics or a DashedLine Object). This is essential as the Dashed line tool doesnt actually give us a fill, so we might need to draw a normal shape for the background. [as] import com.senocular.drawing.DashedLine import com.tonp.utils.Draw var dl = new DashedLine(this,1,5); dl.lineStyle(3,0x000000,1); Draw.curvedBo';
var flattr_tag = 'as3 drawing';
var flattr_url = 'http://blog.touchmypixel.com/2008/04/as2-as3-draw-a-dotted-rounded-corner-box/';
var flattr_lng = 'en_GB';
</script><script src="http://api.flattr.com/button/load.js" type="text/javascript"></script> <p>Feel free to Flattr this post at <a href="http://flattr.com/" title="Flattr" target="_blank">flattr.com</a>, if you like it.</p> <p><a href="http://flattr.com/" title="Flattr" target="_blank"><img src="http://api.flattr.com/button/button-static-50x60.png" alt="Flattr this!"></a></p>]]></content:encoded>
			<wfw:commentRss>http://blog.touchmypixel.com/2008/04/as2-as3-draw-a-dotted-rounded-corner-box/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>
