Now: Tutorial for Web and Software Design > Flash > Action Script > Flash Content
> Using Illustrator Symbols in Flash [Bookmark it]
Using Illustrator Symbols in Flash

Whether you create your own or use the ones included in the program, Illustrator symbols are a great source of vector art for Flash projects. In this tutorial, I'll show you how to copy an Illustrator symbol to a Flash document and edit the symbol in Flash.

image 1

Step 1

Create a new Flash document or open an existing document. Launch Illustrator. Click the New Document button in the startup screen. The New Document dialog box will open. In the dialog, choose Letter for the Artboard Size. Check RGB for the Color Mode and then click OK. Save your document as "Flash symbols".

The document size isn't important. We will be copying the symbols from Illustrator to Flash. By saving your document, any symbol you use or create will become part of the default symbol palette for that document. This means, whenever you open the document again, all of the symbols you've used will be available in the symbol palette.

image 2

Step 2

In Illustrator choose Window > Symbols to open the Symbols palette. Click the Arrow located at the upper right-hand corner of the Symbols palette. Select Buildings from the list. The Buildings palette will open.

image 3

Step 3

Drag a building symbol onto the Artboard. I used the red house. Copy the Symbol to the Clipboard by pressing Command + C. Return to Flash. Click on the Stage and paste the Symbol by pressing Command + V. The Illustrator Symbol is pasted as several grouped objects.

image 4

Step 4

With the objects creating the building still selected, Right-mouse click in the center of the building and choose Convert to Symbol from the Context Menu. In the Convert to Symbol dialog box, enter a name for the Symbol and choose Graphic for the Behavior. Click OK.

image 5

Step 5

In this Step, we're going to duplicate the Symbol and then edit the duplicate. Open the Library Panel by pressing Command + L or F11. Right-mouse click on the Symbol and choose Duplicate from the Context Menu. The Duplicate Symbol dialog box will open. Enter a name for the symbol in the Name field, or accept the default name "House copy" and click OK.

Delete the House from the Stage. From the Library, drag the Symbol "House copy" onto the Stage. Double-click on the House copy Instance on the Stage to open its Timeline.

You may be wondering why we don't just work on the original House since it is already on the Stage. We could. However, I prefer to always work on a copy. If I mess up the copy, I can always duplicate the original again and start over.

image 6

Step 6

You've probably noticed the dimensions of the house are pretty small. Because the objects used to create the house are all vectors, it is easy to make the house larger without degrading the resolution. However, this isn't true for all of Illustrator's symbols. Some use bitmap graphics. Symbols using bitmaps have limited usefulness if you need to increase the size of a symbol. The bitmaps will "pixelate", which just becomes ugly in most situations.

You should still be inside the House copy Instance. Select all of the objects on the Stage by pressing Command + A. Next, choose Modify > Transform > Scale and Rotate. Enter 400 in the Scale field. Click OK. Next, Right-mouse click on the house and choose Break Apart from the Context Men. The grouped objects are converted to Fills.

image 7

Step 7

Select one of the fills by clicking on it with the Selection Tool. Open the Color Mixer Panel, Shift + F9 or Window > Design Panel > Color Mixer. Click the Paint Bucket in the Color Mixer Panel. Click a color in the Color Space of the panel. Continue to select and change the different fill colors as desired.

Click the Scene 1 at the top of the Timeline to return to the Main Timeline. Choose Control > Test Movie to view your work in the Flash Player. Or press F12 to view the published movie in an HTML page.

While I typically create the majority of objects I use in my animations using Flash's drawing tools, sometimes they aren't powerful enough. That's when I launch Illustrator. Using Illustrator's advanced drawing tools, I am able to create the illustrations I need and save them as symbols for current and future projects. The following animation is an example of a Flash movie using symbols that was created for a larger project.

Courtesy of Layers magazine.


[Bookmark][Print] [Close][To Top]
  • Prev Article-Flash: None

  • Next Article-Flash:
  • Related Materias
    Generating and Publishing 
    Introduction to ActionScri
    Examples of ActionScript 2
    Spinning Wheels
    Handwriting Flash Movie
    Butterfly Wings Animation
    Working with Texts
    Working with Texts
    Working with Sounds
    Layers in Flash
    Topics
    Photoshop Tutorial
     

    Special Effect

      3D Effect
      Photoshop Articles
    Programming Tutorial
     

    C/C++ Tutorial

      Visual Basic
      C# Tutorial
    Database Tutorial
     

    MySQL Tutorial

      MS SQL Tutorial
      Oracle Tutorial
    Graphic Design Tutorial
     

    Coreldraw Tutorial

      Illustrator Tutorial
      3D Graphics Articles
    Webmaster Articles
     

    Domain Service

      Web Hosting
      Site Promotion
    Java Tutorial&Articles
     

    Java Servlets

      JavaEE Tutorial
     

    JavaBeans Tutorial

    XML Tutorial&Articles
     

    XML Style Tutorial

      AJAX Tutorial
      XML Mobile
    Flash Tutorial&Articles
     

    Flash Video

      Action Script
      Flash Articles
    OS Tutorial&Articles
     

    Linux Tutorial

      Symbian Tutorial
      MacOS Tutorial