Drawing pad design

In this thoroughly explained, detailed lesson, I will show you how to make drawing pad. To create this lesson, you have to use action script 3.0 and Adobe Flash. Using this lesson, you will also learn how to use Components Panel (Ctrl+F7) to move ColorPicker, how to create Up and Down button and size Box area and much much more! You can use this lesson when you need to add interactivity on your site. Let's start!

Example:



Step 1

Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 400 pixels and the height to 350 pixels. Select white as background color.



Step 2

Select now Text Tool (A) and go to the Properties Panel (Ctrl+F3) below the stage. Then, choose the following options:

1. Select a Dynamic Text field,
2. Select Trebuchet MS as font.
3. Choose 14 as font size,
4. Select black as color,
5. As the rendering option, select Use device fonts for readability.



Then, draw rectangle shape about 45x22 px like it is shown on the picture below!



Step 3

While the rectangle shape is still selected, go to the Properties Panel below the stage. On the left side, You will find the Instance name input field there. Call this rectangle shape SizeBox. See the picture below!



Step 4

Create now two button (up and down) and place it on the position like it is shown on the picture below!



Step 5

Select now just up button and go to the Properties Panel below the stage. On the left side, You will find the Instance name input field there. Call this button Upbtn. See the picture below!



Step 6

Select now down button and go again to the Properties Panel below the stage. On the left side, You will find the Instance name input field there. Call this button Downbtn. See the picture below!



Step 7

Choose now Window > Components (Ctrl+F7). After that, find in Components Panel - Color Picker, and move it on the stage using the Selection Tool (V) and "drag and drop" technique.





Step 8

While the Color Picker is still selected, go again to the Properties Panel below the stage. On the left side, You will find the Instance name input field there. Call this Movie Clip "ColorPicker". See the picture below!



Step 9

Create now Erase button like it is shown on the picture below!

Step 10

While the button is still selected, go  again to the Properties Panel below the stage. On the left side, You will find the Instance name input field there. Call this button Erasebtn. See the picture below!



Step 11

Call the current layer elements. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!

Step 12

Place your elements for drawing on the position like it is shown on the picture below!

Step 13

Create a new layer above the layer elements and name it Action.

Step 14

Select now the first frame of layer action and go to the Action Script Panel (F9). Then, enter this code inside the actions panel:

var spBoard:Sprite=new Sprite();

this.addChild(spBoard);

spBoard.x=130;

spBoard.y=40;

var shDrawing:Shape=new Shape();

spBoard.addChild(shDrawing);

var doDraw:Boolean=false;

var lineSize:Number=7;

var currentColor:Number;

SizeBox.text=String(lineSize);

spBoard.graphics.lineStyle(1,0x000000);

spBoard.graphics.beginFill(0xFFFFFF);
 
spBoard.graphics.drawRect(0,0,250,250);
 
spBoard.graphics.endFill();
 
spBoard.filters = [ new DropShadowFilter() ];
  
spBoard.addEventListener(MouseEvent.ROLL_OUT,boardOut);
  
spBoard.addEventListener(MouseEvent.MOUSE_MOVE,boardMove);
  
spBoard.addEventListener(MouseEvent.MOUSE_DOWN,boardDown);
  
spBoard.addEventListener(MouseEvent.MOUSE_UP,boardUp);
  

function boardOut(e:MouseEvent):void {
   
   doDraw=false;
   
 }
 

function boardDown(e:MouseEvent):void {
   
   doDraw=true;
   
   
   currentColor=ColorPicker.selectedColor;
   
   shDrawing.graphics.lineStyle(lineSize,currentColor);
   
  
   shDrawing.graphics.moveTo(shDrawing.mouseX,shDrawing.mouseY);
  
 }
 
function boardUp(e:MouseEvent):void {
   
   doDraw=false;
   
 }
 
function boardMove(e:MouseEvent):void {
 
         var curX:Number=shDrawing.mouseX;
   
   var curY:Number=shDrawing.mouseY;
   
    
   if(doDraw && checkCoords(curX,curY)){
    
    shDrawing.graphics.lineTo(curX,curY);
    
    e.updateAfterEvent();
    
   }
   
 }
 
 
function checkCoords(a:Number,b:Number):Boolean {
 
 if(a>=250-lineSize/2 || a<=lineSize/2 || b>=250-lineSize/2 || b<=lineSize/2){
  
  return false;
 }
 
 else {
  
  return true;
 }
 
}
 
Erasebtn.addEventListener(MouseEvent.CLICK, eraseClicked); 

function eraseClicked(e:MouseEvent):void {
 
 shDrawing.graphics.clear();
 
}

Upbtn.addEventListener(MouseEvent.CLICK, upClicked); 

function upClicked(e:MouseEvent):void {
 
 if(lineSize<20){
  
 lineSize+=1;
 
 } else {
  
  lineSize=20;
  
  }
 
 SizeBox.text=String(lineSize);
 
}

Downbtn.addEventListener(MouseEvent.CLICK, downClicked); 

function downClicked(e:MouseEvent):void {
 
 if(lineSize>1){
  
 lineSize+=-1;
 
 } else {
  
  lineSize=1;
  
  }
 
 SizeBox.text=String(lineSize);
 
}

We're done now!

Test your movie and start drawing! :)

Enjoy!

Download example