The aim of the tutorial is to learn how to create a Flash movie that the user can draw with whist online. At the bottom of the page you will see an example of a complete Paint program created with this same script.

Step one: Document setup

1. Create a new Flash Movie
2. Go to: Modify > Document and set the frame rate at: 30 fps
   If you do not do this the drawing may be a jagged as the default of 12 frames per second is too slow to create a smooth line.
3. You need a button on stage. Go to: Window > Common Libraries > Buttons
   Scroll down until you can see: Ovals
   Double click to open the folder.
   Drag the Blue button onto stage.
   
   The document is now ready.

Step two: ActionScript - Timeline

You need to place the following ActionScript in the Timeline. I will explain what the ActionScript means later.

1. Right click (Mac: Ctrl click) in frame 1 on the timeline and select: Actions
2. Select Expert Mode from the View Options button .
3. Type the following Actionscript into Actions Box:
   
   _root.createEmptyMovieClip("myLine", 0);
   
   _root.onMouseDown = function() {
      myLine.moveTo(_xmouse, _ymouse);
      myLine.lineStyle(2, 0xff0000, 100);
      _root.onMouseMove = function() {
         myLine.lineTo(_xmouse, _ymouse);
      }
   }
   
   _root.onMouseUp = function() {
      _root.onMouseMove = noLine;
   }
   Note: The case of key words in ActionScript is important so you must make sure the capitals / lower case is correct.
   
   
4. You need to test the movie. Go to: Control > Test Movie
   You should be able to draw when the mouse is held down. If you cannot you have made a typing error. Go back and check it.
   
   Note: The Blue Delete button will not work yet.

Step three: ActionScript - Button

1. Right click on the blue button.
2. Select Expert Mode from the View Options button .
3. Type (or copy and paste) the following Actionscript into Actions Box:
   
   on (release) {
       myLine.clear();
   }
   
4. Go to: Control> Test Movie
   You should be able to draw and use your button.
   
   Your Movie is finished.

Explanation of ActionScript - Timeline

_root.createEmptyMovieClip("myLine", 0);
This creates a blank Movie Clip.

_root.onMouseDown = function() {
A function which is activated every time you click the mouse.

myLine.moveTo(_xmouse, _ymouse);
Makes the line start at the current location of the mouse.

myLine.lineStyle(2, 0xff0000, 100);
Creates the line style:
    2 is the line width
    0xff0000 is the hexadecimal colour.
        100 is the Alpha. 0 is completely transparent and 100 is a solid colour.

        Note: For a full explanation of hexadecimal colours and a colour chart: click here

_root.onMouseMove = function() {
A function within a function created when the first function is active and then the mouse moves.

myLine.lineTo(_xmouse, _ymouse);
When the mouse moves the line follows it's position.

}
Closes the Mouse Move function

}
Closes the Mouse Down function

_root.onMouseUp = function() {
New function activated on mouse up.

_root.onMouseMove = noLine;
Clears the line

}
Closes the Mouse Up function

Explanation of ActionScript - Button

on (release) {
On release of the mouse button.

myLine.clear();
Delete myLine

}
End of script.

Paint program created with this same ActionScript

This move has variables in the line:

myLine.lineStyle(myWidth, myColour, myAlpha);

These variables are controlled by the sliders which enables the user to change the paint settings as they draw.