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

Home > Articles > Design > Adobe Creative Suite

  • Print
  • + Share This
Like this article? We recommend

Shaping Up

How many times have you had to draw a box in Flash, or a triangle? How many times have you had to create yet another Next button for a slideshow or presentation? If you have to do it nearly as much as I do, you'll immediately see the benefit of shared libraries. To start things off, pop Flash open and start drawing.

  1. Create a new blank document and save it to your Desktop with the name Shapes.fla.

  2. Choose the Rectangle tool (R) from the Toolbar, hold down the Shift key and draw a square on the Stage. The Shift key will constrain the shape of the box so that you end up with one perfect square.

  3. Use the Selection tool (V) to double-click on the box, selecting its fill and stroke, and then press F8 to convert it to a symbol.

  4. In the Convert to Symbol dialog box, name the symbol Box, choose Graphic from the Behavior options and click OK, as shown in Figure 1.

  5. Figure 1Figure 1 Box it up and convert it.

  6. Open up the Library (Ctrl/Cmd+L). You should see a nice, shiny new symbol in it called Box.

  7. Delete the box instance from the Stage.

If you've worked with Flash before, you'll know it means that you can now drag that symbol onto the Stage as many times as you want, resize it, tint it, change its alpha, and animate it without increasing the file size of the exported .SWF. But that's not important in this case because you're not going to publish a .SWF for this file.

Now draw a circle and turn it into symbol as well.

  1. Choose the Oval tool (O) and hold down the Shift key while drawing a perfect circle on the Stage. Make it roughly the same size as the box you drew a moment ago.

  2. Double-click on the newborn circle using the Selection tool and press F8 to convert it to a Graphic symbol called Circle.

  3. Delete the circle instance from the Stage.

Next, you'll draw a triangle. This is not as easy to draw as the others, so this will be the best example of why a shared library is a good thing.

  1. Choose View > Grid > Show Grid to turn on...well...the grid. (If you didn't already know, the grid can be customized by choosing View > Grid > Edit Grid.) The grid makes it incredibly easy to get things aligned well when drawing freehand.

  2. Choose the Line tool (N) and hold down the Shift to draw a perfectly straight line from one intersection of the grid to another. Draw the line so it's four boxes high. This will be Line A. Check out Figure 2 to compare.

  3. Figure 2Figure 2 Drawing a perfectly straight line is not as hard as it used to be.

  4. Next, draw another line diagonally from the bottom of the Line A, four boxes to the right, and two boxes up, as shown in Figure 3. This is Line B.

  5. Figure 3Figure 3 Line B is connected to the...leg bone. The leg bone is connected to the...

  6. Draw a third line diagonally from the end of Line B back to the top of Line A. This will complete the triangle.

  7. Choose the Paint Bucket tool (K) and click inside of the new triangle to fill it with color, as shown in Figure 4.

  8. Figure 4Figure 4 A splash of color, mixed with a handful of salt, will make a delightful triangle.

  9. Use the Selection tool to double-click the triangle and press F8 to convert it to a Graphic symbol called Triangle. (Seeing a trend yet?)

  10. Choose View > Grid > Show Grid again to turn off the grid.

  11. Delete the triangle from the Stage, save your work and close Shapes.fla.

  • + Share This
  • 🔖 Save To Your Account