7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
  1. Code
  2. News

Quick Tip: Conjure up a Jazzy Mouse Cursor Trail

Scroll to top
Read Time: 2 mins

In this Quick Tip you'll learn how to use the Math functions in Flash to create trails of movie clips along whichever path the mouse cursor takes.

You'll also learn the basics of the Math functions, such as varying the size, alpha, and color of the Movie Clip - and all this using AS3. I hope you find this Quick Tip useful!

Final Result Preview

Let's take a look at the final result we will be working towards:

Step 1: Make the Movie Clip

First, open a new Flash file (Ctrl + N) and choose "ActionScript 3.0". We have to create the Movie Clip that will be duplicating around the scene. So go to Insert > New Symbol (Ctrl + F8). Call this symbol: "Ink", choose Movie Clip, and finally check the "Export for Actionscript" box.

Flash cursor trailsFlash cursor trailsFlash cursor trails
Flash cursor trails
Flash cursor trailsFlash cursor trailsFlash cursor trails

Step 2: Adding the "Ink"

Now we have to create the ink in the Movie Clip. So, go to the first frame, take the Brush Tool (B) and draw a circle, then align it to the center. Make the same steps on three more frames and vary the color in each frame (first Frame: Red, second Frame: Blue, third Frame: Yellow, etc....). On each frame, open the Actions panel (hit F9) and add the stop action: stop();

Flash cursor trails
Flash cursor trailsFlash cursor trailsFlash cursor trails

Step 3: Organizing the Project

Save this file on a folder on your computer, call it: "MathFunctions_Tutorial.fla". Create a new ActionScript file and save it in the same folder, give it a name of "MathFunctions_Flash.as". Finally, go to the Properties of MathFunctions_Tutorial.fla and change the Class field for the Actionscript File.

If you're not very familiar with using classes, I recommend you read this Quick Tip.

Flash cursor trails
Flash cursor trails
Flash cursor trails

Step 4: Let's Start Coding!

Open the file called "MathFunctions_Flash.as" and write the following code:

In this action we are defining the Class and its properties.

Now we have to tell Flash that when the mouse moves, the function called stageMouseMove() should be called. To do this, just write the following:

After that, we have to define this function and link the Movie Clip called "Ink" to the ActionScript.

Now we are going to add the actions to the variable and the function called stageMouseMove(). And here are the magical Math functions.

OK, on the Math functions there a lot of things that make the magic. Here I leave you a small formula:

Flash cursor trailsFlash cursor trailsFlash cursor trails

For more details on this formula, see Get a Random Number Within a Specified Range Using AS3.

And that's all!


I hope you liked this Quick Tip, thanks for reading!

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.