Your Customers are Mobile, you will be too …

In this tutorial we will show you how to create a bitmap rotoscope animation using Flash CS5.5 and Adobe Media Encoder CS5.5. We all like the rotoscope animations we find on various websites but just how do we go about making them? 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 looking for a tutorial on hand drawn rotoscoping I have another tutorial you can take a look at here.

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: Bitmap Rotoscoping

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.

Our finished product will be an animation made up of a series frames looking like this:

Now open up Flash CS5.5 and create a new actionscript file. Select File >> Import >> Import to Stage … and then navigate your way to the folder in which you exported your JPEGs to from Media Encoder. Select and open the first JPEG in the folder, a pop-up window will appear informing you that the image appears to be part of a sequence and would you like to import them all. Click yes and flash will now import all the JPEGs in the sequence and place them all in individual frames on the one layer.

We are almost there, select the first frame on the layer you just imported (You must actually select it in the the timeline for this process to work). Select Modify >> Bitmap >> Trace Bitmap… and once the pop-up window appears set your color threshold to 50 and your minimum area to 3 pixels.

If you click anywhere on the stage outside of your selection you will be able to see the effect created. If you wish you can undo the changes and go back in and fiddle with the settings above if you like. However once your are done you need to click on your next frame in the timeline and repeat the process one more time. DO NOT click anywhere else once you have done this. From here on in the only place your should be clicking is on the next frame in the timeline only!!!

Click on the next frame and hit Ctr-Y to repeat the changes you just made to frame to 2 onto frame 3. Continue repeating this process all the way down your timeline for each and every frame to apply the same settings to every JPEG in the sequence.

Once you have done that hit F12 to preview it. When you are happy save it and export your .swf file. If you want to stick it on youtube Export it as a .avi as well.

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

Leave a Reply

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: