<?xml version="1.0" encoding="UTF-8"?><!-- generator="wordpress/2.0.2" -->
<rss version="2.0" 
	xmlns:content="http://purl.org/rss/1.0/modules/content/">
<channel>
	<title>Comments on: How to Constrain Dragging to a Circle</title>
	<link>http://www.quip.net/blog/2006/flash/actionscript-20/how-to-constrain-circle</link>
	<description>Luck is the residue of good design.</description>
	<pubDate>Tue, 06 Jan 2009 14:05:40 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.0.2</generator>

	<item>
		<title>by: David Stiller</title>
		<link>http://www.quip.net/blog/2006/flash/actionscript-20/how-to-constrain-circle#comment-74309</link>
		<pubDate>Mon, 20 Aug 2007 17:43:44 +0000</pubDate>
		<guid>http://www.quip.net/blog/2006/flash/actionscript-20/how-to-constrain-circle#comment-74309</guid>
					<description>amir,

Glad to hear it.  :)</description>
		<content:encoded><![CDATA[<p>amir,</p>
<p>Glad to hear it.  <img src='http://www.quip.net/blog/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />
</p>
]]></content:encoded>
				</item>
	<item>
		<title>by: amir</title>
		<link>http://www.quip.net/blog/2006/flash/actionscript-20/how-to-constrain-circle#comment-74161</link>
		<pubDate>Mon, 20 Aug 2007 04:45:20 +0000</pubDate>
		<guid>http://www.quip.net/blog/2006/flash/actionscript-20/how-to-constrain-circle#comment-74161</guid>
					<description>wow never thought of that approach. now its more clear to me how this pie thingy works.

thanks david you're a life saver :D</description>
		<content:encoded><![CDATA[<p>wow never thought of that approach. now its more clear to me how this pie thingy works.</p>
<p>thanks david you&#8217;re a life saver <img src='http://www.quip.net/blog/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' />
</p>
]]></content:encoded>
				</item>
	<item>
		<title>by: David Stiller</title>
		<link>http://www.quip.net/blog/2006/flash/actionscript-20/how-to-constrain-circle#comment-72886</link>
		<pubDate>Tue, 14 Aug 2007 15:42:35 +0000</pubDate>
		<guid>http://www.quip.net/blog/2006/flash/actionscript-20/how-to-constrain-circle#comment-72886</guid>
					<description>amir,

It sounds like you're hoping to constrain dragging to a pie shape.  Here's a quick bit a sample code that should at least get you started.  This series of &lt;code&gt;if&lt;/code&gt;/&lt;code&gt;if..else&lt;/code&gt; statements replaces the existing &lt;code&gt;if&lt;/code&gt; statement in the original blog entry:

&lt;pre&gt;&lt;code&gt;if (angle &lt; 0) {
  this._x = this.origX + (Math.cos(0) * distance);
  this._y = this.origY + (Math.sin(0) * distance);
} else if (angle &gt; 0.62) {
  this._x = this.origX + (Math.cos(0.62) * distance);
  this._y = this.origY + (Math.sin(0.62) * distance);
} else {
  this._x = _root._xmouse;
  this._y = _root._ymouse;
}&lt;/code&gt;&lt;/pre&gt;

So ... whereas the original ActionScript cared about distance, this revision cares about angle.  36 degrees in radians is approximately 0.62, which is why that number is the one shown.  In the above, zero points to the right, and 0.62 radians also points to the right, but roughly 36 degrees below due east to an nearly southeast.  If the mouse happens to be higher than that (&lt;code&gt;angle &amp;#60; 0&lt;/code&gt;), the movie clip is positioned specifically &lt;em&gt;at&lt;/em&gt; that angle (zero), at the distance determined by the &lt;code&gt;distance&lt;/code&gt; variable.  In like fashion, if the mouse happens to be lower (&lt;code&gt;angle &amp;rt; 0.68&lt;/code&gt;), the movie clip is positioned right at 0.68 radians at the same &lt;code&gt;distance&lt;/code&gt; variable.  Otherwise, the movie clip is put wherever the mouse is.

The challenge, here, is how to handle angles at other ... angles.  ;)  The &lt;code&gt;if&lt;/code&gt; statements may need to be very much more flexible than the current hard coded 0/0.68 range.</description>
		<content:encoded><![CDATA[<p>amir,</p>
<p>It sounds like you&#8217;re hoping to constrain dragging to a pie shape.  Here&#8217;s a quick bit a sample code that should at least get you started.  This series of <code>if</code>/<code>if..else</code> statements replaces the existing <code>if</code> statement in the original blog entry:</p>
<pre><code>if (angle < 0) {
  this._x = this.origX + (Math.cos(0) * distance);
  this._y = this.origY + (Math.sin(0) * distance);
} else if (angle > 0.62) {
  this._x = this.origX + (Math.cos(0.62) * distance);
  this._y = this.origY + (Math.sin(0.62) * distance);
} else {
  this._x = _root._xmouse;
  this._y = _root._ymouse;
}</code></pre>
<p>So &#8230; whereas the original ActionScript cared about distance, this revision cares about angle.  36 degrees in radians is approximately 0.62, which is why that number is the one shown.  In the above, zero points to the right, and 0.62 radians also points to the right, but roughly 36 degrees below due east to an nearly southeast.  If the mouse happens to be higher than that (<code>angle &lt; 0</code>), the movie clip is positioned specifically <em>at</em> that angle (zero), at the distance determined by the <code>distance</code> variable.  In like fashion, if the mouse happens to be lower (<code>angle &rt; 0.68</code>), the movie clip is positioned right at 0.68 radians at the same <code>distance</code> variable.  Otherwise, the movie clip is put wherever the mouse is.</p>
<p>The challenge, here, is how to handle angles at other &#8230; angles.  <img src='http://www.quip.net/blog/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' />   The <code>if</code> statements may need to be very much more flexible than the current hard coded 0/0.68 range.
</p>
]]></content:encoded>
				</item>
	<item>
		<title>by: amir</title>
		<link>http://www.quip.net/blog/2006/flash/actionscript-20/how-to-constrain-circle#comment-72851</link>
		<pubDate>Tue, 14 Aug 2007 08:46:55 +0000</pubDate>
		<guid>http://www.quip.net/blog/2006/flash/actionscript-20/how-to-constrain-circle#comment-72851</guid>
					<description>hi there,

your solution on using startDrag is perfect...but i'm trying to do more startDrag() within an angle but in a straight line let say 36 degree angle

i'm trying to create a fixed movieclip resizer...i got the idea to actually detect the angle between the resizer_mc and the movieclip that i want to resize

can u help me?</description>
		<content:encoded><![CDATA[<p>hi there,</p>
<p>your solution on using startDrag is perfect&#8230;but i&#8217;m trying to do more startDrag() within an angle but in a straight line let say 36 degree angle</p>
<p>i&#8217;m trying to create a fixed movieclip resizer&#8230;i got the idea to actually detect the angle between the resizer_mc and the movieclip that i want to resize</p>
<p>can u help me?
</p>
]]></content:encoded>
				</item>
	<item>
		<title>by: David Stiller</title>
		<link>http://www.quip.net/blog/2006/flash/actionscript-20/how-to-constrain-circle#comment-5253</link>
		<pubDate>Thu, 09 Nov 2006 19:57:38 +0000</pubDate>
		<guid>http://www.quip.net/blog/2006/flash/actionscript-20/how-to-constrain-circle#comment-5253</guid>
					<description>Jim,

Glad to hear it.  :)</description>
		<content:encoded><![CDATA[<p>Jim,</p>
<p>Glad to hear it.  <img src='http://www.quip.net/blog/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />
</p>
]]></content:encoded>
				</item>
	<item>
		<title>by: Jim Maskus</title>
		<link>http://www.quip.net/blog/2006/flash/actionscript-20/how-to-constrain-circle#comment-5178</link>
		<pubDate>Thu, 09 Nov 2006 02:20:13 +0000</pubDate>
		<guid>http://www.quip.net/blog/2006/flash/actionscript-20/how-to-constrain-circle#comment-5178</guid>
					<description>Thanks David

I found this technique useful for applying any type of behavioral logic while dragging. ie scrubbing to a new frame in a movieClip while dragging a slider thumb for example.</description>
		<content:encoded><![CDATA[<p>Thanks David</p>
<p>I found this technique useful for applying any type of behavioral logic while dragging. ie scrubbing to a new frame in a movieClip while dragging a slider thumb for example.
</p>
]]></content:encoded>
				</item>
	<item>
		<title>by: David Stiller</title>
		<link>http://www.quip.net/blog/2006/flash/actionscript-20/how-to-constrain-circle#comment-1888</link>
		<pubDate>Fri, 18 Aug 2006 17:26:15 +0000</pubDate>
		<guid>http://www.quip.net/blog/2006/flash/actionscript-20/how-to-constrain-circle#comment-1888</guid>
					<description>Karl,

&lt;blockquote&gt;how would this work if the object did not start in the center of the bounding box, circle, ellipse, etc.?&lt;/blockquote&gt;

The center point is completely arbitrary.  In my example, I set the &lt;code&gt;origX&lt;/code&gt; and &lt;code&gt;origY&lt;/code&gt; properties of &lt;code&gt;mc&lt;/code&gt; to &lt;code&gt;mc&lt;/code&gt;'s original location ...

&lt;pre&gt;&lt;code&gt;mc.origX = mc._x;
mc.origY = mc._y;&lt;/code&gt;&lt;/pre&gt;

... but you can set those properties to whatever you like.  Whatever they are, those values will be the center point of the circle or ellipse.  In fact, they don't even have to be dynamic properties of that movie clip:  they can by variables, if you like; I just happened to find it convenient to refer to them via &lt;code&gt;this&lt;/code&gt; in the above code.</description>
		<content:encoded><![CDATA[<p>Karl,</p>
<blockquote><p>how would this work if the object did not start in the center of the bounding box, circle, ellipse, etc.?</p></blockquote>
<p>The center point is completely arbitrary.  In my example, I set the <code>origX</code> and <code>origY</code> properties of <code>mc</code> to <code>mc</code>&#8217;s original location &#8230;</p>
<pre><code>mc.origX = mc._x;
mc.origY = mc._y;</code></pre>
<p>&#8230; but you can set those properties to whatever you like.  Whatever they are, those values will be the center point of the circle or ellipse.  In fact, they don&#8217;t even have to be dynamic properties of that movie clip:  they can by variables, if you like; I just happened to find it convenient to refer to them via <code>this</code> in the above code.
</p>
]]></content:encoded>
				</item>
	<item>
		<title>by: David Stiller</title>
		<link>http://www.quip.net/blog/2006/flash/actionscript-20/how-to-constrain-circle#comment-1887</link>
		<pubDate>Fri, 18 Aug 2006 17:22:40 +0000</pubDate>
		<guid>http://www.quip.net/blog/2006/flash/actionscript-20/how-to-constrain-circle#comment-1887</guid>
					<description>Philip,

If I understand what you're saying, you'd like to know how to contrain the &lt;em&gt;mouse&lt;/em&gt; rather than what the mouse is dragging &amp;#8212; actually, in addition to what the mouse is dragging.  If that's it, I'm afraid you're out of luck.  The Flash Player has very little control over the mouse itself.  ActionScript can understand where the mouse is, and even hide the mouse altogether, but it cannot move or constrain the mouse.  Notice that in my examples, the mouse moves wherever the users puts it:  only the movie clip is constrained.

That said, you can &lt;em&gt;simulate&lt;/em&gt; mouse constraint.  The trick there is to draw a movie clip that looks like the mouse arrow, hide the actual mouse arrow (see &lt;code&gt;Mouse.hide()&lt;/code&gt;), and constantly position the arrow movie clip where the mouse is.  Other dragging will have to be done in addition to that.  Make sense?

&lt;blockquote&gt;I suppose to do this, you’d find the distance between the mouse and the center of the circle, when the user clicks, and then somehow constrain the mouse to this distance, while still allowing it to move around the circle. I just don’t know how to make that happen.&lt;/blockquote&gt;

Although you can't constrain the mouse itself, as discussed, that part about finding the distance between the mouse and the center of the circle is already spelled out in the above code (see the formula that sets the value of &lt;code&gt;distance&lt;/code&gt;).  :)  You may also want to check out &lt;a href=&quot;http://www.quip.net/blog/2006/flash/actionscript-20/how-to-drag-clock-hands&quot; target=&quot;_blank&quot;&gt;How to Drag Clock Hands in a Circle&lt;/a&gt;, which may be a little closer to the kind of dragging you're after &amp;#8212; though my article doesn't include the secondary horizontal slider at the top of yours.</description>
		<content:encoded><![CDATA[<p>Philip,</p>
<p>If I understand what you&#8217;re saying, you&#8217;d like to know how to contrain the <em>mouse</em> rather than what the mouse is dragging &mdash; actually, in addition to what the mouse is dragging.  If that&#8217;s it, I&#8217;m afraid you&#8217;re out of luck.  The Flash Player has very little control over the mouse itself.  ActionScript can understand where the mouse is, and even hide the mouse altogether, but it cannot move or constrain the mouse.  Notice that in my examples, the mouse moves wherever the users puts it:  only the movie clip is constrained.</p>
<p>That said, you can <em>simulate</em> mouse constraint.  The trick there is to draw a movie clip that looks like the mouse arrow, hide the actual mouse arrow (see <code>Mouse.hide()</code>), and constantly position the arrow movie clip where the mouse is.  Other dragging will have to be done in addition to that.  Make sense?</p>
<blockquote><p>I suppose to do this, you’d find the distance between the mouse and the center of the circle, when the user clicks, and then somehow constrain the mouse to this distance, while still allowing it to move around the circle. I just don’t know how to make that happen.</p></blockquote>
<p>Although you can&#8217;t constrain the mouse itself, as discussed, that part about finding the distance between the mouse and the center of the circle is already spelled out in the above code (see the formula that sets the value of <code>distance</code>).  <img src='http://www.quip.net/blog/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />   You may also want to check out <a href="http://www.quip.net/blog/2006/flash/actionscript-20/how-to-drag-clock-hands" target="_blank">How to Drag Clock Hands in a Circle</a>, which may be a little closer to the kind of dragging you&#8217;re after &mdash; though my article doesn&#8217;t include the secondary horizontal slider at the top of yours.
</p>
]]></content:encoded>
				</item>
	<item>
		<title>by: Karl</title>
		<link>http://www.quip.net/blog/2006/flash/actionscript-20/how-to-constrain-circle#comment-1881</link>
		<pubDate>Fri, 18 Aug 2006 12:35:42 +0000</pubDate>
		<guid>http://www.quip.net/blog/2006/flash/actionscript-20/how-to-constrain-circle#comment-1881</guid>
					<description>Hey David,
I'm the guy with the glass jar, well, cylinder actually...anyway, how would this work if the object did not start in the center of the bounding box, circle, ellipse, etc.?
thanks,
Karl</description>
		<content:encoded><![CDATA[<p>Hey David,<br />
I&#8217;m the guy with the glass jar, well, cylinder actually&#8230;anyway, how would this work if the object did not start in the center of the bounding box, circle, ellipse, etc.?<br />
thanks,<br />
Karl
</p>
]]></content:encoded>
				</item>
	<item>
		<title>by: Philip Johnston</title>
		<link>http://www.quip.net/blog/2006/flash/actionscript-20/how-to-constrain-circle#comment-1875</link>
		<pubDate>Fri, 18 Aug 2006 08:02:35 +0000</pubDate>
		<guid>http://www.quip.net/blog/2006/flash/actionscript-20/how-to-constrain-circle#comment-1875</guid>
					<description>First off, thank you for all your articles.  I've bookmarked your blog in my Flash resources and look forward to future posts.

Right now, I'm trying to do something that relates to this post, but I can't quite figure out if the script in your post can solve my problem, or if I need to do something else.

I have a little scroll wheel that the user can click and &quot;drag&quot; in a circle.  It works great, except I'd like it if the user couldn't move his mouse futher from or closer to the center of the circle while he's pressing the mouse.  Imagine if you have one hand on a steering wheel and are turning it - you're hand stays on the same place on the wheel.  That's what I want.

I suppose to do this, you'd find the distance between the mouse and the center of the circle, when the user clicks, and then somehow constrain the mouse to this distance, while still allowing it to move around the circle.  I just don't know how to make that happen.

Here is the SWF: &lt;a href=&quot;http://www.newthinkmedia.com/scroll_wheel.swf&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;http://www.newthinkmedia.com/scroll_wheel.swf&lt;/a&gt;
And the AS: &lt;a href=&quot;http://www.newthinkmedia.com/circle_as.txt&quot; class=&quot;external&quot; target=&quot;_blank&quot;&gt;http://www.newthinkmedia.com/circle_as.txt&lt;/a&gt;

I downloaded this FLA from someone else and modified it slightly - that's why I can't quite figure this out.  I suppose if I wrote it to begin with, this it would be pretty easy for me and I wouldn't get a little dizzy every time I try to work it out.

&lt;a href=&quot;http://www.squidclops.net/index.php?page=downloads&amp;#38;act=start&amp;#38;itemid=4&quot;  class=&quot;external&quot; target=&quot;_blank&quot;&gt;This is where I got the original FLA&lt;/a&gt;

Thanks for any help!
Philip</description>
		<content:encoded><![CDATA[<p>First off, thank you for all your articles.  I&#8217;ve bookmarked your blog in my Flash resources and look forward to future posts.</p>
<p>Right now, I&#8217;m trying to do something that relates to this post, but I can&#8217;t quite figure out if the script in your post can solve my problem, or if I need to do something else.</p>
<p>I have a little scroll wheel that the user can click and &#8220;drag&#8221; in a circle.  It works great, except I&#8217;d like it if the user couldn&#8217;t move his mouse futher from or closer to the center of the circle while he&#8217;s pressing the mouse.  Imagine if you have one hand on a steering wheel and are turning it - you&#8217;re hand stays on the same place on the wheel.  That&#8217;s what I want.</p>
<p>I suppose to do this, you&#8217;d find the distance between the mouse and the center of the circle, when the user clicks, and then somehow constrain the mouse to this distance, while still allowing it to move around the circle.  I just don&#8217;t know how to make that happen.</p>
<p>Here is the SWF: <a href="http://www.newthinkmedia.com/scroll_wheel.swf" class="external" target="_blank"><a href='http://www.newthinkmedia.com/scroll_wheel.swf' rel='nofollow'>http://www.newthinkmedia.com/scroll_wheel.swf</a></a><br />
And the AS: <a href="http://www.newthinkmedia.com/circle_as.txt" class="external" target="_blank"><a href='http://www.newthinkmedia.com/circle_as.txt' rel='nofollow'>http://www.newthinkmedia.com/circle_as.txt</a></a></p>
<p>I downloaded this FLA from someone else and modified it slightly - that&#8217;s why I can&#8217;t quite figure this out.  I suppose if I wrote it to begin with, this it would be pretty easy for me and I wouldn&#8217;t get a little dizzy every time I try to work it out.</p>
<p><a href="http://www.squidclops.net/index.php?page=downloads&amp;act=start&amp;itemid=4"  class="external" target="_blank">This is where I got the original FLA</a></p>
<p>Thanks for any help!<br />
Philip
</p>
]]></content:encoded>
				</item>
</channel>
</rss>
