Skip to Navigation | Skip to Content

MAT 150 - Flash 1: Animation and Interactivity

Menu

Video Tutorials

Index of Video Tutorials

Week 1

Welcome and Introduction to the Class

  1. Welcome and Introduction (25:08)

The Animate/Flash Interface and Workspace

  1. Interface Basics (12:31)
  2. Creating, Setting Up, and Previewing Documents (11:04)

Drawing and Creating Graphics

  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)

The Timeline and Step Animation

  1. Introduction to Step or Frame-by-Frame Animation (4:55)
  2. Working with the Timeline, Frames and Layers (9:02)
  3. Step Animation (Blank Keyframes) - Part 1 (10:47)
  4. Step Animation (Key Frames, Reversing Frames) - Part 2 (10:52)
  5. Step Animation (Exercise #1 Example) - Part 3 (19:45)

Publishing and FTP

  1. Quick Overview - How to Save, Publish, and Upload Your Work (8:28)
  2. Saving, Previewing and Publishing Your Flash Movie (12:12)
  3. FTP with Dreamweaver CC (7:23)
  4. FTP with FileZilla (7:38)
  5. 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

  1. Animation Principles - Appeal and Solid Drawing (11:01)
  2. Animation Principles - Timing, Frame Rates, Basics (12:19)
  3. Animation Principles - Easing (4:13)
  4. Animation Principles - Squash and Stretch (4:50))
  5. Animation Principles - Exaggeration (2:05)
  6. Animation Principles - Secondary Action (9:03)
  7. Using the New Motion Tweening Model and Custom Easing (15:57)
  • 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

  1. Working with Text, Text Properties, Editing Letter Forms (9:25)

Exercise 2 Demos

  1. Introduction to Exercise 2 (1:57)
  2. Exercise 2 Demo: "Breathe" (20:38)
  3. Exercise 2 Demo: "Nervous" (10:18)

Week 3

Shape Tweening

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

Motion Paths and Motion Guides

  1. Motion Paths (Animation Principles - Arcs) (11:35)
  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)

Week 4

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)

Exercise 4 Demo and Rotoscoping

  1. Exercise 4 - Intro + Importing/Encoding Video (Part 1) (12:55)
  2. Exercise 4 - Rotoscoping (Part 2) (13:07)
  3. Exercise 4 - Creating the Animated Button (Part3) (14:15)

Extras - Drawing/Graphics in Flash - The Deco Tool (NOT IN CC)

  1. The Spray Brush and Deco Tools (10:35)

Extras - Ning, Blogging, and Jing

  1. Making Your Ning Posts More Visual with Jing (14:35)

Week 5

Introduction to Actionscripting

  1. Introduction to Actionscripting (30:31)

Character Development and Drawing

  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)

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 6

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)

Masking Effects

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

Exercise #5 Demos - Creating A Slideshow

  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 7

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

  1. Sound - Lip Sync Demo (23:21)

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)

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

  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)

Week 9

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)

Asset Warping - Animate CC New Feature

  1. Asset Warping and Animation (12:18)

Layer Parenting - Animate CC New Feature

  1. Layer Parenting (13:29)

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)

Week 10

Working with the Camera in Animate

  1. Working with the Camera Feature in Animate (16:41) - Note: You may need to update your current version of Animate CC to use this new feature.

Week 11

Building User Interfaces in Animate - Strategies for Navigating Content

  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

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

  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

Animated Buttons and Menus in Animate/Flash (Exercise #6 Demos)

  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

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

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)