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

Click by Click: Create a Whiteboard or Blackboard

Full Version: This is a shortened click by click version of a: Full Length Tutorial

 

Free Flash Tutorial

Learn how to create a Whiteboard or Blackboard that the user can draw with whist online. It is very surprisingly easy to create a Whiteboard / Blackboard and the file size is tiny. When you print it will print whatever you drawn on your board. It is that 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

1. Go to: File > New > General Tab > Flash Document > OK (Ctrl N)
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

Step Two: ActionScript - Timeline

1. If the Timeline is closed, open it: Window > Timeline (Ctrl Alt T)
2. Select: Frame 1
3. If the Actions Panel is closed open it: Window > Actions (F9)
4. In the Actions Panel if Script Assist is on, Switch: Script Assist Off
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;
}

6. Check the Syntax by clicking the Check Syntax button:
7. Turn the Actions panel off: Window > Actions (F9)
8. You are ready to Test the movie. Go to: Control > Test Movie
9. Close your Test Window:

Step Three: Placing the Delete Button on Stage

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

Step Four: Delete Button ActionScript

1. Select the: Blue Button
2. If the Actions Panel is closed open it: Window > Actions (F9)
3. Type (or copy and paste) the following Actionscript into Actions Box:

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

4. Go to: Control > Test Movie

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!

Full Version of this: Tutorial