Lesson 1

Understand and Import Graphics

 

OBJECTIVE:

In this lesson, you will import graphics from several different drawing an image-editing programs.

 

Lesson:  Import a layered Fireworks PNG file as a movie clip symbol

  1. Start Flash, create a new Flash (ActionScript 2.0) document, save it as gsamples, then verify the Stage size is 550 x 400 pixels.
  2. Display the Library panel.
  3. Click File on the menu bar, point to Import, click Import to Stage, then navigate to your server folder
  4. Click the list arrow for the file types, click PNG File (*.png), click dragonfly, png, then click Open
  5. In the Import Fireworks Document dialog box, verify the Import as a single flattened bitmap check box is deselected and the Into: option is set to Current frame as movie clip
  6. Click the Keep all  paths editable option button in the Objects area to select it, then click OK
  7. Set the view to Fit in Window, click the Pasteboard
  8. Click the expand arrow next to the fireworks Objects folder in the Library panel, then continue to expand folders until there are no more to expand
  9. Click the collapse arrow next to the Fireworks Objects folder in the Library panel
  10. Name Layer 1 as dragonfly

Summary:  You imported a Fireworks PNG file as a movie clip to the Stage, which automatically generated a folder containing the movie clip and supporting files in the Library panel.

 

Lesson:  Import an Adobe Illustrator file as a symbol

  1. Click File on the menu bar, point to Import, then click Import to Library
  2. Click the list arrow for the file types, click Adobe Illustrator (*.ai), click tree.ai, then click Open--the Import “tree.ai” to Library dialog box appears
  3. Verify the Convert layers to option is set to Flash Layers, then verify both Import unused symbols and Import as a single bitmap image check boxes are  deselected
  4. Click OK.  A new graphic symbol, tree.ai, appears in the Library panel
  5. Insert a new layer, name it tree 1, then drag the tree1 layer beneath the dragonfly layer
  6. Verify that frame 1 of the tree 1 layer is selected, then drag the tree.ai graphic symbol from the Library panel to the left side of the Stage beneath the dragonfly
  7. Display the Properties panel, then verify the Lock width and height values together symbol is broken
  8. Change the width to 300 and the height to 277
  9. Set the X: coordinate to 3.0 and the Y: coordinate to 60.0

Summary:  You imported an illustrator file to the library, dragged the graphic symbol to the Stage, and then resized and repositioned it.

 

Lesson:  Import an Adobe Photoshop file saved in PSD format

  1. Click File on the menu bar, point to Import, then click Import to Stage.
  2. Click the list arrow for the file types, click Photoshop (*.psd), click background.psd, then click Open--the Import to Stage dialog box opens--a check mark next to a layer means the layer will be imported
  3. Click the Background layer (not its check box), then verify Flattened bitmap image is selected
  4. Click the Sun layer (not its check box), the click Editable paths and layer styles
  5. Verify the Convert layers to option is set to Flash Layers, then verify the Set stage size to . . . option is deselected
  6. Click OK, notice the two layers that are added to the Timeline, then press ESC to deselect the newly inserted graphics
  7. Click the Sun layer, then click the Delete icon
  8. Drag the Background layer to below the tree1 layer
  9. Click the background graphics to select it, then use the Properties panel to change the width to 550 and the height to 400
  10. Verify the X: coordinate is set to 0.0 and the Y: coordinate is set to 0.0
  11. Click the Lock/Unlock layer icon to lock the Background layer

Summary:  You imported a PSD file to the library, resized it, set its position on the Stage, and then locked its layer.

 

Change the compression setting of a bitmap

  1. Display the Library panel, then double-click the background.psd Assets folder to display the objects and their symbols
  2. Right-click the Background bitmap symbol in the Library panel, then click Properties to open the Bitmap Properties dialog box
  3. Click the Allow smoothing check box to select it
  4. Verify that Photo (JPEG) is selected for Compression, then click the Custom option button in the Quality area
  5. Type 100 in the Custom text box, then click Test—notice the compressed size of the graphic is approximately 25 kb
  6. Change the Custom setting to 70, then click Test—the Compressed size of the graphic has been reduced to less than 2 kb, with no significant reduction in the appearance of the image
  7. Click OK
  8. Save your work

Summary:  You compared the file sizes of different compressions and then compressed a bitmap file.