Hand-Drawn Animation in Flash
Illustration by John Hersey

Hand-Drawn Animation in Flash

with Dermot O' Connor

Video: Cleaning up a keyframe

So it's time to do the key cleanup pass. So there is a right way and a wrong way obviously. So, let's name this layer, final roughs keys only.
Expand all | Collapse all
  1. 2m 8s
    1. Welcome
    2. Using the exercise files
    3. What you should know before watching this course
      1m 0s
  2. 5m 51s
    1. Recognizing the Flash style
      4m 2s
    2. Customizing Flash for a hand-drawn workflow
      1m 49s
  3. 20m 47s
    1. Creating thumbnails
      5m 46s
    2. Creating rough keys and pose tests
      3m 8s
    3. Plotting head arcs
      4m 24s
    4. Fixing timing charts
      4m 36s
    5. Plotting arm arcs
      2m 53s
  4. 36m 36s
    1. Creating tie-downs of the keys
      9m 16s
    2. Adding the secondary keys
      3m 59s
    3. Challenge: Clean up the final keyframe
    4. Solution: Clean up the final keyframe
      1m 21s
    5. Symbolizing body parts
      4m 39s
    6. Setting up the light table
      7m 14s
    7. Creating loose breakdowns
      5m 6s
    8. Cutting or adding frames
      4m 10s
  5. 16m 6s
    1. Tying down the breakdown drawings
      3m 10s
    2. Using the shift-and-trace trick to control volumes
      5m 21s
    3. Creating the in-betweens
      4m 19s
    4. Adding a final breakdown
      3m 16s
  6. 14m 45s
    1. Coloring the character
      4m 55s
    2. Fine-tuning the colors
      5m 22s
    3. Retiming the animation
      4m 28s
  7. 54m 56s
    1. Demonstrating an acting scene
      3m 31s
    2. Breaking a frame into a rig
      6m 53s
    3. Rigging a head and dialog
      5m 2s
    4. Comparing cleanup styles
      4m 13s
    5. Cleaning up a keyframe
      7m 52s
    6. Fixing animation in cleanup
      3m 19s
    7. Cleaning up the Flash rig
      3m 36s
    8. Cleaning up the breakdowns
      6m 45s
    9. Cleaning up the in-betweens
      4m 46s
    10. Coloring the keys
      2m 48s
    11. Fine-tuning the scene
      2m 37s
    12. Comparing line treatments
      3m 34s
  8. 19m 19s
    1. Drawing a difficult transition
      7m 25s
    2. Creating the tie-downs using the hybrid method
      6m 37s
    3. Retiming with Timewarp in After Effects
      5m 17s
  9. 1m 16s
    1. Next steps
      1m 16s

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now
please wait ...
Watch the Online Video Course Hand-Drawn Animation in Flash
2h 54m Intermediate Apr 22, 2014

Viewers: in countries Watching now:

Looking for a richer, more dynamic look for your Flash-based animation? Hand-drawn animation is an alternative to a strict symbol-based technique, which combines the looseness of line drawing with the efficiency of Flash features like tweening. Dermot O' Connor introduces this technique, starting with how to create thumbnails and pose tests, refine your timing, and lock down keyframes. He shows how to add breakdown drawings to smooth out the animation and add the in-betweens that complete the "traditional" look and feel. The final chapters are dedicated to cleanup and a couple of hybrid approaches: one using hand-drawn in-between frames to transition a difficult character turn in Flash, and the other taking advantage of Timewarp effect in After Effects to retime an animation.

Topics include:
  • Creating thumbnails
  • Building rough keys and pose tests
  • Adding secondary keys
  • Symbolizing body parts
  • Creating loose breakdowns
  • Drawing in-betweens
  • Coloring the character
  • Cleaning up the animation
3D + Animation
Flash Professional
Dermot O' Connor

Cleaning up a keyframe

So it's time to do the key cleanup pass. And at this point we are going back to some of the basic methodology that we would follow if this were on paper and pencil in a feature animation studio, say in the 1980s or the early 90s. So there is a right way and a wrong way obviously. What you don't want to do is to clean up the first one, then the second one, and then the third, and the fourth. What will happen if you do that is everything will start to drift. So the first thing to do, take out the key frames and just work with them. So we're not going to delete anything.

What we're going to do is to create a new layer and hold down the Alt+Option key and drag all of our keys up onto that layer. And if you've been following along, you know that I've used a little red flag, sign that signifies all of our key frames, and I bet you're grateful for it now. So if you've forgotten how this was created, very simple. If you wanted to create one of these symbols here, you'd make your key frame in the Properties panel under label Empty Space, Return.

Makes us a little flag sign. So this is a work around that I've been using, and let's keep doing that, please. So the final roofs are now on this level. We can hide. The fully animated level, you won't need that for a while. And now we have just our roughs and you'll see our key frames going with them. So, let's name this layer, final roughs keys only. And we'll make a new empty layer on the top for clean up and I'm going to use uppercase for this so that we know that's the layer that we're working on. And I'm going to color code this as blue because I like to have familiar colors for my outlines rather than just the random ones selected.

So the color that I'll be drawing on is blue and we'll make the final roughs orange because that's a reference layer so we'll use orange as a little mental reminder that that's a reference layer don't draw on it in blue. These are the ones that we are currently working with. Okay? So the next thing to do is to hit F7 above every key frame, and this is where we will put our keyed images, or our cleaned up keys I mean. So above each of these we put in the familiar label, just a space in the label sign of the Properties panel.

So we have our flags that will. Help us from getting lost so that when we have all these in betweens, we can still find our key frames easily. There we go. So now, it's time to do our first key frame. So lets go into outline, and I'm going to lock the timing chart so I don't draw on that accidentally. And ahead is a big circle, so I am going to. Go to the oval tool. And let's be sure that we have the right setting for our stroke, we want this to be hairline, because it's cleanest.

And then let's go back to circle. And it sometimes will draw with an interior color. Let's delete that. Now I am just going to nudge this over and I got lucky with the size. I think that's pretty close. So now we can begin drawing. So one thing that be easiest in handling the eyes will be just to use the oval tool again. And let's just lay down a couple of ovals and we can now paint out the interior sinister looking black areas. And use the Free Transform tool to rotate these into a rough position.

That's close enough, I think. Now, we can begin to pull the edges and the sides. Good enough. So to show you how simple it is to clean up this crease, for example, it's one line. And this is why I decided to use this Line tool. And for your first scene, if you're going to clean up something, I think this is a really nice way of doing it because. It's certainly the fastest, and let's say you want to make a little V-shape like that, you can simply draw one line, hold on the Alt key and pull and that will insert a new point. It's a quick way of making complex shapes.

Now, on the mouth we can. Make a simple shape like that, or again, we can hold down the Alt key and just pull it into a slightly more interesting shape. Put a slight break on the line right there, that looks a lot better than just the basic curve. Now, these eyebrows might be slightly different because they're a color set. There's going to be a color area inside. I want those points to line up, so I'm going to put Snap on. So that I snap to that point and now I can switch it off again. And then I can delete these overshoots. And for something like this eye brow, you see where it's going over the edge, that's going to be tricky to draw.

So I'll make a temporary layer on top so that I can draw on the clean layer and get that overshoot working without corrupting the curvature of the skull beneath it. Okay, and now I can get rid of all the over shoots, these little pokey bits there. Just make last minute corrections and then Ctrl+X, Ctrl+Shift+V to paste and place, there we go. So there's the head done and if we hide the lower layer you can see it. We need to add the pupils.

And again you might feel like these are a good candidate to draw on a separate layer so that they don't mess up the line of the eyeball. And let's go to the interior black. And sometimes it's a good idea to have the edge of the pupil to overshoot the edge of the eyeball. It makes a stronger looking shape. So let's try that, see what that looks like. And now we'll copy. Ctrl+C, Ctrl+X and then Ctrl+Shift+V to paste that in place in the lower level. That looks pretty good. And for something like this highlight, let's just select the entire perimeter of the eye.

Ctrl+C, Ctrl+V. Hit Q on the keyboard for free transform. And then just drag that into place, same on this one. Actually let's just use that as well. I'll draw the, there we go. And if the angle's wrong, just free transform again. You get the idea. There we go. So, head done. Things to watch out for beyond that. You might find overlap areas like this to be a little tricky. So, what I usually do is I will pick one line first and then the area that was behind it next. Sometimes I just get going don't over think it.

If you can stand there in shock over the amount of lines that have to be drawn you'll never get anywhere. So sometimes it's just an idea to lay some stuff down like that, and then hit the selection tool, and just get rid of the overshoots. So, here we have the final image. And let's switch off the reference layer beneath. Now, there's one thing that I want you to remember. It's very important. And that is that you're not just tracing. You should be looking for areas that you can push or accentuate. Of course, you can follow along fairly accurately, but if you feel that something is weak, that it's possible to make a shape stronger, by all means, do it.

You don't go too far, of course, or you'll begin to invalidate. >> The many in between drawing it as a source of reference. But for example this eye line crease here I thought would be stronger if it was pushed up a little further to the edge of the eye, I've done the same on the other side, I've put a stronger curvature on that nose for example. These are very subtle examples but basically the message to take away is you're not tracing, you're cleaning up. So, it's a design pass, it's not a tracing pass.

There are currently no FAQs about Hand-Drawn Animation in Flash.

Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.

Mark all as unwatched Cancel


You have completed Hand-Drawn Animation in Flash.

Return to your organization's learning portal to continue training, or close this page.

Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.