Animated Mouse Effects in Flash


 

Mouse animations and trailing effects are perfect for flash based websites, online advertisements, and flash video games. Not only that, but mouse animations in flash are extremely easy to customize and edit to your liking, so they can be perfect for your specific web application or flash game. What we are going to create in this easy flash tutorial is a trailing glow effect that will follow your mouse around, and pulsate when idle.

The actionscript source code and full source FLA file are available right here, along with an interactive flash demo of what you can achieve after covering this easy mouse animation flash tutorial.

Place the actionscript / flash file “mouse_trail.fla” in a directory/folder on your PC, and then run it using (Ctrl + Enter)

 

Here’s the mouse animation in flash we are looking to achieve:

Mouse the mouse around quickly, and watch the glow follow in our flash game demo. If you keep your cursor still, the glow will pulsate around the skull for a nice flash effect.
  1. First step, open a new Flash Document, Actionscript 3, standard size of 550 pixels by 400 pixels.
  2. Import some kool cursor art for your mouse. I used a skull, which you can grab right here, below. Place it inside a new MovieClip (Ctrl + F8), and then drag a single instance of the new MovieClip on to the main flash stage, and label that specific instance of the MovieClip as “skull
  3. Make another new MovieClip (Ctrl + F8), and label it “trail“. Inside, all you need to draw is a 100 pixel by 100 pixel perfect circle, black, centered around the cross index in the MouseClip drawing plane.  After drawing, exit out to the main Scene 1 frame, right click the “trail” in the library, select Properites, and then check the “Export for Actionscript” box.
  4. Third and final thing to draw in this easy flash tutorial is some gridwork on the main stage. Select the brush tool, a light gray color, and hold down the SHIFT button while clicking and dragging to create some straight lines horizontally and vertically across the stage. They don’t need to be in any type of MovieClip, on-stage is just fine.
  5. Once all the flash art is drawn (the circle, skull, and criss-cross lines), it’s time to write the small amount of actionscript 3 code neded to get this easy flash tutorial running, and for the mouse animation effects to get glowing. Right click the first frame on the main stage, and select Actions down on the bottom. Enter the following as3 code in to the flash code box..
var blur_filter:BlurFilter = new BlurFilter(40,40,1);
init()
stop();

function init():void{
    skull.startDrag(true);
    Mouse.hide();
    stage.addEventListener(Event.ENTER_FRAME,mm);
    function mm(e:Event):void{
        if(Math.random() < 0.30){
            createTrailBall();
        }
    }
}
 
function createTrailBall ():void {
 
    //Create a new circle instance
    var trailBall:trail=new trail();
   
    trailBall.cacheAsBitmap = true;
    //Position the trailing circle in the same position where the mouse is
    trailBall.x = mouseX;
    trailBall.y = mouseY;
    //add the blur to smooth the edges
    trailBall.filters = new Array(blur_filter);
 
    //Add ENTER_FRAME to animate the trailing circle
    trailBall.addEventListener (Event.ENTER_FRAME,animateTrailBall);
 
    //add it to the bottom of the stage, so it appears below the grid onscreen.
    addChildAt (trailBall,0);
}
 
function animateTrailBall (e:Event):void {
    //In each frame, reduce the alpha and the scale of the trail ball.
    e.target.alpha -= 0.10;
    e.target.scaleY += 0.10;
    e.target.scaleX += 0.10;

    var myColor:ColorTransform = e.target.transform.colorTransform;
    myColor.color= 0xFFFFFF * (1 - e.target.alpha);
     
    e.target.transform.colorTransform = myColor;

   
    //if alpha is less than 0; remove the ball from the stage
    if (e.target.alpha < 0) {
        e.target.removeEventListener (Event.ENTER_FRAME,animateTrailBall);
        removeChild ((MovieClip)(e.target));
    }
}

We have an initialization function which adds the ENTER_FRAME listener. Inside that listener, every frame, we generate a random number to check if we should create a glowy ball in flash. If we do need to, we call createTrailBall(), which sets up the x and y positions, caches it for optimization, adds the blur filter (from the initialization at the top), starts the update function, and draws to the screen. In the update function, animateTrailBall(), we blow up in size, fade away, and drift to a white color. Once alpha is zero (we are completely invisible), we promptly remove and delete this instance of the glowy ball.

And that’s all there is to it! With that, this easy flash tutorial is complete. Compile and run the flash tutorial and you should get something very similar to the flash demo at the top of the page.

Thanks for tuning in to another great, free, and easy flash game tutorial!

- Dave at the Flash Cove (http://flashcove.net)

About Dave

Hey Guys! I'm Dave, an Ohio State CSE alumni who just recently started work in the industry. I'm a flash hobbyist at heart, and love making flash games and tutorials when the time permits. Check out what flash tutorials are available on the site, and don't forget to "Like Us!" on Facebook!