Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Adobe Creative Suite

  • Print
  • + Share This
This chapter is from the book

Modifying Symbols and Shapes in Flash

If you've ever watched a cooking show (Julia Child springs to mind) you'll see the cook throw some ingredients together and put them in what looks like a working oven. Two seconds later, they remove the fully cooked meal. Through the magic of CD-ROM technology, we're now going to have our own Julia Child moment. We'll open a file that looks suspiciously like the one you just worked on, but it has all the symbols we need already defined. (No symbols were harmed during the making of this file.) And we'll use it to give the Dot symbol a 3D look.

  1. Still in Flash, open a new file and import TEC-logo2.FH10 from the Lesson02\Start folder on your CD-ROM. Open the Library panel, if it is not already open. Double-click on the Dot symbol to edit it.

    Figure 13

    Note that the stage has changed, showing only the symbol we are editing. Note also that the symbol's name appears in the tab list just under the toolbar. The dot itself was grouped by FreeHand, even though it is a "group" of one. To edit this object within the Dot symbol, let's first break it apart.

  2. Click on the dot symbol to select it, and then go to Modify > Break Apart or press Ctrl+B (Windows) or Command+B (Mac). Do this twice. Then zoom in on the object by clicking and dragging over it with the zoom tool (magnifying glass).

    Figure 14

    The object changes from a solid to a textured fill, and the bounding box around the object disappears.

    NOTE

    It's an idiosyncrasy of the way FreeHand files are imported into Flash that every symbol gets grouped and then grouped again. It may be a bit inconvenient, but it's a great improvement over earlier versions in which there was no easy way to import things from FreeHand into Flash at all.

  3. With the object still selected, click on the Fill Color well in the Tools panel. From the pop-up color selector, choose the first radial gradient pattern, going from black to white.

    Figure 15

    Now we have a gradient-filled object, but it doesn't really look 3D yet. We'll change the center of the gradient to move the implied light source.

  4. Deselect the object by clicking on an unused portion of the stage. Select the fill transform tool.

    Figure 16

  5. Select the object.

    You'll see several controls appear over the object. There is an indicator for the center, along with a line circling the object with three small control handles on the line itself. These controls allow you to change the center, size, and rotation of the gradient effect, as well as change from a circular to an elliptical gradient.

    Figure 17

  6. Move the center of the gradient halfway between the upper-left corner and the center of the object. Click the middle of the three control handles on the gradient perimeter, and drag the size of the gradient out to make it larger.

    The flat, lifeless black circle has now taken on the appearance of a spherical, 3D object.

    Since FreeHand can create gradients, at this point you may be wondering why we didn't just create this effect in FreeHand and import the logo with the gradient intact. It's because certain kinds of FreeHand gradients do not import as gradient fills, but instead as dozens of objects that have been cropped by the outside shape. Flash is a safer and more efficient place to create gradient fills for our purposes.

    Figure 18

    TIP

    Experiment with the gradient controls to see what kinds of effects you can create with elliptical and rotated gradients. You can also use multicolored and linear gradients.

  7. In the Library panel, double-click on the Orbit symbol. Break it apart (Ctrl+B in Windows, Command+B on Macintosh), twice. Change the color to blue. Open the Color Mixer panel and change the Alpha value to 60%.

    Figure 19

    One of the strengths of Flash is that you can easily make solids translucent. Here, that control over the opacity of colors allows us to make objects look as if you can see through them as they overlap each other. This lends some realism to the "3D-ness" of the logo.

    TIP

    A lot of design is about contextual clues. You don't have to draw every leaf and branch of a tree to convey the idea of a tree. The trick in Flash is to use as few shapes, colors, sounds, and movements as possible to convey the ideas you want. If we can suggest a 3D space by using a simple radial gradient and a semi-transparent object or two, it saves us from a lot of bandwidth-hogging 3D modeling to achieve the same goals. In a way, it's a parallel to an old writer's axiom: inside every fat animation is a thin animation trying to get out.

Now you'll learn how to move symbols along a path.

  • + Share This
  • 🔖 Save To Your Account