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.)
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
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