Drawing a straight line

[simontheak]

On paper this looks to be the simplest of the simple questions. In a nutshell, I would like to know how to get Flash to draw a line between two different points.
I've seen some sites done in Flash that seem to 'draw themselves' once they've loaded up, and I wondered how this was done.
The best I could come up was a Movie Clip with a series of keyframes that continually added another tiny line to the one that already existed to give the effect of a line drawing itself.
But this results in long movie clips and is awkward when editing ... so is there a way of doing this with ActionScript?
Thanks for your help,

Si

[Billy T]

here's an example file

[simontheak]

Thanks for the file Billy, but I'm either being really stupid or I'm missing something, because when I run it nothing is happening. Am I missing something?

[Billy T]

should be a little animation happening just to the left of the stage

[simontheak]

No - I'm not getting that ...

[Billy T]

can you see the brown ball off to the left? should appear underneath that...

[simontheak]

I'm sorry - I hope I'm not being really stupid here. When I press CTRL+ENTER, the brown dot isn't on the stage so nothing happens. I've tried dragging it on to the stage and even changed the background colour, but still nothing is happening

[Billy T]

well thats really strange...

attached is how it should look after the animation

did you open it in mx or 5?

[Billy T]

hmmm just did a test and it doesnt work in mx

sorry

hell there's probably a heaps easier way to do it in mx anyway but I don't know it

[simontheak]

I opened it in MX, but I didn't get that animation. What's the way to do it?

[Billy T]

Originally posted by simontheak
What's the way to do it?

open it in 5

cheers

[simontheak]

Originally posted by Billy T
hell there's probably a heaps easier way to do it in mx anyway but I don't know it

Does anyone else know how to draw a line between two points in MX?

[AndieR]

This certainly isn't what you're looking for... :) , but why don't you use shape tweening ( if it's a simple animation I mean...)

[simontheak]

How do you mean Andy?

All I want to know is how some Flash sites 'draw themselves' as they load up. I've tried using actionscript to increase the length of a line ... but the thickness increases too.

I'd definitely be grateful for any help.

Cheers

[tg]

look at this thread.
http://www.actionscripts.org/forums/showthread.php3?s=&threadid=12719
make sure you search.

[simontheak]

Thanks - tg ... I did do a a search on drawing lines, but I didn't really come up with much.

I don't mean to be a pain, because this really does help but can someone just explain how the lineStyle and the moveTo function works in the code below.

line1 = function(){
this.lineStyle(1,0x000000,100)
this.moveTo(100,100)
this.lineTo(200,100)}
onEnterFrame = line1


I promise I'll leave you alone then
:rolleyes:

[farafiro]

well, basicly u can see the as dictionary that comes with F MX... very usefull.
Here is what u want
moveTo(x,y) is the starting x & y points of your movie
lineTo(x,y) in the x & y points that the line will be drawn to from the prvious x,y (either moveTo or line to)
lineStyle(thickness,rgb,alpha) is the properties of the line of drawing object

[simontheak]

Thanks farafiro - I've been messing around with it a bit now and I think that I understand it a bit better.

The only problem I've got with it is that the line seems to appear instantly rather than actually drawing itself across the page. Is this the method that some programmers use when the outline of a site appears to draw itself?

[farafiro]

nop, this way is to draw shapes only. what u r talking about is maybe masking or anything else. there r a several ways to do so

[simontheak]

So would the idea be to have a gradually enlarging mask over a long line to give the effect of it being drawn?

[farafiro]

maybe, that's a way
or maybe a moving mask
or making a mall line outt satge
and enlarging its scales
and
and
and

[tg]

ha. missunderstood you earlier.
try this:
http://www.layer51.com/proto/d.asp?p=1&f=154
or this:
http://www.layer51.com/proto/d.asp?p=1&f=138

[PROTO]type (http://www.layer51.com/proto/index.asp?proto=2) always has some good stuff.

[ScratUAD]

ok, so now we have actionscript drawing lines for us...
let's add a different dimension...
does anyone know how to get action script to draw a gradient line for us?

[simontheak]

It's got to be the same kind of way hasn't it? Using a shape tween.

Haven't tried it myslef ... but if I was taking a guess I'd go for that!

[ScratUAD]

actually I'm not talking about a line that draws itself...
just a line.
I thought about making one line... into a MC.
and using the duplicateMovieClip function.
but I can't figure out how to make the duplicate MC a different x,y pos. than the first one.

[ScratUAD]

another question to ponder is how... using one section of code...
to draw multiple lines...
maybe 4 or 5 horizontal lines...
underneath eachother...
kinda like
-------------
-------------
-------------
-------------
-------------
interesting eh?
let's explore this...
I've tried using an array...
but my code becomes unresponsive.

[tg]

try:

function drawHorzLine(x,y,len){
mc=this.createEmptyMovieClip("line"+(++counter),counter);
mc.lineStyle(0,0x000000,100);
mc.moveTo(x,y);
mc.lineTo(x+len,y);
return mc;
}
for(var i=0;i<10;i++){
myLine=drawHorzLine(10,(i*10),100);
}

[ScratUAD]

you've found the cure!!!
just one more thing... how do we get that line to fade out from left to right?

ie
alpha = 100 -------------------------------------- alpha = 0.

see, we've duplicated it, now we need to get it to fade.
so all we have to do is fade it, then we can modify it to run vertiacally...
and we will have a cool actionscript generated fading grid look... almost like www.2advanced.com

[ikkon]

here is a motion tween example

[ikkon]

try this

[ScratUAD]

thanks for the input, but we figured out how to make it do that about half way up the page.

however, your idea is the best so far... the simplest.
another way is to start with a rinky-dinky line like -
and shape tween it to something larger.

what we're trying to do now... is to use one section of action script to generate a number of lines that are equal in length, but are vertically equidistant apart.

AND these lines must now fade from left to right...

ie:
blue ----------fading---------green
or
alpha = 0----------------alpha = 50---------------alpha = 100
so you see, we have a small dillemma on our hands.
noone that we know of has done this.

I'm thinking of using the fill from a rectangle as a movie clip.
and using the duplicateMovieClip function.
but how to create them vertically equidistant apart... I don't know.

[farafiro]

no man u don't need all of that
I thing it's an easy idea but a lotta code to put, listen to this thoughts:
just make a movie clip, not a line and use the beginGradientFill to achieve what u want in colors (the bes that described that is Moock Coolins), I won't tell about it , but about what I think in a MC
its width as u want
it's hieght (here is the trick), u can make it only 0.1 pixle, so it would accept the filling color, AND look like a line

[ScratUAD]

sweet... so I can dynamically make a movie clip...
use the begingradientfill and duplicate "n" number of times?

so I can make a cool grid using this... right?
just like the neat one www.2advanced.com has on their
title page.

[farafiro]

yeah, but I think 2advanced are using the Photoshop technique, too easy and fast.
u 2 can do it in flash, just make your grids in a layer, and in a upper layer make a square with a linear 2 colors, with the same color as the background, but one of them has _alpha of 0
try it