Animate (Flash) - Key Lectures

Lynda Campus - Login to LyndaCampus

 

Unit 1 - Lectures & Video Demos - Intro, Tweened Animations, Fades

  • Flash Intro (18:44) Timeline, Layers, Tools, Symbol, Keyframe.
  • Flash Tweens (8:28) Tweened Animations: Motion Tween, Classic Tween, Shape Tween; FL Demo Steps.
  • Slides | Download step-by-step FLA files.
  • Video Demos
    • Flash Overview and Intro:
      Step0      : Quick Tour of Workspace and Panels; New File = ActionScript 2.0; Settings; Rulers and Guides (5:15)
    • Step1: Object Drawing Mode versus Merged Drawing Mode; Change Circle Shape; Create Shape Tween (8:52)
    • Step2a: Create Shape Tween; Create Motion Tween using Text and Free Transform Tool (5:56)
    • Working with Text:
      Step2b: Break Apart Work into Individual Letters; Distribute Letters to Different Layers to be able Animate them Individually using Motion Tweens (3:20)
    • Step2c: Break Apart Text Twice to be Morph Text using Shape Tween (3:20)
    • Animation Tweens:
      Step3a: Import Bitmap; Convert to Symbol; Motion Tween; Create Properties Keyframes; Free Transform Tool; Create Fade-in (9:30)
    • Step3b: Multi-part Animation; Insert Blank Keyframe; Paste in Place; Motion Tween; Edit Motion Path; Insert / Remove Frames; Test Movie (7:24)
    • Step4a: Create Classic Tween to Animate and Fade Bitmap (5:19)
    • Step4b: Create Classic Motion Guide to Control Classic Tween (4:16)
    • Step4c: Create Moving Mask Effect (4:02)

Unit 2 - Lectures & Video Demos - Intro, Tweened Animations, Fades

  • Flash Symbols & Buttons (9:54) Library, Symbol & Instances, Buttons, Gradient Tool, Simple ActionScript, Embed Flash Movie (SWF) in Web Page; FL Demo Steps.
  • Multi-Part Animation Demo (5:38) Overview.
  • Slides | Download step-by-step FLA files.
  • Video Demos
    • Create Simple Text Button in Flash:
      Step1a: Insert Button Symbol; Create Shape and Text for "Up" State; Use Gradient Transform Tool; Insert Keyframes in "Over", "Down" and "Hit" States (10:58)
    • Step1b: Customize "Over", "Down" and "Hit" States; Edit Gradient using Colors Panel; Simple Button Enabled (5:52)
    • Create Animated Button in Flash and Insert in Web Page:
      Step2a: Insert Image; Create Graphic Symbol; Scale Image Precisely (3:50)
    • Step2b: Insert MovieClip Symbol; Fade-In and Scale Instance of Graphic Symbol in MovieClip using Classic Tween (4:05)
    • Step2c: Insert Button Symbol; Create Text for "Up", "Over" and "Down"; Create Layer for Image and Place Instance of Image Animation in "Over" (5:22)
    • Step2d: Insert Static Image in "Down" and Make Sure that Animation in "Over" and Image in "Down" are Perfectly Placed (4:54)
    • Step2e: Attach ActionScript "stop ();" to Last Frame in Animation; Specify "Hit" Area in Button (4:35)
    • Step3 CC: Click on Button Instance to Go to Web Page using ActionScript 3.0 (3:26)
      • Step3: Attach ActionScript 2.0 "on (release) { getURL(URLstring, "_self"); } to Instance of Button; Fix ActionScript and Update SWF file (7:18)
    • Step4: Insert SWF file into Dreamweaver file; JavaScript files to be uploaded (7:00)

Unit 3 - Lectures & Video Demos - Multi-Part Animation

  • Multi-Part Animation Demo (5:38) Overview.
  • Slides | Download step-by-step FLA files
  • Video Demos - Multi-part Flash Animation:
    • Step1 CC: ActionScript 3.0 used in Multi-part Animation (6:38)
    • Step1: Animation Overview; Examine Library, Layers, Classic Tweens and Actionscript used in Multi-part Animation (9:52)
    • Step2: Move Image onto Stage, Pause and then Move & Fade Image Away using Classic Tween (5:00)
    • Step3: How to Move Keyframe; Insert or Remove Frames so that Related Layers Remain in Sync (5:46)

Unit 4 - Lectures & Video Demos - Ex3 - Animated Navigation Structure

  • ITI 321 InfoVis Ex3 Demo - Single Scene - Steps 1 to 4 (12:20): shows you how to create a layer and layout structure and how to create the needed UP and DOWN buttons for your navigation buttons.
  • ITI 321 InfoVis Ex3 Demo - Single Scene - Steps 5 to 8 (17:50): shows you how to name button instances and attach ActionScript 3.0 code so that clicking on a button takes the user to a named frame and all of the content is presented in the timeline of a single scene.
    • (Optional) ITI 321 InfoVis Ex3 Demo - Multiple Scenes - Steps 1 to 8: shows you how to create the ActionScript 3.0 code that needs to be assigned to the named instances of the navigation buttons so that the user is taken to the correct scene and the contented is presented in multiple scenes.
  • Slides | Download step-by-step FLA files in Sakai > Resources > Animate.
  • Video Demos
    • Build Flash Website with Animated Navigation Structure
      Animated Navigation Demo (8:46) Overview.
    • Step 0 : Big Picture and "Russian Doll" Way of Creating Flash Web Site (11:07)
    • Step 1 : Setting Up FLA file; Layers; Explore Library (7:22)
    • Step 2 : Create Animations; Attach "stop ():" Actionscript to Last Frame (5:42)
    • Step 3 : Create Animated Buttons, Hit Area, Test Movie (10:48)
    • Step 4 : Duplicate "Up" Button to Create "Down" Button and Customize (4:13)
    • Step 7 : Duplicate and Customize Scenes (6:36)

Unit 5 - Lectures & Video Demos - Project

  • ITI 321 InfoVis Project Demo - Single Scene - 1: shows you how to create the secondary navigation using a simple button (both UP and DOWN buttons) and how to associate the ActionScript 3.0 so that clicking on the button instance takes to a labeled frame in the scene's main timeline.
  • ITI 321 InfoVis Project Demo - Single Scene - 2: shows you how to duplicate button to create another secondary navigation button, name it and attach ActionScript 3.0 so that clicking on the button instance takes to a labeled frame in the scene's main timeline. Covers also how to add an instance of a MovieClip animation to timeline.
    • (Optional) ITI 321 InfoVis Project Demo- Multiple Scenes: shows you how to create the secondary navigation using a simple button (both UP and DOWN buttons) and how to associate the ActionScript 3.0 so that clicking on the button instance takes to a labelled frame in a scene's main timeline.
  • ITI 321 InfoVis Project Demo - Multi-Part Animation: reviews key steps to create a multi-part animation. The videos in Unit3 describe the process in more detail.
  • Slides | Download step-by-step FLA files in Sakai > Resources > Animate.