Fading a Dynamic Line – Tutorial – Flash AS2

This tutorial teaches you how to draw a line that follows the mouse, it fades and blurs out as you move the mouse.  It utilizes the drawing api. So to start off call the layer on your timeline actions, then open the actions window, firstly I created a few variables these control the colour of the line, the thickness, the amount of blur, and the fade speed.

var colour = 0xff0000;
var thickness = 10;
var blurAmount = 10;
var fadeSpeed = 1.5;

After setting up our variables we are going to set up a 2 function one which draws the line and saves that section as a movieclip, and the other part which will fade and blur the line. This function is for drawing the line, I called it drawLine. We create 2 variables one to pass a number to the other variable and one which creates empty movieclips to store the separate sections of line. We then set the line style. We then set we were are starting to draw the line from or each time it will draw from the same place, so we call prevX and prevY which are variables that will store our last mouse positions. We then draw a line from this position to our new position which is the current mouse X and Y position. We then give prevX and prevY the current mouse so the next time the function is called it starts from the place it finished.

function drawLine():MovieClip {
	var depth:Number = _root.getNextHighestDepth();
	var line_mc:MovieClip = _root.createEmptyMovieClip("line"+depth, depth);
	prevX = _xmouse;
	prevY = _ymouse;
	return line_mc;

The next function is what we are going to call to blur and fade the parts of our line. I called mine fadeDraw. This function will be applied to our other function, so we use this to refer to the movieclip(section of line) it will be effecting. We will fade out and blur out every time we enter the frame so we put all the code in an onEnterFrame function. Firstly we make the alpha of the movieclip fade by reducing the alpha, and then we blur it. We then use an if statement to remove any movieclips that have 0 alpha this makes our .swf run more efficiently.

function fadeDraw():Void {
	this.onEnterFrame = function():Void  {
		this._alpha -= fadeSpeed;
		this.filters = [new flash.filters.BlurFilter(blurAmount, blurAmount, 2)];
		if (this._alpha<0) {

The final thing we do is call our functions, this I did every time the mouse is moved. This little bit of code call both our functions and applies the fade and blur to each bit.

onMouseMove = function ():Void {

Try it out, here is my example.