Flash

1
Lecture 8

• Flash
• Introduction
• Timeline
• Layers
• Symbol
• Keyframe
• Tweened Animations
• Demonstration
• Creating Tweened Animations
• Shape Tween
• Motion Tween
• Classic Tween
• Working with Text
• Adding Editing Text
• Animating Text
• Animating Individual Letters
• Morphing Text
• Animating Bitmaps
• Import Bitmap

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

• Workspace Settings Designer or Classic
• 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 keyframes
• Properties Panel
• Toolbox
• Panels
• Library Stores reusable elements called Symbols
• ActionScript Built-in programming language
  version 2.0 or 3.0

4
Document Properties and Grid, Rulers Guides

• Create Document and set its Properties
• File gt New
• General Flash File (ActionScript 2.0) for this
  class
• Modify gt Document
• Frame Rate
• Dimensions
• Background color
• Using Grid, Rulers and Guides
• 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 Timeline 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 Timeline 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
Resource Copying Layer Layer Folder and Paste
in Place

• Copy Layer
• Click layer name to select the entire layer.
• Edit gt Timeline gt Copy Frames.
• Click Add Layer button to create new layer.
• Select new layer and choose Edit gt Timeline 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 Timeline Copy Frames.
• Insert gt Timeline gt Layer Folder to create new
  folder.
• Select new folder and choose Edit gt Timeline gt
  Paste Frames.
• Paste in Same Position
• Edit gt Paste in Place

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, reshape each
  segment individually
• To avoid inadvertently altering shapes / lines by
  overlapping them
• Group shapes
• Use Object Drawing
• Place on different layers

11
Resource 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
• Properties 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 Properties Inspector
  Options

13
Resource 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 !

14
Symbols and Instances

• Symbols Reusable Elements in Document
• Symbols graphics, buttons, video clips, sound
  files, or fonts
• Symbol stored in file's library
• Use symbols for every element that appears more
  than once.
• Create Instance
• Place symbol on Stage, you create an instance of
  that symbol.
• Modify properties of instance without affecting
  master symbol
• Edit master symbol to change all instances.
• Symbols Reduce File Size
• Flash stores symbol in the file only once ?
  greatly reduces file size

15
Symbol - Behavior Types

• Graphic Symbols for static images
• Button Symbols to create interactive buttons
• Movie Clip Symbols to create reusable pieces of
  animation

• Insert gt New Symbol
• Convert Element to Symbol
• Insert gt Convert to Symbol
• Drag the selection to the Library panel
• Convert to Symbol from the context menu

16
Keyframes

• Keyframe New Instance of Object Appears
• Property Keyframe Define Objects Property
  Change
• Use Keyframes to Create Change in Animation
• Flash can tween, or fill in, frames between
  keyframes
• Create Keyframe
• Select a frame in Timeline
• Insert gt Timeline gt Keyframe
• 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.

17
Animation

• Animate Objects or Shapes
• Change objects position, shape, size, color,
  opacity, rotation
• Frame-by-frame Animation
• Create a separate image for each keyframe.
• Tweened Animation
• Create first and last keyframes of animation
  or Specify object properties in different frames
• Flash creates frames in between
• Motion or Classic or Shape Tween
• Frame Labels useful for identifying Keyframes
• Use instead of frame numbers (which can change)

18
Tweened Animation

• Select Keyframe, Right Click and Select Tween
  option
• Motion Tween
• Change Position, Size, Rotation, Alpha of Object
• Specify object property in one frame and another
  value for that same property in another frame.
• Classic Tween
• Like motion tweens, but more complex to create
• Shape Tween
• Change Shape
• If you want Flash to tween the movement of more
  than one object, each must be on a separate
  layer.
• Select elements
• Use Modify gt Timeline gt Distribute to Layers

19
Animations Representations in Timeline

• Motion Tween
• Black dot at beginning keyframe intermediate
  tweened frames have black arrow with a light-blue
  background.
• Classic Tween
• Black dot at beginning keyframe intermediate
  frames have a black arrow with a blue background.
• Shape Tween
• 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
• Classic Motion Tween does NOT contain symbol,
  groups or type
• Shape Tween contains symbol, groups or type

20
Motion Tween

• Used for tweening
• Instances of Symbol
• Type Text
• Instances and type tween
• Position, Size, Rotation, and Skew
• Instances tween
• Color shifts and Fade in / out ( Alpha)
• To Motion Tween a Bitmap
• Bitmap needs to be converted into Symbol
• Modify gt Convert to Symbol
• To tween the color of type ? convert into symbols
  

21
Create Motion Tween

• Layer needs to contain Symbols or Type
• and uses Property Keyframes
• and can have only one object instance
• Select keyframe
• Insert gt Motion Tween or Right click frame,
  select Motion Tween
• Select frame and then select object
• Move to new location (notice the motion trail)
  and/or In Properties panel, change object
  property
• Repeat steps 3 and 4

22
Classic Tween

• Layer needs to contain Symbols or Groups or
  Typeand uses Keyframes
• Create Classic Tween
• Create first keyframe
• Insert gt Classic Tween or Right click frame,
  select Classic Tween
• Automatically turns content into Graphic 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 Classic Tween or Right click frame,
  select Classic Tween
• Automatically turns start and end keyframes into
  symbols

23
Resource Motion versus Classic Tween

• Motion tween uses property keyframes, whereas
  Classic tween uses keyframes.
• Both motion and classic tweens allow only
  specific types of objects to be tweened.
• Motion tween will convert all non-allowed object
  types to Movie Clip symbols.
• Classic tween will convert them to Graphic
  symbols.
• Motion tweens consider text a tweenable type.
  Classic tweens convert text objects to graphic
  symbols.
• Only classic tweens allow frame scripts.
• Only motion tweens can be used to animate 3D
  objects.
• Only motion tweens can be saved as motion
  presets.
• You can use classic tweens to animate between two
  different color effects, such as tint and alpha
  transparency. Motion tweens can apply one color
  effect per tween.
• With motion tweens, you cannot swap symbols or
  set the frame number of a graphic symbol to
  display in a property keyframe. Animations that
  include these techniques require classic tweens.

24
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
• Insert gt Shape Tween or Right click frame,
  select Shape Tween
• Properties panel select option from Blend
  menu
• Distributive intermediate shapes smoother and
  more irregular.
• Angular preserves apparent corners and straight
  lines.

25
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.

26
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

27
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

28
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.

29
Step 0 Download files, Launch Flash, Create
Document

• Download Files
• http//scils.rutgers.edu/aspoerri/Teaching/MPOn
  line/Lectures/Lecture8/stepbystep/
• Launch Flash
• Start gt Macromedia gt Flash
• Create Flash Document and Set its Properties
• File gt New General Flash File (ActionScript
  2.0)
• 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

30
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 Timeline 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)

31
Step 2a Shape Motion Tween and Create Layer
with Text

• Select first keyframe in Timeline
• Specify Shape Tween for first keyframe
• Insert gt Shape Tween or Right Click and
  Select Shape Tween
• 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 Timeline gt Layer and select it
• Create Text Hello
• Select first frame and Select Text tool and type
  Hello
• Specify Motion Tween for first keyframe of Text
  Layer
• Create property keyframe at frame 30
• Select text using the Arrow tool in frame
• Modify position by moving text
• Modify size, angle and distort by using Free
  Transform

32
Step 2b Animating Individual Letters

• Create and Select Text in text layer at
  keyframe 1
• Break Text into Individual Letters using Modify gt
  Break Apart
• Distribute Individual Letters to Separate Layers
• Modify gt Timeline gt Distribute to Layers
• Select all the keyframes that contain a letter at
  frame 1 and apply Motion Tween
• Select frame 30
• Select a letter and move it to desired location
• Repeat step 6 for next letter

33
Step 2c Morphing Text

• Create and Select Text in text layer at
  keyframe 1
• Break Text into Individual Shapes by applying
  Modify gt Break Apart twice!
• Create Blank Keyframe at frame 30
• Create and Select Text in text layer at
  keyframe 30
• Break Text into Individual Shapes by applying
  Modify gt Break Apart twice!
• Select first keyframe and Shape Tween

34
Step 3a Animating Bitmap

• Select first Keyframe
• File gt Import to Stage bilbaodog (creates
  record in Library)
• Convert bilbaodog to Movie Clip symbol
• Modify gt Convert to Symbol Movie Clip dog
• Apply Motion Tween at first keyframe
• Insert Frame at Frame 30 (if needed)
• Select instance of dog in Frame 30 and change
  position
• Select instance of dog in Frame 1 and Distort
  it using Free Transform tool
• Select instance of dog in Frame 30 and Remove
  Transform using Modify gt Transform gt Remove
  Transform
• Fade in dog
• Select instance in Frame 30 and Properties gt
  Color Effect Set Alpha 100
• Select instance in Frame 1 and Properties Set
  Alpha 0

35
Step 3b Multi-part Motion Tween

• Select Frame 31 and Insert Blank Keyframe
• Select dog in Frame 30 and Edit gt Copy
• Select Frame 31 and Edit gt Paste in Place
• Select Frame 46 and Insert Keyframe using
  Insert gt Timeline gt Keyframe (instead of Right
  Click and then Insert Keyframe)
• Create Property Keyframes at frame 55 and 65
• Edit motion path associated with motion tween

36
Step 4a Create Classic Tween

• Select first Keyframe
• File gt Import to Stage bilbaodog (creates
  record in Library)
• Convert bilbaodog to Movie Clip symbol
• Modify gt Convert to Symbol Movie Clip dog
• Insert Keyframe at Fame 30
• Select instance in Frame 30 and change position
• Apply Classic Tween at first keyframe (should see
  solid arrow)

37
Step 4b Classic Tweening along Path

• Select layer containing classic tween animation
• Right-click layer and choose Add Classic Motion
  Guide
• Use Pen, Pencil, Line, Circle, Rectangle, or
  Brush tool to draw desired path in motion guide
• Snap center of instance to beginning of line in
  the first keyframe, and to end of the line in the
  last keyframe

38
Step 4c Creating Mask Layer

• Select or create layer with objects to appear
  inside mask
• With layer selected, choose Insert gt Timeline gt
  Layer
• Mask layer always masks layer(s) immediately
  below it
• Place a filled shape or symbol instance on mask
  layer
• Mask layer can contain tween(s)
• Right-click (Windows) mask layer's name in
  Timeline, and choose Mask from the context menu.
• Display mask effect in Flash, LOCK mask layer and
  masked layer(s)