Have you ever wish to draw something in flash? This tutorial will enable that! Learn how to create a pencil and after that how to draw something using that pencil and Action Script in flash8.

Draw something:



And when you want to delete that,  just press Delete or Backspace key on the keyboard.

Step 1

Create a new flash document, press Ctrl+J on the keyboard (Document Properties) and set Width to 350 and Height to 250px. Frame rate set to 24fps (Frames per Second).

Step 2

Take the Line Tool (N), and draw a "pencil". Look at the picture below!



Step 3

Select the "pencil" (Ctrl+A) and press F8 on the keyboard (Convert to Symbol) to convert it into a Movie Clip.



Step 4

While your new made Movie Clip ("pencil") is still selected, open the Properties Panel (Ctrl+F3) and under <Instance Name> type pencil. Look at the picture below!



Step 5

Click on the first frame, open the Action Script Panel (F9), and paste this script:

this.attachMovie("cursor_id", "cursor_mc", this.getNextHighestDepth(),
{_x:_xmouse, _y:_ymouse});
Mouse.hide();
var mouseListener:Object = new Object();
mouseListener.onMouseMove = function() {
pencil._x = _xmouse;
pencil._y = _ymouse;
updateAfterEvent();
};

Mouse.addListener(mouseListener);

this.createEmptyMovieClip("drawing_mc", this.getNextHighestDepth());
var mouseListener:Object = new Object();
mouseListener.onMouseDown = function() {
 this.drawing = true;
drawing_mc.moveTo(_xmouse, _ymouse);
 drawing_mc.lineStyle(3, 0x99CC00, 100);
};

mouseListener.onMouseUp = function() {
this.drawing = false;
};

mouseListener.onMouseMove = function() {
 if (this.drawing) {
drawing_mc.lineTo(_xmouse, _ymouse);
}
updateAfterEvent();
};

Mouse.addListener(mouseListener);

var keyListener:Object = new Object();
keyListener.onKeyDown = function() {
if (Key.isDown(Key.DELETEKEY) || Key.isDown(Key.BACKSPACE)) {
drawing_mc.clear();
}
};

Key.addListener(keyListener);

Step 5

Now I'll give you short script explanation:

#ads#

This script:

this.attachMovie("cursor_id", "cursor_mc", this.getNextHighestDepth(),
{_x:_xmouse, _y:_ymouse});
Mouse.hide();
var mouseListener:Object = new Object();
mouseListener.onMouseMove = function() {
pencil._x = _xmouse;
pencil._y = _ymouse;
updateAfterEvent();
};

comprises a pencil cursor,

This script:

Mouse.addListener(mouseListener);

is for drawing script,

This script:

drawing_mc.lineStyle(3, 0x99CC00, 100);

determines the color whic we use for drawing,

This script:

var keyListener:Object = new Object();
keyListener.onKeyDown = function() {
if (Key.isDown(Key.DELETEKEY) || Key.isDown(Key.BACKSPACE)) {
drawing_mc.clear();
}
};

defines deleting if we press Delete or Backespace on the keyboard.

This script:

Key.addListener(keyListener);

comprises a listener for picture.

We're done!

Cheers!

Download source file (.fla)

Have questions about this tutorial? Visit our friendly Community Forums!