Your Customers are Mobile, you will be too …

In this tutorial we will show you how to create a hand drawn rotoscope video in Flash CS5.5. Unfortunately there is not way to automate this process so we still need to drawn each frame by hand. Beside it wouldn’t be a hand drawn rotoscope if we automated it now would it. This technique is becoming more and more common so for any aspiring web developer at least having a basic knowledge of what is involved in creating a rotoscope is becoming more and more important.

If your drawing skills are not too crash hot it doesn’t really matter as we will tracing and imperfections can actually enhance the video to some degree. Sometimes this rough shaking of the image, also known as boiling, is the actually the desired effect. This is the case is some cartoon series like the animated TV series “Delta state”. So don’t panic about your drawing skills too much.

This is an example of a simple hand drawn rotoscope.

If you are looking for a quicker method of rotoscoping I have another tutorial on bitmap rotoscoping you could try.

Before we begin we need to have three things at our disposal.

  • A video camera (unless you already have footage to work off)
  • Flash CS5.5 (you can work with other versions however this is what I am using for this tutorial)
  • Adobe Media encoder CS5.5 (again earlier versions should be able to do the job)

We will be making an animation without sound however I will put up a tutorial later on on how to add sound to these videos.

Flash CS5.5: Hand Drawn Rotoscope Animation

It is pretty obvious what the video camera is for at this stage. We need a video to work with so if you don’t already have one film something then transfer it onto your computer. It don’t matter if its just ya dog running round the yard you just need a short film of something to work with. The better the quality of the film the better so go as high res as you can for this, and don’t use your mobile phone. The quality just isn’t good enough.

Keep your video short for now and work your way up to the bigger stuff down the track.

Open Media Encoder, select your video and export it as a JPEG sequence. IF you don’t know how to do this I have got a good tutorial on Exporting JPEG Sequences that will show you how to do it even without the JPEG codec that is often missing from Media Encoder. Remember to set your frame rate down to 12 frames per second. Your could leave it as is but that’s a lot of unnecessary drawing.

Once you have your video converted to JPEG sequence we are ready to begin. Open Flash up and begin a new file. Set the stage up with your own sizes and background colors, it is your project after all.

Once you have your stage set up ready to go select File >> Import >> Import to Stage … and navigate to where you saved your JPEG sequence. Select the first JPEG and hit Import. You will then be prompted that the JPEG appears to be part of a sequence would like to import all of the images. Click yes and wait for Flash to import all of your images to your stage on individual frames then rename that layer something like originals and lock the layer so you don’t accidentally draw on it instead of your animation layers. Remember we need to hide this layer later on so we don’t want to have our drawings on it.

Right click on the originals layer and insert a new layer on top of it. Name your  layer something useful like animations. We now need to create the frames we will be working with for our animating. Click on first frame in our animation layer and then hold down the F6 button to insert blank key frames in the animation layer. We want a new key frame for each frame in our originals layer.

Once you have done that go back to the first frame in your animation layer. Your probably going to want to zoom in a bit to have a bit more room to work with on the stage so set your zoom to 200%. Select your paint brush tool and set your brush size and color etc. Make sure your smoothing setting is 50% This will smooth out some of the imperfections in your drawing and comes in very handy for a good finish.

Now there are 2 ways to go about this you can draw this frame entirely then move onto the second frame or you can pick a line or a couple of lines that will be in your animation then hit the greater than and less than keys to scroll between frames and do that section of the animation from start to finish.

For example if your subject is holding a book you might decide the draw the book then move to the next frame and do the same with the greater than key. Once you have finished animating the book you then go back to the start of the layer and draw the picture on the front of the book and go right through with that.

Generally this technique gives you a more consistent finish. Because you are not changing colors as often and your stroke sizes etc. Be warned with stroke sizes zooming in and out does change them by the way.

Now go right through and animated your video or the part you want animate. Hide the originals layer regularly save your work and hit enter at the first frame so you can see how your animation is progressing. This is a long slow progress but I’m sure you will agree at the end well worth it. But make sure you save regularly, there is nothing worse than something crashing flash and you loosing 20 minutes worth of work.

Once you have finished your work if you hit F12 you will notice that even if you hide the originals layer it will still appear in the video. So before exporting delete the originals layer, save and export the video.

Hope you all found this useful and see you again soon.

3 Responses to Flash CS5.5: Hand Drawn Rotoscope Animation

Leave a Reply

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: