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

6 comments:

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  

@Deepak,

drawingLine.graphics.clear();

sivareddy madireddy 10 December 2012 at 17:55  

Hi,

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.

Thanks

iliketo 10 December 2012 at 22:49  

@Sivareddy,

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  

@Aashish

Have you tried adding the code inside the movie clip?

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP