{"id":753,"date":"2007-08-24T08:38:46","date_gmt":"2007-08-24T13:38:46","guid":{"rendered":"http:\/\/www.lonhosford.com\/lonblog\/?p=753"},"modified":"2015-07-31T18:25:52","modified_gmt":"2015-07-31T23:25:52","slug":"actionscript-3-animation-following-the-mouse-to-show-velocity-at-an-angle","status":"publish","type":"post","link":"https:\/\/www.lonhosford.com\/lonblog\/2007\/08\/24\/actionscript-3-animation-following-the-mouse-to-show-velocity-at-an-angle\/","title":{"rendered":"Actionscript 3 Animation Following the Mouse to Show Velocity at an Angle"},"content":{"rendered":"<p><strong>By Lon (Alonzo) Hosford<\/strong><\/p>\n<p>See also the same done in HTML5 canvas <a href=\"https:\/\/www.lonhosford.com\/lonblog\/2011\/10\/23\/html5-canvas-based-animation-rotate-arrow-to-mouse-position\/\">HTML5 Canvas Based Animation Rotate Arrow To Mouse Position<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft\" style=\"margin-right: 5px;\" src=\"http:\/\/lh4.ggpht.com\/_e5pwU0LJbN8\/THPKlHNIYxI\/AAAAAAAAFrw\/SBXKl80g7Sw\/s288\/Chapter05_Follow_Mouse_AS3_8-19-2010%208-51-32%20AM.png\" alt=\"\" width=\"288\" height=\"243\" \/>In chapter 5 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> velocity at an angle is explained. I took Keith&#8217;s mouse following example demonstrating velocity at an angle and punched it up a small notch.<\/p>\n<p><strong>Download files<\/strong><br \/>\n[August 10 2010 &#8211; I updated this to an Actionscript project in Flex Builder 4. ]<\/p>\n<p>You 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>Chapter05_FollowMouse<\/code>. For your convenience the Flash CS4 example download is included.<\/p>\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\" class=\"  \" title=\"Keith Peters AS3 Animation\" src=\"http:\/\/lh4.ggpht.com\/_e5pwU0LJbN8\/TF1xrKyqv4I\/AAAAAAAAFqI\/IFBuU9b7ijs\/s800\/51PvDwNRxYL._SL160_.jpg\" alt=\"Keith Peters AS3 Animation\" width=\"134\" height=\"160\" \/><\/a><figcaption class=\"wp-caption-text\">Learn More<\/figcaption><\/figure>\n<ul style=\"padding-top: 10px;\">\n<li><a href=\"https:\/\/www.lonhosford.com\/content\/flex\/animation\/keith_peters_as3_animation\/Chapter05_FollowMouse_AS3.zip\">Flex Builder 4 Actionscript Project<\/a><\/li>\n<li><a href=\"https:\/\/www.lonhosford.com\/content\/flex\/animation\/keith_peters_as3_animation\/Chapter05_FollowMouse_Flex.fxp\">Flex Builder 4 Flex Project<\/a><\/li>\n<li><a href=\"https:\/\/www.lonhosford.com\/content\/flex\/animation\/keith_peters_as3_animation\/Chapter05_FollowMouse_Flash_CS4.zip\">Flash CS4<\/a><\/li>\n<\/ul>\n<p>This article shows the code for the Flex project. This Flex version is a spark implementation.<\/p>\n<p>The arrow will follow the mouse around the stage. It will stop following when requested and start again with a mouse click on the stage. It also waits patiently when the mouse leaves the stage. The arrow gets real frustrated when you put the mouse over it. It always points towards the mouse when the mouse is over the stage.<\/p>\n<p><strong>Application Class &#8211; Chapter04_SprayPaint<\/strong><br \/>\nI added user mouse click interaction to control the start and stop movement of the <code>_arrow<\/code> sprite. See line 40  and lines 48 to 51. <\/p>\n<p>The movement also stops and starts when the mouse enters and leaves the stage. To accomplish that the stage needed to register a <code>Event.MOUSE_LEAVE<\/code> event to detect the mouse leaving the stage. The <code>stage<\/code> object is available when the <code>applicationComplete(...) <\/code>event occurs. The <code>MouseEvent.MOUSE_MOVE<\/code> sufficed to detect the mouse back over the stage. The <code>_mouseOverStage<\/code> variable carries the state of the mouse over the stage.<\/p>\n<p>The rotation of the <code>_arrow<\/code> sprite is continuous. Gives it a mouse awareness state.<\/p>\n<pre class=\"brush: as3; highlight: [32]; 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 to demonstrate animation trigonometry to show velocity at an angle. \r\n    Mouse position determines the angle. \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 5&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   applicationComplete=&quot;applicationCompleteHandler(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\tpublic static const backgroundColor:Number = 0x0000ff;\r\n\t\t\tpublic static const backgroundBorderColor:Number = 0x666666;\r\n\t\t\tpublic static const backgroundBorderWeight:Number = 2;\r\n\t\t\t\r\n\t\t\tprivate var _instructions_tf:TextField;\t\t\t\t\t\t\/\/ Instructions for user\r\n\t\t\t&#x5B;Bindable]\r\n\t\t\tprivate var _lang_instructions:String = &quot;Click to start and stop. Move mouse for animation.&quot;\r\n\t\t\tprivate var _arrow:Arrow;\t\t\t\t\t\t\t\t\t\/\/ Animated sprite is an Arrow \r\n\t\t\tprivate var _speed:Number = 5;\t\t\t\t\t\t\t\t\/\/ Movement speed\r\n\t\t\tprivate var _allowMoving:Boolean = false;\t\t\t\t\t\/\/ Use allowing moving state\r\n\t\t\tprivate var _mouseOverStage:Boolean = true;\t\t\t\t\t\/\/ Mouse on the stage state\r\n\t\t\t\r\n\t\t\t\/**\r\n\t\t\t * Handler for Application applicationComplete event\r\n\t\t\t * *\/\r\n\t\t\tprotected function applicationCompleteHandler(event:FlexEvent):void\r\n\t\t\t{\r\n\t\t\t\t\/\/ Create Arrow object and add to stage. This is animated.\r\n\t\t\t\t_arrow = new Arrow();\r\n\t\t\t\tarrowVisualElement.addChild(_arrow);\r\n\t\t\t\t_arrow.x = (width - _arrow.width ) \/ 2;\r\n\t\t\t\t_arrow.y = (height - _arrow.height ) \/ 2;\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\tstage.addEventListener(MouseEvent.CLICK, mouseClickEventHandler);\r\n\t\t\t\tstage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveEventHandler);\r\n\t\t\t\tstage.addEventListener(Event.ENTER_FRAME, enterFrameEventHandler);\r\n\t\t\t\tstage.addEventListener(Event.MOUSE_LEAVE, mouseLeaveEventHandler);\r\n\t\t\t}\r\n\t\t\t\/**\r\n\t\t\t * MouseEvent.CLICK handler\r\n\t\t\t * *\/\r\n\t\t\tprivate function mouseClickEventHandler(event:MouseEvent):void\r\n\t\t\t{\r\n\t\t\t\t_allowMoving = !_allowMoving;\r\n\t\t\t}\r\n\t\t\t\/**\r\n\t\t\t * MouseEvent.MOUSE_MOVE handler\r\n\t\t\t * *\/\r\n\t\t\tprivate function mouseMoveEventHandler(event:MouseEvent):void\r\n\t\t\t{\r\n\t\t\t\t_mouseOverStage = true;\r\n\t\t\t}\r\n\t\t\t\/**\r\n\t\t\t * Event.MOUSE_LEAVE handler\r\n\t\t\t * *\/\r\n\t\t\tprivate function mouseLeaveEventHandler(event:Event):void\r\n\t\t\t{\r\n\t\t\t\t_mouseOverStage = false;\r\n\t\t\t}\r\n\t\t\t\r\n\t\t\t\/**\r\n\t\t\t * Event.ENTER_FRAME handler\r\n\t\t\t * *\/\r\n\t\t\tprivate function enterFrameEventHandler(event:Event):void\r\n\t\t\t{\r\n\t\t\t\tdraw();\r\n\t\t\t}\r\n<\/pre>\n<p>[ad name=&#8221;Google Adsense&#8221;]<br \/>\nThe <code>draw()<\/code> method on line 77 updates the animation.  The <code>dx<\/code> and <code>dy<\/code> variables are the distance from the mouse to the registration point of the <code>_arrow<\/code> sprite. Radians for the angle are computed using the <code>Math.atan2(...)<\/code> method. The angle in radians is converted for Actionscript <code>rotation<\/code> property to degrees. These trigonometry formulas are covered in <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\">Keith&#8217;s book<\/a> . <\/p>\n<p>The state the user choose to have the mouse follow is tested and if true the <code>moveTo()<\/code> method on line 98 computes the velocity at an angle discussed in <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\">chapter 5<\/a>. <\/p>\n<p>The <code>_arrow<\/code> sprite is designed with a center registration point to facilitate the rotation. As a result the <code>_arrow<\/code> sprite will move until the mouse coordinates reach the registration point. I added the <code>hitTestPoint(...)<\/code> method on line 105 to adjust so that the movement stops at the edge of the pixels in the <code>_arrow<\/code> sprite. The result the <code>_arrow<\/code> sprite&#8217;s point comes very close to the mouse versus the center of the <code>_arrow<\/code> sprite.<\/p>\n<pre class=\"brush: as3; first-line: 74; title: ; wrap-lines: false; notranslate\" title=\"\">\r\n\t\t\t\/**\r\n\t\t\t * Draw\r\n\t\t\t * *\/\r\n\t\t\tprivate function draw():void\r\n\t\t\t{\t\t\r\n\t\t\t\t\/\/ Distance of arrow registration point from mouse\r\n\t\t\t\tvar dx:Number = mouseX - _arrow.x ;\r\n\t\t\t\tvar dy:Number = mouseY - _arrow.y ;\r\n\t\t\t\t\r\n\t\t\t\t\/\/ Get angle in radians\r\n\t\t\t\tvar angle:Number = Math.atan2(dy, dx);\r\n\t\t\t\t\/\/ Rotate converting radians to degrees\r\n\t\t\t\t_arrow.rotation = angle * 180 \/ Math.PI;\r\n\t\t\t\t\r\n\t\t\t\t\/\/ Is in a mouse following state\r\n\t\t\t\tif (_allowMoving)\r\n\t\t\t\t{\r\n\t\t\t\t\t\/\/ Move based on angle\r\n\t\t\t\t\tmoveTo(angle);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\t\/**\r\n\t\t\t * Move arrow\r\n\t\t\t * *\/\r\n\t\t\tprivate function moveTo(angle:Number):void\r\n\t\t\t{\r\n\t\t\t\t\/\/ Velocity based on angle\r\n\t\t\t\tvar vx:Number = Math.cos(angle) * _speed;\r\n\t\t\t\tvar vy:Number = Math.sin(angle) * _speed;\r\n\t\t\t\t\r\n\t\t\t\t\/\/ Mouse position overlaps shape and mouse is over a pixel in the object\r\n\t\t\t\tif (!_arrow.hitTestPoint(mouseX, mouseY, true) &amp;&amp; _mouseOverStage)\r\n\t\t\t\t{\r\n\t\t\t\t\t\/\/ Add velocity to position\r\n\t\t\t\t\t_arrow.x += vx ;\r\n\t\t\t\t\t_arrow.y += vy ;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\t\/**\r\n\t\t\t * Set any stage options per your needs\r\n\t\t\t * *\/\r\n\t\t\tprivate function initStage():void \r\n\t\t\t{\r\n\t\t\t\tstage.scaleMode = StageScaleMode.NO_SCALE;\r\n\t\t\t}\r\n\t\t\t\/**\r\n\t\t\t * Instructions for user\r\n\t\t\t * *\/\r\n\t\t\tprivate function getInstructions_tf():TextField \r\n\t\t\t{\r\n\t\t\t\tvar tf:TextField = new TextField();\r\n\t\t\t\ttf.autoSize = TextFieldAutoSize.LEFT;\t\t\t\r\n\t\t\t\ttf.background = true;\r\n\t\t\t\tvar textFormat:TextFormat = new TextFormat();\r\n\t\t\t\ttextFormat.font = &quot;_typewriter&quot;;\r\n\t\t\t\ttf.defaultTextFormat = textFormat;\r\n\t\t\t\ttf.text = _lang_instructions;\r\n\t\t\t\treturn tf;\r\n\t\t\t}\r\n\t\t]]&gt;\r\n\t&lt;\/fx:Script&gt;\r\n<\/pre>\n<p>[ad name=&#8221;Google Adsense&#8221;]<br \/>\nThis part of the application represents the Flex UI based in Spark components.<\/p>\n<pre class=\"brush: as3; first-line: 135; title: ; wrap-lines: false; notranslate\" title=\"\">\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&lt;!--- \r\n\tInstructions \r\n\t--&gt; \r\n\t&lt;s:HGroup  horizontalAlign=&quot;center&quot; x=&quot;0&quot; y=&quot;378&quot; width = &quot;100%&quot;&gt;\r\n\t\t&lt;s:Label text=&quot;{_lang_instructions}&quot; color=&quot;0xffffff&quot;\/&gt;\r\n\t&lt;\/s:HGroup&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;]<\/p>\n<div id=\"fb-root\"><\/div>\n<p><script src=\"https:\/\/connect.facebook.net\/en_US\/all.js#appId=105467682877384&amp;xfbml=1\"><\/script><fb:like href=\"https:\/\/www.lonhosford.com\/lonblog\/2007\/08\/24\/actionscript-3-animation-following-the-mouse-to-show-velocity-at-an-angle\/\" send=\"true\" width=\"450\" show_faces=\"true\" font=\"\"><\/fb:like><\/p>\n<div id=\"fb-root\"><\/div>\n<p><script src=\"https:\/\/connect.facebook.net\/en_US\/all.js#xfbml=1\"><\/script><fb:comments href=\"https:\/\/www.lonhosford.com\/lonblog\/2007\/08\/24\/actionscript-3-animation-following-the-mouse-to-show-velocity-at-an-angle\/\" num_posts=\"2\" width=\"500\"><\/fb:comments><\/p>\n","protected":false},"excerpt":{"rendered":"<p>By Lon (Alonzo) Hosford See also the same done in HTML5 canvas HTML5 Canvas Based Animation Rotate Arrow To Mouse Position In chapter 5 of Keith Peter&#8217;s Foundation Actionscript 3.0 Animation: Making Things Move velocity at an angle is explained. I took Keith&#8217;s mouse following example demonstrating velocity at an angle and punched it up [&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,12,30,3,9,49,46],"class_list":["post-753","post","type-post","status-publish","format-standard","hentry","category-general","tag-actionscript","tag-air-adobe-integrated-runtime","tag-animation","tag-adobe-flash","tag-flex","tag-keith-peters","tag-spritevisualelement"],"_links":{"self":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts\/753","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=753"}],"version-history":[{"count":23,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts\/753\/revisions"}],"predecessor-version":[{"id":3709,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts\/753\/revisions\/3709"}],"wp:attachment":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/media?parent=753"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/categories?post=753"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/tags?post=753"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}