pathFinder

The PathPlayer Tool

This Flash MX movie plays drawings saved as text files. It allows the user to control speed, show or hide the pencil, and load additional drawings from text files. It is written without the fancy Flash components, in order to keep file size down (9.32K). The project grew out of a request for help on FlashKit. Someone was working on a tool to help people learn how to write. Some of the techniques used here were further developed in the Whiteboard application.

The PathFinder Tool

This tool is used for recording paths. The paths can be saved locally to the user's machine (using Flash "Shared Object" methods), and can also be exported to text files (by cutting and pasting).

How to Adapt the Player Tool

The player is designed to be easily incorporated into Flash movies. All that you need are the following two lines of code, and a movie clip showing a picture of a pen or pencil.

	#include "makePlayer.as"
	makePlayer(clipName, sourceFile, penColor, showPen, speed, autoStart)

In the second line, you substitute values. So an actual example from a Flash movie might be this:

	#include "makePlayer.as"
	makePlayer("myDrawing", "myPicture.txt", 0xFF00DD, true, 40, false)

More Details of the Player Tool

Parameters

The function makePlayer() requires six parameters:

makePlayer(clipName, sourceFile, penColor, showPen, speed, autoStart) 
	clipName = "myDrawing"	 // name for movie clip to draw in
	sourceFile = "myFile.txt"// drawing source file
	penColor = 0xFF00DD 	// hex color of drawing
	showPen = true 		// show or hide pen
	speed = 30		// number of steps drawn per second, 
						subject to machine speed
	autoStart = true	// play drawing as soon as it's loaded

Required resources:

A movie clip in the library, exported for ActionScript with linkage "pen_mc." This movie clip should have its drawing end exactly at the registration point

Optional resources

If the movie clip that calls the makePlayer function has these objects, they will be used.

	play_btn	// play the drawing
	stop_btn	// stop the drawing
	speed_ctrl      // a slider to set the speed.  
	showPen_chk     // a checkbox for showing or not showing the pen
	title_txt       // a textfield to display the title of the current drawing

The speed control must call its change() method when it is changed, and allow itself to be updated by its setValue() method. The showPen control must call its change() method when changed, and allow updates via its setSelected() method. Note that makePlayer() will overwrite these controls' existing change() methods. For more details, see the source file makePlayer.as.

Simple Invocation

Here is an example of how a button could call makePlayer() to play a drawing.

    go_btn.onPress = function() {
	canvas.stopDrawing();  
   	makePlayer("canvas", "hello.txt", 0x008800, true, 40, true);
	canvas._x = 100;
	canvas._y = 100;
	canvas._rotation = 20;
	canvas._xscale = canvas._yscale = 50;
    }

Format of the Text Files

The text files record when the mouse goes down, comes up, or moves. Each line of the file has the kind of motion, followed by the x and y coordinates where the motion ends. Here is an example:

	title=my drawing&
	&pathString=
	down 10 20
	line 10 30
	line 10 50
	up 10 52
	down 20 30
	line 20 35
	up 20 38&

Copyright and Permissions

These programs are copyright 2004 by Michael Kantor. The player tool is freely available, including source code. The script is intended to be reused by others. Please feel free to do so, for any educational and/or non-profit uses. If you make any significant improvements, please share them with me (mkantor(at)mathlearning.net). Please contact me before using the code for any commercial purposes.

The pathFinder tool, which records paths as textfiles, is available for all to use, but I am not making the source code available.

A .zip file containing everything you need can be had here.

FlashGizmo.com