In this tutorial we will make a Mouse Trailer in the shape of a burning flame. We will use Actionscript 3 and the popular tweening engine, Tweenlite. Custom designed Mouse trails are pretty popular these days even though some might find them annoying. But they will fit perfectly in some Flash games and applications.
LIVE DEMO
[kml_flashembed publishmethod=”static” fversion=”9.0.0″ movie=”http://premiumcoding.com/wp-content/uploads/2011/10/mouseTrailPremium1.swf ” width=”570″ height=”260″ targetclass=”flashmovie”]
[/kml_flashembed]
[download id=”118″]
STEP 1 – IMPORTING ASSETS TO FLASH
I have prepared a simple fire ball in Photoshop that we have to import to Flash. Open Flash and make a new document in AS3. First we have to import our asset into library. Go to File/Import/Import to Stage and import the file named flameBall.png (you will find it in source files). Now convert it to MovieClip so we can interact with it via actionscript. Right Click on the fire ball and select Convert to Symbol and name it FlameBall. Don’t forget to Export it for Actionscript (see screenshot below):
Now delete the fire ball from the stage.
STEP 2 – CODING IT UP
First we have to import Tweenlite classes. Press F9 to bring actions menu and copy following code at the start of the document.
import com.greensock.*;
import com.greensock.easing.*;
Since we want to use a fancy flame animation we do not want a mouse cursor on the stage. Hide it with following command:
Mouse.hide();
We will add one fire ball each time mouse moves on the stage. Add following code:
stage.addEventListener(MouseEvent.MOUSE_MOVE, startAddingFlame);
We now have a listener that calls a function startAddingFlame every time the mouse moves.
Function startAddingFlame will control the movement of each fire ball and create a smooth Mouse Trail. First we need to create a new fire ball (from our custom class that we created in first step) and then add it to the stage:
var fBall:FlameBall = new FlameBall();
addChild(fBall);
Now we can put the fire ball into motion. We will move it across the stage according to mouse movement and we will add a bit of movement on x and y axis. We will also add a bit of blur to achieve a more realistic look. At the end of the function we will add an event listener that will call a function which will slowly fade out the fire ball and thus create a Mouse Trail effect. We will remove it from the stage after opacity reaches zero. Function startAddingFlame looks like this:
function startAddingFlame(e:MouseEvent):void{
var fBall:FlameBall = new FlameBall();
addChild(fBall);
TweenMax.to(fBall,0, {blurFilter:{blurX:1, blurY:1, quality:3}, x:mouseX + Math.random() * fBall.width/getRandom(1,2),y:mouseY – Math.random() * fBall.height/getRandom(1.5,3)});
fBall.addEventListener(Event.ENTER_FRAME, startTheFire);
}
Function startTheFire will simply slowly fade out (by decreasing opacity for 0.05 on each frame) our Mouse Trail:
TweenLite.to(e.target,0, {alpha:(e.target.alpha -= 0.05)});
After opacity reaches zero fire ball has to be removed from the stage (for garbage collection purposes):
if (e.target.alpha <= 0){
e.target.removeEventListener(Event.ENTER_FRAME, startTheFire);
removeChild(e.target as Sprite);
}
And that is all there is. Whole function looks like this:
function startTheFire(e:Event):void{
TweenLite.to(e.target,0, {alpha:(e.target.alpha -= 0.05)});
if (e.target.alpha <= 0){
e.target.removeEventListener(Event.ENTER_FRAME, startTheFire);
removeChild(e.target as Sprite);
}
}
Now all we have to do is add a function getRandom that is used in tweenlite animation in function startAddingFlame to randomize animation a bit. It looks like this:
function getRandom(min:Number, max:Number):Number {
return min + (Math.random() * (max – min));
}
CONCLUSION
Our flaming mouse trail tutorial has come to an end. We hope you have enjoyed reading it and that you will put some of that new knowledge to good use. If you haven’t done so already, please download source files that will help you throughout the tutorial. If you have any suggestions please post them in comments section. Good luck!
[download id=”118″]
You must be logged in to post a comment.