Course notes
syllabus | schedule | topics | projects | class notes | resources | timeline | bios | students | ARTC courses
 Lectures:
Lecture 1: Timing and Trajectory Charts Lecture 7: Flash Intro
Lecture 2: Presentations: List of Animators Lecture 8: Flash Animation
Lecture 3: Scanning, After Effects, Animating using PS CS3 Lecture 9: ---
Lecture 4: Stop Motion Pixelation using a Video Camera Lecture 10: ---
Lecture 5: After Effects Part 1 Lecture 11: ---
Lecture 6: After Effects Part 2 Lecture 12: ---
 Lecture 7: Flash Introduction

Work Environment
** Right Click with Mouse or CTRL+click to get Context Menus (shortcut to panels/menu items) **

Stage: Movie plays here; animations and interactivity take place here.

  • Absolute positioning (0,0 is upper left corner of stage).
  • To Show / Hide Grid, Rulers, Guides: View > Grid or Rulers or Guides

Tools: The basic tools you need to create graphics in Flash.

Timeline: Where graphics are animated over time; layers act like acetate cels.

  • Layers on the left, Frames to right; Display at bottom: current frame, rate, elapsed time.
  • To Hide Timeline: View > Timeline (Apple+Option+T)

Library: stores/organizes symbols and imported files (bitmaps, quicktime movies, sound); can sort the contents in many ways; Libraries change with files, but can be shared with more than one (Apple+L).

Work Area: area outside of stage – won’t be visible in final production.

Panels: MANY panels; can be moved, dragged and removed by tabs; similar to Photoshop

  • To set back to default: Window > Workspace Layout > Default

Properties: changes to reflect whatever you currently have selected; will use constantly.

Symbol Editing Mode: place to add rollovers to buttons, make a movie loop, change a symbol graphic; symbols are reusable media. Double click on a symbol to enter this mode (in library or on stage).

Color: Allows you to change the color of your elements.

Concepts and Terminology

Symbol: Reusable graphic - saves download time and file size because no matter how many times the item is reused in the file, Flash only stores it once.

  • You can edit the master symbol and it will change ALL of the times it is used in the file, or you can change just the instance on stage.

Instance: each time a symbol is used in a Flash file it is called an instance.

Frames: For animation (8 or 12 fps for web); 24=film, 29.97/30=video ; our eye sees 15 fine.

Layers: Used like cels of acetate; similar to other programs.

Scenes: Used to organize sequence thematically (can have many in one .FLA file); plays back scenes in order of Scene Panel.

Getting Started

Set the parameters for your Flash file, two ways: Modify > Document… or Right click on your stage to bring up the Document Properties and enter information. Remember, your websites are 800 to 1024 wide so your flash files will need to fit within the layout eventually.

Set Properties:

  • Title: name it
  • Description: extra info about the file
  • Dimensions (widthXheight) 550x400=default; min=18x18, max=2880x2880
  • Match: contents (puts equal space around all sides in HTML file) - decides based on what you already have.
  • Background Color: changes background color
  • Frame Rate: 8-12 fps (frames per second); 12=default
  • Ruler Units: rulers, inches or pixels

Layers: More layers do not increase size of published movie - Libraries do increase the size; Layers can contain sound, actions, labels, comments.

  • Double-click name to change its name (always name it).
  • Eye - visible.
  • Padlock - locked.
  • Rect - outline color of items on that layer.
  • Pencil - active.
  • Folder with Plus on the left: Add a new layer
  • Ass Motion Guide: We will use this later
  • Insert Layer Folder: Used to keep layers very organized
  • Trash can: Click trash to delete the layer.
Flash Tools
  • Can draw, paint, select, and modify objects and change views; Window > Tools
  • Divided into 4 sections:
    • Tools: drawing, painting, selection tools.
    • View: to zoom and pan.
    • Colors: stroke and fill modifiers.
    • Options: additional features that work with the selected tool.

Drawing Tools:

  • Can reshape lines and shape outlines in a variety of ways after they’re created; Fill and Stroke are separate objects!! (Stroke=outline of shape - line surrounding, Fill=solid shape - inside)
  • How vectors function: Using the pencil, line, oval, rectangle, or brush divides the object into separate segments when they overlap; Pen does not divide others into segments.
  • If paint on top, the portion below is replaced by what’s on top; Paint of same color merges into one Fill, while different colors become distinct fills.

**Group shapes or use layers to keep separate and protect!

Flash Menu > Preferences > General > Undo Levels (increase # of undos) 100.
(on PC, preferences is under Edit menu)

Zoom In and Out: Use magnifier tool (Option w/tool to zoom out) or (Apple +) In / (Apple -) Out (like PSD).

(N) Line Tool: Properties- color, thickness (stroke height), style; hold SHIFT to limit to 45??q; Use STROKE Hinting to avoid it from being blurry (makes sure curves and points are on a full pixel not part of a pixel.

(O) Oval Tool: Properties: color, thickness, style, Fill color (use box with the red line through it for no fill or stroke); Hold shift for circles.

(R) Rectangle Tool: Properties: color, thickness, style, Fill color (use the box with the red line through it for no fill or stroke).

- To get Rectangle with Rounded corners: use Round Options to set the radius of the corners or while dragging, hit the Up Arrow or Down Arrow to adjust radius or corners before releasing mouse; Hold shift for squares.

(S) Ink Bottle: Dumps a new stroke (outline) on the object; choose line color, width, style, and shape; STROKE properties

(K) Paint Bucket: Dumps a new fill color on the object; choose fill color and style; option=set a gap closure setting.

(I) Eye Dropper: Picks up fill or stroke attributes from existing object and applies to another; automatically changes to ink bottle or paint bucket depending on what you select to apply to, and go directly to change

(Y) Pencil: creates freeform lines and shapes; Select color, weight, and style; Hold SHIFT to restrain to vertical or horizontal movement;

OPTIONS:

  • Straighten: converts to straight lines or shape recognition - eliminates imperfections.
  • Smooth: converts to curves - smoothes lines out.
  • Ink: can draw freehand ** More info, larger file, because more points to calculate.

(B) Brush: creates paint-like brush strokes; choose fill color, and brush smoothing.

OPTIONS:
  • Normal: Paints over (replaces) lines and fills below on same layer.
  • Fill: Only paints fill and empty areas, leaves strokes alone.
  • Behind: Paints behind graphics in blank areas only; leaves fill and stroke alone.
  • Selection: Only paints in selected area.
  • Inside: Only paints inside fill that you started drawing on (1st click determines that fill); can’t paint outside the lines.
  • Can choose brush size and shape

(E) Eraser: Removes strokes and fills;

  • Double-click to erase all on stage / layer.
  • Erase part of a fill or stroke.
  • Faucet removes entire fill OR stroke (options):
    • Fills: effects only fills.
    • Lines: effects only strokes.
    • Selected Fills: Only selected fills, no effects on strokes, even if selected.
    • Inside: only starting fill, no effect on stroke.
    • Normal: effects stroke and fill.

(T) Text tool: Creates blocks of editable text (Horiz or Vert), many attributes. Select text tool and either:

  • Place cursor and type for unlimited box size { o }.
  • Draw a box with cursor for fixed width { [] }.
  • ATTRIBUTES: - paragraph margins, indent, etc. Shift select multiple (arrow tool) and change attributes (font, color, size, etc.) Use Text menu or Properties to change Kerning, spacing, etc.

(P) Pen: Creates paths as straight or curved lines; Acts like pen in other programs:
Flash Menu > Preferences > Drawing > Pen Tool: -Show pen preview, Show Precise cursors.

  • For Straight lines: Click starting point, Click anchor point, etc. SHIFT for 45 degrees; continue to add points
  • For open path: Double click when you want to stop, Click Pen tool in Toolbox, or Command+click anywhere
  • For closed path: Click on first anchor point when done
  • To complete as is: Edit > Deselect All or just chose a new tool
  • For Curved lines: Click and drag (tangent appears); anchor points display tangent handles; slope & length of handles determine slope and height of curves; SHIFT+drag for 45 degrees; release; reposition mouse for next point, Click+drag in opposite direction to complete segment, etc.
  • To Move Anchor: Select Subselection tool; drag with mouse or use < > arrows on keyboard
  • To Convert Anchors from corners to curves and vice versa:
    • Corner > Curve: Subselection, Option+drag
    • Curve > Corner: Pen Tool, Click
  • To Add Anchors: Select Pen Tool, Click on line segment
  • To Delete Anchors: Corner- Pen Tool, click once / Curve-Click twice / or Subselection, press Delete
  • Tangent Handles: Curve-both sides of point adjust; Corner- only same side as tangent adjusts.
More Tools

Color: Use the Color panel in the top right corner. The color mixer allows you to select colors. The color swatch tab allows you to modify colors in the palette or save or import palettes.

  • Can apply to stroke or fill; Use Ink Bottle (stroke), Paint Bucket (fill)
  • Choose color in color box OR
  • Type hexidecimal color number in value box (pop-up window) OR
  • Select None for transparent stroke or fill OR
  • Use the Color Picker OR
  • Use the Swap Fill & Stroke box OR
  • Use Default Black & White box (All of the above are exactly like options in Photoshop).

Gradients:
WARNING: HOGS! +50bytes per fill, will slow down processors when play back, so use cautiously!

  • Sliding arrow with color can assign color by clicking on start or finish arrows.
  • To remove a gradient range marker, drag the arrow of the bar.
  • Can select a linear or radial gradient.
  • Use Gradient Transform tool to adjust position or size of gradiant.

Selecting and Moving Objects:

Arrow: Reshape lines and shape outlines.

  • Click once to select stroke or fill.
  • Click and hold to move end points of a line.
  • Double-click to select (stroke and fill) or multiple parts of the stroke.
  • Options:
    • smooth - softens curves, reduces bumps and # of segments (= smaller file size).
    • straighten - adjusts drawn lines to straight lines.
    • magnet - snap to other objects or grid if on (turn on View menu -> Grid).
  • Select Curve:
    • Modify Menu> Shape > Smooth: smooths all or selected curves (reduces file size).
    • Modify Menu> Shape > Straighten: - has shape recognition (converts your drawing to closest shape.
    • Modify Menu> Shape > Optimize, specify degree.
    • Optimize - reduces the number of points, can use multiple passes: ALWAYS optimize before publishing.

Selecting and modifying shapes:

  • Rollover it and notice shape beside cursor (curve or corner); drag to reshape.
  • Select the object and you can move entire shape.
  • Add to selection: Shift+Click.
  • Select everything ON A LAYER: Edit > Select All (Command+A).

(L) Lasso: Can switch between freeform and straight-edged modes SELECTOR.

  • Polygon Modifier (straight) - click move, click move, click to select; double-click to end.
  • Lasso can be used with bitmaps.

(Q) Free Transform Tool: select object first > Scale, Rotate, Flip, Skew, Perspective
OR use Modify Menu - Transform.

  • Can apply to a selection or group together.

Cut, Copy, Paste, etc.: Use for layers so you don't get confused or erase important info.

  • Paste (Paste in Center) - pastes in center of view (CMD+V).
  • Paste in Place - pastes exactly where it was copied from (Shift+CMD+V).
  • Duplicate - copy/paste and offset (CMD+D).

Group / Ungroup: Can't change the color or shape of entire group, but you can resize and rotate the group together.

  • Select Objects, Modify Menu -> Group (CMD+G) or Ungroup (Shift+CMD+G)
  • Protects objects and prevents them from interacting normally

Aligning Objects: Enables you to align objects along horizontal or vertical axis USE ALIGN PANEL.

  • Vertically along right edge, center, or left edge of objects.
  • Horizontally along top, center or bottom edge or objects (determined by bounding boxes).
  • Can distribute so centers are evenly spaced.
  • Can resize so that horiz or vert dimensions of object match largest.
Modifying Shapes
  • Convert Lines to Fills:
    • Modify Menu > Shape > Convert Lines to Fills (Larger files, but faster animation)
  • Expand Shape of a Fill:
    • Select filled shape (single filled color with NO stroke)
    • Modify Menu > Shape > Expand Fill: Enter value (expand or inset (reduce))
  • Soften Edges of a Fill:
    • Select filled shape with no stroke; Modify Menu > Shape > Soften Fill Edges (# of steps -higher is bigger but smoother

Importing Images:

Flash can import images from Freehand (.fh, .fh10) and Illustrator (.eps, .ai) as well as GIFs, JPGs, Animated GIFs, Quicktime Movies and PNGs. (.dxf, .bmp, .emf, .pct, .pic, .png, .psd, .qtif, .mov, .sai, .tif ).

Use the File > Import to Stage or Library.

  • To convert a bitmap (JPEG or GIF) to a vector-based graphic: (files can be huge)
    • Import the file to stage.
    • Modify Menu > Bitmap > Trace Bitmap.
      • Color threshold (1-500) - colors closer than threshold, are combined (higher#=less colors)
      • Min area (1-1000) - how many neighbor pixels to include when assigning colors
      • Curve Fit = smoothness of outlines
      • Corner Threshold = sharp or smooth corners
      • For a photographic image the best settings are:
        Threshold = 10, Min Area=1; Curve Fit=Pixels; Many Corners
  • Break Apart: separates pixels in image into discrete areas that can be modified.
    • Import a bitmap.
    • Modify Menu > Break Apart (CMD+B).
  • Bitmap as a fill: it will tile as a pattern.
    • Create a fill object (i.e. rectangle, paintbrush, oval, etc.).
    • Open the Color Mixer Panel.
    • Change TYPE of Fill to Bitmap.
    • Choose from the list of bitmaps that exist in Library.
    • You can also paint with the bitmap fill using the brush.
  • Repositioning bitmap fill:
    • Click Fill Transform Tool.
    • Click on Object and handles appear.
    • Drag the center or drag corner points or the center edge points to reposition.
    • Height resizer is on the left and Width is on the bottom to resize, rotate, etc.
Symbols
  • Types of Symbols:
    • Graphic symbols: static images, reusable animation elements
    • Button symbols: interactive
    • Movie Clip symbols: reusable animation; (has own timeline)

  • To Create a Symbol from Selected Object(s) on the Stage:
    • Select Object(s).
    • Modify > Convert to Symbol.

  • To Create a New EMPTY Symbol:
    • Make sure nothing is selected.
    • Insert > New Symbol OR Select New Symbol button in Library menu on the top right OR click New Symbol button on the bottom of the Library window (little icon with the +).
    • You must choose the type of symbol (graphic for animation).
    • Sends you into Symbol Editing Mode.

  • Edit an Instance of a Symbol (Edit in place, on the Stage)
    • Double-click on symbol instance on stage.

  • Edit the Symbol and ALL Instances:
    • Select symbol on Stage; Right-click, Edit OR Double-click in Library.
    • Edit > Edit Document to return to movie mode (exit symbol editing mode) OR click on SCENE # in Edit Bar above timeline.
    NOTE: Editing a SYMBOL updates all its instances, editing an instance updates itself.

Instance Names:

  • In Flash, file size is kept to minimum by re-using elements stored in the library multiple times, such as, creating a snow storm from one snowflake movie clip by duplicating it on stage and varying the size.

Frame Labels:

  • Flash allows for markers to be placed within the timeline, called: frame labels. In both cases, Actionscript can refer to both frame labels and instance names. Labels can be used to indicate parts of an animation also. The key is to use descript and unique names.

Creating Frame Labels:

  1. Create a labels layer
  2. Click in the frame where you want the frame label placed
  3. Insert a BLANK KEYFRAME (Insert menu - Timeline - Blank Frame or F5)
  4. Type the label name in the property inspector below the word Frame. A tiny, red flag will appear in the frame.

EX: