Flash

1
Flash

• Develop Rich Internet Content and Applications
• Design motion graphics or build data-driven
  applications
• 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
• Use ActionScript 3.0
• Object Drawing Mode
• Text Static Text

2
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.
• Graphic Symbols for static images
• Button Symbols to create interactive buttons
• Movie Clip Symbols to create reusable pieces of
  animation

3
Keyframes and Tweened Animations

• 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
• 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

4
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

5
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

6
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
  

7
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

8
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

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

10
Shape Tween

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

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

12
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

13
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

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

15
Flash Demonstration Unit 1

• 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
• Bitmap ? Symbol
• Animate and Distort Bitmap
• Modify Color and Transparency of Bitmap
• Animating along Motion Path
• Creating Mask Effect

16
Step 0 Download files, Launch Flash, Create
Document

• Download Files Unit 1
• http//comminfo.rutgers.edu/aspoerri/Teaching/In
  foVis_ITI/videodemosFlash.html
• Launch Flash
• Create Flash Document and Set its Properties
• File gt New General Flash File (ActionScript
  3.0 in CC AS 2.0 or 3.0 in CS6)
• 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

17
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)

18
Step 2a Shape Motion Tween and 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

19
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

20
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

21
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

22
Step 3b Multi-part Motion Tween

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

23
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)

24
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

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