Multicoloured drawing in Actionscript 3
This tutorial will show you how to create a Multicoloured drawing app in Actionscript 3. The line drawings will change colour as you draw. I have used the draw application as a base for this tutorial, so the code used is similar. To achieve this effect I have stored the colours in an array and have used the Timer class to increment the array index at one second intervals when the lines are drawing.
Multicoloured drawing in Actionscript 3
Step 1
Open up a new AS3 file and set the stage size to 400 x 400. Then open up the Actions panel and enter the following code:
//Array to hold all the colours to change.
var coloursArray:Array=[0xFF0000,0xFFFF00, 0xFF7F00,0x00FF00,0x66CC66,
0x00F2F2,0x0000FF,0xFF00FF,0xA00172,0x000000];
//Holds the current position in the array.
var position:uint= 0;
//This creates a new instance of the Timer class with a delay of
//1 second which will change the line colour every second. The
//repeat count is the number of the colours in the array.
var timer:Timer=new Timer(1000,coloursArray.length);
timer.addEventListener(TimerEvent.TIMER, changeColour);
//Adds a new sprite to the the stage to hold the line drawings.
var drawingLine:Sprite = new Sprite();
addChild(drawingLine);
//Adds the mouse down and mouse up listeners to the stage.
stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
//This function starts the timer and
//will show the first coloured line drawn
function mouseDownHandler(event:MouseEvent):void {
timer.start();
drawingLine.graphics.lineStyle(3, coloursArray[position]);
drawingLine.graphics.moveTo(mouseX, mouseY);
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
}
function mouseMoveHandler(event:MouseEvent):void {
drawingLine.graphics.lineTo(mouseX, mouseY);
}
//This function stops the timer and remove the listener from the stage.
function mouseUpHandler(event:MouseEvent):void {
timer.stop();
stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
}
//This function increments the position counter which will change the
//current array index.
function changeColour(e:TimerEvent):void{
position++;
drawingLine.graphics.lineStyle(3, coloursArray[position]);
}
Step 2
Test your movie Ctrl + Enter. Draw some continuous lines and you will see the line change colour.
I have also added a custom cursor to my multicoloured drawing with is optional.
Alternatively, if you wish to have any number of random colours instead of ten set colours you can use the code below.
var randomColours:int = Math.random() * 0xFFFFFF;
var timer:Timer=new Timer(1000);
timer.addEventListener(TimerEvent.TIMER, changeColour);
var drawingLine:Sprite = new Sprite();
addChildAt(drawingLine,0);
stage.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown);
stage.addEventListener(MouseEvent.MOUSE_UP, MouseUp);
function MouseDown(event:MouseEvent):void {
timer.start();
drawingLine.graphics.lineStyle(3, randomColours);
drawingLine.graphics.moveTo(mouseX, mouseY);
stage.addEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}
function MouseMove(event:MouseEvent):void {
drawingLine.graphics.lineTo(mouseX, mouseY);
}
function MouseUp(event:MouseEvent):void {
timer.stop();
stage.removeEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}
function changeColour(e:TimerEvent):void{
randomColours = Math.random() * 0xFFFFFF;
drawingLine.graphics.lineStyle(3, randomColours);
}
