Updated Demo Of AS3 Radial/Circular Mouse Tracking (I.E. Its a compass that follows your cursor)

I noticed that a lot of users were downloading my AS3 compass recently, and when I had originally made that post I had intended on updating it sometime in the near future. When I noticed the recent rise in downloads I figured now was as good a time as any to do that update. I could just update my original post, but to be honest that is bad for SEO purposes, as I always want more content, so please bear with me here. (Plus since how the two files calculate motion is different ways I figured it would not hurt to leave the other up in case someone else is already working with that code, or just preferred its style of movement.)

So what is new in this update you ask. Well I improved my original algorithm and code to make it cleaner, easier to follow and overall more efficient. I tweaked a few settings for performance purposes, completely revamped the images to be completely vector based. (This site is going to get realigned soon, so it will probably be the first of many files I will generate for that purpose. I was using this site for business and personal purposes, but I found that was too cumbersome, hence the lack of links etc. My business site, SEOMACO is also in development, but I digress.) I also simplified my rotational control by using tweener. It is not as smooth as it used to be because I removed a lot of the nested ifs, but I personally think that it acts much more compass like now. (I.E. jerking slightly and kind of wandering at times.)




You are missing some Flash content that should appear here! Perhaps your browser cannot display it, or maybe it did not initialize correctly.



So here are the main differences ins simple list form:
Reduced the movie file size from 52Kb to 26Kb.
Increased image and stage size form 252x252 to 500x500.
Reduced memory usage by 10%.
Improved motion when the user's mouse leaves the stage area.
Improved overall tweening.
Changed images from raster type to vector.
Made made much simpler to read and work with.
Improved in file commenting and documentation.

Here is the link to my original compass post (I will keep it up and available to anyone that is interested in looking over it. I may include some of that tracking code in a later revision of this version as a tokenized option; but I may not so no promises.)

******** WARNING ***** I did include some of the tweener libraries in this source, but I also removed some as well to conserve bandwidth. If you want to add extra filters other than blur just go to tweener's website and download the newest revision and unpack those files into the same folder. Also I was not a jerk, and I did not embed my name into anything. I kept all the layers separate for you to mess with, but do be aware that I am planning on using some version of this in my own site, so please try to change it up a bit if you plan on using it. That is really my only request.

So now that all of that is over with below is the code and all the files you will need to render this demo.

package 
{
    import flash.display.*; // Normal flash functions
    import flash.events.*;
 
	import caurina.transitions.Tweener;  // Tweener specifc
	import caurina.transitions.properties.FilterShortcuts;
 
 
	FilterShortcuts.init(); // Initializes Tweener
 
 
 
    public class Main extends Sprite
    {
 
		// ************************* Required For Operations **************************************
	    var distY:Number; // Distance on the Y axis that the needle must travel
        var distX:Number; // Distance on the X axis that the needle must travel
		private var delay:Number; // Delay that is used in all the tween functions
		var i:Number = 0; // Simple token for disabling the animation that occurs when the file loads
		public var needleMC:Sprite; // This is the name of the object that you want to rotate (look in properties)
 
 
 
		// ************************* User Defined Options **************************************
		private var delayM:Number = 3.5; // A multiplier for delaying the needle movement (larger = slower movement)
		private var delayB:Number = .8; // Offset for the blur. It is multiplied by 2, so if this is .25, and delayM 3.5, your blur lasts 3 seconds
        var blurX:Number = 1.5; // The number of pixels the needle will blur while moving on the X axis
		var blurY:Number = 1.5; // The number of pixels the needle will blur while moving on the Y axis
 
        public function Main() {  // Loads Main
            init();
        }// end function
 
        private function init() : void { // Initializes listeners
            addEventListeners(); // This adds the functions you want running at start
        }// end function
 
		private function addEventListeners() : void { // Itemized start functions, I tried to keep these in order
            addEventListener(Event.ENTER_FRAME, __onMouseStart);  // When the movie loads first this is the first function run
        	addEventListener(MouseEvent.MOUSE_OUT, __onMouseOut); // Watches for user's mouse leaving the stage
            addEventListener(MouseEvent.MOUSE_DOWN, __onMouseDown); // Watches for the user's click
        }// end function
 
        private function __onMouseStart(param1:Event) : void {  // First function
			if ( i == 0) { // Makes the needle animate upright, then disables itself with token
         		__trackMouse (0, 90); 
				i = 1;
			}
			addEventListener(MouseEvent.MOUSE_OVER, __onMouseOver);  // Watching for user's mouse
        }// end function
 
	  	private function __onMouseOver(param1:MouseEvent) : void { // Starts looking for mouse to enter the stage area
            distX = needleMC.x - mouseX; // Compares mouse's X coordinate to the Needle's X coordinate
            distY = needleMC.y - mouseY; // Compares mouse's Y coordinate to the Needle's Y coordinate
			__trackMouse (distX, distY); //  Sends the locational information to our mouse tracking function
        }// end function
 
        private function __trackMouse(mX:Number, mY:Number) : void { // All Functions for calculating needle movement
            var radians:Number = Math.atan2(mY, mX);  // Converts out the X and Y locations to radians
            var targetRotation:Number = radians / Math.PI * 180;   // And then out to degrees of movement
			delay = Math.random() + 1 * delayM; // Calculates the delay
			__rotateNeedle(targetRotation, delay);  // Passes delay and movement info to rotation function
        }// end function
 
        private function __rotateNeedle(rN:Number, dY:Number) : void { // Rotates needle a certain distance (rN) in set a mount of time (dY) 
			Tweener.addTween(needleMC, {rotation: rN, time: dY, delay: 0, transition:"easeOutElastic"}); // Elastic out causes our bounce at then end
			if (rN > 0){
				__blurN(); // If the needle needs to rotate start blur function
			}
		}
 
		function __blurN() : void { // Blurs needle while it is moving
			var blurDelay = delay/2 - delayB; // Uses the delay we set above to kill the blur before the needle settles completely
			Tweener.addTween(needleMC, {_Blur_blurX: blurX, _Blur_blurY: blurY , time: blurDelay, delay: 0}); // Starts blur after a delay of 0 seconds
			Tweener.addTween(needleMC, {_Blur_blurX: 0, _Blur_blurY: 0, time: blurDelay, delay: blurDelay}); // Ends Blur
        }// end function
 
        private function __onMouseOut(param1:MouseEvent) : void { // Resets the needle position when user's mouse leaves stage
			__trackMouse (0, 90);
        }// end function
 
        private function __onMouseDown(param1:MouseEvent) : void { // I left this in in case someone wants to use this as a button
            // I may update this later and include an animation script that would occur before launching the link
		return;
        }// end function
    }
}

Fairly nice and short really. I tried to cover most anything I thought people might have questions over, but if I missed something please let me know. Thanks for visiting and enjoy.
- Andrew N. Price

AttachmentSize
Compass_Update_CS3.fla549 KB
Compass_AS3_1.1.zip391.19 KB

Comments

lol thanks for pointing that out I will make sure to fix that Carla. I tend to do these things kind of late, and well sometimes my quality control could use a little work. (I can be bad with typos in general if I am tired.) I went through and attached CS3 compatible FLA files to all of my newer demos so hopefully that will fix your issues. I am sorry I did not do that before, but to be honest I forgot about the CS3 CS4 issue. If you have any further issues please do let me know.

Sorry about the lack of contact info. I am currently redoing the theme for this site. This one is kind of hacked together and breaks sometimes, so it has been on my to do list for a while. I hope to finish the revamp of this site over this next weekend, and I had planned on making sure to add contact information then. Hence there is no post this week :(... although I do have one ready as part of my revamp that I am kind of looking forward to. (Populating flash menus with data from a SQL server via php.) I am not sure how exciting other people will find it, but I guess we will see. Anyways thanks for stopping by, and I hope this resolves your issues.

-Andrew N. Price

Andrew, I also cannot open the .fla file on this one, too, along with the updated clouds perlin noise example.

Andrew, I can't find where to email you directly, or I'm just overlooking it somehow. LOVE THE COMPASS!!!! I just happened to notice, though, concerning the compass in your website logo. It says Web Developtment. The extra T jumped out at me when I glanced at the logo real quick, I didn't notice it until then. Thought you would like to know.

Post new comment

The content of this field is kept private and will not be shown publicly.

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Enter the characters (without spaces) shown in the image.