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

Create a Whiteboard or Blackboard

Free Flash Tutorial

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.