Flash Demonstration

1
Flash Demonstration Unit 3

• Create Multi-Part Animation
• Animate Images
• Fade-in and Fade-out Text
• Add Interactivity to Instance of MovieClip
• Animated Buttons for UP and DOWN States
• Insert SWFs in Web Page (demoed in Unit 2)

2
Step 0 Download files, Launch Flash, Create
Document

• Download Files Unit 3
• http//comminfo.rutgers.edu/aspoerri/Teaching/In
  foVis_ITI/videodemosFlash.html
• Launch Flash
• Create Flash Document and Set its Properties
• File gt New
• Modify gt Document or use Property Inspector
• Frame Rate 12 Dimensions 300 x 300
  Background color White
• Using Grid, Rulers and Guides
• Rulers
• View gt Rulers
• Guides
• View gt Guides gt Show Guides

3
Step 1 Import Images, Create Text and Create
Layers

• Import Images to Use in Animation
• Convert them to Graphic or MovieClip Symbol
• Create Layer for each image in Main Timeline
• Place Text in Symbols to Use in Animation
• Create Graphic Symbol for each text fragment so
  that we can fade-in and fade-out symbol instance
  that contains text
• Place text in Graphic Symbol
• Create Layer for each text fragment in Main
  Timeline

4
Step 2 Create Tweened Animations

• Animate Instance of Symbols with Images
• Create Keyframes for Tweened Animations and
  Pauses
• Use Classic Tween since it can provide more
  flexibility
• Specify Position and/or Size and/or Transparency
  (Alpha) in Keyframes
• Animate Instance of Symbols with Text
• Create Keyframes for Tweened Animations and
  Pauses
• Make sure that related text fragments line up
  spatially before creating subsequent keyframes
• Use Classic Tween since it can provide more
  flexibility
• Specify Position and/or Size and/or Transparency
  (Alpha) in Keyframes

5
Step 3 Orchestrating Tweened Animations

• Placement of Keyframes
• If the next tween needs to begin right after
  current tween is completed, then the end
  keyframe of the current tween and the start
  keyframe need to be in the same frame.
• If the next tween needs to partially overlap with
  the current tween is completed, then the start
  keyframe of the next tween needs to be placed in
  a frame during the current tween occurs.
• If the current and next tweens need to fully
  overlap (to create a cross-fade), then they need
  to have start and end keyframes in the same
  frames on the timeline.
• Lengthening or Shortening Tween
• At Specific Frame in Timeline, Select ALL the
  frames in the different layers that need to
  remain in sync
• Right-click on selected frames and select Insert
  Frame or Remove Frames

6
Step 4 Adding ActionScript 3.0

• Controlling and Stopping Playhead
• Select Frame you want to attach ActionScript to
• Open Actions Panel and Enter stop ()
• Adding Interactivity to Instance of MovieClip
  Symbol
• Select Instance of MovieClip on Timeline
• Name Instance in Properties panel
• Open Actions Window via Window gt Actions
• Open Code Snippets Window via Window gt Code
  Snippets
• Select Actions in left panel
• Double-click on Click to Go to Web Page and
  code will be added to frame in which selected and
  named instance is located
• Customize Code specify URL

7
Step 4 Adding ActionScript 2.0

• Controlling and Stopping Playhead
• Select Frame you want to attach ActionScript to
• Open Actions Panel and Enter stop ()
• Adding Interactivity to Instance of MovieClip
  Symbol
• Select Instance of MovieClip on Timeline
• Open Actions Panel and Enter
• on (eventType) getURL (URL, _self)