Page 1 of 1

Using Flash to Simulate drawing a line

Posted: Tue Apr 25, 2006 8:16 pm
by a94060
Hi all, I am trying to find out how to draw a line in flash. i know there is a line tool but i want it so that in frame 1 there is a point and by frame 20,there is a full line. During that time,it should draw the line on the screen. Any one understand what im saying? i have tried tweening it via shape and motion.

First Frame:

___________
| . |
| |
| |
|__________|


20th Frame:
____________
| | |
| | |
| | |
|__________|

Thanks.

Posted: Tue Apr 25, 2006 11:08 pm
by method_man
you could draw it frame by frame

Posted: Wed Apr 26, 2006 5:04 am
by a94060
there is no way i could do it faster or anything?

Posted: Wed Apr 26, 2006 6:24 am
by Chris Corbyn
a94060 wrote:there is no way i could do it faster or anything?
I've never written any flash (Actionscript) but in JavaScript I'd do this using recursion; each recursion of the function contains a statement that has a timeout of say 20ms before the next recursion.

In JS:

Code: Select all

<html>
<head>
<body>
<div id="container" style="padding-top: 100px;"></div>

<script type="text/javascript">
var max = 300; //For a 300 pixel line

function drawLine(t)
{
    if (t > max) return;
   
    point = document.createElement('div');
    point.style.backgroundColor = '#000000';
    point.style.cssFloat = 'left';
    point.style.position = 'relative';
    point.style.width = '1px';
    point.style.height = '1px';

    document.getElementById('container').appendChild(point);
    
    window.setTimeout(function() { drawLine(++t) }, 20);
}

drawLine(0);
</script>
</body>
</html>

Re: Using Flash to Simulate drawing a line

Posted: Wed Apr 26, 2006 7:18 am
by Skittlewidth
a94060 wrote:Hi all, I am trying to find out how to draw a line in flash. i know there is a line tool but i want it so that in frame 1 there is a point and by frame 20,there is a full line. During that time,it should draw the line on the screen. Any one understand what im saying? i have tried tweening it via shape and motion.

First Frame:

___________
| . |
| |
| |
|__________|


20th Frame:
____________
| | |
| | |
| | |
|__________|

Thanks.
Assuming you wanted a straight line what was wrong with the motion tween?
Draw your line and make it into a graphic symbol - it has to be a symbol (hit F8 ).
Then make the symbol last the required number of frames, (say 20).
Highlight the last frame of the symbol, hit F6 to make it a keyframe the return to the keyframe at frame 1 and select.
Next adjust the properties of the symbol at that keyframe so that the line is only 1px long/high.
Click a point between the first and last keyframe, right click and select motion tween.
Flash should now animate the line automatically between the two points.

You can get better effects using actionscript but this is the most basic way. If that wasn't what you were after could you explain further?

Re: Using Flash to Simulate drawing a line

Posted: Wed Apr 26, 2006 10:25 am
by a94060
Skittlewidth wrote:
a94060 wrote:Hi all, I am trying to find out how to draw a line in flash. i know there is a line tool but i want it so that in frame 1 there is a point and by frame 20,there is a full line. During that time,it should draw the line on the screen. Any one understand what im saying? i have tried tweening it via shape and motion.

First Frame:

___________
| . |
| |
| |
|__________|


20th Frame:
____________
| | |
| | |
| | |
|__________|

Thanks.
Assuming you wanted a straight line what was wrong with the motion tween?
Draw your line and make it into a graphic symbol - it has to be a symbol (hit F8 ).
Then make the symbol last the required number of frames, (say 20).
Highlight the last frame of the symbol, hit F6 to make it a keyframe the return to the keyframe at frame 1 and select.
Next adjust the properties of the symbol at that keyframe so that the line is only 1px long/high.
Click a point between the first and last keyframe, right click and select motion tween.
Flash should now animate the line automatically between the two points.

You can get better effects using actionscript but this is the most basic way. If that wasn't what you were after could you explain further?

that pretty much what i wanted to do,thanks. if i would have done it frame by frame,it would take forever...


EDIT-thanks d11 for trying but i was aiming for something i could use in flash to draw it on the fly. i was going to use it to show DNA/RNA synthesis replication.

Posted: Tue Sep 12, 2006 7:23 pm
by gkwhitworth
My favorite thing to use in this situation would be masking....becuse then you can use curved lines and so on. It allows you to make it look like someone is writing something, well that takes some work...but it can be done. But the actionscripting isn't a bad way to go either.

--
Greg

Posted: Tue Sep 12, 2006 7:25 pm
by feyd
psst, hey Greg, this thread's pushing on six months old.. i.e. dead.

Posted: Tue Sep 12, 2006 7:48 pm
by a94060
sup all,i saw an email form devnet so i was like hmmm lol. o well thanks for responding.