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.