Drawing Exercise Files 2

Working with Color

The Color Panel

Color panel
  • Stroke
  • Fill
  • Type
  • Gradient Range
  • Gradient Preview
  • Alpha
  • Swap Colors
  • No Fill
  • Black and White
  • Gradient Crayons: edit, slide, swap, add, and delete

Color Models

  • RGB (Red Green Blue)
  • HSB (Hue Saturation Brightness)
  • Hexadecimal as a representation of RGB

The Color Palette and Color Picker

  • Hovering over a color in the Color Palette to view hexadecimal value
  • Using the eyedropper elsewhere within the image while the Color Palette is open to copy a color
  • Opening the Color Picker from the Color Palette
  • Selecting one of 16.8 million colors
  • The Mac and Windows versions differ

the PC color picker
The PC version of the Color Picker

Creating Persistent Custom Colors

  • Adding swatches to the Swatches panel (using the Color panel menu, or using the cursor as a Paint Bucket to add directly to Swatches panel)
  • Save Colors in the Swatches panel menu
  • Loading a color set
Exercise: Save Colors
  1. Create a new Flash ActionScript 3.0 document but don’t bother saving it.
  2. Open the Color panel, and click on the paint bucket icon to select the Fill color settings.
  3. Select Solid Color from the dropdown.
  4. Create this color—#B74867 (a dusty rose)—and make sure it becomes the Fill color by pressing Return (Mac) or Enter (PC).
  5. Click the panel menu in the upper-right corner of the panel to open the panel’s dropdown menu.
  6. Select Add Swatch.
Flash CS5 color panel menu add swatch
  1. Open the Swatches panel. Your new swatch will appear in the bottom-left corner of the swatches. You will also see this new color when accessing the swatches via the Stroke or Fill dropdowns.
  2. In the panel menu for the Swatches panel, select Save Colors…
Flash CS5 swatches panel menu save colors
  1. In the Save As dialog box, notice the file being saved as a Flash Color Set (*.clr) file. Name your file MyColorSet.clr and save it in your Drawing Exercise Files folder.
  2. Back in the Swatches panel, open the panel menu again and select Clear Colors. All of the swatches will disappear except for black, white, and the white-to-black gradient.
  3. Open the panel menu one last time and select Replace Colors…
  4. Navigate to your new MyColorSet.clr file, and double-click on it. Your saved color set, including the new dusty rose color, will reappear.

The Kuler Color Picker

  • Window > Extensions > Kuler
  • Browsing themes
  • Editing and creating themes
  • Adding a theme to Swatches

Color Effects

  • Creating gradient effects
  • Using an image as a fill
Exercise: Color Effects
  1. Create a new Flash ActionScript 3.0 document and save it as ColorEffects.fla in your Drawing Exercise Files folder.
  2. Draw a big rectangle on half of the stage filled with the leftmost gradient in the fill Color Picker.
  3. Switch to the Gradient Transform tool, and resize the fill so it is much smaller than the rectangle. When you shorten the gradient, the black and white areas of the gradient become larger. This is because Flash is filling the rectangle with the end colors. This process if called overflowing.
  4. Open the Color panel, and click the middle button in the Flow area of the panel.
Flash CS5 gradient transform overflow reflect
  1. These choices, from left to right, are:
    • Extend: the default choice in which the last two colors in the gradient extend to fill the shape.
    • Reflect: The overflow area of the rectangle will be filled with repeated versions of the gradient. Every other version is mirrored/reflected.
    • Repeat: The gradients are repeated but not reflected.
  2. Draw another big rectangle on the other half of the stage.
  3. Import crane.jpg from the Dawing Exercise Files folder into the Library (File > Import > Import to Library…)
  4. Select the fill of the rectangle using the Selection tool.
  5. In the Color panel, make sure that Fill is clicked (the paint bucket rather than the pencil,) then select Bitmap Fill from the dropdown.
Flash CS5 bitmap fill color panel dropdown menu
  1. The crane image will fill the rectangle. Select the Gradient Transform tool.
  2. Play with the various control points on the rectangle to resize, rotate, and skew the image fill inside the rectangle.
  3. Save and close the file.

Working with Images

Editing Imported Bitmaps

  • File > Import > Import to Stage
  • Right-click (PC) or Cmd-click (Mac) > Edit With
Exercise: Import Bitmap and Edit
  1. Create a new Flash ActionScript 3.0 document and save it as EditBitmap.fla in your Drawing Exercise Files folder.
  2. Import crane.jpg from the Dawing Exercise Files folder to the stage (File > Import > Import to Stage…)
  3. When the image appears on the stage, right-click on it and select Edit With…
  4. Navigate to Photoshop’s application file (e.g. Photoshop.exe, or Photoshop in the Applications folder on the Mac.)
  5. When the image opens in Photoshop, make some drastic changes to it.
  6. Save the file in Photoshop and close it.
  7. Return to Flash, and note that the change(s) you made in Photoshop will be reflected both in the image on the stage and in the Library.
  8. Save the file and close it.

Tracing Bitmaps

  • Modify > Bitmap > Trace Bitmap
    • Color threshold: higher number equals fewer vectors
    • Minimum area: low number equals greater detail
    • Curve fit: smoothing setting
    • Corner threshold: how much a line can bend before Flash breaks it into corners
  • Adobe Illustrator is a much better tool for tracing images
Exercise: Tracing Bitmaps
  1. Open the TraceBitmap.fla file in the Drawing Exercise Files folder. You will see two copies of the same giraffe photograph.
  2. Click the image on the right with the Selection tool. This is the image you will trace.
  3. Modify > Bitmap > Trace Bitmap…
  4. In the Trace Bitmap dialog box, specifiy the values shown below:
    • Color Threshold: the higher the number, the more colors are considered a match and the fewer the vectors. Set this value to 100.
    • Minimum Area: This defines the smallest size for a vector shape. Highly detailed images result from lower numbers, but the resulting file size can be very large. Set this value to 8 pixels.
    • Corner Threshold: This determines how much a line can bend before Flash breaks it into corners. The fewer the corners, the smaller the file size. Set this to Normal.
    • Curve Fit: This is sort of a smoothing setting. Select Normal.
  5. Click the Preview button to see the effect of your choices.
Flash CS5 trace bitmap normal settings
  1. Click OK, then save and close the file. Be aware that Illustrator is a much more flexible tool for tracing bitmap images. You can always import the Illustrator file into Flash afterward.

Working with GIF Animations

  • Create a movie clip
  • File > Import > Import to Stage
  • Go to Scene 1, add the movie clip to the stage, test the movie
Exercise: Importing Animated GIFs
  1. Create a new Flash ActionScript 3.0 document and save it as AnimatedGif.fla in your Drawing Exercise Files folder.
  2. Create a new symbol (Insert > New Symbol), name it Dino and make it a Movieclip. Click OK.
  3. Inside the Dino movieclip, import Bad_dino.gif from the Dawing Exercise Files folder to the stage (File > Import > Import to Stage…)
  4. When the import is finished, you will see that each frame of the animation has its own Flash frame, and each image in the animation has its own image in the Library.
Flash CS5 animated gif import to stage
  1. Click the Scene 1 button to return to the main movie.
  2. Drag the Dino movieclip from the Library onto the stage.
  3. Test the movie: Cmd+Return (Mac) or Ctrl+Enter (PC).
  4. Close the SWF file. Save the Flash file and close it.

Creative Suite Integration

Prior to Flash CS3, the movement of Illustrator and Photoshop documents into Flash was difficult. At that time, Flash was developed by Macromedia and the other two were developed by Adobe. With the purchase of Macromedia by Adobe, all this has changed. Flash lets you import Illustrator and Photoshop files directly into Flash. Flash typically allows you to edit each piece of imported artwork after it is imported.

Importing Illustrator CS5 Documents

Illustrator is a vector-based illustration application. Vector graphics is the use of geometrical primitives such as points, lines, curves, and shapes, based on mathematical equations, to create images. Flash works in vectors too. Illustrator uses layers just like Flash does. Illustrator allows you to apply special effects, like a drop shadow, to individual pieces of a composition.

—The Illustrator File Importer in Flash provides you with a great degree of control in determining how your Illustrator artwork is imported. You can specify which layers and paths will be imported, and what type of graphic each will be in Flash (e.g. a movie clip symbol)

Here are some more key features of the Illustrator File Importer:

  • Preserves editability of commonly-used Illustrator effects
  • Preserves editability of gradient fills
  • Preserves the number and position of Bezier control points, the fidelity of clipping masks, and object transparency

Here are some things to keep in mind:

  • Flash supports only the RGB color space; if the Illustrator image is in CMYK (for print), you’ll need to convert the file to RGB in Illustrator first
  • To preserve drop shadow, inner glow, outer glow, and Gaussian blur effects in Illustrator, import the objects to which these filters are applied as movieclips
  1. Create a new Flash ActionScript 3.0 document and save it as ImportedIllustrator.fla in your Drawing Exercise Files folder.
  2. Import into the Flash library (File > Import > Import to Library…)
  3. The import dialog box will appear—review the items available for import:
    • Each of three layers is visible, along with its associated paths
    • The star layer contains a drop shadow, so Flash has assigned that to become a movie clip
    1. Select the blades and sail layers (not the paths).
    2. Select Create movie clip.
    3. Because we won’t be doing any ActionScript, we don’t need to create any instance names.
    4. For the Convert layers to: dropdown, select Flash Layers.
    5. Click OK.
  4. To move your imported file onto the stage, simply click-and-drag the graphic symbol from the library onto the stage.
  5. To edit the symbol, double-click on the image on the stage. Notice how the Flash layers reflect the layers from the Illustrator file.
  6. Right-click (Mac: Control-click) on the first frame of the star layer, and select Create Motion Tween.
  7. Drag the right edge of the new motion tween over to frame 20.
  8. Click in frame 10 of the star layer.
  9. Select the Free Transform tool.
  10. Hold the shift key (to constraint the angle,) and rotate the star 90 degrees clockwise.
  11. Click in frame 20 of the star layer.
  12. Hold the shift key (to constraint the angle,) and rotate the star another 90 degrees clockwise.
  13. Click-and-drag from frame 20 in the blades layer down to frame 20 in the sail layer.
  14. Press F5 to insert a frame.
  15. Press the Enter key (Mac: Return) to test the animation. The star should spin around half-way.
  16. Return to Scene 1 (just below the document tab.)
  17. Click in frame 20 of Layer 1.
  18. Press F5 to insert a frame.
  19. Test the movie.
  20. Close the SWF file. Save the Flash file and close it.

Importing Photoshop CS5 Documents

As with Illustrator CS5, the process of importing layered Photoshop documents has been streamlined. Photoshop typically creates graphics in bitmap/ raster format (pixel-by-pixel drawings.) Photoshop uses layers just like Flash does. Photoshop allows you to apply special effects, like a drop shadow, to individual layers of a composition.

  1. Create a new Flash ActionScript 3.0 document and save it as ImportedPhotoshop.fla in your Drawing Exercise Files folder.
  2. Import banner.psd onto the Flash stage (File > Import > Import to Stage…)
  3. The import dialog box will appear—review the items available for import:
    • Two text layers
    • Five image layers
  4. There are two new options at the bottom:
    • Place layers at original position—ensures the contents of the Photoshop file retain the exact position they had in Photoshop
    • Set stage to same size as Photoshop canvas—when the file is imported, the Flash stage will be resized to the dimensions of the Photoshop document
  5. Hold down the Shift key and click the first two layers to select them. The Merge Layers button lights up. This means you can combine the selected layers into one layer. This works for adjacent layers only.
  6. Deselect the layers.
  7. Click the check box beside the first layer. This tells Flash to ignore importing that layer. Reselect the check box.
  8. Click the name of the first layer. The import options appear on the right side of the dialog box. Notice that the importer recognized that this is a text layer. You have three choices as to how the text will be handled. You can also put the selection in its own movie clip.
  9. Select the Editable text import option.
  10. With the first text layer still selected, click the check box for Create movie clip for this layer. Notice the placement of a movieclip icon on the layer strip.
  11. Enter Headline as the Instance name.
  12. Click the David layer. Notice how the import options changed for a bitmap.
  13. Select Bitmap image with editable layer styles so that it maintains layer transparency.
  14. Shift-click each of the remaining four bitmap layers to select them all at once.
  15. Select the Create movie clips for these layers option.
  16. Click OK to complete the import.
  17. Review the individual imported Flash layers, and the symbols located within the banner.psd Assets library folder.
  18. Save and close the file.