Topic: Drawing with Actionscript

Hi,

<edit> oh yeah i'm using Flash MX 2004 incase thats important ... <tide>

basically the root of all this is that i want to be able to animate 'stroking' a path, the only way i've been vaguely successful in doing this using the arty side of flash [all the toolbar tools etc] is to shape tween between say a dot and a long straight line. However this is fiddly, tedious and not very good at drawing curves.

What i realy want to do is to create network style diagrams, vectors and edges and such, kinda like a tube map you know what i mean. Ideally i'd like to then be able to move the points/edges around but keep the network intact. So i figured this was a problem for coding, i can code in C and i think i could probably bumble my way into producing something like this in openGl but thats beside the point.

I've found out about lineTo() and moveTo() and a few other basics of actionscript but i can't quite figure out how to actually animate the drawing of these curves, i could probably make it all appear statically but its not the same.

Any clues anyone?

thanks



[This message has been edited by Relain (edited 04-04-2004).]

Animating anything in actionscript can be a little tricky to get a handle on.

Here's a small animated line drawing demo. (Flash MX - ver 6, I don't have MX 2004).

And the source.

thanks cameron. what i've been trying to do is to just draw[no animation] a line between two button objects and have the line redraw as i drag the buttons around. My problem seems to be the co-ordinate systems, i can make the line which is the correct vector [right sense and magnitude] but it isn't in the right place on the screen.

i did something like this:

x_pos = _root.<buttoninstancename>._x;
x_target = _root.<otherbuttoninstancename>._x;
// repeated for y
moveTo(x_pos, y_pos);
lineTo(x_target, y_target);

its there but its all slighlty wrong, i've narrowed this down to how i ref the positions of the buttons [ i think], the script for drawing the line is in a movie clip on the over state of the buttons. I suspect the problem is something to do with the script running from here, but i'm buggered if i can figure it out.

i'll go and play with that line file [sadly i'm stuck on 2 p.cs, one rustbucket with dialup and the 'good' one stranded without a connection] , thanks.

Also its good how you don't seem to have to declare variables. new, programming without rigour! Makes a change from Monte Carlo models thats for sure

Arr, yes. The coordinate system in Flash can be tricky because each movie clip instance has it's own local coordinate space. Have a read up on the myMovieClip.globalToLocal and MovieClip.localToGlobal methods in the flash help files, perhaps they'll be able to help you sort things out.

Additionally, if you could post/upload a swf/fla of your progress it would be easier to understand exactly where the problem.

well my go is here



[This message has been edited by Relain (edited 04-04-2004).]

Okay, here's a starter for you. It's not an exact solution but I'll bet you can modify it to work for your needs.

This function is by Jared Tarbell, from one of his projects in the FriendsofEd book "Flash 3D Cheats". I'll show the code and then give some notes:

TextNode.prototype.drawLineToOrigin = function() {

	// draw a line to the origin

	this.clear();

	this.lineStyle(0, 0x000000, 15);

	this.lineTo(this.x-this._x, this.y-this._y);

};

You may or may not be working in an object oriented manner so here are the key points.
First, this function has to be called as part of an onEnterFrame event so it can continuously be monitoring for any change of position.

Second - you need a mechanism to store where the clip STARTED. In this function that value is "this.x" (the point of origin) as opposed to "this._x" which is where the clip IS NOW.

(Hope that makes some sense)

Third - the line style defined above is a hairline width light gray (or more correctly it's a black line at 15% opacity.) You can modify this to be anything you want. Note that with every tick of the Flash clock it first clears the line that had been there and then draws a new one. Without the "clear" the stage would quickly fill up!

If the LineTo method doesn't find instructions on where to start drawing the line from it assumes the origin point of the clip which in your case makes sense. You just want to tell it where to draw the line TO. This function draws a line from where the clip is now to where the clip started.

Hope you can modify this function to suit your own needs.

Please take some time to enjoy what Jared had done with binary network simulations at http://www.levitated.net/daily/index.html
And maybe spend some time with his articles on NodeGardens http://levitated.net/bones/nodeGarden/index.html

Also - Keith Peters (who has an extraordinary mastery of the Flash drawing API) has a tutorial on nodes at his site bit-101.com http://www.bit-101.com/tutorials/

Hope there's something of use in all this.

Crap, can't open that flash file, don't have MX 2004. Well, I can't offer much more help than the execelent resources Steve has provided -- hopefully that'll be enough.

Be sure to let us know how things panned out.

awesome, thanks for all the help guys. I've had to restrain myself from all this stuff lately, damn degree projects.
Yeah them websites are pretty inspiring too. I must admit i have sort of started down a purely manual route [oh dear] by just drawing it all out in different MovieClips but i think i'll turn back towards Scripting instead.

Also does anyone else find the ActionScript writing area intensly frustrating? Is it just my P.c or is it very laggy on button clicks and deletes. I've taken to coding in EditPlus and copy-pasting in, is this cheating?

Thanks guys, i'll post when its done

quote:

---

I've had to restrain myself from all this stuff lately, damn degree projects.

---

Trust me, you're not the only one with that problem!

As for the aactionscript panel, I've never noticed any such issues with Flash MX, but MX 2004 might be different. Although, I've never been a huge fan of the way MM tries to box everything into the one app. It'd probably work sweal if I still had 2 monitors to work with, but with just one it feels awfully cramped.

If you use EditPlus (best editor for windows hands down ), then you might want to look into Flush: http://www.debreuil.com/flush/ . It's a plugin that allows you to compile flash code form within edit plus using just a hotkey. I've found it infinatly usefull. You might also want to check out the editplus website for an actionscript syntax highliting file too.

"I must admit i have sort of started down a purely manual route [oh dear] by just drawing it all out in different MovieClips but i think i'll turn back towards Scripting instead."

hmmm. Well - maybe I jumped the gun, but I assumed this project was dynamic (meaning you would be dragging icons around and the lines would follow....). If it's a static graphic then maybe there's no reason not to do it with the drawing tools.

As for the ActionScript editor - I'm with Cameron in that I am still using MX (on a Macintosh), not MX2004. I don't have any problems with the editor being sluggish (but it WOULD be nice if it wrapped!).

eric d posted a link to primalscript: http://www.sapien.com/primalscript31.aspx

Looks pretty heavy duty. Sigh. Only PC.



[This message has been edited by Steve (edited 04-07-2004).]

***off topic post***

"but it WOULD be nice if it wrapped!"

Yikes, why?

I can't stand code editors that wrap, kinda kills the entire point of indenting the code to make it easier to read. Although, I've spoken to some other coders that prefer wrapping over indenting, yet I still can't stand editing somehting as simple as HTML in an editor that wraps.

I guess for me it's because I see code as seperate from language. Code doesn't have paragraphs and sentances, it has code blocks and statments. That and softwrapping can be confusing when programming/debugging in a language like PHP or Java that isn't forgiving about a missing semi-colon.

Thanks for the link to primal script though. I've never come across this before -- downloading the trial version now. However, at $180 USD for a text editor, it'd want to be a lot better than the almost free price of Editplus. But it does appear to have the same kind of code hinting as the MM products, which would be nice damn nice for a lot of languages I programm in.

Although, I do have a question for ya Steve. What's avaliable on the Mac front for text editors? I know about BB Edit, but I'm not really a fan of it. I'm basically looking for something fairly simple that has configurable syntax highliting for lots of different languages that I can also carry around on a USB disk (is this even possible, I'm still confused about the Mac file system and how programs are run/installed). I don't use Mac's that often, but when I do it's usually a random computer in the labs at university, as such having something that's setup on my USB disk would certainly save me a lot of headaches.

All I can recommend is BBEdit. It's my true love for text editing and I've never had cause to stray...


There is a plug in floating out there that colors .as files which is cool.

Running an app from a USB drive - I can't say. Never tried it. Nothing to lose I 'spose. The Mac does sprinkle support files in various places (preferences for instance) so it might not run from an external disk but then again - it might. Only way to find out is try it. There is a free "lite" version of BBEdit so you will have lost nothing if you decide to experiment and it doesn't work.

Wrapping text is clearly a personal thing! I like BBEdit's option of turning wrapping on or off. Some lines get so long it's very hard for me to read when I have to scroll one super long line horizontally and then scroll back to see that line in context (taling less than huge laptop screens here!) I do love Flash's auto formatting - to me indenting is more important than wrapping to get a sense of how the lines of code relate.