Interactive Drawing Board

This is a brilliant bit of coding. I found it on the Kirupa.com site. It was written by written by 'ilyas usal a.k.a. pom'

The outcome is an interactive drawing board. Use your mouse to write on it - then press the button to erase what you have written. I think it is really neat!

Open a new Flash document - call it DrawingBoard. Make it whatever size you wish - and whatever colour - but it will need to be a light colour if you leave the code as written because the pen will be black and width of the pen stroke will be 2 pixels.

If you want to have a different coloured pen you will have to change the hexidecimal code to that of the colour you want. I have made the hexidecimal code number red in the code below so that you know what to change. Here is a link to a page that gives you hexidecimal codes of colours.

If you want a different sized pen stroke then alter the number that is in green. The default number is 2. In the sample above I have used 6. Experiment and decide on the size you want!

Rename layer 1 as 'coding' and paste the following into the Action Script section of the Properties Box.

// 1. SETTING THINGS
_root.createEmptyMovieClip("line",1);

// 2. EVENTS IN _ROOT:
_root.onMouseDown = function(){
line.moveTo(_xmouse,_ymouse);
line.lineStyle(2,0x000000,100);
this.onMouseMove = function(){
line.lineTo(_xmouse,_ymouse);
updateAfterEvent();
}
}
_root.onMouseUp = function(){
this.onMouseMove = null;
}

Create a layer 2 - call it 'button' and add a button to the stage. You may wish to design your own button using my tutorial - or you may just import one. But whatever you do you must esure it is a button symbol - you must name the button 'buttonErase' and ensure the button instance in the properties box has buttonErase in it too!

Now click on the first frame in layer 2 - the button layer. Within the Action Script section of the Porperties Box pase in the following:

// 3. BUTTON "ERASE":
// --------------------
buttonErase.onPress = function(){
_root.line.clear();
}

If you wish to add graphics and text to your board I suggest you lock the above layers when you have tested that your board works and then add another layer for text and graphics.

You could add music - but I figured that would be a bit annoying! (Perhaps when you are more experienced you could add a button to press if you want music to play..... )

This page takes you to variations I have made on this idea - check them out - I hope you like them!