Housekeeping

1
Lecture 16

• Housekeeping
• Exercise 2 ? Graded After Spring Break ?
  Revisions Due March 29
• Exercise 3 ? Due April 5
• Work on Final Project Schedule
• April 19 and April 24
• Final Project ? Due May 1
• Flash
• Introduction
• Demonstration
• Illustrating
• Understanding Layers
• Adding Editing Text
• Creating Tweened Animations

2
Flash

• Develop Rich Internet Content and Applications
• Design motion graphics or build data-driven
  applications
• Flash Movies Graphics, Text, Animation,
• Mostly compact vector graphics
• Can contain imported video, bitmap graphics, and
  sounds.
• Incorporate interactivity
• Create nonlinear movies that can interact with
  other Web apps
• Create navigation controls
• Animated logos
• Long-form animations with synchronized sound
• Complete, sensory-rich Web sites
• Flash Document .fla filename extension
• File gt Save / Save As
• Publish Flash Document (.FLA) ? Flash Movie
  (.SWF)
• Macromedia Flash file format (SWF) is the format
  for deploying Flash content

3
Workspace

• Timeline
• Controls movies content over time
• Consists of frames and keyframes
• Layers to organize content
• Stage
• Draw or import artwork, add text or media
• Compose content for individual frames
• Property Inspector
• Toolbox
• Panels
• Library
• Stores reusable elements called Symbols
• ActionScript
• Built-in programming language

4
Document Properties and Grid, Rulers Guides

• Create Document and set its Properties
• File gt New
• Modify gt Document
• Frame Rate
• Dimensions
• Background color
• Using Grid, Rulers and Guides
• Like in Fireworks
• Grid
• View gt Grid gt Show Grid / Snap to Grid
• Rulers
• View gt Rulers
• Guides
• Drag horizontal and vertical guides from rulers
  onto Stage
• View gt Guides gt Show Guides / Snap to Guides

5
Timeline
6
Layers

• Layers Stack of transparent sheets of acetate
  
• Insert gt Layer or Click Insert Layer icon
  in Timeline
• Drag Drop Layer to change its position in stack
  
• Name (double-click text), Hide, Lock Folder
• Layer Folder Organize Layers
• Insert gt Layer Folder or Click Insert Layer
  Folder icon in Timeline
• Modify Layer
• Select layer to make it active (only one layer
  can be active)
• Pencil icon Layer is active
• Guide Layers Make drawing and editing easier
• Mask Layers Help to create sophisticated effects

7
Copying Layer Layer Folder

• Copy Layer
• Click layer name to select the entire layer.
• Edit gt Copy Frames.
• Click Add Layer button to create new layer.
• Select new layer and choose Edit gt Paste Frames.
• Copy Contents of Layer Folder
• Click triangle to left of folder name to collapse
  it, if necessary.
• Click folder name to select the entire folder.
• Edit gt Copy Frames.
• Insert gt Layer Folder to create new folder.
• Select new folder and choose Edit gt Paste Frames.

8
Tools

• Arrow (Selection) tool and Modifiers snap to,
  smooth, straight
• Reshaping lines and shapes ? Reshaping pointer
• Free Transform tool and its modifiers scale,
  rotate, skew etc.
• Transform dialog panel Modify gt Transform
• Lasso tool and its modifiers polygon etc.
• Text tool
• Circle and Square tools and Modifiers Object
  Drawing on / off
• Stroke and Fill properties of graphic in Property
  Inspector
• Pencil tool and Modifiers straight, smooth etc.
• Paint Bucket tool and Modifiers fill large gaps
  etc.
• Apply Gradient and use Fill Transform tool
• Eraser tool
• Zoom tool and Modifiers zoom in, zoom out (or
  use Alt-click)
• Line Color
• Fill Color
• Tool Options

9
Graphic Objects

• Graphic Objects Items on Stage
• Move, copy, delete, transform, stack, align, and
  group graphic objects.
• Link graphic object to a URL.
• Keep in mind modifying lines and shapes can
  alter other lines and shapes on the same layer if
  Object Drawing is not selected
• Must first Select Object to Modify it

10
Overlapping Shapes in Flash if shapes were
created Object Drawing off

• Use Pencil, Line, Oval, Rectangle, or Brush tool
  to draw line across another line or painted
  shape, overlapping lines are divided into
  segments at the intersection points.
• Use Arrow tool to select, move, and reshape each
  segment individually.
• To avoid inadvertently altering shapes and lines
  by overlapping them, group shapes or use layers
  to separate them
• Overlapping lines that you create with the Pen
  tool do not divide into individual segments at
  intersection points, but remain connected.

11
Object Manipulations

• Grouping Objects
• Select objects on Stage to group
• Modify gt Group
• Stacking Objects
• Within a layer, objects stacked based on the
  order of creation
• Modify gt Arrange gt Bring to Front or Send to Back
  Modify gt Arrange gt Bring Forward or Send
  Backward
• Transforming Objects
• Free Transform tool in Tools
• Modify gt Transform gt free transform, rotate,
  skew, scale, or distort
• Modify gt Transform gt Remove Transform

12
Text

• Text tool in Toolbox
• Property Inspector to change text properties
• Static Text type
• Appearance determined when you author movie.
• Dynamic Text type
• Updated text, such as sports scores or stock
  quotes.
• Input Text fields type
• Users enter text for forms, surveys, or other
  purposes.

• Transform Text
• Rotating, scaling, skewing, and flipping it - and
  still edit characters
• Text ? Object Grouped
• Horizontal Text Linked to URLs
• Select text and enter URL in Property Inspector

13
Text

• Text tool in Toolbox
• Property Inspector to change text properties
• Static Text type
• Appearance determined when you author movie.
• Dynamic Text type
• Updated text, such as sports scores or stock
  quotes.
• Input Text fields type
• Users enter text for forms, surveys, or other
  purposes.

• Transform Text
• Rotating, scaling, skewing, and flipping it - and
  still edit characters
• Horizontal Text Linked to URLs
• Select text and enter URL in Property Inspector

14
Reshaping Text

• Reshaping Text into its individual letter shapes
• Select text with Arrow tool
• Modify gt Break Apart
• Distribute Text Letters to Layers
• Select all letters
• Modify gt Timeline gt Distribute to Layers
• Organize letters in Layer Folder
• Insert gt Timeline gt Layer Folder
• Select layers containing letters
• Drag drop in Layer Folder Static Text
• Morph Text
• Select Text and apply Modify gt Break Apart
  TWICE
• Apply Shape Tween !

15
Keyframes

• Keyframe Define Change in Animation
• Flash can tween, or fill in, frames between
  keyframes
• Change length of tweened animation by dragging
  keyframe in Timeline.
• Create Keyframe
• Select a frame in Timeline
• Insert gt Timeline gt Keyframe
• Only Keyframes are Editable
• Frame Management
• Delete a frame, keyframe, or frame sequence,
• Select and Edit gt Timeline gt Remove Frame or
  Right-Click (Windows)
• Extend duration of Keyframe
• Select, hold and then drag keyframe to new final
  frame
• Change length of a tweened sequence, drag the
  beginning or ending keyframe left or right.

16
Animation

• Animate Objects
• Change objects position, shape, size, color,
  opacity, rotationand other properties.
• Frame-by-frame Animation
• Create a separate image for each keyframe.
• Tweened Animation
• Create first and last keyframes of animation
• Flash creates frames in between
• Motion Tweening
• Shape Tweening
• Frame Labels useful for identifying Keyframes
• Use instead of frame numbers (which can change)
  when targeting frames in actions such as Go To.

17
Tweened Animation

• Motion Tweening
• Change Position, Size, and Rotation
• Shape Tweening
• Change Shape
• Select Keyframe and in Property Inspector select
  Tween option
• If you want Flash to tween the movement of more
  than one graphic, each must be on a separate
  layer.
• To quickly prepare elements in document for
  tweened animation
• Select elements
• Use Modify gt Timeline gt Distribute to Layers

18
Animations Representations in Timeline

• Motion Tweens
• Black dot at beginning keyframe intermediate
  tweened frames have black arrow with a light-blue
  background.
• Shape Tweens
• Black dot at beginning keyframe intermediate
  frames have a black arrow with a light-green
  background.
• Dashed line
• Tween is broken or incomplete
• Cause?
• Final keyframe missing
• Motion Tween does NOT contain symbol, groups or
  type
• Shape Tween contains symbol, groups or type

19
Motion Tweening

• Used for tweening
• Instances of Symbol
• Groups
• Type Text
• Bitmap
• Instances, groups, and type tween
• Position, Size, Rotation, and Skew
• Instances and type tween
• Color shifts and Fade in / out ( Alpha)
• ? Bitmap needs to be converted into Symbol
• To tween the color of groups or type, you must
  make them into symbols.
• Animate individual text characters separately
• Break text apart
• Place letters on separate layers

20
Motion Tweening

• Use Symbols or Groups or Type to Tween Motions
• Create Motion Tween
• Create first keyframe
• Insert gt Timeline gt Create Motion
  TweenAutomatically turns graphic into symbol
• In last frame create keyframe and move object to
  new location
• Create starting and ending keyframes
• Select two keyframes and frames in between
• Insert gt Timeline gt Create Motion Tween
  Automatically turns graphic into symbol

21
Shape Tweening

• Similar to Morphing
• One shape appears to change into another shape
  over time
• Use Ungrouped Graphics to Tween Shapes
• Create or select first keyframe
• Create or place artwork in first keyframe
• Create second keyframe and select it
• Select artwork in second keyframe
• Modify shape, color, or position of
  artwork(e.g. use Free Transform tool)
• Select first keyframe in Timeline
• In Properties Inspector
• Select Shape from Tween menu
• Select option from Blend menu
• Distributive intermediate shapes smoother and
  more irregular.
• Angular preserves apparent corners and straight
  lines.

22
Animation Misc

• Moving Entire Animation
• Lock or hide all the layers don't want to move
• Click Edit Multiple Frames button in Timeline
• Onion skin markers appear in Frame view of
  Timeline
• Drag onion skin markers to enclose all the frames
  to select
• Edit gt Select All
• Drag entire animation to new location on Stage
• Extending Still Images
• Create image in first keyframe of sequence.
• Select frame to the right, marking the end of the
  span of frames that you want to add.
• Insert gt Frame.
• Distributing Objects to Layers for Tweened
  Animation
• Select Objects
• Modify gt Distribute to Layers

23
Imported Artwork and Video

• Bitmap
• Can apply compression and anti-aliasing
• Place directly in Flash document
• Use as a fill
• Convert to vector artwork
• Video
• Import video in MOV, AVI, or MPEG format
• Importing video clips as embedded files
• Video clip becomes part of the movie, like an
  imported bitmap or vector artwork file. You can
  publish a movie with embedded video as a Flash
  movie.
• Fireworks PNG
• Can import files as editable objects that you can
  modify in Flash, or as flattened files that you
  can edit and update in Fireworks.
• File gt Import ? Fireworks PNG Import Settings
  dialog box
• If you import a PNG file from Fireworks by
  cutting and pasting, the file is converted to a
  bitmap.

24
Previewing Movies

• Authoring environment
• Control gt Play
• Window gt Toolbars gt Controller and click Play
• Test Movie command
• Control gt Test Movie or Control gt Test Scene
• Web Browser
• File gt Publish Preview gt HTML

25
Exporting

• File gt Export Movie or File gt Export Image
• Flash Movie
• Export entire document as a Flash movie, to place
  the movie in another application, such as
  Dreamweaver.
• Windows AVI (Windows)
• Exports a movie as Windows video, but discards
  any interactivity
• Export a movie directly into a single format
  GIF, JPEG, PNG, AVI
• Animated GIF, GIF Sequence, and GIF Image

26
Publishing

• Flash Document (FLA file) ? Flash Movie (SWF
  file)
• By default, creates Flash SWF file and HTML
  document with inserted movie.
• If you dont want HTML, deselect it.
• Choose Publishing File Formats SWF or GIF,
  JPEG, PNG, and QuickTime
• File gt Publish
• Test Before Publishing
• Test Movie and Test Scene commands
• Unicode Text Encoding
• Exporting vs. Publishing FLA files
• Exporting similar to publishing FLA files in
  alternative file formats, except that settings
  for each file format are not stored with FLA
  file.

27
Step 0 Download files, Launch Flash, Create
Document

• Create folder infovis16 in My Documents
  folder
• Download Files (select zip file extract into
  infovis16)
• http//scils.rutgers.edu/aspoerri/Teaching/Info
  Vis2005_ITI/Lectures/Lecture16/stepbystep16/
• Launch Flash
• Start gt Macromedia gt Flash
• Create Flash Document and Set its Properties
• File gt New
• Modify gt Document or use Property Inspector
• Frame Rate 12 Dimensions 600 x 400
  Background color White
• Using Grid, Rulers and Guides
• Rulers
• View gt Rulers
• Guides
• View gt Guides gt Show Guides
• Drag horizontal (200) and vertical (300) guides
  from rulers onto Stage

28
Step 1 Keyframes and Create Shapes

• Select Layer 1 and name it Shape Tween
• Select first keyframe in Timeline
• Select Circle Tool and Draw Circle in the center
  of Stage
• Select Arrow Tool to select Circle (both Line and
  Fill!)
• In Property Inspector, set Width 50 and Height
  50
• In Property Inspector, set Stroke and Fill
  properties of circle
• Create second keyframe at frame 30
• Select frame 30 and use Insert gt Keyframe
• Select circle using the Arrow tool in second
  keyframe
• Modify position by moving circle
• Modify size by using Free Transform
• Select Arrow tool and deselect circle
• Modify shape by using Arrow tool to change
  contour (notice how cursor changes)

29
Step 2 Shape Motion Tween and Create Layer
with Text

• Select first keyframe in Timeline
• Specify Shape Tween for first keyframe
• Select Shape from Tween menu in Properties
  Inspector
• Select option from Blend menu Distributive
• Play Movie so far
• Control gt Play or Display Controls Window gt
  Toolbars gt Controls
• Create New Layer and Name Text
• Insert gt Layer and select it
• Create Text Hello
• Select first frame and Select Text tool and type
  Hello
• Create second keyframe at frame 30
• Select frame 30 and use Insert gt Keyframe
• Select text using the Arrow tool in second
  keyframe
• Modify position by moving text
• Modify size, angle and distort by using Free
  Transform
• Specify Motion Tween for first keyframe of Text
  Layer