View Full Version : Flash Help. How to 'record' a drawing?

Mar 28, 2008, 05:18 PM
Hi folks,

I'm sure the answer to this is very easy, but I'm so useless at searching something when I don't know what it is I'm searching for that unfortunately you may have to suffer a bit of thread repetition. OK, crap over. Here it is.

Is it possible to 'record' what you are drawing in Flash 8? I.e. I'm tracing over an image using the pen tool and I want to be able to see the entire drawing process afterward somehow.

I know it's not motion sketching because that's tracing the path you want an object to follow. I just want the drawing to look as though it's drawing itself once I've finished, so to speak.

If it makes any difference, the drawing is quite complex so it won't be just one pen stroke.

If none of that makes sense, please ask me to clarify because I really really need to know how to do this.

Mar 28, 2008, 05:55 PM
Here's the way I've done it in the past. I don't know if it's the best way, but it works! Basically what you'll be doing is working backward from the drawn image to the not yet drawn image, so you'll actually be erasing as you go. Use the pen tool (or whatever) to draw your image and then figure out over how much time you want the drawing to take place. Save the ending keyframe and put the entire duration into a shape tween (not motion). Do not save your drawing as a symbol as shape tween will not work with symbols. Now working backward from the last keyframe in the shape tween group to the first one, create a new keyframe every few frames or so (it's up to you how often you want them) and on each one erase a bit more of your image until you get to the first one and have just a small line left. Then when played forward it should show the image drawing itself. I haven't tried this with complex images, so you might want to have different lines of the image on different layers so Flash doesn't mix them up. Hope that helps!

Mar 29, 2008, 12:13 AM
as the previous poster said, you could start by drawing the entire drawing however you would like. Then you can add a new layer on top of that and make it a mask layer. Then animate the mask layer revealing the pieces of the drawing with keyframes. I'm sure you could find some information about masks in flash online.

In many ways this is similar to the previous post, but you have the added flexibility of easily changing how your animation animates.


Mar 29, 2008, 05:07 AM
That's fab, guys, thank you. I haven't got the time today to try it out but tomorrow I will give it a go and report back if I get stuck. It all seems very straightforward and makes sense, so I'm guessing I'll be OK.

Thanks again.

Mar 29, 2008, 05:23 AM
That, or draw a bit, hit f6 to make a new keyframe, add some more, repeat. The look would probably come out as more authentic than erasing.

Mar 29, 2008, 12:57 PM
Of course an alternative way of doing this if you had a Wacom would be to record the drawing in progress in Photoshop (or the like) using Snapz Pro X.

Mar 31, 2008, 04:18 PM
Another approach is to create your drawing as a layered file in Illustrator, and use animated shape-tweened masks to reveal various components of drawing sequentially.
ie: Use the pen tool to draw path segments about 3-5 frames apart, with appropriate thicknesses to completely enclose elements of the drawing. Convert the paths to fills (which then become shapes that can be tweened)

Apr 23, 2008, 05:59 PM
OK. I finally got round to trying it.. I was a bit swamped with other work but now I have time to focus on this.

Except I got stuck. Really early on.

I was using the idea that seemed most simple to me, being Stampyhead's, and I drew my drawing fine and simple. Made it 72 frames long, added my keyframe at the end but when it came to creating a shape tween I got lost. I sifted through a few tutorials which said to right-click on the first keyframe, and choose 'shape tween' from Properties. However, I had no 'properties' option to choose in the drop-down menu.

Where am I going wrong? Am I even making sense?

Am I right in assuming as soon as I have made a shape tween, I can just delete and keyframe from the end of the animation to the beginning as I please and that will be that? I can play it from start to finish and it will look as though an invisble pen is drawing my image?

It sounds too good to be true.

Apr 23, 2008, 07:06 PM
Stage: create your drawing in frame 1.
Timeline: Select keyframe1; option-drag it to frame 70.
(this creates a copy of your drawing on frame 70)
Timeline: Select keyframe70; option-drag it to frame 65.
Stage: Select a small portion of the drawing at the end.
(drag marquee to select the area of the shape)
Press delete. This should delete the selected section of your shape.
Repeat this basic process in 5 frame increments until you have deleted the entire drawing at frame 1.
Timeline: Select all keyframes on the timeline.
Timeline: Right click and choose shape tween.

You now have a progressive animation of your drawing.

Apr 23, 2008, 07:11 PM
I think a shape tween can cause undesirable results. I would do what the last poster said but instead of doing it every 5 frames, do it for each frame. I know it seems tedious but shape tweens rarely work as you want.

Apr 23, 2008, 07:17 PM
You're absolutely correct about that.
You can use the "custom Easing Tool" to quickly generate the keyframes and mitigate the problems with shapetweens.
I just tried it and it works much better than standard shape tweens.

You can download the free utility online.
Google it.

Apr 24, 2008, 06:15 AM
Great! Thanks, it worked!