Creating lines that draw themselves

1

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/

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! :slight_smile:

2

boing

3

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

4

Thanks for your reply! :slight_smile:

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

5

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

6

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! :slight_smile:

7

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/ ? - 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

8

i wanted to know that and now i do!

yeeo!

9

Shiny happy people holding hand!!!

10

oops, I forgot to post the motion guide example :wink:

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

11

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 :wink:

Prophet.