Custom drawing app in Actionscript 3

This post is an alternative to the drawing lines tutorials where I will use the primitive shapes from Flash to create the colour and size palettes instead of using the default colour picker.


Custom drawing app in Actionscript 3

Step 1

Open up a new AS3 file and select the Oval tool and draw six oval shapes on the stage. My ovals are 25x25 in size and have a 2pt black stroke. Once you have created all the shapes selected them all and convert them into a single movie clip with the instance name: coloursBlock


Step 2

Repeat the same for the size palettes, but this time use a black colour fill for the three shapes and use the text tool to type: S, M and L respectively on the shapes. Convert each of the shapes into movie clips and give them the instance names: smallSize, mediumSize and largeSize.


Step 3   

Select the Rectangle tool with a white colour fill and draw a shape to fill the stage area. Ensure you do not cover up the palettes. Covert the shape into a movie clip with the instance: drawArea


Step 4

On the timeline create a new layer called Actions then open up the Actions panel and enter the following code:

 //Variables for storing the size and colour of the drawings.
var selectedColour:uint = 0x000000;
var selectedSize:uint = 3;

//This creates a new sprite and add it to the draw area.
var drawingLine:Sprite = new Sprite();
drawArea.addChild(drawingLine);

//This creates a new instance of the BitmapData class with the
//width and height of the movie clip image.
var bmpData:BitmapData = new BitmapData(coloursBlock.width, coloursBlock.height);
bmpData.draw(coloursBlock);

//Adds listeners. 
stage.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown);
stage.addEventListener(MouseEvent.MOUSE_UP, MouseUp);
smallSize.addEventListener(MouseEvent.CLICK, sizeHandler);
mediumSize.addEventListener(MouseEvent.CLICK, sizeHandler);
largeSize.addEventListener(MouseEvent.CLICK, sizeHandler);
coloursBlock.addEventListener(MouseEvent.CLICK, colourClick);

//This function draws the lines when the mouse is pressed. 
function MouseDown(event:MouseEvent):void{
    drawingLine.graphics.lineStyle(selectedSize,selectedColour);
    drawingLine.graphics.moveTo(mouseX, mouseY);
    drawArea.addEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}

function MouseMove(event:MouseEvent):void{
    drawingLine.graphics.lineTo(mouseX, mouseY);
}

function MouseUp(event:MouseEvent):void{
    drawArea.removeEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}

//This function sets the size of the lines. 
function sizeHandler(e:MouseEvent):void{
    switch(e.target){
        case smallSize:  selectedSize  = 3; break;
        case mediumSize: selectedSize  = 6; break;
        case largeSize:  selectedSize  = 9; break;
    }
}

//This function sets the colour of the line by getting the colours
//from the block of colours.
function colourClick(e:MouseEvent):void{
    selectedColour = bmpData.getPixel(coloursBlock.mouseX, coloursBlock.mouseY);
}

Step 5

Test your movie Ctrl + Enter.