Tuesday, 12 January 2010

Colour line Graphics in AS3

I found an old post over at theflashblog.com which demonstrates the capabilities of the Actionscript 3 graphic API. The example shows a single line that displays random colours when the mouse moves and when you click, the movie clears. I have decided to slightly modify the code, so that you have to hold down the mouse to display a randomly colour line and double click to clear the movie.

My Actionscript 3 code is shown below.

//Create a new instances of a shape and add it to the stage.
var myShape:Shape = new Shape();
addChild(myShape);

//Double click property must be enabled before it will generate an event.
stage.doubleClickEnabled = true;

//Adds event listeners to the stage.
stage.addEventListener(MouseEvent.MOUSE_DOWN, drawLine);
stage.addEventListener(MouseEvent.MOUSE_UP, drawUp);

//This adds the drawMove function and sets the inital start position
//of the line.
function drawLine(event:MouseEvent):void {
myShape.graphics.moveTo(mouseX, mouseY);
stage.addEventListener(MouseEvent.MOUSE_MOVE, drawMove);
}

//This function creates the random coloured line with different thicknesses.
function drawMove(event:MouseEvent):void {
var randomNumber:uint = Math.floor(Math.random()*15)+5;
myShape.graphics.lineStyle(randomNumber, Math.random()*0xFFFFFF);
myShape.graphics.lineTo(mouseX, mouseY);
}

//This removes the drawMove function and adds the clearMovie function.
function drawUp(event:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_MOVE, drawMove);
stage.addEventListener(MouseEvent.DOUBLE_CLICK, clearMovie);
}

//This function clears the line.
function clearMovie(event:MouseEvent):void {
myShape.graphics.clear();
}

Now hold down the mouse to draw randomly coloured lines and double click to clear the movie.

0 comments:

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP