{"id":704,"date":"2007-09-19T07:18:58","date_gmt":"2007-09-19T12:18:58","guid":{"rendered":"http:\/\/www.lonhosford.com\/lonblog\/?p=704"},"modified":"2015-07-31T18:25:52","modified_gmt":"2015-07-31T23:25:52","slug":"actionscript-3-animating-sprite-rotation-following-mouse-movement","status":"publish","type":"post","link":"https:\/\/www.lonhosford.com\/lonblog\/2007\/09\/19\/actionscript-3-animating-sprite-rotation-following-mouse-movement\/","title":{"rendered":"Actionscript 3 Animating Sprite Rotation Following Mouse Movement"},"content":{"rendered":"<p><strong>By Lon (Alonzo) Hosford<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\" src=\"http:\/\/lh4.ggpht.com\/_e5pwU0LJbN8\/TG0pGQH5FoI\/AAAAAAAAFq8\/DGhkFMTWrNQ\/s144\/Chapter03_Rotation_AS3_8-19-2010%208-51-32%20AM.png\" class=\"alignleft\" width=\"144\" height=\"144\" \/>This my own version of  of Keith Peter&#8217;s <a href=\"http:\/\/www.amazon.com\/gp\/product\/1590597915?ie=UTF8&amp;tag=hosfordusa&amp;linkCode=as2&amp;camp=1789&amp;creative=9325&amp;creativeASIN=1590597915\">Foundation Actionscript 3.0 Animation: Making Things Move<\/a> chapter 3 implementation of sprite rotation following a mouse. <\/p>\n<p><strong>Download files<\/strong><br \/>\n[August 10 2010 &#8211; I updated this to an Actionscript project in Flex Builder 4. ]<br \/>\n<figure style=\"width: 134px\" class=\"wp-caption alignright\"><a href=\"http:\/\/www.amazon.com\/gp\/product\/1590597915?ie=UTF8&amp;tag=hosfordusa&amp;linkCode=as2&amp;camp=1789&amp;creative=9325&amp;creativeASIN=1590597915\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\"  src=\"http:\/\/lh4.ggpht.com\/_e5pwU0LJbN8\/TF1xrKyqv4I\/AAAAAAAAFqI\/IFBuU9b7ijs\/s800\/51PvDwNRxYL._SL160_.jpg\" alt=\"Keith Peters AS3 Animation\" width=\"134\" height=\"160\" class=\"  \" title=\"Keith Peters AS3 Animation\"\/><\/a><figcaption class=\"wp-caption-text\">Learn More<\/figcaption><\/figure><br \/>\nYou can build this with the free Flex SDK by using the code in the src folder. Same for Flash CS3 and later versions. You need to create a Flash Document in the src folder and set the document class to <code>Chapter03_Rotation_AS3<\/code>. For your convenience the Flash CS4 example download is included.<\/p>\n<ul style = \"padding-top:10px\">\n<li><a href=\"https:\/\/www.lonhosford.com\/content\/flex\/animation\/keith_peters_as3_animation\/Chapter03_Rotation_AS3.zip\">Flex Builder 4 Actionscript Project<\/a><\/li>\n<li><a href=\"https:\/\/www.lonhosford.com\/content\/flex\/animation\/keith_peters_as3_animation\/Chapter03_Rotation_Flex.fxp\">Flex Builder 4 Flex Project<\/a><\/li>\n<li><a href=\"https:\/\/www.lonhosford.com\/content\/flex\/animation\/keith_peters_as3_animation\/Chapter03_Rotation_AS3_Flash_CS4.zip\">Flash CS4<\/a><\/li>\n<\/ul>\n<p>This article shows the code for the Flex project.<\/p>\n<p><strong>Application Class &#8211; Chapter03_Rotation_Flex<\/strong><br \/>\nThis Flex version is a spark implementation. The <code>SpriteVisualElement<\/code> component  shown on line 51 is used to add the code to the application display on line 31.<\/p>\n<pre class=\"brush: as3; highlight: [31,51]; title: ; wrap-lines: false; notranslate\" title=\"\">\r\n&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;\r\n&lt;!--\r\n\tApplication class for showing sprite rotation following mouse movement. \r\n\t&lt;p&gt;Author: Lon Hosford https:\/\/www.lonhosford.com 908 996 3773&lt;\/p&gt;\r\n    &lt;p&gt;Reference: Keith Peter's Actionscript 3.0 Animation Chapter 3&lt;\/p&gt;\r\n\t\r\n--&gt;\r\n&lt;s:Application xmlns:fx=&quot;http:\/\/ns.adobe.com\/mxml\/2009&quot; \r\n\t\t\t   xmlns:s=&quot;library:\/\/ns.adobe.com\/flex\/spark&quot; \r\n\t\t\t   xmlns:mx=&quot;library:\/\/ns.adobe.com\/flex\/mx&quot; width=&quot;400&quot; height=&quot;400&quot;\r\n\t\t\t   creationComplete=&quot;creationCompleteHandler(event)&quot; \r\n\t\t\t   viewSourceURL=&quot;srcview\/index.html&quot;&gt;\r\n\t&lt;fx:Script&gt;\r\n\t\t&lt;!&#x5B;CDATA&#x5B;\r\n\t\t\timport mx.events.FlexEvent;\r\n\t\t\t\r\n\t\t\t\/\/ Properties for background\r\n\t\t\tprivate static const backgroundColor:Number = 0x0000ff;\r\n\t\t\tprivate static const backgroundBorderColor:Number = 0x666666;\r\n\t\t\tprivate static const backgroundBorderWeight:Number = 2;\r\n\t\t\t\/**\r\n\t\t\t * Handler for Application creationComplete event\r\n\t\t\t * *\/\r\n\t\t\tprotected function creationCompleteHandler(event:FlexEvent):void\r\n\t\t\t{\r\n\t\t\t\t\/\/ Create an Arrow object\r\n\t\t\t\tvar arrow:Arrow = new Arrow();\r\n\t\t\t\t\/\/ Wrap arrow object into a RotateSpriteToMouse object\r\n\t\t\t\tvar rotateToMouse:RotateSpriteToMouse = new RotateSpriteToMouse(arrow);\r\n\t\t\t\t\/\/ Add rotateToMouse Sprite to a SpriteVisualElement\r\n\t\t\t\tarrowVisualElement.addChild(rotateToMouse);\r\n\t\t\t\t\/\/ Center the SpriteVisualElement\r\n\t\t\t\tarrowVisualElement.x = background_bc.width \/ 2;\r\n\t\t\t\tarrowVisualElement.y = background_bc.height \/ 2;\r\n\t\t\t}\r\n\r\n\t\t]]&gt;\r\n\t&lt;\/fx:Script&gt;\r\n\t&lt;!--- \r\n\tBackground for app \r\n\t--&gt; \r\n\t&lt;s:BorderContainer id = &quot;background_bc&quot;\r\n\t\t\t\t\t   width=&quot;{width}&quot; height = &quot;{height}&quot;\r\n\t\t\t\t\t   borderWeight=&quot;{backgroundBorderWeight}&quot;\r\n\t\t\t\t\t   borderColor=&quot;{backgroundBorderColor}&quot;\r\n\t\t\t\t\t   backgroundColor=&quot;{backgroundColor}&quot;&gt;\r\n\r\n\t\t&lt;!--- \r\n\t\tSpark container for Sprite \r\n\t\t--&gt; \r\n\t\t&lt;s:SpriteVisualElement id=&quot;arrowVisualElement&quot; \/&gt;\r\n\r\n\t&lt;\/s:BorderContainer&gt;\r\n\t\t\t\t\t   \r\n&lt;\/s:Application&gt;\r\n<\/pre>\n<p>[ad name=&#8221;Google Adsense&#8221;]<br \/>\n<strong>RotateSpriteToMouse Class<\/strong><br \/>\nThis is the class that does the work. Listening to the <code>Event.ENTER_FRAME<\/code> event leads to the <code>update_rotation()<\/code> method that does the work of updating the rotation.<\/p>\n<pre class=\"brush: as3; title: ; wrap-lines: false; notranslate\" title=\"\">\r\npackage\r\n{\r\n\timport flash.display.Sprite;\r\n\timport flash.events.Event;\r\n\t\/**\r\n\t * Rotates sprite to mouse position\r\n\t * *\/\r\n\tpublic class RotateSpriteToMouse extends Sprite\r\n\t{\r\n\t\tprivate var _sprite_to_rotate:Sprite;\t\/\/ Sprite to rotate to mouse\r\n\t\t\/**\r\n\t\t * Constructor \r\n\t\t * @param sprite_to_rotate The sprite to rotate\r\n\t\t * *\/\r\n\t\tpublic function RotateSpriteToMouse(sprite_to_rotate:Sprite)\r\n\t\t{\r\n\t\t\t_sprite_to_rotate = sprite_to_rotate;\r\n\t\t\taddChild(_sprite_to_rotate);\r\n\t\t\taddEventListener(Event.ENTER_FRAME, enterFrameEventHandler);\r\n\t\t}\r\n\t\t\/**\r\n\t\t * The event handler for Event.ENTER_FRAME\r\n\t\t * *\/\r\n\t\tprivate function enterFrameEventHandler(event:Event):void\r\n\t\t{\r\n\t\t\tupdate_rotation();\r\n\t\t}\r\n\t\t\/**\r\n\t\t * Updates the rotation of the _sprite_to_rotate\r\n\t\t * *\/\r\n\t\tprivate function update_rotation():void\r\n\t\t{\r\n\t\t\t\/\/ Triangle adjacent angle side distance for the x value.\r\n\t\t\tvar dx:Number = mouseX - _sprite_to_rotate.x;\r\n\t\t\t\/\/ Triangle opposite angle side distance for the y value.\r\n\t\t\tvar dy:Number = mouseY - _sprite_to_rotate.y;\r\n\t\t\t\/\/ Compute angle in radians from the sprite to the mouse position.\r\n\t\t\tvar radians:Number = Math.atan2(dy, dx);\r\n\t\t\t\/\/ Convert radians to degrees\r\n\t\t\t_sprite_to_rotate.rotation = radians * 180 \/ Math.PI;\r\n\t\t}\r\n\t}\r\n}\r\n<\/pre>\n<p><strong>Arrow Class<\/strong><br \/>\nSimple arrow sprite that Keith wrote. Key here is the center registration point.<\/p>\n<pre class=\"brush: as3; title: ; wrap-lines: false; notranslate\" title=\"\">\r\npackage\r\n{\r\n\timport flash.display.Sprite;\r\n\t\/**\r\n\t * Creates an arrow sprite with fixed dimensions\r\n\t * *\/\r\n\tpublic class Arrow extends Sprite\r\n\t{\r\n\t\tpublic function Arrow() \r\n\t\t{\r\n\t\t\tdraw();\r\n\t\t}\r\n\t\t\/**\r\n\t\t * Draw the arrow\r\n\t\t * *\/\r\n\t\tprivate function draw():void\r\n\t\t{\r\n\t\t\tgraphics.lineStyle(1, 0, 1);\r\n\t\t\tgraphics.beginFill(0xffff00);\r\n\t\t\tgraphics.moveTo(-50, -25);\r\n\t\t\tgraphics.lineTo(0, -25);\r\n\t\t\tgraphics.lineTo(0, -50);\r\n\t\t\tgraphics.lineTo(50, 0);\r\n\t\t\tgraphics.lineTo(0, 50);\r\n\t\t\tgraphics.lineTo(0, 25);\r\n\t\t\tgraphics.lineTo(-50, 25);\r\n\t\t\tgraphics.lineTo(-50, -25);\r\n\t\t\tgraphics.endFill();\r\n\t\t}\r\n\t}\r\n\t\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>By Lon (Alonzo) Hosford This my own version of of Keith Peter&#8217;s Foundation Actionscript 3.0 Animation: Making Things Move chapter 3 implementation of sprite rotation following a mouse. Download files [August 10 2010 &#8211; I updated this to an Actionscript project in Flex Builder 4. ] You can build this with the free Flex SDK [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[19,30,47,9,49,46],"class_list":["post-704","post","type-post","status-publish","format-standard","hentry","category-general","tag-actionscript","tag-animation","tag-bordercontainer","tag-flex","tag-keith-peters","tag-spritevisualelement"],"_links":{"self":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts\/704","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/comments?post=704"}],"version-history":[{"count":29,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts\/704\/revisions"}],"predecessor-version":[{"id":3708,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts\/704\/revisions\/3708"}],"wp:attachment":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/media?parent=704"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/categories?post=704"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/tags?post=704"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}