GDT 260 Animation for the Web: Winter 2003

Notes & Handouts January 16

Basic Interface

Stage

Any content visible in movie must be on stage

Work Area

Gray space surrounding stage. Can hold content, but won't display in final movie while off stage

Properties Inspector

Window > Properties if not visible

Displays editable properties of item selected in work area

Movie Properties

Modify > Movie or Properties Inspector without any item selected

Exercise

  1. Modify > Movie Properties
  2. Set background to dark blue
  3. Click OK

Timeline

Flash has 3 dimensions: height, width, duration (four if you count stacking order)

Length of timeline determines how long movie runs: movie length in seconds = frames in timeline / frames per second

Frames

Each box in timeline is a frame. Numbers at top: number of frames

Playhead

Indicates which frame is currently displaying

By default, playhead starts at frame 1 and moves sequentially through frames

Exercise

  1. View > Snap to Objects or click on button in Tools panel (magnet): snaps drawing shapes to other shapes, as well as regular shapes (circles, squares)
  2. Select Oval Tool
  3. Stroke color: dark brown
  4. Fill color: light brown
  5. Draw small circle at bottom center of stage
  6. Draw larger oval centered above circle. Make sure there's a gap
  7. Save often
  8. Preview
    • F12: opens in browser
    • Enter: plays in place in authoring environment
    • Command-Enter: generates .swf, plays in stand-alone authoring player
  9. Notice that timeline has changed (gray frame, filled in dot: keyframe)

Keyframes

Exercise

  1. Click on frame 14
  2. Insert keyframe: Insert > Keyframe or F6 or Ctrl-click, Insert Keyframe
  3. Click between keyframes
    • 1 frame selected
    • Any changes made to frames between keyframes will be made to the whole set
  4. Deselect by clicking away. Command-click to select just one frame.
  5. Insert > Frame or F5 or Ctrl-click > Insert Frame. Repeat to insert 2 frames.
  6. Command-click to select 1 frame
  7. Insert > Blank Keyframe or F7 or Ctrl-click > Blank Keyframe
    • White frames: no content on them
    • 14 still has content
  8. Click on blank keyframe
  9. Insert > Clear Keyframe
    • Frame content reappears
  10. Command-click
  11. Insert > Remove Frames
  12. Click on 15 (should be last frame)
  13. Select Arrow Tool
  14. Double-click upper oval to select fill and stroke
  15. Shift-drag oval half way up the stage
  16. Double-click circle, and delete
  17. Draw an elongated oval from bottom of stage to just below top oval
  18. Preview
  19. Click between keyframes
  20. Window > Panels > Frame
  21. Label: "Mushroom Growth"
  22. Tweening: "Shape"
  23. Drag playhead and see tween. Notice change to timeline:
    • Frames are green
    • Arrow from 1 to 14
    • "Mushroom Growth" text appears w/ red flag

Layers

Add depth to movie, allow multiple elements to be animated independently

Active layer is highlighted black w/ pencil icon at left of timeline

Exercise

  1. Insert Layer
  2. Double-click Layer 1 name, rename "mushroom". Rename Layer 2 "moon"
  3. Oval Tool, set colors to default. Draw circle on moon layer in frame 15
    • Keyframe created at 1, all frames filled in moon layer
  4. Drag mushroom layer above moon layer to change stacking order

Layer Modes

Scenes

Show Scenes panel: Window > Panels > Scene lists all scenes in movie. Play order is determined by order in this panel. You can modify, duplicate, add, and delete scenes from Scenes panel.

Movie Explorer

Window > Movie Explorer shows structure of movie, and all elements used.

Tools Panel

Arrow Tool

Selection and moving

  1. File > New
  2. Draw a large circle
  3. Select Arrow Tool
  4. Click on center of circle (becomes highlighted)
  5. Drag to side: only fill has moved
  6. Click off circle to deselect, then reselect it
  7. Move away from stroke: part of stroke has been deleted
  8. Command-z until fill is back inside stroke
  9. Double-click circle to select both fill and stroke. Drag it
  10. Modify > Group
  11. Modify > Ungroup
  12. Drag a box around part of circle. Only part is selected
  13. Drag selected portion of circle, unselected is left behind

Can also be used to modify shapes

Exercise

  1. Frame 15 mushroom layer
  2. Arrow Tool, click on stage
  3. Move cursor over top curve of mushroom cap: changes to have curve under it
  4. Drag upwards to make mushroom-like shape
  5. Preview

Zoom Tool

Zooms in and out, works just like Illustrator/ Photoshop

In options section of tools panel: Zoom in or Zoom out

Pixel Zoom: at zoom of 400% or greater, pixel grid shows up when View > Snap to Pixels is checked

Hand Tool

Just like Illustrator/ Photoshop: Click and drag to move stage around

Oval Tool

Draws ovals. Holding Shift while drawing yields a circle

Exercise

  1. Zoom in on moon
  2. Hide the mushroom layer
  3. Select moon layer, and draw some craters on the moon

Rectangle Tool

Draws rectangles. Holding Shift while drawing yields a square

Works just like oval tool, except it has a modifier: Radius, which specifies radius of rounded corners of rectangle

Exercise

  1. New layer, name "signpost"
  2. Rectangle Tool, click Radius button, type 15
  3. Draw a rectangle in upper left of stage

Line Tool

Uses Stroke panel to determine characteristics Window > Panels > Stroke

These attributes are modifiable after line is drawn by selecting line and changing info in stroke panel

Custom button opens Stroke Style dialog box, which allows you to define custom stroke patterns

Exercise

  1. Stroke Width: 10, Stroke color: dark brown
  2. Make sure Snap to Objects is on
  3. Drag line from bottom of rectangle to bottom of stage

Paint Bucket

Fills existing shapes with selected fill color or gradient

Options

Exercise

  1. Pick light yellow fill color
  2. Fill moon
  3. Fill craters with darker yellow

Ink Bottle

Acts like paint bucket for lines and strokes. Modify stroke attributes by setting in Stroke panel and clicking to apply to lines

Exercise

  1. Select Ink Bottle
  2. Choose gray stroke color
  3. Click signpost

Eye Dropper

Picks up fill and stroke styles. Immediately becomes correct tool for applying styles, either Paint Bucket or Ink Bottle

The cursor changes to indicate whether it's about to pick up a stroke style or a fill style

Exercise

  1. Select Eyedropper
  2. Pick up fill style from moon
  3. Click on sign to apply fill style to it
  4. Select Eyedropper
  5. Click on gray signpost line
  6. Change stroke width in Stroke panel to 3
  7. Click on outline of sign

Text Tool

Exercise

  1. Select text tool
  2. Make sure you're on signpost layer, click on sign, type "Keep Out!"
  3. Click Arrow Tool and reposition text
  4. To edit text, either double-click with arrow tool, or single click/ click-drag with text tool

Pencil Tool

Draws freeform lines in three modes:

Exercise

  1. New layer named "grass"
  2. Choose grass green stroke color
  3. Pencil tool in ink mode, scribble grass at base of signpost

Brush Tool

Works like pencil tool, but paints fills.

Options

Eraser

Similar to brush tool, but erases

Options

Free Transform Tool

Fill Transform Tool

Used to modify gradients. We'll cover this later

Pen Tool

Similar to Illustrator pen tool, but takes some getting used to. Draws bezier curves. Click and drag for curves, click for corners.

Subselect Tool

Modifies any shape drawn in Flash. Works like Illustrator with quirks.

Option-clicking a curve anchor point converts to corner; option-clicking and dragging a corner point changes to curve. Option click a curve handle to convert curve point to corner with handles.

Clicking and dragging a shape will move it on the stage.