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’s Foundation Actionscript 3.0 Animation: Making Things Move velocity at an angle is explained. I took Keith’s mouse following example demonstrating velocity at an angle and punched it up a small notch.
[August 10 2010 – I updated this to an Actionscript project in Flex Builder 4. ]
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
Chapter05_FollowMouse. For your convenience the Flash CS4 example download is included.
This article shows the code for the Flex project. This Flex version is a spark implementation.
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.
Application Class – Chapter04_SprayPaint
I added user mouse click interaction to control the start and stop movement of the
_arrow sprite. See line 40 and lines 48 to 51.
The movement also stops and starts when the mouse enters and leaves the stage. To accomplish that the stage needed to register a
Event.MOUSE_LEAVE event to detect the mouse leaving the stage. The
stage object is available when the
applicationComplete(...) event occurs. The
MouseEvent.MOUSE_MOVE sufficed to detect the mouse back over the stage. The
_mouseOverStage variable carries the state of the mouse over the stage.
The rotation of the
_arrow sprite is continuous. Gives it a mouse awareness state.
This part of the application represents the Flex UI based in Spark components.