Create a Whiteboard or Blackboard	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Create a Whiteboard or Blackboard

Free Flash Tutorial

Learn how to create a Whiteboard or Blackboard that the user can draw with whist online. It is surprisingly easy to create a Whiteboard / Blackboard and the file size is tiny. When you print it will print whatever you have drawn on your board. It is not much more difficult to add different colours and brush size. At the end of this tutorial you will see an example of a simple Paint program created with this same script and the published Movie is only 6KB!

Click by Click: If you would like to view this tutorial without all the notes: Click by Click

 Example: Download the Flash file  Beg 018a

Whiteboard: Click and Draw.

 Example: Download the Flash file  Beg 018b

Blackboard: Click and Draw.

Step One: Setting Up the Document

You need to open a new Flash document and customise it.

1. Go to: File > New > General Tab > Flash Document > OK (Ctrl N)

Note: You should now have a new Flash document open.

2. You are now ready to customise the document. Go to: Modify > Document (Ctrl J)
   
   
3. Type in the dimensions that you want for your Movie. Mine is: 300 x 125 px (pixels)
   
   
4. If you want a Blackboard change the: Background Color
   
   
5. For Frame Rate type: 30 fps



Note: The default frame rate of 12 frames per second is too slow to create a smooth line.

Step Two: ActionScript - Timeline

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

1. If the Timeline is closed, open it: Window > Timeline (Ctrl Alt T)
2. Select: Frame 1


Frame 1 selected.

3. If the Actions Panel is closed open it: Window > Actions (F9)

Important Note: Make sure that you can see Actions - Frame at the top of the Actions Panel:


The Actions Panel has Actions - Frame in the top corner.

4. In the Actions Panel if Script Assist is on, Switch: Script Assist Off

Note: To see if Script Assist is on or off go to the Action Panel's Side Menu Button:   

Script Assist is On when ticked: (remove the tick)

Cross Ref: If you are not sure what Script Assist is or how to switch it on and off see the short Tutorial: Actions Panel

5. Type (or Copy & Paste) the following Actionscript into Actions Panel:
   
   _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: ActionScript is Case Sensitive so make sure that the Capitals / lower case are exactly as above.

6. Check the Syntax by clicking the Check Syntax button:

Note: If all your typing is accurate and the Actions panel says Actions - Frame then you should not get errors.

Be aware that just because you do not have any syntax (ActionScript grammar) errors does not mean the your ActionScript will do what you expect. But if there are errors you can be sure that your script will not work correctly!


Actions - Frame 1.

7. Turn the Actions panel off: Window > Actions (F9)

   You should be able to see a small letter 'a' in the Timeline depicting that you have some code in Frame 1:

   
   The small letter 'a' in the Timeline shows

8. You are ready to Test the movie. Go to: Control > Test Movie

   Note: 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.

   
   Draw in the Test Window.

9. Close your Test Window:

Explanation of ActionScript - Timeline

Alas the ActionScript is not easy to understand but thankfully it is not essential to understand to be able to use it and edit it:

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

_root.onMouseDown = function() {
A function which is activated every time you click the mouse. For info on Functions click here

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 blackboard you would need to change the chalk colour to white: 0xffffff

To change your whiteboard marker colour to black: 0x000000

Cross Ref: To look at a full Hexadecimal 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.

Step Three: Placing the Delete Button on Stage

You will need a button on your Stage so that users can delete their drawing creations.

1. Go to: Window > Common Libraries > Buttons
2. Scroll down until you can see folder: Classic Buttons
3. Double click to open the folder:
4. Scroll down until you can see folder: Ovals
5. Double click to open the folder:
6. Drag on Stage the: Blue Oval Button

   
   The Blue Oval Button.

Step Four: Delete Button ActionScript

1. Select the: Blue Button


Button Selected.

2. If the Actions Panel is closed open it: Window > Actions (F9)

Important Note: Make sure that you can see Actions - Button at the top of the Actions Panel:


The Actions Panel has Actions - Button in the top corner.

3. Type (or copy and paste) the following Actionscript into Actions Box:

on (release) {
    myLine.clear();
}

4. Go to: Control > Test Movie

   Note: You should be able to draw and use your delete button.

   Well done - your Movie is finished!

Explanation of ActionScript - Button

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

myLine.clear();
Delete myLine

}
End of script.

Example of a Paint program created with this same ActionScript

Example: Download the Flash file  Beg 018c

A Paint program made with this same script. The whole file is only 6KB!

Notes: The above Movie 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.

For a tutorial on variables click here