By Lon (Alonzo) Hosford
This my own version of of Keith Peter’s Foundation Actionscript 3.0 Animation: Making Things Move chapter 3 implementation of sprite rotation following a mouse.
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 Chapter03_Rotation_AS3
. For your convenience the Flash CS4 example download is included.
This article shows the code for the Flex project.
Application Class – Chapter03_Rotation_Flex
This Flex version is a spark implementation. The SpriteVisualElement
component shown on line 51 is used to add the code to the application display on line 31.
<?xml version="1.0" encoding="utf-8"?> <!-- Application class for showing sprite rotation following mouse movement. <p>Author: Lon Hosford https://www.lonhosford.com 908 996 3773</p> <p>Reference: Keith Peter's Actionscript 3.0 Animation Chapter 3</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" creationComplete="creationCompleteHandler(event)" viewSourceURL="srcview/index.html"> <fx:Script> <![CDATA[ import mx.events.FlexEvent; // Properties for background private static const backgroundColor:Number = 0x0000ff; private static const backgroundBorderColor:Number = 0x666666; private static const backgroundBorderWeight:Number = 2; /** * Handler for Application creationComplete event * */ protected function creationCompleteHandler(event:FlexEvent):void { // Create an Arrow object var arrow:Arrow = new Arrow(); // Wrap arrow object into a RotateSpriteToMouse object var rotateToMouse:RotateSpriteToMouse = new RotateSpriteToMouse(arrow); // Add rotateToMouse Sprite to a SpriteVisualElement arrowVisualElement.addChild(rotateToMouse); // Center the SpriteVisualElement arrowVisualElement.x = background_bc.width / 2; arrowVisualElement.y = background_bc.height / 2; } ]]> </fx:Script> <!--- 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> </s:Application>
[ad name=”Google Adsense”]
RotateSpriteToMouse Class
This is the class that does the work. Listening to the Event.ENTER_FRAME
event leads to the update_rotation()
method that does the work of updating the rotation.
package { import flash.display.Sprite; import flash.events.Event; /** * Rotates sprite to mouse position * */ public class RotateSpriteToMouse extends Sprite { private var _sprite_to_rotate:Sprite; // Sprite to rotate to mouse /** * Constructor * @param sprite_to_rotate The sprite to rotate * */ public function RotateSpriteToMouse(sprite_to_rotate:Sprite) { _sprite_to_rotate = sprite_to_rotate; addChild(_sprite_to_rotate); addEventListener(Event.ENTER_FRAME, enterFrameEventHandler); } /** * The event handler for Event.ENTER_FRAME * */ private function enterFrameEventHandler(event:Event):void { update_rotation(); } /** * Updates the rotation of the _sprite_to_rotate * */ private function update_rotation():void { // Triangle adjacent angle side distance for the x value. var dx:Number = mouseX - _sprite_to_rotate.x; // Triangle opposite angle side distance for the y value. var dy:Number = mouseY - _sprite_to_rotate.y; // Compute angle in radians from the sprite to the mouse position. var radians:Number = Math.atan2(dy, dx); // Convert radians to degrees _sprite_to_rotate.rotation = radians * 180 / Math.PI; } } }
Arrow Class
Simple arrow sprite that Keith wrote. Key here is the center registration point.
package { import flash.display.Sprite; /** * Creates an arrow sprite with fixed dimensions * */ public class Arrow extends Sprite { public function Arrow() { draw(); } /** * Draw the arrow * */ private function draw():void { graphics.lineStyle(1, 0, 1); graphics.beginFill(0xffff00); graphics.moveTo(-50, -25); graphics.lineTo(0, -25); graphics.lineTo(0, -50); graphics.lineTo(50, 0); graphics.lineTo(0, 50); graphics.lineTo(0, 25); graphics.lineTo(-50, 25); graphics.lineTo(-50, -25); graphics.endFill(); } } }