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.
Download files
[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.
<?xml version="1.0" encoding="utf-8"?>
<!--
Application class to demonstrate animation trigonometry to show velocity at an angle.
Mouse position determines the angle.
<p>Author: Lon Hosford https://www.lonhosford.com 908 996 3773</p>
<p>Reference: Keith Peter's Actionscript 3.0 Animation Chapter 5</p>
-->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="400"
applicationComplete="applicationCompleteHandler(event)"
viewSourceURL="srcview/index.html">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
public static const backgroundColor:Number = 0x0000ff;
public static const backgroundBorderColor:Number = 0x666666;
public static const backgroundBorderWeight:Number = 2;
private var _instructions_tf:TextField; // Instructions for user
[Bindable]
private var _lang_instructions:String = "Click to start and stop. Move mouse for animation."
private var _arrow:Arrow; // Animated sprite is an Arrow
private var _speed:Number = 5; // Movement speed
private var _allowMoving:Boolean = false; // Use allowing moving state
private var _mouseOverStage:Boolean = true; // Mouse on the stage state
/**
* Handler for Application applicationComplete event
* */
protected function applicationCompleteHandler(event:FlexEvent):void
{
// Create Arrow object and add to stage. This is animated.
_arrow = new Arrow();
arrowVisualElement.addChild(_arrow);
_arrow.x = (width - _arrow.width ) / 2;
_arrow.y = (height - _arrow.height ) / 2;
stage.addEventListener(MouseEvent.CLICK, mouseClickEventHandler);
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveEventHandler);
stage.addEventListener(Event.ENTER_FRAME, enterFrameEventHandler);
stage.addEventListener(Event.MOUSE_LEAVE, mouseLeaveEventHandler);
}
/**
* MouseEvent.CLICK handler
* */
private function mouseClickEventHandler(event:MouseEvent):void
{
_allowMoving = !_allowMoving;
}
/**
* MouseEvent.MOUSE_MOVE handler
* */
private function mouseMoveEventHandler(event:MouseEvent):void
{
_mouseOverStage = true;
}
/**
* Event.MOUSE_LEAVE handler
* */
private function mouseLeaveEventHandler(event:Event):void
{
_mouseOverStage = false;
}
/**
* Event.ENTER_FRAME handler
* */
private function enterFrameEventHandler(event:Event):void
{
draw();
}
[ad name=”Google Adsense”]
The draw() method on line 77 updates the animation. The dx and dy variables are the distance from the mouse to the registration point of the _arrow sprite. Radians for the angle are computed using the Math.atan2(...) method. The angle in radians is converted for Actionscript rotation property to degrees. These trigonometry formulas are covered in Keith’s book .
The state the user choose to have the mouse follow is tested and if true the moveTo() method on line 98 computes the velocity at an angle discussed in chapter 5.
The _arrow sprite is designed with a center registration point to facilitate the rotation. As a result the _arrow sprite will move until the mouse coordinates reach the registration point. I added the hitTestPoint(...) method on line 105 to adjust so that the movement stops at the edge of the pixels in the _arrow sprite. The result the _arrow sprite’s point comes very close to the mouse versus the center of the _arrow sprite.
/**
* Draw
* */
private function draw():void
{
// Distance of arrow registration point from mouse
var dx:Number = mouseX - _arrow.x ;
var dy:Number = mouseY - _arrow.y ;
// Get angle in radians
var angle:Number = Math.atan2(dy, dx);
// Rotate converting radians to degrees
_arrow.rotation = angle * 180 / Math.PI;
// Is in a mouse following state
if (_allowMoving)
{
// Move based on angle
moveTo(angle);
}
}
/**
* Move arrow
* */
private function moveTo(angle:Number):void
{
// Velocity based on angle
var vx:Number = Math.cos(angle) * _speed;
var vy:Number = Math.sin(angle) * _speed;
// Mouse position overlaps shape and mouse is over a pixel in the object
if (!_arrow.hitTestPoint(mouseX, mouseY, true) && _mouseOverStage)
{
// Add velocity to position
_arrow.x += vx ;
_arrow.y += vy ;
}
}
/**
* Set any stage options per your needs
* */
private function initStage():void
{
stage.scaleMode = StageScaleMode.NO_SCALE;
}
/**
* Instructions for user
* */
private function getInstructions_tf():TextField
{
var tf:TextField = new TextField();
tf.autoSize = TextFieldAutoSize.LEFT;
tf.background = true;
var textFormat:TextFormat = new TextFormat();
textFormat.font = "_typewriter";
tf.defaultTextFormat = textFormat;
tf.text = _lang_instructions;
return tf;
}
]]>
</fx:Script>
[ad name=”Google Adsense”]
This part of the application represents the Flex UI based in Spark components.
<!---
Background for app
-->
<s:BorderContainer id = "background_bc"
width="{width}" height = "{height}"
borderWeight="{backgroundBorderWeight}"
borderColor="{backgroundBorderColor}"
backgroundColor="{backgroundColor}">
<!---
Spark container for Sprite
-->
<s:SpriteVisualElement id="arrowVisualElement" />
</s:BorderContainer>
<!---
Instructions
-->
<s:HGroup horizontalAlign="center" x="0" y="378" width = "100%">
<s:Label text="{_lang_instructions}" color="0xffffff"/>
</s:HGroup>
</s:Application>
[ad name=”Google Adsense”]