Flash tutorials
Home 3D (2) Actionscripting (66) Animation (108) Audio (4) Drawing (7) Full flash sites (4) Getting Started (15) Navigation (25) Special Effects (61) Text Effects (38)

Flash drawing by pencil

10.9.2006, 22:4    Total views: 87339
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!
Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!

Top tutorials

1. Advanced full flash site - Part 1
Total views: 296290

2. High-tech city animation
Total views: 246993

3. Water effect
Total views: 226783

4. Photo slide show
Total views: 209145

5. Special Picture Effect
Total views: 184723



Related links