Printable Format
Introduction
Drawing in Flash
Symbols and the Library
Controlling Playback and Layers

 

DRAWING IN FLASH

 

Flash comes with a number of drawing tools, most of which work exactly like the drawing tools youve already used in Fireworks. There are some important differences, though. So youre better off not skipping this section of the web design course.

 

Tool Options

 

Like other drawing programs, each tool has options. The Rectangle tool can make rounded corners. The paintbrush can draw with different shaped and different sized brushes.

Many of the commonly used options are available on the Tools palette. When a tool is selected, its options will display at the bottom of the Tools Palette. In the left graphic, the Rectangle tool is selected. Notice that at the bottom of the palette, the rectangle corner button  is displayed.

It is important to note that not all of the options are displayed at the bottom of the Tools Palette. Some tools have too many options to display in such a small area, and therefore have their own Palette.

All the the palettes are kept in the WINDOW pull down menu.

 

Basic Drawing

Many of the drawing tools function just like youd think they would. You may want to review the drawing tools covered in Fireworks. The Oval Tool draws ovals. The Rectangle tool draws rectangles. There are some basic differences that you should know about, though, so keep on reading.

 

Selecting Items

In Flash, an objects fill and strike are treated as totally different objects. If you click the fill, youll only select the fill. If you want to select both an objects fill and stroke, you have to double click the object.

  1. Draw a circle.
    Hold SHIFT to draw a perfect circle.
  2. Click the circle once with the black pointer

  1. Drag the circle

Youll notice that only the fill moves.

 

  1. Undo so that the fill moves back inside the stroke.
  2. Double Click the circle and move it.
    The stroke moves too!

 

Intersecting Drawings

Flash draws in layers. If you overlap a drawn object on the same layer, the overlapping image will chop out whatever it overlaps. Later youll use multiple layers to avoid this problem.

  1. Draw a square.
  2. Draw a circle slightly overlapping the square.
  3. Double click the circle to select it.
  4. Move the circle.

 

If you want to select all visible artwork, you can use the "select all" command (CTRL/CMD + A).

 

 

The Black Pointer

The black pointer is for all your general pointer needs. It selects, moves, and never complains. It also has a number of other handy uses.

 

Bending Vector Lines With the Black Pointer

  1. Place the black pointer right next to a rectangle.
    You should see a curved line under the pointer. If you dont, get a little closer or farther away.

  1. Click, hold, and drag out.

 

Whew! Thats fun. Play with it for a while.
You can add a vector point by dragging while holding CTRL/CMD

 

Black Pointer Options

When an object is selected with the black pointer, youll notice that the options on the tool palette change.

 

Remember that resizing a vector based object will not hurt its quality, but resizing will mess up a bitmap.

  1. Play with the resize and rotate options.

 

The White Pointer

Just like in Fireworks, the white pointer is for manipulating vector points. You can select, move, or delete vector points with the White pointer. You can also adjust a curved vector points handles to fiddle with the line curvature.

 

The Line Tool  

Surprise, the line tool draws lines!

Youll use the Stroke Palette (described shortly) to change line characteristics.

 

The Lasso Tool

The lasso tool works just like the Lasso tool in Fireworks and PhotoShop, except that you can use it to select portions of vector based objects, too! Isnt that cool?

 

Polygon Lasso and the Magic Wand

When the Lasso is selected, the Tools Palette options will display the Magic Wand and the Polygonal Lasso.

 

The Pen Tool

Works just like the pen tool in other programs. Great for drawing smooth curving lines.

 

 The Oval and Rectangle Tool   

The Oval tool draws circular shapes, while the rectangular tool draws rectangular shapes. Hold SHIFT to draw a perfect circle or square.

You can set the shapes initial fill and stroke color on the Tools Palette:

The Pencil Tool  

The pencil tool draws lines. It is important to note that the pencil tool draws with a stroke. Youll use the Stroke Palette (described shortly) to change line characteristics.

 

You can choose the initial line color on the Tools Palette.

 

The Pencil Tool has some interesting options that smooth lines when you draw

          Straighten: Smoothes a line, sharpening corners

          Smooth: Smoothes a line, softening corners

          Ink: Smoothes a line, leaving corners like you made them.

 

The Paintbrush Tool

The paintbrush draws fills. This can come in handy if you want to draw with a gradient or fill effect.

The Tools Palette options allow you to set the brush size and angle, as well as the paint placement options:

 

Paint Normal: Paints everywhere you drag the pointer.

Paint Fills: Wont paint lines.

Paint Behind: Paints behind drawn objects.

Paint Selection: Only paints a selected area. First youll have to select an area with the lasso or magic wand.

Paint Inside: Paints inside of objects originally clicked on. Flash considers the background an object.

 

 The Ink Bottle

Changes a lines color, thickness and pattern. Choose color on the Tools Palette. Youll use the Stroke Palette (described shortly) to change line characteristics.

 

The Paint Bucket

You can use the Paint Bucket to change fill color. Choose color on the Tools Palette.  The Paint Bucket also edits and changes gradient fills, which we will learn about shortly.

You cannot change background color with the Paint Bucket. If you want to change the background color, click MODIFY-> MOVIE

 

The Eye Dropper

The Eyedropper allows you to choose fill colors from within the Flash movie.

The Eraser

Allows you to erase vector and bitmap based colors.

The  option erases continuous colors with one click.

 

The Zoom Tool  

Click or drag to zoom. Hold ALT/OPTION to zoom out.

 

Some Important Zoom Shortcuts

To see the Flash movie at actual size:

          CTRL/CMD + 1

 

To fit the entire movie into the viewable Flash area:

          CTRL/CMD + 2

 

The Hand Tool

The Hand allows you to move the work area around. Its similar to scrolling, except you have more control.

Hold the Spacebar while using any tool to activate the Hand Tool.

 

The Text Tool

The Text Tool allows you to place type on the screen. Just click where you want the type to go.

 

Formatting Text

To format text, youll use the Character and Paragraph Panels.

WINDOW-> PANELS-> CHARACTER (or CTRL/CMD + T)

Tracking controls the amount of space between characters.

Baseline shift controls how far type displays above or below its initial line.

URL: Allows you to specify a link for text. You must type in the whole address, including "http://"
          NOTE: Direct text linking is new for Flash 5 and will only work if the user has the Flash 5 plug-in.

 

Paragraph Formatting

WINDOW-> PANELS-> PARAGRAPH

Experiment adding and formatting text in your movie.

 

The Stroke Palette

The stroke palette controls all the settings you could ever want to apply to a line. You can set thickness, pattern, and color. You can even design your own patterns.

 

To Use the Stroke Palette

1.      Click: WINDOWS-> PANELS-> STROKE

  1. Select the line or stroked object you wish to change.
  2. Change Stroke Settings

 

You can also change the stroke settings before you draw a line.

 

To Specify A Custom Fill, Click The Stroke Palette Arrow And Choose Custom.

 

The Fill Palette

You can specify a color, gradient, or bitmap fill on the Fill Palette. A bitmap fill fills with a tiled image.

 

To Open the Fill Palette:

Window-> Panels-> Fill

 

Set the fill type on the pull-down menu.

 

Gradient Fills

Flash makes gradient fills easy to work with.

  1. Choose a gradient type.
  2. Move the color boxes to adjust the gradient.

 

To change the gradients color:

  1. Click the colored gradient box

 

  1.  Choose a color

 

To add a color to the gradient, click in a blank space under the gradient line.

 

To remove a color, grab it and pull it down off the line.

 

Using the Paint Bucket Tool to Control Gradient Fills

If you click in a vector shape with the Paint Bucket Tool, youll fill with the chosen "fill" color. If your chosen "fill" color is a gradient, it will begin at your click point.

You can also use the Paint Bucket tool to fine-tune your gradient. 

  1. Draw a large circle.
  2. On the Fill Panel, choose a radial gradient.
  3. Select the Paint Bucket.
  4. On the Options at the bottom of the Tools Palette, select the Transform Fill option
    The Transform Fill will allow you to adjust the center point, width, scale, and rotation of the gradient.
  5. Click the gradient.
  6. Adjust the gradient.

 

Aligning Objects

After you draw objects, you can select and align them with the Align Panel.

          WINDOW-> PANELS-> ALIGN

The align panel basically lines objects up in accordance with the little button that you click.

 

          Align: Lines objects next to each other

          Distribute: Evenly spaces objects

          Match Size: Resizes objects to match each other.

 

Grouping Objects

You can group different objects together. Theyll effectively become one object.

To group objects:

  1. Select them
  2. Click MODIFY-> GROUP

 

Importing Outside Artwork

You can easily bring outside artwork into Flash. You can, of course, copy and paste. Copying and pasting preserves vectors if youre importing from a program like Adobe Illustrator, or Macromedia Fireworks.

You can also import whole files by clicking:

          FILE-> IMPORT

 

Flash will accept most image file types.

Continue to Symbols and the Library|