Skip to Page Content

Chris Cassell Dot Net

• Home
• Log
• Portfolio
• Projects
• Classes
• Contact

• GDT 260 Home
• Class Overview
• Class Notes
  • 1.15
  • 1.17
  • 1.22
  • 1.24
  • 1.29
  • 2.7
  • 2.12
  • 2.21
  • 2.26
  • 2.28
  • 3.7
  • 3.12
  • 3.19
  • 4.4
• Assignments
• Student Work
• Links

GDT 260 Animation for the Web: Winter 2002

1.17.2002

View the finished in-class exercise

Basic Interface

• Panels
• Stage
• Work Area
• Magnification

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

Movie Properties

Modify > Movie

• Dimensions
  • measured from top left of stage
  • Match printer size
  • Match content size, including content off of stage
• Frame Rate

  Number of frames per second

• Background Color
  • Applies to entire movie
  • Hex Code
• Save Default

  Saves current settings as default

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 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 player
9. Notice that timeline has changed

Keyframes

• Indicate something changes on timeline
• Denote start and end points of animations, Flash fills in the frames in between

Exercise

1. Click on frame 14
2. Insert keyframe: Insert > Keyframe or F6 or Ctrl-click, Insert Keyframe
• Black border indicates keyframe
• White rectangle in 13: last frame before keyframe; 2 - 13 are tied to keyframe at 1
• Flash copied content from 1 to keyframe at 14
• 14 is now independent of 1 - 13
• Note frame number of playhead: bottom of timeline
3. Click between keyframes
   • 1-12 turn black
   • Any changes made to these frames will be made to the keyframe
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

• Show/Hide
• Lock/Unlock
• Outline View/Normal View

Scenes

• Break up content into logical chunks
• Extension of timeline that helps designer organize movie
• Commonly used to create different pages in site

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.

Toolbox

• Tools
• View
• Colors
• Options

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 toolbox: Zoom in or Zoom out

Hand Tool

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

Oval Tool

Exercise

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

Rectangle Tool

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

• Style
• Width
• Color

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

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 w/ fill color

Options

• Gap size: determines how much space there can be between to ends of a stroke to determine if it's a shape or not
• Lock fill: maintains a single gradient fill across stage
• Transform Fill: changes blending width/height of gradient fills

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

• Font
• Font Size
• Tracking
• Kerning: yes or no
• Baseline
• URL: makes text a hyperlink with no ActionScript required
• Bold, Italic
• Color
• NO underline: draw with line 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:

• Straighten: flatten out curves or snap to regular shapes (circle)
• Smooth: smooths your lines into simpler curves
• Ink: more or less retains exactly what you draw; simplifies and smooths somewhat

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

• Brush Mode
  • Normal: paints over anything
  • Paint Fills: paints only fills, leaving lines untouched
  • Paint Behind: paints only in blank areas of layer
  • Paint Selection: paints only selected areas
  • Paint Inside: paints inside the lines only
• Brush Size
• Brush Shape
• Lock Fill: maintains a single gradient fill across stage

Eraser

Similar to brush tool, but erases

Options

• Eraser Mode: Same options as Brush tool
• Eraser Shape
• Faucet: erases entire fill or stroke at once, similar to Magic Eraser in Photoshop

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.