Sunday, 6 March 2011

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();

//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);

//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{,selectedColour);, mouseY);
    drawArea.addEventListener(MouseEvent.MOUSE_MOVE, MouseMove);

function MouseMove(event:MouseEvent):void{, 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{
        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.


Deepak.R 29 October 2012 at 03:46  

Hi thank you
i want to know how to use clear drawing

plz help me

iliketo 2 November 2012 at 22:17  


sivareddy madireddy 10 December 2012 at 17:55  


Very nice app. The line drawing is going out side the drawArea rectangle. I would like to know how I can restrict to the only drawArea.


iliketo 10 December 2012 at 22:49  


Try masking.

Aashish Prajapat 24 May 2014 at 07:10  

Can you please suggest me how can i use this feature inside my particular designed movieClip.

because i try most of the time
but not successful.
(Means i want to use this drawing
inside my movieclip board design )

iliketo 28 May 2014 at 13:16  


Have you tried adding the code inside the movie clip?

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP