Using Flash to Simulate drawing a line

Need help with Photoshop, the GIMP, Illustrator, or others? Want to show off your work? Looking for advice on your newest Flash stuff?

Moderator: General Moderators

Post Reply
User avatar
a94060
Forum Regular
Posts: 543
Joined: Fri Feb 10, 2006 4:53 pm

Using Flash to Simulate drawing a line

Post 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.
method_man
Forum Contributor
Posts: 257
Joined: Sat Mar 19, 2005 1:38 am

Post by method_man »

you could draw it frame by frame
User avatar
a94060
Forum Regular
Posts: 543
Joined: Fri Feb 10, 2006 4:53 pm

Post by a94060 »

there is no way i could do it faster or anything?
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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>
User avatar
Skittlewidth
Forum Contributor
Posts: 389
Joined: Wed Nov 06, 2002 9:18 am
Location: Kent, UK

Re: Using Flash to Simulate drawing a line

Post 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?
User avatar
a94060
Forum Regular
Posts: 543
Joined: Fri Feb 10, 2006 4:53 pm

Re: Using Flash to Simulate drawing a line

Post 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.
User avatar
gkwhitworth
Forum Commoner
Posts: 85
Joined: Tue Sep 05, 2006 8:28 pm
Location: Wasilla, Alaska

Post 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
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

psst, hey Greg, this thread's pushing on six months old.. i.e. dead.
User avatar
a94060
Forum Regular
Posts: 543
Joined: Fri Feb 10, 2006 4:53 pm

Post by a94060 »

sup all,i saw an email form devnet so i was like hmmm lol. o well thanks for responding.
Post Reply