I want to draw an animated signature.

The way that I draw it it's to cover it manually with a mask layer and keyframe each frame.

There is a more efficient way?


2 (quicker) options:

  1. http://ajarproductions.com/blog/2009/02/10/flash-extension-motionsketch/
  2. http://anipedia.thebackalleys.com/index.php/Flash_extensions#Animation_Pencil

(update) Also, I haven't tried this yet, but it might be worth a go: http://durej.com/?p=23

  • @Magnetic_dud In addition to Justin's great tools and suggestions, I'd like to add few tiny extra techniques from a somewhat related post Apr 18 '12 at 22:23

erasing pieces looks the easiest. Draw the signature, then add keyframe, delete a piece, add frame, delete a piece... and so on then when there is no pieces to draw select all keyframes and reverse them (Right-click > Reverse Frames)


The tutorial found here seems to show a fairly good (yet still fairly labor intensive) method for doing this. Using a vector shape would definitely seem like the right way to go in any case since you'll have more control and can even fool around with the actual display of the signature. The nice thing about having a vector shape is you can also set other objects (in this case, the pen) to follow the same path.

  • I tried this tutorial, but, maybe due to my inexperience, I can't get it to work as intended Jan 16 '12 at 16:11

As far as I know you can with some very intricate programming knowledge and math but using a mask or a erasing pieces than reversing the frames is much more time efficient.

  1. plot keyframes
  2. use a drawing API
  3. be able to curve it the way you want to form a letter

Do you see where I'm going with it. In some cases it's easier to draw the animations than programmatically making them.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.