# Creating lines that draw themselves

**URL:** https://forum.kirupa.com/t/creating-lines-that-draw-themselves/61937
**Category:** flash
**Created:** [August 23, 2004, 2:22pm UTC](https://forum.kirupa.com/t/creating-lines-that-draw-themselves/61937 "2004-08-23T14:22:07Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![Kajinku](https://avatars.discourse-cdn.com/v4/letter/k/94ad74/32.png) [@Kajinku](https://forum.kirupa.com/u/Kajinku)
#### Post date: [August 23, 2004, 2:22pm UTC](https://forum.kirupa.com/t/creating-lines-that-draw-themselves/61937/1 "2004-08-23T14:22:07Z")

</div>

Hello all,

I was wondering what the best way was to create lines that “draw automatically”. To illustrate what I mean, please visit:

[http://seanjohn.com/sj6/](http://seanjohn.com/sj6/)

It starts on the very first page, when the name “Sean John” appears. Also, when looking at the intro, you can see lines that are being drawed, especially where you can hear “Sean John, it’s not just a label, it’s a life style, man”.  
How do they do this? Is there a tutorial I can follow to try it out?

Many thanks! 🙂

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [August 24, 2004, 10:38am UTC](https://forum.kirupa.com/t/creating-lines-that-draw-themselves/61937/2 "2004-08-24T10:38:31Z")

</div>

_boing_

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [August 24, 2004, 11:17am UTC](https://forum.kirupa.com/t/creating-lines-that-draw-themselves/61937/3 "2004-08-24T11:17:12Z")

</div>

ahhh full screen!

Well there are a couple of ways to do that. It looks like that particular example was done frame by frame using either masking or edited copies of the original. This is fine and usually best for quick drawing and irregular shapes (those which aren’t made with Flash lines).

You can also use ActionScript to draw a path along a motion guide. Simply draw out the path manually, have a movieclip follow it (typically an empty movieclip) and draw the path of the movieclip as it moves along the path. … I posted an example of this somewhere, I’ll just re-attach it here if I can find it.

Also, if you want to get crazy, you can do the path completely in actionscript using my path class:  
[http://proto.layer51.com/d.aspx?f=952](http://proto.layer51.com/d.aspx?f=952)

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [August 24, 2004, 11:43am UTC](https://forum.kirupa.com/t/creating-lines-that-draw-themselves/61937/4 "2004-08-24T11:43:49Z")

</div>

Thanks for your reply! 🙂

I’m very interested in that “frame by frame” method. How do you begin at something like this?

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [August 24, 2004, 12:05pm UTC](https://forum.kirupa.com/t/creating-lines-that-draw-themselves/61937/5 "2004-08-24T12:05:42Z")

</div>

Pardon me for answer this question Sen.

Here’s the the frame by frame technique Kajinku:

1. Draw any line or shape. If you want to use text, then you have to break apart the text until it become shape. Similiar thing for imported graphic (jpeg). Break apart them.
2. Take the eraser tool. Choose the size you want.
3. Erase the part that you want of the shape.
4. Press F6 ( create a new key frame).
5. Erase the part that you want again.
6. Press F6
7. Repeat process number 3 and 4, (or 5 and 6), until all the shape have been erased out all.
8. Now select from the first key frame to the last keyframe where the shape has been erased out all.
9. Reverse those Frames
10. Test It.

Hope this help and Good luck

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [August 24, 2004, 12:21pm UTC](https://forum.kirupa.com/t/creating-lines-that-draw-themselves/61937/6 "2004-08-24T12:21:42Z")

</div>

I had no idea it was so simple… I mean, when looking at that Sean John intro, it looks much more complicated, probably because it involved a lot of different shapes.

Thanks Beebs! 🙂

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [August 24, 2004, 12:27pm UTC](https://forum.kirupa.com/t/creating-lines-that-draw-themselves/61937/7 "2004-08-24T12:27:33Z")

</div>

Glad to see the smile on your face!

Although I always strive to do anything with Actionscripts, but sometimes even frame by frame animation can create a spectacular works. Have you ever look at James Paterson works at [http://www.presstube.com/](http://www.presstube.com/) ? - This is a good example how to combine tweening/frame by frame with Actionscripts. Check his archive section you’ll got a lot of idea. Cheers

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [August 24, 2004, 12:29pm UTC](https://forum.kirupa.com/t/creating-lines-that-draw-themselves/61937/8 "2004-08-24T12:29:43Z")

</div>

i wanted to know that and now i do!

yeeo!

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [August 24, 2004, 12:30pm UTC](https://forum.kirupa.com/t/creating-lines-that-draw-themselves/61937/9 "2004-08-24T12:30:51Z")

</div>

Shiny happy people holding hand!!!

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [August 24, 2004, 1:09pm UTC](https://forum.kirupa.com/t/creating-lines-that-draw-themselves/61937/10 "2004-08-24T13:09:52Z")

</div>

oops, I forgot to post the motion guide example 😉

oooo it says I cant because its already attached - at least it gave me the thread :pleased:  
[http://www.kirupaforum.com/forums/showthread.php?t=65759](http://www.kirupaforum.com/forums/showthread.php?t=65759)

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [August 24, 2004, 5:35pm UTC](https://forum.kirupa.com/t/creating-lines-that-draw-themselves/61937/11 "2004-08-24T17:35:43Z")

</div>

erm regarding the line drawing thing in the frame by frame, there is an easier method than stated above…  
im not sure if the kirupa tutorial on this effect covers it _hint_ _hint_  
but you can have your final drawing, mask it and on this mask use shape tweens etc to reveal more of your drawing 😉

Prophet.
