From Paper to Pixels to Vectors

Evolution of a Flash cartoon character

From Paper to Pixels

1. Locate and open 01_ImportCharacter.fla located in the Chapter_02 folder.

2. Select File > Import > Import to Stage3. Locate and open the 01_CharacterScan.jpg file in

the Assets folder.4. Lock the scan layer.5. Create a new layer above the original artwork

layer. Rename it head.

From Paper to Pixels

6. Go to the Tools panel and set the Stroke Color to #CC6666; a medium pink.

7. Select the Pencil Tool (Y). At the bottom of the Tools panel, click on Smooth from the Pencil Mode options. This option automatically smoothes your strokes while retaining the basic shape you intended to create.

8. Go to the Properties panel. Set the Stroke value to 2.

From Paper to Pixels

9. Trace around the head using the Pencil Tool. Don’t worry too much about staying on the line; you will correct that in the following steps.

From Paper to Pixels

10. Select the Selection Tool (V). Click and drag the stroke by pressing and holding the left mouse button. Adjust the stroke to match the outline of the scanned character as best as possible.

From Paper to Pixels

11. Select the Subselection Tool (A). Click on the stroke to see the points that make up the shape. Remove points by clicking and deleting points. Use the Bezier handles to adjust the strokes shape as necessary.

From Paper to Pixels

12. Go to the Tools panel and change the Fill Color to a pale pink color; # FFCDCD.

13. Select the Paint Bucket Tool (K). Click inside the stroke outline to fill it with your chosen skin tone.

From Paper to Pixels

14. Once you have completed the shape, select both the fill and stroke by double clicking anywhere in the head’s pink fill color.

15. Select Modify > Convert to Symbol. Enter Boy_Front_Head as the symbol’s name. Select Graphic as the symbol type. Click on the center square for the registration point. Click Ok.

Why convert the shape into a graphic symbol?

Symbols allow shapes and objects to be reusable without impacting the overall file size. Graphic symbols also enable you to see its nested animation play when you scrub the playhead back and forth on the Timeline. Contents in a movie clip symbols do not play beyond Frame 1 unless you test your movie or publish it as an SWF file. Flash animators often place an entire animation inside a graphic symbol’s Timeline.

From Paper to Pixels

16. Lock the graphic symbol layer. Create a new layer above that to draw the character’s eyes. Rename the layer eyes.

17. Click on the colored square next to the lock symbol dot. This is the Layer Outline toggle that switches the head layer to an outlined shape, allowing you to see the artwork underneath.

18. Go to the Tools panel and change the Fill color to white (#FFFFFF). Leave the Stroke Color set to medium pink.

From Paper to Pixels

19. Select the Oval Tool (O). Draw an oval for the character’s right eye.

From Paper to Pixels

20. Select the Line Tool (N). Position the cursor over the right eye lid and draw a diagonal line across the top of the oval shape. Delete the top art of the oval.

21. Select both the fill and stroke for the eye. Select Modify > Covert to Symbol. Enter Boy_Front_Eye as the name.

From Paper to Pixels

22. With the eye symbol selected on the Stage, hold down Option and drag to create a duplicate.

23. With the duplicate selected, select Modify > Transform > Flip Horizontally. Position the duplicate eye over the left eye and lock the eyes layer.

From Paper to Pixels

24. Create a new layer above the eyes and rename it pupils.25. Change the Fill Color to a light blue (#6699CC). Set the Stroke Color to no stroke.26. Select the Oval (O). Draw the pupils, holding down the Option + Shift as you drag a

circle from the center of the eye.27. Go to the Tools panel and change the Fill Color to a black (#000000).

From Paper to Pixels

28. Select the Brush Tool (B). At the bottom of the Tools panel, set the Brush Mode to Paint Normal and select a medium size brush. Position the cursor over the center of the blue circle and single-click to add the black pupil. If you want to add a highlight to the eye, change the Fill Color to white, reduce the brush size and draw a small circle in the top left corner of the pupil.

From Paper to Pixels

29. With the pupil layer’s shapes highlighted, select Modify > Convert to Symbol. Enter Boy_Front_Pupil as name. Select Graphic as type. Click OK.

30. While the symbol is still selected on the Stage, hold down Option and drag to create a duplicate and drag it over to the left eye. Lock the pupils layer.

From Paper to Pixels

Continue to trace the character’s remaining parts:1. The nose, mouth, body, gloves, belt, cape, and hair are drawn using the pencil tool.2. Each of these character elements should be created on separate layers labeled

respectively nose, mouth, and so on.3. To see a completed version, open 01_ImportScan_Complete.fla in the Completed folder

inside the Chapter_02 folder.

From Illustrator to Flash

1. Locate and open the file 03_Vector_Character.ai file in the Assets folder in Chapter_02.

-The character has already been designed and assembled.-Notice that each body part is on its own individual layer.-Each layer has been labeled to correctly identify the part.

From Illustrator to Flash2. Open the file 03_IllustratorCharacter.fla in the

Chapter_02 folder. It contains one, empty layer labeled vectorArt.

3. Select File > Import > Import to Stage to open the Import dialog box.

4. Locate the 03_Vector_Character.ai file in the Assets folder in Chapter_02. Click Open. The Importer Wizard automatically launches. It provides a thumbnail preview of each Illustrator layer and the ability to deactivate any layer by clicking on the checkmark to the left of the thumbnail image.

From Illustrator to Flash5. Make sure the Cover layers to option is set to Flash

Layers. This option places all selected layers on their own layer. Each layer is labeled with the name of the layer in the Illustrator file. The layers in Illustrator are imported as vector art.

6. Make sure the check box for the Place layers at original position option is checked. The contents of the Illustrator file retain their exact position.

7. Select the Superhero_Front_Head layer. Individual import options specifically for that layer appear on the left of the thumbnail images.-Check the box for Create movie clip for this layer-Click on the center square for the registration point.

From Illustrator to Flash8. Repeat these steps with the remaining Illustrator

layers. Create movie clips for every layer with a center registration point.

9. Uncheck the checkmark to the left of the background color thumbnail image. Do not import the background color layer.

10. When you are done, click OK. The layered character appears assembled on the Flash Stage. Each layer in the Illustrator document was converted into a separate Flash layer. The Library holds all of the movie clips that you created in the Import Wizard.

From Illustrator to Flash

11. Before you start creating keyframes to animate the character, you need to adjust the registration point’s positions for each movie clip. This is the pivot point that will “hinge” the individual body parts together. It doesn’t link the layers together, but allows you to animate each layer more effectively.

From Illustrator to Flash

Once all of the individual movie clip’s registration points have been positioned properly, you are ready to animate your character. To see an animated example of the exercise, open 03_IllustratorCharacter_Complete in the Completed folder inside the Chapter_02 folder.