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

Home > Articles > Web Design & Development > Adobe Flash

Adobe® Flash® Professional CS5 Classroom in a Book: Creating Symbols

  • Print
  • + Share This
  • 💬 Discuss
From the book
In this lesson, you will select the different parts of the imported Illustrator graphic, and then convert the various pieces to symbols.

Note: This excerpt is from a draft manuscript and may not be representative of the final published work.

In the previous lesson, you learned how to create a symbol to be used for the Deco tool. In Flash, there are two ways to create a symbol. The first is to have nothing on the Stage selected, and then choose Insert > New Symbol. Flash will bring you to symbol editing mode where you can begin drawing or importing graphics for your symbol.

The second way is to select existing graphics on the Stage, and then choose Modify > Convert to Symbol (F8). Whatever is selected will automatically be placed inside your new symbol.

Both methods are valid: Which you use depends on your particular workflow preferences. Most designers prefer to use Convert to Symbol (F8) because they can create all their graphics on the Stage and see them together before making the individual components into symbols.

For this lesson, you will select the different parts of the imported Illustrator graphic, and then convert the various pieces to symbols.

  1. On the Stage, select the cartoon character in the hero layer.
  2. Choose Modify > Convert to Symbol (F8).
  3. Name the symbol hero and select Movie Clip for the Type.
  4. Leave all other settings as they are. The Registration indicates the registration point of your symbol. Leave the registration at the top-left corner.
  5. Click OK. The hero symbol appears in the Library.
  6. Select the other cartoon character in the robot layer and convert it to a movie clip symbol as well. Name it robot.

You now have two movie clip symbols in your Library and an instance of each on the Stage as well.

Importing Photoshop Files

You’ll import a Photoshop file for the background. The Photoshop file contains two layers with a blending effect. A blending effect can create special color mixes between different layers. You’ll see that Flash can import a Photoshop file with all the layers intact and retain all the blending information as well.

  1. Select the top layer in your Timeline.
  2. From the top menu, choose File > Import > Import to Stage.
  3. Select the background.psd file in the Lesson03/03Start folder.
  4. Click Open (Windows) or Import (Mac).
  5. In the Import to Stage dialog box, make sure all layers are selected. A check mark should appear in the check box next to each layer.
  6. Choose the flare layer in the left window.
  7. In the options on the right, choose Bitmap image with editable layers styles.
  8. The movie clip symbol icon appears to the right of the Photoshop layer, indicating that the imported layer will be made into a movie clip symbol. The other option, Flatten bitmap image, will not preserve any layer effects such as transparencies or blending.

  9. Choose the Background layer in the left window.
  10. In the options on the right, choose Bitmap image with editable layers styles.
  11. At the bottom of the dialog box, set the Convert layers to Flash Layers option, and select Place layers at original position.
  12. You also have the option of changing the Flash Stage size to match the Photoshop canvas. However, the current Stage is already set to the correct dimensions (600 pixels x 450 pixels).

  13. Click OK. The two Photoshop layers are imported into Flash and placed on separate layers on the Timeline.
  14. The Photoshop images are automatically converted into movie clip symbols and saved in your Library. All the blending and transparency information is preserved. If you select the image in the flare layer, you’ll see that the Blending option is set to Lighten in the Properties inspector under the Display section.

  15. Drag the robot and the hero layers to the top of the Timeline so they overlap the background layers.
  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus