users drawing lines ? 1

[joezapp]

hi all

I was wondering if it is possible for users to map a number of points on a movie and then have flash draw a line between them (or give the users an extendable line - kinda like the line tools you get with word / gimp etc) ?

I have a number of graphs and it'd be cool if the users could put their own lines over the static data.

Any pointers / tutorials / ideas would be very gratefully received. (I'm still fumbling my way around flash so pls bear this in mind )

Many thanks,

Joe.

 

[wangbar]

It can be done but it's quite tricky as Flash isn't really set up to "join dots" as it were.

What you have to do is draw a single line, turn it into a movie clip and then rescale it to fit your coordinates.

Create a new movieClip ("line&quot, draw a line from the centre of your clip and extend it to 100 pixels right and 100 pixels down (in other words it starts at 0,0 and ends at 100, 100 - use the grid to get this exact).

Drop this clip on your stage. Set up your first coordinate, set up your second coordinate and then using _xscale and _yscale rescale your line to bridge the gap.

This is easier to explain in code ;-) ! What I've done here is set up a basic line on the stage and then everytime you click the mouse the line redraws to reach your mouse cursor. Add this script to your "line" clip.


onClipEvent (load) {

//set up the initial x and y coords of your line
_root.x1 = 50;
_root.x2 = 150;
_root.y1 = 50;
_root.y2 = 150;

//set the base of the line
_x = _root.x1;
_y = _root.y1;
}
onClipEvent (mouseDown) {

//get the mouse location
_root.x2=_root._xmouse;
_root.y2=_root._ymouse;

//redraw the line to reach the mouse
_xscale = _root.x2-_root.x1;
_yscale = _root.y2-_root.y1;
}

 

[wangbar]

Joezapp,

Thought that the above might be confusing (it confused me when I read it back and I wrote it) so I've put it up on the web for you to see - I made a few changes which mean the line follows you around now but you should be able to rip the code off for your own uses...

http://www.wangbar.co.uk/dynamicLine.swf

 

[joezapp]

Wangbar,

That is v.cool - thanks a bunch (have a star! ) - I got it from your instructions alright, so it wasn't as bad as you thought. Couple of extra questions though (hope you don't think I'm being cheeky):

- is there any way of stopping the line becoming thicker the longer you draw it (I'm guessing not as its a scaling thing, right?)

- would it be possible to set the inital coordinates with a mousedown event (1) and then scale to mousedown event (2) - I suppose this is more of a actionscript question - can I create a variable that would hold a value and allow me to switch between inital coordinate setting, scale to points and clearing the line ?

Thanks for your help so far.


Cheers

Joe.

 

[wangbar]

The first one is dead easy - draw your initial line and set its thickness in the "stroke" palette to "hairline" then it always stays the same. I just liked the line changing thickness for that example .

Second point is trickier. How about...

onClipEvent (mouseDown) {
if (firstClick==false) {
_root.x1 = _root._xmouse;
_root.y1 = _root._ymouse;
firstClick = true;
} else {
_root.x2 = _root._xmouse;
_root.y2 = _root._ymouse;
firstClick = false;
drawLine = true;
}
if (drawLine) {
// add drawing script here..
}
}


...to check if you're clicking for the initial and second coordinates? Haven't got time to check it through at the moment but you should be able to incorporate this into the earlier script to get what you want.

 

[joezapp]

Cool.

Cheers for the line width thing. I'd had been looking through all the panels for ages before I'd discovered that.

The script I had worked out but it wasn't as pretty (ie neat) as yours so I've unashamedly ripped it of and it works great.

No doubt I'll have to amend it further when I show it to my boss (For example - he'll want me to limit the area over which the lines can go - any ideas ? I'm guessing putting it in a movie within a movie, with the inner one being the size of the graph layer underneath)

Anyway, thanks a lot for your help - if you're ever stuck with javascript/html/css/cgi/perl/oracle/plsql/webdb stuff give me a shout on the appropriate forum - they're more my forte at present, although my flash skills are improving.


Also - if anyone in future wants to do the same or similar and is reading this thread, the following script for a line script created as described above will create a line between two points created by the user clicking his/her mouse:

Cheers

Joe (BIG smile)

onClipEvent (load) {
_visible=false;
firstClick=false;
}

onClipEvent (mouseDown) {

if (firstClick==false) {
_root.x1 = _root._xmouse;
_root.y1 = _root._ymouse;
firstClick = true;
_x = _root.x1;
_y = _root.y1;
firstClick = true;
} else {
_root.x2 = _root._xmouse;
_root.y2 = _root._ymouse;
firstClick = false;
drawLine = true;
}

if (drawLine) {
_root.x2= math.floor(_root._xmouse);
_root.y2= math.floor(_root._ymouse);
_xscale = math.floor(_root.x2-_root.x1);
_yscale = math.floor(_root.y2-_root.y1);
_visible=true;
updateAfterEvent();
}
}

 

[wangbar]

Nice one, works like a charm. I'm fighting with a ton of database and perl stuff at the moment so I may just take you up on your offer ;-) !

As for limiting the area you can draw on your idea should work no problem. Alternatively you could control the cursor's appearance depending on where you point the mouse, it might be interesting for instance to have the cursor change to a pencil when it goes over the graph area but be a standard pointer everywhere else - shouldn't be too difficult...

I was thinking about how you'd join several lines together to form a graph - are you going to stick every point in an array or just reset the variables every click so that x2, y2 of one line automatically becomes x1, y1 of the next?

 

[joezapp]

Wangbar (or anyone else)

I've got a couple more questions -) -

What I'd like to try is for users to click two points from a graphed curve (ideally picking and snapping to referenced x and y co-ordinates from the graph object rather than approximation, but this is probably another matter entirely ). What this would then do is map a line between the two points and extend the lines across the width and height of the graph - in effect giving some kind of 'trend' line..

What I need to know is:
- can I, and how would I, extend a line beyond the x and y points the user has selected ? Is this going to be simple or is it going to end up going into complicated maths...

- is there a tutorial or suchlike that explains how to reference other objects and their properties.


Any help or suggestions gratefully received.

Cheers


Joe.

 

[wangbar]

Oh, not easy...

How are you plotting the points on the graph curve? If the values are held in an array for each x and y location then it should be possible to compare mouse position (on a click) event to the nearest x,y coordinate pair and draw a line as we did above.

Extending the line, if we're going to avoid maths, could probably be achieved using scaling as before with a little bit of creative fudging of the x,y location

 

[joezapp]

Thanks for replying.

Re: the graphs - they're mapped using Macromedia Generator as they need to be dynamic and for a novice like me its a whole lot easier than trying to create them from scratch. As far as I understand it the points in the graph are mapped from x and y arrays although there's a load of stuff goes on that obviously I can't get at :-( The datasource for the graphs looks something like:

x, y, color
2.1, 4.2, #FF00FF
2.3, 4.6, #FF00FF

etc etc.

If I can't snap to these points it's not fatal though it'd be handy. Any ideas on extending the line would be handy though - I've tried fudging the x and y but have got precisely nowhere - if you've got any pointers or any mathematical ideas try me, I'll try and get my head around them ...

Thanx

Joe.

 

[wangbar]

I've not got any Generator experience so I'm not sure how to go about the first part of the problem. Sorry.

I've tried a few fudges myself now and nothing works. I'll try to brush the rust off my maths to see if I can find something that helps. Wish I'd paid attention in school now...

 

[wangbar]

Got one (I think) - no code yet but shouldn't be too hard.

Using the same line drawing principle as before but add a multiplier into the equation so that the _xscale, _yscale part is sized to (x2-x1)*scaleFactor, (y2-y1)*scaleFactor - this will extend the line whilst maintaining the angle. To add the line cutting the other side of the graph curve use the same idea but multiply the scaleFactor variable by -1.

It works on horizontal lines and 45 degree slopes anyway ;-)