Skip to Navigation | Skip to Content

MAT 150 - Flash 1: Animation and Interactivity

Menu

Video Tutorial ARCHIVE

Index of Tutorials
(Note: This archive of tutorials will allow you to work ahead. However, as an archive, some of these videos may be older. Check the current week in the schedule for the most recent and up-to-date video content)

Week 1

Welcome and Introduction to the Class

  1. Welcome and Introduction (15:17)

The Art of Animation, Some History, and Inspiration

  1. The Art of Animation and Motion Graphics (from PBS Off Book)
  2. Some History and Inspiration for Step Animation (interactive toys built with Animate)
  3. Film Before Film - Phenakistoscope, Zootrope, Praxinoscope (optional YouTube)
  4. Emile Cohl - The Puppet's Nightmare - The first animated film (optional YouTube)
  5. Winsor McCay - Gertie the Dinosaur - The first animated film using keyframe animation techniques (optional YouTube)

The Animate CC Interface and Workspace (updated for 2021)

  1. Animate Interface, Part 1 - Introducing Animate Files and Platform Types (18:49)
  2. Animate Interface, Part 2 - Panels and Workspaces (18:50)

Drawing and Creating Graphics (basics from the instructor)

  1. Drawing with Vectors (vector vs. raster graphics) (5:21)
  2. Working with Color, Strokes and Fills (8:22)
  3. Drawing Modes, Basic and Primitive Shapes (14:47)
  4. The Pencil, Paintbrush, Pen, and Eraser (16:56)
  5. Editing, Manipulating, and Transforming Graphics (5:57)
  6. Using the Width Tool and Width Profiles (6:30)

Drawing in Animate (from Adobe)

  1. Drawing in Animate - Creating a Character Using Primitive Shapes (6:40)
  2. Drawing Artwork with the Brush Tool (5:04)

The Timeline and Step Animation (updated for 2021)

  1. Animation and Illusion of Motion - Introduction, Animation Types (16:28)
  2. Working with the Timeline, Layers, Frames, and Keyframes (23:59)
  3. Step Animation, Onion Skinning, Creating and Exporting (18:09)
    --- Additional Videos in production but these older videos are still relevant--
  4. Step Animation (Key Frames, Reversing Frames) - Part 2 (10:52)
  5. Step Animation (Exercise #1 Example) - Part 3 (19:45)

Saving, Publishing/Exporting, and Turning in Your Work via sFTP

  1. Saving Files, Using Naming Conventions, and Publishing or Exporting Files to Varying Delivery Formats (12:03)
  2. Uploading Your Files via sFTP to the MAT Server to Turn In Your Work (14:20)
  3. Publishing and FTP Information for the MAT server (Documentation + Tutorials)

Week 2

Working with Symbols, Instances, and the Library

  1. Introduction to Symbols - Why Use Them (3:54)
  2. Creating Symbols (9:16)
  3. Editing Symbols (9:18)
  4. Editing Continued: Duplicating, Swapping, + Breaking Apart Symbols (11:34)

Motion Tweening

  1. Introduction to Motion Tweening (2:16)
  2. Motion Tweening Basics (8:13)
  3. Classic Tweening and Motion Tweening (12:13)
  4. Motion Tweening in More Detail: Motion Paths and the Motion Editor (23:23)

Animation Principles, Motion Tweening, and the Bouncing Ball (updated for Animate CC 2021)

  1. Animation Principles and the Bouncing Ball - Appeal and Solid Drawing (9:38)
  2. Animation Principles and the Bouncing Ball - Timing, Frame Rates, Basics (11:43)
  3. Animation Principles and the Bouncing Ball - Acceleration, Deceleration, Applying Easing (9:31)
  4. Animation Principles and the Bouncing Ball - Squash and Stretch, Using Exaggeration (10:28)
  5. Animation Principles and the Bouncing Ball - Secondary Animation (12:01)
  6. Animation Principles and the Bouncing Ball - Arcs and Motion Guides (13:15)
  • Animation Principles Documentation (HTML, PDF)
  • Bouncing Ball Files (HTML, FLA)

Animating Properties (Position, Scale, 3D, Alpha, Tint, Filters, etc.)

  1. Animatable Properties with Motion Tweening (20:42)

Working with Text (updated for Animate CC 2021)

  1. Working with Typography: Type Properties, Editing Letter Forms, Static vs. Dynamic Text, Web Fonts (14:46)

Exercise 2 - Kinetic Typography Demos (updated for Animate CC 2021)

  1. Introduction to Exercise 2 - Kintetic Typography (2:56)
  2. Exercise Demos - "Bounce", "Breathe", Export to Video (37:30)
  3. Exercise 2 Demo: "Nervous" (10:18 - optional older demo)

Week 3

Shape Tweening (updated for Animate CC 2021)

  1. Introduction to Shape Tweening (9:16)
  2. Shape Hints (5:14)
  3. Shape Tweening Complex Shapes (11:55)
  4. Shaping Tweening Gradients for Lighting Effects (7:12)

Motion Paths and Motion Guides

  1. Animation Principles and the Bouncing Ball - Arcs and Motion Guides (13:15)
  2. Classic Motion Guides (3:23)
  3. Orient to Path and Other Motion Guide Tips (8:27)

Animating Text / Animation Principles

  1. Animation Principles - Anticipation and Follow-Through (19:34)

Introduction to Exercise #3

  1. Introduction to the Haiku Banner Ad Exercise (8:37)

Importing and Working with Graphics and Graphic Symbols (Ex #3 Demos)

  1. Importing and Working with Graphics (18:50)
  2. Graphic Symbols and Sequences (22:40)
  3. Creating, Converting To, and Publishing HTML5 Canvas Documents (32:21)
    Includes review of the Flash/ActionScript 3 platform vs. HTML5 Canvas/JavaScript, adding some scripting/interactivity, and publishing Exercise #3 to HTML5 Canvas.

Week 4

Publishing Exerise #3 for HTML5 Canvas (updated for Animate CC 2021)

  1. Creating, Converting To, and Publishing HTML5 Canvas Documents (32:21)
    Includes review of the Flash/ActionScript 3 platform vs. HTML5 Canvas/JavaScript, adding some scripting/interactivity, and publishing Exercise #3 to HTML5 Canvas.

Custom Easing and the Motion Editor in Animate CC

  1. Introduction and Custom Easing for Classic Tweens (7:25)
  2. Using the Motion Editor to Refine Motion Tweens (20:12)

Working with Movie Clips

  1. Introduction to Movie Clip Symbols (21:32)

Working with Buttons

  1. Buttons - Intro to Button Symbols (Part 1) (13:28)
  2. Buttons - Creating a Menu (Part 2) (12:08)
  3. Buttons - Remote Rollovers (Part 3) (5:58)
  4. Buttons - Invisible Buttons (Part 4) (8:52)
  5. Buttons - Complex Buttons with Animation and Nested Symbols (Part 5) (22:31)

History of Rotoscoping (from Vox)

  1. The Trick that Made Animation Realistic (5:12)

Exercise 4 Demo and Rotoscoping (updated for Animate CC 2021)

  1. Exercise 4 - Intro + Importing/Encoding Video (Part 1) (12:55)
  2. Exercise 4 - Rotoscoping (Part 2) (13:07)
  3. Exercise 4 - Converting to HTML5 and Creating the Animated Movieclip/Button (Part 3) (15:35)
  4. Exercise 4 - Scripting the Button using JavaScript/CreateJS (Part 4) (29:33)

Week 5

Character Development and Drawing (for Project #1)

  1. Character Development - Research + Creative Investigation - Part 1 (7:47)
  2. Character Development - Drawing - Primitive Shapes, Width Tool and Profiles, Face, Eyes, and Ears - Part 2 (19:41)
  3. Character Development - Drawing - Nose and Mouth- Part 3 (20:37)
  4. Character Development - Drawing - Texture, Shading, Brushes - Part 4 (22:03)

Introduction to Scripting + Interactivity (updated for Animate CC 2021)

  1. Introduction to Scripting + Interactivity with JavaScript and CreateJS (40:56)
  2. Exercise 4 - Scripting the Button using JavaScript/CreateJS (Part 4) (29:33)

Introduction to CreateJS - The Code Powering HTML5 Canvas in Animate CC (Video #1 is recommended; Video #2 is optional)

  1. Understanding the CreateJS libraries and basic capabilities (22:52)
  2. Using CreateJS External to Animate CC (17:16)

Introduction to Actionscripting (Older and optional)

  1. Introduction to Actionscripting (30:31)

 

Week 6

Creating a Simple Character and Building Complexity Using Nested Movieclips (Project #1 Demos updated for Animate CC 2021)

  1. Character Animation - "Bee" Character - The Body - Part 1 (12:24)
    Introduction, reference sketch, color and tagged swatches, transforming primitive shapes
  2. Character Animation - "Bee" Character - The Eyes - Part 2 (20:23)
    Nested symbols and tweened animation
  3. Character Animation - "Bee" Character - The Antennae - Part 3 (30:35)
    Shape Tweening and Shape Hints, Asset Warping
  4. Character Animation - "Bee" Character - The Wings - Part 4 (25:18)
    Classic Tweening, Nested Movie Clips, Rotation and Transform Points, Color and Blur Effects
  5. Character Animation - "Bee" Character - The Mouth - Part 5 (30:35)
    Frame by Frame Step Animation, Masking, Graphic Symobls and the Frame Picker, Creating Mouth Shapes for Lip Syncing
  6. Character Animation - "Bee" Character - The Face (2.5D) - Part 6 (28:07)
    Refinements, Gradients for Shading/Highlight, Simulating a Head Turn in 2.5D

Note: Additional videos to finalize the Project #1 Demos will be made available in the coming weeks

Create TV/Broadcast Ready Animations with Adobe Animate (recommended from Adobe's YouTube Channel)

  1. Creating Character / Puppet Animation (25 video playlist)

---OLDER DEMOS FOR ARCHIVAL PURPOSES ---

Project #1 Demos - Creating a Character and Building Complexity Using Nested Movieclips

  1. Creating the "Bee" Character - The Body - Part 1 (8:05)
  2. Creating the "Bee" Character - The Eyes - Part 2 (11:14)
  3. Creating the "Bee" Character - The Antennae - Part 3 (11:05)
  4. Creating the "Bee" Character - The Mouth - Part 4 (9:22)
  5. Creating the "Bee" Character - The Wings - Part 5 (16:26)
  6. Creating the "Bee" Character - The Face (2.5D) - Part 6 (10:36)

Project #1 Demos Continued - Creating the Animated Scene, Creating the Interface, and Adding Sound (Note, these topics will be covered in greater depth later in the class but are included here if you want to get a jump on the project and a full sense of its scope)

  1. Creating the "Bee" Character - Intro to Next Steps - Part 7 (2:10)
  2. Creating the "Bee" Character - Adding Background Clouds - Part 8 (22:20)
  3. Creating the "Bee" Character - Adding Middleground Trees - Part 9 (11:41)
  4. Creating the "Bee" Character - Using Scenes for Sequences - Part 10 (10:36)
  5. Creating the "Bee" Character - Creating the Interface - Part 11 (25:56)
  6. Creating the "Bee" Character - Adding Sound - Part 12 (8:00)
  • Download The FInal Bee Character/Scene (.fla)

Week 7

Asset Warping for Animation - Animate CC New(ish) Feature

  1. Asset Warping and Animation (12:18)

Layer Parenting for Animation - Animate CC New(ish) Feature

  1. Layer Parenting (13:29)
  • Download Sample/Demo Art Manikin Starter FLA File (.fla)

Working with Sound - Basics, Importing, Compression, Syncs, Editing

  1. Sound - Importing and Adding Sound (6:28)
  2. Sound - Properties and Compression (8:25)
  3. Sound - Syncs and Background Sounds (7:03)
  4. Sound - Event and Button Sounds (6:57)
  5. Sound - Editing and Effects (16:47)
  6. Sound - Streaming Syncs and Split Audio (10:13)

Working with Sound - Lip Sync Demo with the Monkey Character (Exercise #5 Demos)

  1. Sound - Lip Sync Demo (23:21)
  2. Sound - Auto Lip Syncing (7:49)
  3. Enhancing Lip Syncing and Facial Expressions with Graphic Symbols and the Frame Picker (25:06)
  4. Exporting Your Exercise #5 for Video (4:22)

Working with Sound - External Sounds, Sound Controllers

  1. Sound - Creating a Sound Controller (16:34)
  2. Sound - Loading and Playing External Sounds Using Actionscript 3.0 (7:04)
  3. Sound - Controlling External Sounds (9:17)

Week 8

Working with Scenes

  1. Working with Scenes (9:01)
  2. Controlling Scenes with Scripting - Interactive Navigation and Intercutting between Scenes (16:24)

Working with the Camera

  1. Working with the Camera Feature in Animate (16:41)

Asset Warping - Animate CC New(ish) Feature

  1. Asset Warping and Animation (12:18)

Layer Parenting - Animate CC New(ish) Feature

  1. Layer Parenting (13:29)

Masking Effects

  1. Working with Masks (4:33)
  2. Animated Masks (10:55)

Week 9

Working with Bitmaps

  1. Bitmap Graphics - Intro and Importing (8:05)
  2. Bitmap Graphics - Properties and Compression (8:28)
  3. Bitmap Graphics - Converting to Vector (7:55)
  4. Bitmap Graphics - Fills and Tiling (5:24)

Introduction to Scripting + Interactivity (updated for Animate CC 2021)

  1. Introduction to Scripting + Interactivity with JavaScript and CreateJS (40:56)

Exercise #6 Demos - Creating an HTML5 Interactive Slideshow (updated for Animate CC 2021)

  1. Creating a Slideshow - Importing and Arranging Images (9:02)
  2. Creating a Slideshow - Adding Buttons (14:41)
  3. Creating a Slideshow - Scripting Basic Interactivity on Buttons (12:17)
  4. Creating a Slideshow - Scripting Conditionals and Finalizing the Core Functionality (18:35)
  5. Creating a Slideshow - Editing, Decoration, Masks (15:02)
  6. Creating a Slideshow - Adding Animation (21:48)
  7. Creating a Slideshow - A Cross-Fade Slideshow (11:57)
  8. Creating a Slideshow - Adding and Scripting Thumbnail Buttons (24:14)

Older Exercise Demos - Creating A Slideshow (in ActionScript)

  1. Creating a Slideshow - Importing and Arranging Images (9:07)
  2. Creating a Slideshow - Scripting Basic Interactivity (14:36)
  3. Creating a Slideshow - Scripting Conditionals (11:01)
  4. Creating a Slideshow - Editing and Decoration (17:46)
  5. Creating a Slideshow - Adding an Animated Mask (20:02)
  6. Creating a Slideshow - Animated Slideshow and Motion Presets (16:19)
  7. Creating a Slideshow - Animated Slideshow with Interactivity (22:18)

Week 10

Project #1 Demos Continued - Creating the Animated Scene, Creating the Title Screen, and Adding Sound (updated for Animate CC 2021)

  1. Character Animation - "Bee" Character - Parts 1 - 6
  1. Creating the "Bee" Character - Drawing the Scene - Part 7 (25:31)
  2. Creating the "Bee" Character - Animating the Scene and Parallax - Part 8 (22:21)
  3. Creating the "Bee" Character - Directing Sequences Using Scenes and the Camera - Part 9 (17:21)
  4. Creating the "Bee" Character - Creating the Title Screen - Part 10 (20:23)
  5. Creating the "Bee" Character - Adding Sound - Part 11 (14:00)
  6. Creating the "Bee" Character - Exporting for Video - Part 12 (5:53)

Project #1 Demos Continued - Creating the Animated Scene, Creating the Interface, and Adding Sound (older)

  1. Creating the "Bee" Character - Intro to Next Steps - Part 7 (2:10)
  2. Creating the "Bee" Character - Adding Background Clouds - Part 8 (22:20)
  3. Creating the "Bee" Character - Adding Middleground Trees - Part 9 (11:41)
  4. Creating the "Bee" Character - Using Scenes for Sequences - Part 10 (10:36)
  5. Creating the "Bee" Character - Creating the Interface - Part 11 (25:56)
  6. Creating the "Bee" Character - Adding Sound - Part 12 (8:00)
  • Download The Final Bee Movie FLA File (.fla)

Controlling MovieClips and Creating a Character Using PNG Bitmap Images

  1. "Barracuda" Character - Using PNG images and Nested Movie Clips (11:45)
  2. "Barracuda" Character - Controlling Movie Clips (24:51)
  • Download Barracuda Demo (.fla)

Photoshop to Flash - Bitmap Animation and the Puppet Tool

  1. Photoshop to Flash - Frame by Frame Bitmap Animation Using the Timeline and the Puppet Tool (15:54)

Inverse Kinematics and the Bone Tool

  1. Introduction to Inverse Kinematics and the Bone Tool (5:16)
  2. Adding and Editing Bones (13:22)
  3. Adjusting Bones and Adding Constraints (10:30)
  4. Creating a Spider Character using Symbols and the Bone Tool (30:37)
  5. Rigging and Animating a Character with I.K. and the Bone Tool (18:22)
  6. Spring Strength and Dampening Adjustments (5:45)
  7. Using the Bone Tool on Shapes and Working with Pins (10:06)
  • Download Sample Art Manikin Starter FLA File (.fla)

Building User Interfaces in Animate - Strategies for Navigating Content (updated for Animate CC 2021 - Using HTML5/Canvas)

  1. Introduction to UI Design and Navigation Strategies (11:39)
  2. Anatomy of a User Interface - Core Elements (11:11)
  3. Frame to Frame - Basic Navigation Using HTML5/JS (25:43)
  4. Off-Screen to On-Screen Navigation Using HTML5/JS (20:11)
  5. Hide and Reveal Navigation (9:28)
  6. Movie to Movie - Dynamic Content Loading Using HTML5/JS (10:43)
  7. Adding Animation to Your UI - Frame to Frame Navigation with Animated Transitions (24:29)

Building User Interfaces in Animate - Strategies for Navigating Content (older, using Actionscript)

  1. Introduction to UI Design and Navigation Strategies (11:39)
  2. Anatomy of a User Interface - Core Elements (11:11)
  3. Frame to Frame - Basic Navigation Using AS3 (11:33)
  4. Off-Screen to On-Screen - Fly Out or Drop Down Content Using AS3 (15:17)
  5. Movie to Movie - Dynamic Content Loading Using AS3 (24:20)

Building Websites in Flash - Strategies for Navigating Content using AS2 (optional - only for older versions of Flash)

Note: The samples below use AS2. For tutorials using AS3, see above:

  1. Website Navigation - Introduction and Core Elements (15:50)
  2. Website Navigation - Frame to Frame (16:36)
  3. Website Navigation - Scene to Scene (4:54)
  4. Website Navigation - Page to Page (8:10)
  5. Website Navigation - Movie to Movie - Basics (17:03)
  6. Website Navigation - Movie to Movie - Adding Animation, etc (18:43)
  • Download Source Files (.zip)

Week 12 /13

Project #2 Demos - User Interfaces and Interactivity in Animate Using HTML5 Canvas and JavaScript (updated for Animate CC 2021)

  1. Interface Project - Designing and Integrating Graphics from Photoshop (30:17)
  2. Interface Project - Preparing Graphics and UI Elements for Authoring (8:50)
  3. Interface Project - Enabling and Animating User Interface Elements (22:25)
  4. Interface Project - Animated Buttons and MovieClips, Remote Rollovers, and Scripting Mouse Over and Mouse Out Interactions (22:50)

Project #2 Demos - Photoshop Integration, Dynamically Loading Content, Scrolling Text, Movie Clips for Flyout Menus/Content (older, Actionscript)

  1. Interface Project - Integrating Photoshop Content with Animate/Flash (18:00)
  2. Interface Project - Preparing the Buttons and UI Elements (14:29)
  3. Interface Project - Dynamically Loading Content (27:13)
  4. Interface Project - Scrolling Text (32:36)
  5. Interface Project - Final Touches - Loading Images and Using Movie Clips for Flyout Content (20:49)
  • Download Source FIles (.zip)

Week 13 /14

Adding Animations to Your User Interface (UI) Elements (updated for Animate CC 2021 - Using HTML5/JS)

  1. Adding Animation to Your UI - Frame to Frame Navigation with Animated Transitions (24:29)
  2. Creating Animated Buttons/Movieclips - Part 1 - Mouse Over and Mouse Out Interactions (21:06)
  3. Creating Animated Buttons/Movieclips - Part 2 - Launching Pop-Up/Modal Content (18:13)

Animated Buttons and Menus in Animate/Flash (older, ActionScript)

  1. Part 1 - Creating Animated Buttons Using MovieClips using AS3 (25:25)
    Download Source File (.fla)
  2. Part 2 - Creating an Animated Drop Menu using AS3 (24:21)
    Download Source File (.fla)

    Note: This was posted earlier, but also relates to Exercise #6 techniques
  3. Fly Out or Drop Down Conent Using AS3 (15:17)
    Download Source File (.fla)

Week 14/15

Project #2 Demos - User Interfaces and Interactivity in Animate Using HTML5 Canvas and JavaScript (continued)

  1. Interface Project - Production on UI Elements and Buttons (19:35)
  2. Interface Project - Adding Content Sections and Go to Frame Navigation (22:44)
  3. Interface Project - Animating the Initial Interface (9:38)
  4. Interface Project - Animating the Content Sections (22:34)

Video in Flash

  1. Video - Introduction to Flash Video and the Adobe Media Encoder (16:30)
  2. Video - Using and Customizing Video Playback Components (14:09)
  3. Video - Creating Your Own Video Player (14:04)
  4. Video - Creating and Scripting Custom Video Player Controls (24:19)
  5. Video within HTML5 Canvas - Components and Controls (16:56)

Week 15/16

Interactive Interface Demos - User Interfaces and Interactivity in Animate Using HTML5 Canvas and JavaScript (continued)

  1. Interactive Interface - Loading MovieClips from the Library - Movie to Movie Navigation with Intro/Outro Animations (47:00)
  2. Interactive Interface - Adding Video Content (18:01)
  3. Interactive Interface - Launching External Web Pages and Preventing Duplicate Event Listeners (13:01)
  4. Interactive Interface - Publish Settings, Options, and Preloaders for HTML5 Canvas Content (12:01)

Publishing and Deploying Flash Content

  1. Publishing - Overview of Flash Content Runtimes and Publishing to Multiple Platforms (6:04)
  2. Publishing - HTML and Flash Player/SWF Options and Recommendations for Publishing Project 2 (24:35)
  3. Publishing - HTML5 Canvas (21:49)
  4. Publishing - Images, Image Sequences, and Sprite Sheets (16:23)
  5. Publishing - Video (4:43)
  6. Publishing - Desktop Applications, Executable Projector Files, and FS Commands (13:29)
  7. Publishing - Mobile Apps (Android and iOS) (9:45)

Fun with Code - Actionscripting Samples (AS2)

  1. Setting Properties with Code (12:00)
  2. Draggable Movie Clips, Depth, and Hit Tests (14:11)
  3. Creating a Custom Cursor (8:03)
  4. Generating Random Behavior (5:31)
  5. Scrolling a MovieClip with Buttons (9:06)

Note: The index of video tutorials is updated weekly with new tutorials. In general, when possible, this index will include video tutorials up to a week or two in advance of the current class topics if you wish to work ahead.