Tutorial for Illustrator

http://edutechwiki.unige.ch/en/Flash_bitmap_tracing_tutorial

Tracing a bitmap with Illustrator

Step1 - Trace the bitmap

Illustrator CS3 has more sophisticated bitmaps tracing features. Here is a very short example that includes a shape tween:

• Open the picture in Illustrator
• Select it
• Now you will have a "Live Trace button" on the control panel on top
• Next to it is a little pulldown menu from which you can select various options, for a portrait you may choose "Color 16"

Live tracing with IllustratorCS3

Once you hit the trace button, the controls on top will change and you can play with all sorts tracing methods and parameters

Live tracing controls with IllustratorCS3

Step2 - Import to Flash

• Copy/paste if from Illustrator with the options: Paste using AI File Importer preferences and untick maintain layers
• You may adjust the size of the stage to the size of the picture somewhat, I chose to add some big margins for a reason you will see later.
• Convert it to a symbol (so that you have a copy in the library)

Step 3 - Break it Apart

• Then right-click->Break Apart
• You have to do this several times, since illustrator produced object groups within object groups (use ctrl-Z if you think you went too far).

Step 4 - Create a new keyframe

• Right-click on frame 20 and hit F6 to create a new keyframe with the same picture.

Step 5 - Distort the picture in keyframe 1

Try everything you can

• Select parts and change the color with the paint bucket. That's actually the only thing I did
• You also can move parts, but probably you then should start with a much simple ray trace.
• Distort parts with the Selection Tool, the Subselection tool and the Free Transform tool

Step 6 - Add a shape tween between the two frames

... enjoy

Tune

• You also may at the very end (after the last keyframe) insert the original jpg picture. Tracing bitmaps is a very difficult issue, since there are many kinds of algorithms you can select from.

Basically the machine must be told how to group similar pixels together into a vector objects. For example, an algorithm can group together pixels with similar brightness, similar color, or try to find lines from similar pixels.

Publish

• In the HTML setting you probably want to take off the "loop" option

You can admire the result

Files: flash-cs3-shape-picture-morphing.*)

Directory: http://tecfa.unige.ch/guides/flash/ex/shape-tweening-intro/