Drawing with a ruler

Hi all,

I had this question pm to me (please don’t follow this example) :

I was wondering if I can draw a straight line along the edge of a ruler that I make that students can manipulate (drag,rotate, etc.)
Let’s say that I ask students to draw a line on a grid that has a slope of 4 and a y-intercept of -2. In a Flash file, they would manipulate the ruler to where the line would be drawn. Let’s say the ruler is where it should be. They then press a button to initiate the drawing function. Can the edge of the ruler be used to help them draw a nice, straight line … the mouse not drawing over or under the ruler???
I find it pretty interesting. I’ve put something togother in 5 minutes, but it’s not perfect, so if anyone wants to give it a shot…

The code so far (based on Sen’s wonderful free transform tool from http://proto.layer51.com ):

SimpleFreeTransform = {};
SimpleFreeTransform.tools = ["none","move","scale","rotate"];
SimpleFreeTransform.onRelease = function(){
	delete this.onMouseMove;
	this._parent.FTScaleRegulator.removeMovieClip();
}
SimpleFreeTransform.onPress = function(){
	var clip = this._parent;
	switch(this.tool){
		case "move":
			var orig_x = clip._x;
			var orig_y = clip._y;
			var clickx = clip._parent._xmouse;
			var clicky = clip._parent._ymouse;
			var offx = clickx - orig_x;
			var offy = clicky - orig_y;
			this.onMouseMove = function(){
				if (Key.isDown(Key.SHIFT)){
					var thisx = clip._parent._xmouse - clickx;
					var thisy = clip._parent._ymouse - clicky;
					if (Math.abs(thisx) > Math.abs(thisy)){
						clip._x = clip._parent._xmouse - offx;
						clip._y = orig_y;
					}else{
						clip._x = orig_x;
						clip._y = clip._parent._ymouse - offy;
					}
				}else{
					clip._x = clip._parent._xmouse - offx;
					clip._y = clip._parent._ymouse - offy;
				}
				updateAfterEvent();
			}
			break;
		case "scale":
			var r = clip._parent.createEmptyMovieClip("FTScaleRegulator",60000);
			r.match(clip,"_rotation","_x","_y");
			var b = this.getBounds(this);
			var clickXscale = clip._xscale;
			var clickYscale = clip._yscale;
			var sx = clickXscale/(r._xmouse/b.xmin);
			var sy = clickYscale/(r._ymouse/b.ymin);
			this.onMouseMove = function(){
				if (Key.isDown(Key.SHIFT)){
					var scale = Math.max(((r._xmouse*sx/clickXscale)/b.xmin), ((r._ymouse*sy/clickYscale)/b.ymin));
					clip._xscale = clickXscale * scale;
					clip._yscale = clickYscale * scale;
				}else{
					clip._xscale = clickXscale * ((r._xmouse*sx/clickXscale)/b.xmin);
					clip._yscale = clickYscale * ((r._ymouse*sy/clickYscale)/b.ymin);
				}
				updateAfterEvent();
			}
			break;
		case "rotate":
			var clickAngle = clip.getMouseAngle();
			var clickRotation = clip._rotation;
			this.onMouseMove = function(){
				var r = clickRotation - clickAngle + clip.getMouseAngle();
				clip._rotation = (Key.isDown(Key.SHIFT)) ? r.snap(45,clickRotation) : r;
				updateAfterEvent();
			}	
			break;
		default: 
			trace("invalid FreeTransform tool specified: " + this.tool);
	}
}
MovieClip.prototype.getMouseAngle = function(){
	return Math.atan2(this._parent._ymouse-this._y, this._parent._xmouse-this._x) * 180/Math.PI;
}
MovieClip.prototype.match = function(mc, props){
	var L = (props = arguments).length;
	if (L == 1) L = (props = [null,"_alpha","_visible","_rotation","_xscale","_yscale","_x","_y"]).length;
	while(--L) this[props[L]] = mc[props[L]];
}
Number.prototype.snap = function(range,base){
	var dif = (this-base) % range;
	var n = this - dif;
	if (dif > 0){
		if (dif > range/2) n += range;
	}else if (dif < -range/2) n -= range;
	return n;	
}
MovieClip.prototype.enableFreeTransform = function(tool){
	switch(tool){
		case "none":
		case null:
		case undefined:
		case false:
		case 0:
			this.disableFreeTransForm();
			break;
		default:
			if (!this.FreeTransformHandler){
				this.createEmptyMovieClip("FreeTransformHandler",60001).hitArea = this;
				ASSetPropFlags(this,"FreeTransformHandler",1,1);
			}
			this.FreeTransformHandler.tool = tool;
			this.FreeTransformHandler.onPress = SimpleFreeTransform.onPress;
			this.FreeTransformHandler.onRelease = this.FreeTransformHandler.onReleaseOutside = SimpleFreeTransform.onRelease;
	}
}

MovieClip.prototype.disableFreeTransform = function(){
	this.FreeTransformHandler.tool = 0;
	delete this.FreeTransformHandler.onPress;
	delete this.FreeTransformHandler.onRelease;
	delete this.FreeTransformHandler.onReleaseOutside;
}


//******** EXAMPLE *********\

// cycles through the transform tools using the up and down keys
// and applies each to the my_mc movieclip
Key.addListener(my_mc);
my_mc.onKeyDown = function(){
	if (Key.isDown(Key.UP) || Key.isDown(Key.DOWN)){
		this.index += Key.isDown(Key.UP) - Key.isDown(Key.DOWN);
		if (this.index < 0) this.index = SimpleFreeTransform.tools.length-1;
		else if (this.index >= SimpleFreeTransform.tools.length) this.index = 0;
		this.enableFreeTransform( SimpleFreeTransform.tools[this.index] );
		trace(SimpleFreeTransform.tools[this.index]);
	}
}

//\**************************/

// My code -> the part you'd have to change
myListener = {} ;
Key.addListener (myListener) ;
Mouse.addListener(_root) ;

myListener.onKeyDown = function () {
	if (Key.isDown(Key.SHIFT)) {
		x = my_mc._x ;
		y = my_mc._y ;
		a = my_mc._rotation * Math.PI / 180 ;
		// line equation: y = a*x + b
		_root.lineStyle(0, 0, 100) ;
		var py = y + Math.tan(a) * (_xmouse - y) ;
		_root.moveTo (_xmouse, py) ;
		trace ("Drawing") ;
		_root.onEnterFrame = enableDrawing ;
	} ;
} ;
myListener.onKeyUp = function () {
	if (!Key.isDown(Key.SHIFT)) {
		delete _root.onMouseMove ;
	} ;
} ;
function enableDrawing () {
	var py = y + Math.tan(a) * (_xmouse - y) ;
	this.lineTo (_xmouse, py) ;
} ;[/As]There is a movie clip of a long rectangle nammed my_mc, with its registration point on the top left corner.

Usage: Press the up arrow 3 times, and then shift to draw.