Making a Line Tool? ie point to point

[mindfriction]

Ok, well after reading the various drawing api stuff I can create a drawing board like the tutorial which works like a paint brush, BUT how do I make it work like a line tool? IE when the user clicks from one point to another, or holds shift it draws a perfect straight line?

Im baffled, Ive tried to fiddle with this code, but Im just not quietb there yet. Any ideas??



_root.createEmptyMovieClip("line",1);

_root.onMouseDown = function(){
line.moveTo(_xmouse,_ymouse);
line.lineStyle(2,0x000000,100);
this.onMouseMove = function(){
line.lineTo(_xmouse,_ymouse);
updateAfterEvent();
}
}
_root.onMouseUp = function(){
this.onMouseMove = null;
}

[pom]

A start:
_root.createEmptyMovieClip("line",1);

_root.onMouseDown = function(){
line.moveTo(_xmouse,_ymouse);
oldY=_ymouse;
line.lineStyle(2,0x000000,100);
}
_root.onMouseUp = function(){
if (Key.isDown(Key.SHIFT){
line.lineTo(_xmouse,oldY);
}
}
Version beta 1.0, as I said. Is it something like that that you want?

[mindfriction]

Thanks, yeah this is close, quiet similiar to what Ive been working on. But I want it so that the point is visible. Ie when the user clicks they see the anchor point, and then as they drag the mouse the line drags from the anchor point until they let go whereupon it draws the line from the original anchor point to where the point (_xmouse, _ymouse) the user realsed the mouse button. Make sense? :)

[lostinbeta]

Alright, I really got interested in this and tried experimenting on my own... here is what I have so far...


i = 0;
MovieClip.prototype.buildPoint = function() {
this.lineStyle(1, 0x000000, 100);
this.beginFill(0xE6E6E6, 100);
this.moveTo(-3, -3);
this.lineTo(3, -3);
this.lineTo(3, 3);
this.lineTo(-3, 3);
this.lineTo(-3, -3);
};
_root.createEmptyMovieClip("line", -4);
_root.createEmptyMovieClip("tempLine", -3);
_root.createEmptyMovieClip("point1", -2);
point1.buildPoint();
_root.createEmptyMovieClip("point2", -1);
point2.buildPoint();
point1._visible = point2._visible=false;
_root.onMouseDown = function() {
i++;
line.moveTo(_xmouse, _ymouse);
line.lineStyle(2, 0x000000, 100);
xPos = _xmouse;
yPos = _ymouse;
point1._x = point2._x=xPos;
point1._y = point2._y=yPos;
point1._visible = true;
point2._visible = true;
this.onMouseMove = function() {
tempLine.clear();
tempLine.lineStyle(2, 0xE6E6E6, 50);
tempLine.moveTo(xPos, yPos);
if (Key.isDown(Key.SHIFT)) {
if (_ymouse<=yPos-100 || _ymouse>=yPos+100) {
point2._x = xPos;
point2._y = _ymouse;
tempLine.lineTo(xPos, _ymouse);
} else {
point2._x = _xmouse;
point2._y = yPos;
tempLine.lineTo(_xmouse, yPos);
}
} else {
point2._x = _xmouse;
point2._y = _ymouse;
tempLine.lineTo(_xmouse, _ymouse);
}
};
};
_root.onMouseUp = function() {
tempLine.clear();
delete this.onMouseMove;
point1._visible = point2._visible=false;
if (Key.isDown(Key.SHIFT)) {
if (_ymouse<=yPos-100 || _ymouse>=yPos+100) {
line.lineTo(xPos, _ymouse);
} else {
line.lineTo(_xmouse, yPos);
}
} else {
line.lineTo(_xmouse, _ymouse);
}
if (i>=10) {
i = 0;
}
};


Remember, I was just experimenting, so feel free to do whatever you want with the above code. If you wish me to explain it, I will :) And as for Ilyas and any other AS gods on this forum... I am pretty sure my code isn't optimized, but I am sooo not up to that right now.


Note: It works with and without using SHIFT, and you can draw straight lines vertically and horizontally. This was fun :)

[mindfriction]

Wow! Nice work lostinbeta :D!!! Extra nice touch with the square on the anchor point, I hadnt even thought of that.

Hmm if you have a bit of time could you explain it to me..:)





Also I keep seeing more use of the prototype. I might ask you then, there was another post, i was having troubles building a prototype and using it to initialise attached Mc's. I could use my prototype to give my attached clip mouseUp and mousePress functionality, but I couldnt build an onLoad function to load textvars (via LOadVars()) to populate the textfields within the attached mc. In short could you give me a hint on how do do this?

Thanks :P

[jcs]

kudos, lost. that is some impressive work!
I second mindfriction's request for a peek into yer process(-:

fun stuff.

jcs

[Lunar_4u]

Ye i gotta admit that is pretty impressive , Give us a tutorial on it!!! wooohooo lol :sigh: . I would even recommend that it added to best of kirupa :D

[lostinbeta]

I will gladly explain myself. I actually did the first time, but on sending the forum went down and I wasn't about to retype it all over.....lol. But I can do it now :)

First, I changed my code a bit, using functions for everything. Here is my new code. I will explain it bit by bit.

i = 0;
MovieClip.prototype.buildPoint = function(halfWidth) {
this.lineStyle(1, 0x000000, 200);
this.beginFill(0xE6E6E6, 100);
this.moveTo(-halfWidth, -halfWidth);
this.lineTo(halfWidth, -halfWidth);
this.lineTo(halfWidth, halfWidth);
this.lineTo(-halfWidth, halfWidth);
this.lineTo(-halfWidth, -halfWidth);
};
function drawProcess() {
i++;
xPos = _xmouse;
yPos = _ymouse;
point1._x = point2._x=xPos;
point1._y = point2._y=yPos;
point1._visible = point2._visible=true;
line.moveTo(xPos, yPos);
this.onMouseMove = function() {
tempLine.clear();
tempLine.lineStyle(2, 0xE6E6E6, 50);
tempLine.moveTo(xPos, yPos);
if (Key.isDown(Key.SHIFT)) {
if (_ymouse<=yPos-100 || _ymouse>=yPos+100) {
point2._x = xPos;
point2._y = _ymouse;
tempLine.lineTo(xPos, _ymouse);
} else {
point2._x = _xmouse;
point2._y = yPos;
tempLine.lineTo(_xmouse, yPos);
}
} else {
point2._x = _xmouse;
point2._y = _ymouse;
tempLine.lineTo(_xmouse, _ymouse);
}
};
}
function drawFinalLine() {
tempLine.clear();
delete this.onMouseMove;
point1._visible = point2._visible=false;
line.lineStyle(.25, 0x000000, 100);
if (Key.isDown(Key.SHIFT)) {
if (_ymouse<=yPos-100 || _ymouse>=yPos+100) {
line.lineTo(xPos, _ymouse);
} else {
line.lineTo(_xmouse, yPos);
}
} else {
line.lineTo(_xmouse, _ymouse);
}
if (i>=4) {
i = 0;
}
}
function clearMe() {
if (Key.isDown(Key.DELETEKEY)) {
line.clear();
}
}
_root.createEmptyMovieClip("line", 1);
_root.createEmptyMovieClip("tempLine", 2);
_root.createEmptyMovieClip("point1", 3).buildPoint(3);
_root.createEmptyMovieClip("point2", 4).buildPoint(3);
point1._visible = point2._visible=false;
_root.onMouseDown = drawProcess;
_root.onMouseUp = drawFinalLine;
_root.onEnterFrame = clearMe;

[lostinbeta]

Alright, let's start with "i".

i = 0;
This is just a variable. We will later increment the variables number so that each clip and line drawn will be on different levels without overwriting eachother (since only one object can be on a level at a time).

Next up is the prototype I used to build the points. I used a prototype here because of it's ability to use "this" as a locator, and since you can do that you can call the function directly to a movie clip symbol and have it effect only that movie clip symbol without having to retype all of that code. I probably am not explaining myself right here so check out Ilyas' great prototypes tutorial, it is where I learned how to use prototypes. TUTORIAL HERE (http://www.kirupa.com/developer/actionscript/tricks/prototypes.asp)

MovieClip.prototype.buildPoint = function(halfWidth) {
this.lineStyle(1, 0x000000, 200);
this.beginFill(0xE6E6E6, 100);
this.moveTo(-halfWidth, -halfWidth);
this.lineTo(halfWidth, -halfWidth);
this.lineTo(halfWidth, halfWidth);
this.lineTo(-halfWidth, halfWidth);
this.lineTo(-halfWidth, -halfWidth);
};
As you can tell, this prototype changed since the last time. I added a parameter to the function called halfWidth. What this does is when you call the prototype you will have to define that parameters number, which would be half of the width you want your end point to be. The prototype then accomidates this parameter and using the drawing API to draw the square to the correct size. I think the code inside is pretty self explanitory if you already know the drawing API (which you did the tutorials, so you know).

Now let us move on. Here we come up to the drawProcess function. This is the function that creates the end points and draws the grey line while you are in the process of creating your line.

function drawProcess() {
i++;
xPos = _xmouse;
yPos = _ymouse;
point1._x = point2._x=xPos;
point1._y = point2._y=yPos;
point1._visible = point2._visible=true;
line.moveTo(xPos, yPos);
this.onMouseMove = function() {
tempLine.clear();
tempLine.lineStyle(2, 0xE6E6E6, 50);
tempLine.moveTo(xPos, yPos);
if (Key.isDown(Key.SHIFT)) {
if (_ymouse<=yPos-100 || _ymouse>=yPos+100) {
point2._x = xPos;
point2._y = _ymouse;
tempLine.lineTo(xPos, _ymouse);
} else {
point2._x = _xmouse;
point2._y = yPos;
tempLine.lineTo(_xmouse, yPos);
}
} else {
point2._x = _xmouse;
point2._y = _ymouse;
tempLine.lineTo(_xmouse, _ymouse);
}
};
}
Wow... much bigger now ;) The first thing it does is increments "i" by 1. <B>i++</B> is the same as saying <B>i = i+1</B>.

xPos = _xmouse;
yPos = _ymouse;
Since we will later be calling this function onMouseDown the xPos and yPos variables will be the _xmouse and _ymouse positions at the time of pressing your mouse button down. This will later set the anchor point 1 position and be used in drawing your line.

point1._x = point2._x=xPos;
point1._y = point2._y=yPos;
point1._visible = point2._visible=true;
Alright here it may loko a bit strange because I have so many equal signs...lol. Well what I did here was combined variables to make my code shorter. When two items equal the same exact thing you can string them along as I did above. In this cause point1._x and point2._x will both be equal to the xPos when the mouse is down. Same goes for the point1._y and point2._y. This also then makes point1 and point2 visible (as we make them invisible when not creating a line we will need to make them visible while drawing the line).

line.moveTo(xPos, yPos);
Moves the line clip to the xPos and yPos which is where the anchor point1 will be and will be the start of the line.

this.onMouseMove = function() {
tempLine.clear();
tempLine.lineStyle(2, 0xE6E6E6, 50);
tempLine.moveTo(xPos, yPos);
if (Key.isDown(Key.SHIFT)) {
if (_ymouse<=yPos-100 || _ymouse>=yPos+100) {
point2._x = xPos;
point2._y = _ymouse;
tempLine.lineTo(xPos, _ymouse);
} else {
point2._x = _xmouse;
point2._y = yPos;
tempLine.lineTo(_xmouse, yPos);
}
} else {
point2._x = _xmouse;
point2._y = _ymouse;
tempLine.lineTo(_xmouse, _ymouse);
}
};
This following code allows the grey line and points to work. It targets the clip tempLine which we will create later and will be the clip to hold grey line. You will see it first uses clear(). I did this because if we didn't, then the line would always be repeated making for a real big sloppy ugly mess. Remove it and see what I mean. Then we define the lineStyle and move the clip to where point1 is, which is the start of our grey line.
The if statement is what allows us to do the straight line method or not. As you see the first if is if the key that is down is the shift key, then inside that if statement there is another if/else statement. This embedded if/else statement is to check for vertical or horizontal straight line drawing. The if statement first checks if the _ymouse is outside a 100px radius (100px up or 100px down) of the original yPos. If that is true, the line is moved only vertically, but if that is false it moves onto the else statement to which is moves the line only horizontally. After mentioned the xPos and yPos so much already I am pretty sure the code in those statements is self explanitory. Now after that you will see another else statement that belongs to the main if statement. This says that if shift is NOT held down, then to just move the line to where the current mouse position is.
Wow, I hope I made sense. Now it is time to talk about the function that actually draws our final line!

function drawFinalLine() {
tempLine.clear();
delete this.onMouseMove;
point1._visible = point2._visible=false;
line.lineStyle(.25, 0x000000, 100);
if (Key.isDown(Key.SHIFT)) {
if (_ymouse<=yPos-100 || _ymouse>=yPos+100) {
line.lineTo(xPos, _ymouse);
} else {
line.lineTo(_xmouse, yPos);
}
} else {
line.lineTo(_xmouse, _ymouse);
}
if (i>=4) {
i = 0;
}
}
It first uses clear() to clear the grey line from being on the stage. Why have it there if you don't need it right? It then deletes the dynamic event hander for the onMouseMove. This is important otherwise your grey line will still continue to draw, and it will still continue to follow your mouse everywhere. We don't want that of course. Alright, so that grey line is all taken care of, we then make the points invisible by setting their _visible property back to false.
The if statements in here are the same as in the previous function, but the only difference is that instead of moving the line it actually draws the line instead.
But wait... why do I make "i" go back to 0? Simple, if we don't reset "i", then your levels will keep increasing and increasing. Why keep doing that when this only uses for levels so we can just use the same 4 over and over. It seems more efficient to me, but I don't know, I am not a very efficient coder :-\
Well that is it for that function. Time for the deleteMe() function.

function clearMe() {
if (Key.isDown(Key.DELETEKEY)) {
line.clear();
}
}
Simple, when the delete key is pressed, clear the lines! You don't need this, but I was having a lot of fun messing with this and testing new things with it, when the stage would get too cluttered I hated closing and retesting it, so I just created a clear function.

_root.createEmptyMovieClip("line", 1);
_root.createEmptyMovieClip("tempLine", 2);
_root.createEmptyMovieClip("point1", 3).buildPoint(3);
_root.createEmptyMovieClip("point2", 4).buildPoint(3);
point1._visible = point2._visible=false;
_root.onMouseDown = drawProcess;
_root.onMouseUp = drawFinalLine;
_root.onEnterFrame = clearMe;
It creates 4 empty movie clips. You will notice their levels are the first 4 levels, which is all I plan to use for this.
You will also notice that the creation of point1 and point2 also include the buildPoint function. This is a weird way of writing it, but it saves us a line rather than creating a new line that say point1.buildPoint(3) we can just attach it to the actual creation of the clip. It builds a point with a halfWidth of 3 (making our point 6px wide total).
Then it sets point1 and point2 to be invisible when the movie first starts so you don't see them in the upper left corner where they are originally created (when an position is undefined it defaults to (0,0)).
We then proceed to add dynamic event handlers. onMouse down we call the drawProcess which creates the faux line we originally see, then onMouseUp we call the drawFinalLine function which actually draws the line and remove the faux line, then onEnterFrame we call the clearMe function which contanstly checks if the delete key is being pressed and if so it clears the stage of the lines we drew.

You can read up on dynamic event handlers (another great Ilyas tutorial that taught me)... TUTORIAL HERE (http://www.kirupa.com/developer/actionscript/tricks/dynamicevent.asp)

Whew...... Sorry I know there is a character limit in these posts so I tried to make it as short and to the point as possible. If their is any part you don't understand please just ask and I will be able to go further into detail about it.

[lostinbeta]

I am just waiting for Ilyas or Senocular to come along and tell me I wasted my time and then post like 6 lines of code to do the same thing.....LOL :P

[mindfriction]

Thats real swell of ya lostinbeta. My learning curve just got higher :). And I agree, I think you could submit this as a tutorial for full recoginiton of your great effort :P I must say Im not fully confident with everything about the code but I have a rough idea whats going on. Its a pretty organised piece of code. Well Im going to mess round with it and maybe I'll send you a link/ attach the movie I used it in.

Hahah yeah Im guessing Senocular, or ilyaslamasse will be checking this thread out, I might msn senoc about it :P

[lostinbeta]

Well if there are any parts of the code you don't understand just let me know, I will try and go into further detail of it. As I stated before, I had to keep it short and sweet because there is a limit to how much you can type in a reply, but if I dedicate the explantion to just one part I can probably go deeper into how it works.

[mindfriction]

Umm one question, you talk about using 'i' to keep each line and clip on a different level, but I cant see where you set any line or clip to level 'i'. Could you explain that a bit more clearly? Thanks

[lostinbeta]

Certainly, I can explain.

i = idiot.... yep, where "i" is actually me.

Stupid me forgot that with my reworked method I didn't have any use for I but I didn't think to look over like that....LOL. My original version used "i" (the one I made before I posted my progress so far). Thing is, I changed it around so I wouldn't need "i", but completely forgot to remove it from the script :crazy:

So when I was explaning I knew why "i" was there in the first place, so it just dawned on me to state what it was for and it didn't even hit me that I no longer needed "i" in this script.

Good Catch (-:


MovieClip.prototype.buildPoint = function(halfWidth) {
this.lineStyle(1, 0x000000, 200);
this.beginFill(0xE6E6E6, 100);
this.moveTo(-halfWidth, -halfWidth);
this.lineTo(halfWidth, -halfWidth);
this.lineTo(halfWidth, halfWidth);
this.lineTo(-halfWidth, halfWidth);
this.lineTo(-halfWidth, -halfWidth);
};
function drawProcess() {
xPos = _xmouse;
yPos = _ymouse;
point1._x = point2._x=xPos;
point1._y = point2._y=yPos;
point1._visible = point2._visible=true;
line.moveTo(xPos, yPos);
this.onMouseMove = function() {
tempLine.clear();
tempLine.lineStyle(2, 0xE6E6E6, 50);
tempLine.moveTo(xPos, yPos);
if (Key.isDown(Key.SHIFT)) {
if (_ymouse<=yPos-100 || _ymouse>=yPos+100) {
point2._x = xPos;
point2._y = _ymouse;
tempLine.lineTo(xPos, _ymouse);
} else {
point2._x = _xmouse;
point2._y = yPos;
tempLine.lineTo(_xmouse, yPos);
}
} else {
point2._x = _xmouse;
point2._y = _ymouse;
tempLine.lineTo(_xmouse, _ymouse);
}
};
}
function drawFinalLine() {
tempLine.clear();
delete this.onMouseMove;
point1._visible = point2._visible=false;
line.lineStyle(.25, 0x000000, 100);
if (Key.isDown(Key.SHIFT)) {
if (_ymouse<=yPos-100 || _ymouse>=yPos+100) {
line.lineTo(xPos, _ymouse);
} else {
line.lineTo(_xmouse, yPos);
}
} else {
line.lineTo(_xmouse, _ymouse);
}
}
function clearMe() {
if (Key.isDown(Key.DELETEKEY)) {
line.clear();
}
}
_root.createEmptyMovieClip("line", 1);
_root.createEmptyMovieClip("tempLine", 2);
_root.createEmptyMovieClip("point1", 3).buildPoint(3);
_root.createEmptyMovieClip("point2", 4).buildPoint(3);
point1._visible = point2._visible=false;
_root.onMouseDown = drawProcess;
_root.onMouseUp = drawFinalLine;
_root.onEnterFrame = clearMe;


^^removed all traces of that "i".... 'DOH.

[mindfriction]

LOL, I was getting worried, it only just clicked that 'i' muist have been old code :P

[lostinbeta]

Well it goes with my previous statement in the description that "I am not an efficient coder"...lol. I proved myself right there.

I try to be as efficient as possible, but my mind thinks in complicated ways so it is hard :crazy:

[mindfriction]

Hmm you seem to be on a role, heh :P,

Take a look at the attachment, Ive been through the dynamic events link in kirupa.

If yoiu've opened my attachment you'' see when you run the movie you can drag a circle onto the 'canvas' of the stage, which is all good. BUT when you try to drag the circle on the stage it duplicates the circle again and again, which isnt what i would like. Im guessing there is a way to change the onPress event for the mc, so when its on the canvas all you can do is drag it and it wont duplicate itself.. Anyway see the attachment and yuo'll understand

[pom]

Looks good :) And 6 lines seem a bit short to me :P Maybe Sen has an idea... :evil:

[mindfriction]

Aaaaah *BRAIN CLICKS* :sigh:

I think Im finally getting the idea! :P

Check out my new revised version, only thing I have to work on now is to make sure the user can only drag the circle inside the canvas. Could easily mask it i guess, but suppose I could make 'draggable area" boundry. *scrathes head* :ninja:

When Im finished I might try and put together a flash "doodle board"

[lostinbeta]

Ilyas: Ok Ok, then 15 lines :P

Mindfriction: Ok, I reworked your code a bit... I completely got rid of the controller clip and put all the actions on a frame. That is what makes dynamic event handlers so great :) I also took it upon myself to add a swapDepths() feature so that when you click on the objects on the stage that you drag and drop they will be pulled to the top above all the other clips.

You can check the .fla file to see what I did.

[mindfriction]

OMG fantast ic (not) Ive had trouble all night, and now Ive lost my last few postings????? ARGH! Oh well :sigh: I wanted to show you what I had done lost/ senoc. I'll have to post it tommorow as Im not on my own computer atm.

[lostinbeta]

Yeah, due to complications in the move we lost the past 5 days worth of posts :(

But I think it was worth it in the long run.

Sen needs to post his circle code again!!!

[mindfriction]

My latest version, check it out. As you can see you can choose between circle and line tools. Not very optimized :/, what do you think of my AS, any imporvements?

[mindfriction]

Yeah I guess that the new servers will make everything run a little faster, but yeah Senocs circle code has gone, and thank god I have a few versions of the line code you put up!.

One thing you may notice about my movie is that I u cant move the circles while there on the canvas anymore, it just keeps dupliacting them. I like being able to choose the initial pos of the circles by cliccking there pos on the canvas, but I dont like the fact I cant move them anymore once they are on the stage. There is something Im deffintly missing in the AS, it jus hasnt clikced yet

[mindfriction]

Ok, Ok, Havent heard a reply for a while. I guess Ive asked to much already. :/ ... But if there was one last thing I could ask, its regarding relative and absolute paths. I tried to take the entire movie and sit it inside an MC, I figured that all I had to do was change all the '_root' references to a 'this' references, BUT of course that didnt work ;( ARrgghh!!!

[lostinbeta]

Sorry. Been busy :hat:

Did you try _parent as well?

[mindfriction]

Nah thats fine, I was just getting worried with the whole change of servers, I have to keep logging in, and sometimes because of stoopid IE rememberring too much I occassionally get the old thread (ie the one that doesnt have the missing posts). And sometimes when Im online it says im not lol. Its nice to hear your reply :)

'_parent' has never really been my friend but where slowly starting to get aquainted. I just didnt understand the def in the AS dictionary. ATm Im trying to redo all the code so that it is using relative paths and not absolute (hence so it can work within a clip). Ive only just got a few things working. Its **** tiresome and Im working on trial and error.heh

[lostinbeta]

Yeah, I know it is tiresome. I am working on something else right now and it is making me angry.... :sigh: But alas, we must persist.


And I have not experienced any problems with the new switched forums. Weird.

[mindfriction]

Quick question though, from AS within a clip, the relative path back to _root, is something like




this._parent //?????



?? I mean im trying to convert the absolute paths in this part of your famous 'line tool' code to realtive paths



function drawProcess() {

if(_root.canvas.hitTest(_root._xmouse, _root._ymouse, true)) {
xPos = _xmouse;
yPos = _ymouse;
point1._x = point2._x=xPos;
point1._y = point2._y=yPos;
point1._visible = point2._visible=true;
line.moveTo(xPos, yPos);


this.onMouseMove = function() {

tempLine.clear();
tempLine.lineStyle(2, 0xE6E6E6, 50);
tempLine.moveTo(xPos, yPos);
if (Key.isDown(Key.SHIFT)) {
if (_ymouse<=yPos-100 || _ymouse>=yPos+100) {
point2._x = xPos;
point2._y = _ymouse;
tempLine.lineTo(xPos, _ymouse);
} else {
point2._x = _xmouse;
point2._y = yPos;
tempLine.lineTo(_xmouse, yPos);
}
} else {
point2._x = _xmouse;
point2._y = _ymouse;
tempLine.lineTo(_xmouse, _ymouse);
}

};
}

[senocular]

circle:


MovieClip.prototype.drawCircle = function (x,y,r) {
var c1=r*(Math.SQRT2-1);
var c2=r*Math.SQRT2/2;
this.moveTo(x+r,y);
this.curveTo(x+r,y+c1,x+c2,y+c2);
this.curveTo(x+c1,y+r,x,y+r);
this.curveTo(x-c1,y+r,x-c2,y+c2);
this.curveTo(x-r,y+c1,x-r,y);
this.curveTo(x-r,y-c1,x-c2,y-c2);
this.curveTo(x-c1,y-r,x,y-r);
this.curveTo(x+c1,y-r,x+c2,y-c2);
this.curveTo(x+r,y-c1,x+r,y);
return this;
}

[lostinbeta]

Wahoo! Thanks for posting that again Sen. But even more wahooish is that Kirupa got the AS tag working!

MovieClip.prototype.drawCircle = function(x, y, r) {
var c1 = r*(Math.SQRT2-1);
var c2 = r*Math.SQRT2/2;
this.lineStyle(1, 0x000000, 100);
this.beginFill(0xE6E6E6, 100);
this.moveTo(x+r, y);
this.curveTo(x+r, y+c1, x+c2, y+c2);
this.curveTo(x+c1, y+r, x, y+r);
this.curveTo(x-c1, y+r, x-c2, y+c2);
this.curveTo(x-r, y+c1, x-r, y);
this.curveTo(x-r, y-c1, x-c2, y-c2);
this.curveTo(x-c1, y-r, x, y-r);
this.curveTo(x+c1, y-r, x+c2, y-c2);
this.curveTo(x+r, y-c1, x+r, y);
this.endFill();
return this;
};
this.createEmptyMovieClip("container", 1).drawCircle(100, 100, 50);

[senocular]

woohoo!
try this for specifying lines/fills


MovieClip.prototype.drawCircle = function(x, y, r, lstyle, fstyle) {
var c1 = r*(Math.SQRT2-1);
var c2 = r*Math.SQRT2/2;
if (lstyle) lineStyle.apply(this, lstyle);
if (fstyle) beginFill.apply(this, fstyle);
this.moveTo(x+r, y);
this.curveTo(x+r, y+c1, x+c2, y+c2);
this.curveTo(x+c1, y+r, x, y+r);
this.curveTo(x-c1, y+r, x-c2, y+c2);
this.curveTo(x-r, y+c1, x-r, y);
this.curveTo(x-r, y-c1, x-c2, y-c2);
this.curveTo(x-c1, y-r, x, y-r);
this.curveTo(x+c1, y-r, x+c2, y-c2);
this.curveTo(x+r, y-c1, x+r, y);
this.endFill();
return this;
};
this.createEmptyMovieClip("container", 1).drawCircle(100, 100, 50, [1,0x00000,100], [0xff0000,100]);


woohoo as

now we just need a quick reply ;)

[lostinbeta]

Hey Sen, do you know how to make this so you can click and drag to resize (on original creation not afterwards)?

I have something now, but it is way buggy, and since your an AS god and stuff I figured you could figure it out :P

[senocular]

like this?


Math.distance = function(x1,y1,x2,y2){
var x = x1-x2;
var y = y1-y2;
return Math.sqrt(x*x + y*y);
}
MovieClip.prototype.drawCircle = function(x, y, r, lstyle, fstyle) {
var c1 = r*(Math.SQRT2-1);
var c2 = r*Math.SQRT2/2;
if (lstyle) lineStyle.apply(this, lstyle);
if (fstyle) beginFill.apply(this, fstyle);
this.moveTo(x+r, y);
this.curveTo(x+r, y+c1, x+c2, y+c2);
this.curveTo(x+c1, y+r, x, y+r);
this.curveTo(x-c1, y+r, x-c2, y+c2);
this.curveTo(x-r, y+c1, x-r, y);
this.curveTo(x-r, y-c1, x-c2, y-c2);
this.curveTo(x-c1, y-r, x, y-r);
this.curveTo(x+c1, y-r, x+c2, y-c2);
this.curveTo(x+r, y-c1, x+r, y);
this.endFill();
return this;
};
this.onMouseDown = function(){
if (this.circ.onMouseMove) delete this.circ.onMouseMove;
var x1 = this._xmouse, y1 = this._ymouse;
this.circ = this.createEmptyMovieClip("circ"+this.depth, this.depth++);
this.circ.onMouseMove = function(){
this.clear();
this.drawCircle(x1,y1,Math.distance(x1,y1,this._pa rent._xmouse,this._parent._ymouse), [1,0,100]);
updateAfterEvent();
}
}
this.onMouseUp = function(){
delete this.circ.onMouseMove;
}


=) as is almost twice as fast to type too... its just grand!

[lostinbeta]

EXACTLY like that! Thanks man.

Your code is much more optimized than my method. Like half the amount of code :P

I realize my problem though, I was detecting my radius wrong.


edit: I did some reading up on this apply feature you use, very interesting stuff. It will come in handy in the future. Thanks man.

[senocular]

;) cool

yeah the apply thing can come in handy. Its something I wish I had in Flash 5 back in the day. the call action is similar though it doesnt convert the array to arguments, it uses normal arguments but is structured the same way

functionName.call(object, arg1, arg2, ... argn);

It too can be useful at times, though I might have used it possibly once in practical applications in the past. apply Ive used a lot more.

btw, the free transform script I have might come in handy with all of this drawing stuff.

http://proto.layer51.com/d.aspx?f=636

[mindfriction]

Hmm Nice tools indeed~ I'll have to play around with that Senocular, Im sure just a few changes and could change it to work for squares as well :)

> Im having problems with paths in my code, all is done and working when my movie sits in the root but not when its put inside a clip. Cant seem to nip it in the bud either could you please take a look if you have time?

[lostinbeta]

Wow, that free transform thing rocks!

BTW Sen: What is up with your title? kuser2867? You replied to my PM with that too. Any special meaning?

[lostinbeta]

Well from what I can tell.....

this.onLoad = function() {
circleTool._visible = false;
};

There is no point for an onLoad. I don't even think that works for clips. Once the frame is entered that code is executed anyway. So just use this..
circleTool._visible = false;

I also changed your newPress() function because the paths were wrong.

function newPress() {
trace("CIRCLES MODE PRESS??? "+circleMode);
if (circleMode == true) {
//increase swapDepths() variable to switch to a higher depth
z += 2;
//swapDepths() to the higher depth
this._parent.swapDepths(z);
//startDrag(this, true);
//instead of startDrag I just used the _xmouse and _ymouse position
//reason: new method wouldn't work with startDrag()
this.onEnterFrame = function() {
//if the mouse is over the canvas
if (this._parent._parent.canvas.hitTest(_root._xmouse , _root._ymouse, true)) {
//"drag" the clip
this._parent._x += (this._xmouse-_parent._x)/5;
this._parent._y += (this._ymouse-_parent._y)/5;
}
};
}
}

[mindfriction]

Thanks lost, it didnt work though, turns out the working solution is something like this

function newPress() {
trace("CIRCLES MODE PRESS??? " + nodeMode);
if(nodeMode==true)
{
//increase swapDepths() variable to switch to a higher depth
z += 2;
//swapDepths() to the higher depth
this._parent.swapDepths(z);
//startDrag(this, true);
//instead of startDrag I just used the _xmouse and _ymouse position
//reason: new method wouldn't work with startDrag()
//if the mouse is over the canvas
this.onEnterFrame = function() {
trace("ENTER FRAME");
//if the mouse is over the canvas
//if (canvas.hitTest(this._xmouse, this._ymouse, true)) {
if(canvas.hitTest(_parent._xmouse, _parent._ymouse, true)) {

//"drag" the clip
trace("HIT");
this._parent._x += (this._xmouse-_parent._x)/2;
this._parent._y += (this._ymouse-_parent._y)/2;

}
};

}

}


Oh call me slow, but hooray for the AS tag. =) .. I tell you what there is deffintly more functionality to this vbulletin than flashkits.

[lostinbeta]

Hmmm, my code works for me :P

And slow? The AS tag is new today, Kirupa just added it. So you're not slow.

[senocular]

Originally posted by lostinbeta
BTW Sen: What is up with your title? kuser2867? You replied to my PM with that too. Any special meaning?

its just your vbul id number. Basically the number representing what user you are in chronological terms where 1 is the first person to sign up (kirupa) 2 being the second and so forth. You were the 634th person to sign up on kirupa so to the boards, thats how you are identified as an entity.

Your profile:

http://www.kirupaforum.com/forums/member.php?s=&action=getinfo&userid=634

Kirupas:

http://www.kirupaforum.com/forums/member.php?s=&action=getinfo&userid=1

Mine:

http://www.kirupaforum.com/forums/member.php?s=&action=getinfo&userid=2867


Theres a satiric humor involved in associating a emotionally associated personality or person through a industrial identification number.
:)

[mindfriction]

Well hey there kuser286 & kuser634. :smirk: . Ive just been having a bit of fun with the GUI of the drawing app! Actually i remember a while ago when I first came to kirupa to look around it was a neat little site, but fkit still had more going on. It seems Kirupa is really building up eh? So you guys use other sites like Actionscript.orG ? A couple of the guys who are the moderators taught me at uni and none of them even come close to the explanations and help you two have given. Gees I remember when you Trev stayed up and gave me hand with part of a Uni assignement I was having troubles with early last year, cant repay your for that help,

Anyway cherry oh for now, kuser4006

[senocular]

Originally posted by mindfriction
Gees I remember when you Trev stayed up and gave me hand with part of a Uni assignement I was having troubles with early last year, cant repay your for that help

awesome ;)

heres some more drawing stuff :)



MovieClip.prototype.Circle = function(x,y, w,h, centered, lstyle, fstyle) {
if (!centered){
w /= 2; h /= 2;
x += w; y += h;
}
var xc1 = w*(Math.SQRT2-1), xc2 = w*Math.SQRT2/2;
var yc1 = h*(Math.SQRT2-1), yc2 = h*Math.SQRT2/2;
if (lstyle) lineStyle.apply(this, lstyle);
if (fstyle) beginFill.apply(this, fstyle);
this.moveTo(x+w, y);
this.curveTo(x+w, y+yc1, x+xc2, y+yc2);
this.curveTo(x+xc1, y+h, x, y+h);
this.curveTo(x-xc1, y+h, x-xc2, y+yc2);
this.curveTo(x-w, y+yc1, x-w, y);
this.curveTo(x-w, y-yc1, x-xc2, y-yc2);
this.curveTo(x-xc1, y-h, x, y-h);
this.curveTo(x+xc1, y-h, x+xc2, y-yc2);
this.curveTo(x+w, y-yc1, x+w, y);
this.endFill();
return this;
};
MovieClip.prototype.Square = function(x,y, w,h, centered, lstyle, fstyle){
if (!centered){
w /= 2; h /= 2;
x += w; y += h;
}
if (lstyle) lineStyle.apply(this, lstyle);
if (fstyle) beginFill.apply(this, fstyle);
this.moveTo(x-w, y-h);
this.lineTo(x+w, y-h);
this.lineTo(x+w, y+h);
this.lineTo(x-w, y+h);
this.lineTo(x-w, y-h);
this.endFill();
return this;
}

this.shapeList = ["No Tool", "Square","Circle"];
this.shapeList.pos = 0;
this.onMouseDown = function(){
if (this.shape.onMouseMove) delete this.shape.onMouseMove;
var tool = this.shapeList[this.shapeList.pos];
if (this[tool]){
var x = this._xmouse, y = this._ymouse;
var centered = Key.isDown(Key.CONTROL)
this.shape = this.createEmptyMovieClip("shape"+this.depth, this.depth++);
this.shape.onMouseMove = function(){
var w = this._parent._xmouse-x, h = this._parent._ymouse-y;
if (Key.isDown(Key.SHIFT)) w = h = Math.max(Math.abs(w), Math.abs(h)); // if uniform scale
this.clear();
this[tool](x,y, w,h, centered, glstyle, gfstyle);
updateAfterEvent();
}
}
}
this.onMouseUp = function(){
delete this.shape.onMouseMove;
}
Key.addListener(this);
this.onKeyDown = function(){
if (inc = Key.isDown(Key.UP) - Key.isDown(Key.DOWN)){
this.shapeList.pos += inc;
if (this.shapeList.pos >= this.shapeList.length) this.shapeList.pos = 0;
else if (this.shapeList.pos < 0) this.shapeList.pos = this.shapeList.length - 1;
trace(this.shapeList[this.shapeList.pos]);
}
}
trace(this.shapeList[this.shapeList.pos] +" selected, Use the UP & Down keys to switch tools.\nThe CONTROL and SHIFT keys will toggle drawing styles.");
glstyle = [2,0,100];
gfstyle = [0xff,20];


I almost forgot to use [as] !

[senocular]

heres two more additions (the basic line and simple curve) - figured they should be included



MovieClip.prototype.Line = function(x,y, w,h, centered, lstyle, fstyle){
if (lstyle) lineStyle.apply(this, lstyle);
this.moveTo(x, y);
this.lineTo(x+w, y+h);
return this;
}
MovieClip.prototype.BasicCurve = function(x,y, w,h, centered, lstyle, fstyle){
if (lstyle) lineStyle.apply(this, lstyle);
this.moveTo(x, y);
var cx = x+w, cy = y;
this.curveTo(cx, cy, x+w, y+h);
return this;
}
this.shapeList = ["No Tool", "Square","Circle","Line","BasicCurve"];


heres something I made with these heh

[Guig0]

Originally posted by senocular
its just your vbul id number. Basically the number representing what user you are in chronological terms where 1 is the first person to sign up (kirupa) 2 being the second and so forth. You were the 634th person to sign up on kirupa so to the boards, thats how you are identified as an entity...
sorry to barge in to this thread with an off topic reply, but i only want to tell you, sen, that these numbers are crazy. :crazy:

i registered on 10-21-2002 and received the number 17198
while you registered on 12-27-2002 and received the number 2867.
you´re more than two months newer than me and i have a digit more than you (-:

[senocular]

you're just 1913 guig0 :)

[Guig0]

i´m saying that this boards are behaving strangely these days...

i´m 1913 now, but i was 17198 just an hour ago (-:

i got the date at the same place i got my number... the date was right, but why the number wasn´t... :-\

[lostinbeta]

Excellent stuffs Sen.

It is hard to believe there were only 633 other members on this forum when I signed up. And a majority of those users had 0 posts :P I guess I came here earlier than I though, makes me feel happy.

kuser634 :)

[mindfriction]

hahah checked out your 'derw.gif' Sen, is that a self portrait? Im working on changing the cursor for the different tool modes, ie for for move/ resize. Just about to check kirupa for some tutes on changing cursor :)