How To Create a Chalkboard Using ActionScript

1903de045bca137e0dd3c7e7a285bd18

In this Flash tutorial, I will show you how to create a simple chalk/drawing board using Flash’s programming language of ActionScript. It may sound hard; however, when I figured it out, it wasn’t that hard at all.

Step 1: Creating The Flash Document:

After you have created a new Flash document in your version of Flash, click on the “Document Properties” button (which has the default dimensions of 550 x 400) on the Properties Inspector. This will load the “Document Properties” window.

Within the “Document Properties” window, change the Dimensions of your Flash document to 400 (width) and 300 (height). This will help make the stage for our chalkboard more manageable. Also, change the Background Color from white to black. After these parameters have been set, press the “OK” button.

After you have closed the “Document Properties” window, the stage will transform by changing its size and color (as shown below).

Step 2: Inserting ActionScript:

Now that we have the stage set up, we are now ready to apply the ActionScript code to our Flash document. This will actually make the chalkboard work.

To apply the ActionScript code that will make the Flash document function, click on the “Actions – Frame” text just above the Properties Inspector. This will load the Actions Inspector.

Within the Actions Inspector, insert the following code:

_root.createEmptyMovieClip("chalk", 0);

_root.onMouseDown = function() {
   chalk.moveTo(_xmouse, _ymouse);
   chalk.lineStyle(10, 0xFFFFFF, 100);
   
   _root.onMouseMove = function() {
      chalk.lineTo(_xmouse, _ymouse);
   }
}

_root.onMouseUp = function() {
   _root.onMouseMove = noLine;
}

After you have applied the code to the stage in the Actions Inspector, you may now test your chalkboard. To do this, from the Control menu, select the Test Movie option. You will be able to draw on the stage while you are testing the movie.

If you want to change the scale/size of your chalk, within the chalk.lineStyle line, change the first number within the parentheses (in this case 10). The higher the number, the broader the thickness of the line will be.

You can also change the color of the chalk to a different color. In this tutorial, I have the color of the chalk set to white (0xFFFFFF); however, you can change the color to whatever you like. To do this, enter the hexidecimal color code for the color you would like to use in the second part of the chalk.lineStyle line. For a full list of hexidecimal color codes, please visit this site.

Please be sure to leave any questions or comments below in this post’s comments section.

About the Author:
Chad Sweely is a staff writer and Flash Designer for FlashNewz.