In this tutorial I will show how to properly turn your 3D animations, or stills, into a 2D vectorized cartoon in Flash. The applications used are Adobe Photoshop, Autodesk Maya, and Adobe Flash. This process is by no means the only way to do this or the best way to do this it is simply one way of going about it. This is a two part process the first part is taking your 3d model and rendering it into a 1bit Bitmap image sequence. The second part is taking those renders and vectorizing them properly in Flash. This process will involve using Photoshop to convert the images into 1bit Bitmaps that have no anti-aliasing and are pure black and white with no grays. This is necessary to cleanly trace the Bitmaps in Flash. I will also cover how to setup an automated process in Photoshop for converting your images to Bitmaps. For some people the second part might not be necessary if vectorizing your animation is not important to you.

Step 01

The first thing we need to do is load up Maya 7.0 or higher (older versions of Maya don’t have the toon feature but you can make your own shaders for it). Then load up your scene with your model. I have loaded up a simple character model that I created. Also make sure you have a set a project location so you can easily find your renders.

Step 02

Select the character.

1.Making sure you are on the rendering menu set, go to Toon>Assign Fill Shader>Solid Color( this will give the character a completley flat white color with no shadows).

2. Still with the character selected go to Toon>Assign Outline>Add New Toon Outline( this gives the character the outline).

Step 03

Select your model and open up the Attribute Editor(Ctrl+a). Scroll to the tab named pfxToonShape1. This tab will give you all the options for the look of your toon lines. The image below shows my options for this specific model. Not all models will have the exact same settings its very depended on the shape of your model. That being said the highlighted options below are still recommended especially the Profile Lines option. By default its set to PaintFX which uses a post effect to generate the lines. I don’t like this look I prefer Open Edge because it generates actual geometry for the lines gives a nicer smoother look but the borders of the geometry are still PaintFX.

.

Step 04

All I rendered for this character was a simple 30 frame turnaround. Now for the render settings. Render using Maya Software not Mental Ray because mental ray won’t render with the PaintFX on the geometry borders. You can just set it to production and render without any issues.

One thing to note the size of our render is really important. If the lines on your image look too thin you will have to render at higher resolutions or increase your line thickness. I don’t recommend going over 3k because Flash will become unstable with a large image sequence of that resolution. For the common settings use what is highlighted in the image below. Note the pixel aspect ratio even though we have selected square it won’t come out square unless you render a square image. This isn’t a big issue because it is easily fixable in Photoshop. So hit batch render and wait until it’s done.

Step 05

Once you are done rendering you will a have a sequence of .jpgs in your render folder.

Step 06

The 3D part is done. Now it’s time for the tedious part. Converting your image sequence into 1bit Bitmaps with no anti-aliasing. Open one of your image inside of Photoshop. First thing you need to do is make sure the pixel aspect ratio is set to square pixels. Go to Image>Pixel Aspect Ratio>Square.

Step 07

Next go to Image>Mode>Grayscale.

Step 08

Then go to Image>Mode>Bitmap. In the Bitmap options select 50% Threshold from the drop down menu under method to use.

Step 09

Your image should look something like this now. Notice how the anti-aliasing is removed and its pure black and white with no grays. This is crucial for getting clean vectorized images.

Step 10

This has to be done to all the images in your animation so instead of spending hours doing this tall your frames we can simply make Photoshop do all the work by creating an automated process inside of Photoshop. Below I have listed all steps for doing this. The order of these steps is really important..

1.Open one of your images

2.Go to Windows>Actions Click the create new action button and set a name for it.

3. Now its recording your actions. So simply repeat the prior process I talked about for converting your image into a 1bit Bitmap.

4.Save your image as a Bitmap.

5.Close the document

Your Actions should look like this:

Step 11

To run this action for all your images go to File>Automate>Batch. Select your source folder with all the frames and hit Ok. The new bitmap files will be saved in the same folder you saved the image when you created the Action. Unless you override that in the batch options.

Step 12

Once all bitmaps have been created, open Flash, create a new document, and go to File>Import>Import to Stage and select one of the created bitmaps in the sequence. Flash will recognize the image sequence and ask you if you would like to import the entire sequence. Hit yes and your files will be imported into the timeline in the right order.

Step 13

Once the images are in your scene you can start tracing the bitmaps to vectorize them. Unfortunately you have to do it individually for every image. There is no way that I have been able to find that will allow you to do multiple images at once. With an image selected go to Modify>Bitmap>Trace Bitmap. In the options window all the options have their own effects except for the Color Threshold because the images we created are black and white. Below are my setting for this model. This settings are determined by the look you want for your animation and the line detail of your images.

Step 14

Now you should have a vectorized animation. You can resize your images as much you want and it will never look pixelated.

discuss this topic to forum