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/InfoVis_ITI/videodemosFlash.html Launch Flash Create Flash Document and Set its Properties –File > New –Modify > Document or use Property Inspector –Frame Rate = 12 Dimensions = 300 x 300 Background color = White Using Grid, Rulers and Guides –Rulers View > Rulers –Guides –View > Guides > Show Guides

3. Step 1 – Import Images, Create Text and Create Layers Import Images to Use in Animation 1)Convert them to Graphic or MovieClip Symbol 2)Create Layer for each image in Main Timeline Place Text in Symbols to Use in Animation 1)Create Graphic Symbol for each text fragment so that we can fade-in and fade-out symbol instance that contains text 2)Place text in Graphic Symbol 3)Create Layer for each text fragment in Main Timeline

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

5. Step 3 – Orchestrating Tweened Animations Placement of Keyframes 1)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. 2)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. 3)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 1)At Specific Frame in Timeline, Select ALL the frames in the different layers that need to remain in sync 2)Right-click on selected frames and select Insert Frame or Remove Frames

6. Step 4 – Adding ActionScript 3.0 Controlling and Stopping Playhead 1)Select Frame you want to attach ActionScript to 2)Open Actions Panel and Enter “stop ();” Adding Interactivity to Instance of MovieClip Symbol 1)Select Instance of MovieClip on Timeline 2)Name Instance in Properties panel 3)Open “Actions” Window via “Window > Actions” 4)Open “Code Snippets” Window via “Window > 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 1)Select Frame you want to attach ActionScript to 2)Open Actions Panel and Enter “stop ();” Adding Interactivity to Instance of MovieClip Symbol 1)Select Instance of MovieClip on Timeline 2)Open Actions Panel and Enter 3)“on (eventType) { getURL (“URL”, “_self”) }”