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.

 // VARIABLES \\
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.

// FUNCTIONS \\
function drawLine():MovieClip {
	var depth:Number = _root.getNextHighestDepth();
	var line_mc:MovieClip = _root.createEmptyMovieClip("line"+depth, depth);
	line_mc.lineStyle(thickness,colour,100);
	line_mc.moveTo(prevX,prevY);
	line_mc.lineTo(_xmouse,_ymouse);
	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) {
			this.removeMovieClip();
		}
	};
}

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 {
	fadeDraw.apply(drawLine());
};

Try it out, here is my example.

5 Comments

  1. Posted February 6, 2009 at 11:34 am | Permalink

    That’s awesome! been playing with it for ages, im going to try and make it next week in as3 😀

    nice work josh!

  2. january
    Posted October 7, 2009 at 6:11 pm | Permalink

    Am learning AS2 and got very interested in line api, your tutorial is fab but using AS2 I keep getting error messages around the alpha&lt and then my swf doesn’t work – any ideas what’s going wrong?

  3. mackhouse
    Posted October 16, 2009 at 12:32 am | Permalink

    january:

    just swap the “this._alpha<0” for “this._alpha<0” and all will be well. :)

  4. David
    Posted March 15, 2010 at 11:42 pm | Permalink

    Hi, great idea!
    I added Mouse.hide()
    looks better without the cursor
    all the best

  5. Posted June 11, 2010 at 2:10 pm | Permalink

    Great job! Can’t wait to start my own blog.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*