Typographic Animation Day 2: Converting Text to Vector Outlines in Illustrator

Today’s essential question: How can use Adobe Illustrator to create the graphics I will later animate in Flash?

Part 1: How to Convert Text to Vector Outlines in Adobe Illustrator

  1. Select the type tool. type_tool
  2. Change the size and typeface from the drop down menu at the top of the screen. Choose a large size (72-200pt) so you will be able to see your word.
    typeface_window
  3. Type some text.
    word
  4. Select the selection tool. selection_tool
  5. Type -> Create Outlines
  6. Object -> Ungroup
    This will separate the letters.
    outlines
  7. You can now move, scale and rotate individual letters with the selection tool.
    ungroup
  8. You can also select and move individual points on a letter with the direct selection tool. direct_selection_tool
    e1 e2
  9. You can delete points by clicking and holding on the pen tool to bring up the Delete Anchor Point tool, and using it to delete any points that you do not want.
    delete_anchor_point.png
    f_point_deletion_process.png
  10. You can also use the shape tools such as the rectangle tool rectangle_tool.PNG to draw parts of the letters back in as separate shapes, like in the example below:
    f_arms_separated.PNG
  11. Make sure you save your file as an Ai and PNG and post your progress to your blog.

Why might you want to convert each letter (or even part of a letter) into separate graphics before bringing them into Flash?

The videos below were created with letters that were first separated into pieces before being animated:

Part 2: How to Import Vector Graphics into Flash

  1. Make a new Flash file
  2. File -> Import -> Import to Library
    menu_Screen_Shot
    import_to_library
  3. Select “Convert to Flash Layers”
    flash_layers.PNG
  4. Go to the library and drag each graphic onto its own layer in your timeline.

Today we will:

  • create our word graphics in Illustrator
  • save our file as both a Ai and PNG
  • import our graphics into Flash
  • make a new blog post with images of our progress
  • back all our files up to our animation folders in our Google Drives
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s