Skip to Navigation | Skip to Content

MAT 150 - Animation and Interactivity

Menu

Class Schedule

Week 1 (1/20 + 1/22)

Topics + Learning OBJECTIVES

  • Overview/Introduction to the Class and Syllabus
  • A short history of animation
  • Introduction to Animate CC (previously known as Fla-sh)
  • The Animate Environment: Tools, Windows, Inspectors, Menus
  • Movie Properties
  • Drawing Tools
  • Raster vs. vector graphics
  • Modifying Shapes and Paths
  • Grouping/Arranging
  • Color in Animate
  • Keyframes and Frames
  • Understanding Frame Rate
  • Onion-Skinning
  • Step Animation/Animation Basics

REquired Assignments + Tasks

REcommended or OPTIONAL Tasks

VIDEOS + TUTORIALS

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 Animate CC)

  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 (Techniques for Exercise #1) (updated for Animate CC)

  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 (updated for Animate CC)

  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)

Exercise #1: STEP ANIMATION (Due 1/29)

Explore the drawing tools in Animate CC to create representational or abstract graphic artwork. Animate your artwork using step animation (also known as frame-by-frame or straight ahead animation), as demonstrated in the video tutorials listed above. Finally, export your artwork as an animated .gif image.

Begin by creating a new file (File > New) and selecting "Character Animation" as the category and ActionScript 3.0 as the platform type. Set your screen size to the custom size of 854 x 480 and your frame rate to 12 frames per second.

Create a step animation that is at least 5 seconds long (or around 60 frames minimum with a frame rate of 12 fps). You may wish to use a series of keyframes, erasing and modifying your artwork as you go. Or, you may wish to create straight-ahead animations by creating a series of blank keyframes (by hitting F7 or Modify > Timeline > Convert To Blank Keyframes) and filling the blank keyframes with novel imagery as you progress in time (Tip: be sure to turn on onion-skinning and use the comma (",") and period (".") keys to quickly move forward and back in the timeline. Also, remember the quick keys: F5 = Insert Frame, F6 = Insert Keyframe, and F7 = Insert Blank Keyframe).

Create a folder with the naming convention of lastname-e1 (ie. "cleveland-e1). Save your file (File > Save As) into this folder and name it with the naming convention of lastname-e1.fla (ie. "cleveland-e1.fla"). Export an animated gif from the file, using Explort > Export Animated GIF. Upload your folder (with the .gif and .fla file included) to the exercise1 folder on the MAT server. See Publishing Instructions and FTP Info for the MAT Server for detailed instructions and video tutorials.

LINKS + resources

SITES of INSPIRATION

> Go to Top

Week 2 (1/27 + 1/29)

Topics + Learning OBJECTIVES

  • Motion Tweening
  • Working with Frames, Keyframes, and Blank Keyframes
  • Adding, removing, moving, and copying frames
  • Timing and Frame Rates
  • Symbols and Instances
  • Animation Principles
  • Easing
  • Working with Text

REquired Assignments + Tasks

REcommended or OPTIONAL Tasks

VIDEOS + TUTORIALS

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)

  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)

  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)

  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)

Exercise #2: Kinetic Typography - Motion As Metaphor tweened animationS (Due 2/12)

In Animate, use motion tweening and/or shape tweening to explore animation possibilities using typography.

Begin by creating a new file (File > New) and selecting ActionScript 3.0 as the platform type, as you will ultimately export your animations to video. Set your stage/screen size to 960 x 540 pixels and your frame rate to 24 frames per second.

Animate two of the words listed below (or choose your own words). Be sure that your choices for color, font, style, and most importantly motion/animation are thematically consistent with your word of choice. You may choose to animate properties such as position, scale, rotation, tint, alpha transparency, and/or filters such as blur and glow. Use animation principles such as acceleration and deceleration, squash and stretch, and anticipation and follow-through. Whatever you choose, use motion as a metaphor. In other words, your animations should symbolically represent your chosen words. Animate each word within the same timeline or use Insert > Scene to create a separate scene for each word.

Choose two of the following words (or choose your own words):

  • Anxious
  • Lethargic
  • Bloated
  • Excited
  • Sad
  • Angry
  • Nervous
  • Bursting
  • Kinetic
  • Rhythm
  • Momentum
  • Strong
  • Weak
  • Depressed
  • Amplify
  • Sever
  • Cry
  • Laugh
  • Stress
  • Breathe
  • Ignite
  • Power
  • Haphazard
  • Mischievous
  • Bitter
  • Connect
  • Share
  • Creepy
  • Whisper
  • Turbulent

Create a folder with the naming convention of lastname-e2 (ie. "cleveland-e2). Save your file (File > Save As) into this folder and name it with the naming convention of lastname-e2.fla (ie. "cleveland-e2.fla"). Export an .mp4 video of your file using File > Export > Export Video/Media (the default format should be H.264 .mp4 video, which is what you want). Upload your folder (with the .fla and .mp4 files) to the exercise2 folder on the MAT server. See Publishing Instructions and FTP Info for the MAT Server for detailed instructions and a video tutorial.

LINKS + RESOURCES

SITES of INSPIRATION

  • Favourite Website Awards (lots of cool, inspirational Flash and HTML5 sites)
  • Born Magazine (inspirational poetry and projects that marry design, interactive media, and the literary arts - however, many of these used the Flash player that is now retired)
  • Big Spaceship (design agency known for their cutting-edge interactive work)

> Go to Top

Week 3 (2/3 + 2/5)

Topics + Learning OBJECTIVES

  • Adobe and Animate (breaking news)
  • Working with Text / Animation Techniques (continued)
  • Shape Tweening
  • Motion Paths
  • Importing Graphics
  • Working with Graphic Symbols and Sequences

REquired Assignments + Tasks

REcommended or OPTIONAL Tasks

VIDEOS + TUTORIALS

Shape Tweening (updated for Animate CC)

  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.

Exercise #3: Haiku Banner Ad (DUe 2/19)

Animate CC publishing to HTML5 Canavs is commonly used for creating the ad banners that are ubiquitous across the web. Such interactive advertising is generally governed by the Interactive Advertising Bureau (IAB), which establishes guidelines for such ads. Your task is to explore animation techniques and principles while creating an ad using Animate. But, rather than advertising a commercial product or service, your ad banner should feature a haiku poem.

You can find a haiku poem (see below for resources) or write one of your own. Use motion tweening, shape tweening, or step animation to animate the phrases, words, and/or individual letters of the poem. Be sure that your choices for color, font, style, and most importantly motion/animation are thematically consistent with the poem. In other words, use motion as metaphor. Your animation and design should function to communicate the theme(s) of the poem.

While your focus should be on typographic design and animation, import and include at least one image in your ad/poem (even if it is not animated and just used for background texture).

You may choose to animate properties such as position, scale, rotation, tint, alpha transparency, brightness, and/or filter effects. Consider contrasting these properties in your animation (such as very small to very big; very slow to very fast; completely transparent to completely opaque, etc). Attempt to use animation principles such as acceleration and deceleration, squash and stretch, and anticipation and follow-through. Whatever you choose, your animation should symbolically represent your poem.

Begin by creating a new file (File > New) and selecting HTML5 Canvas as the platform type (or choose the Ads category which will assign HTML5 as the platform type by default). Choose a stage size from one of the following common ad unit sizes (as per the IAB guidelines for width x height in pixels):

  • Leaderboard: 728 x 90
  • Billboard: 970 x 250
  • Medium Rectangle: 300 x 250
  • Skyscraper: 160 x 600
  • Vertical/Large: 300 x 600

Create a folder with the naming convention lastname-e3 and save (or Save As) your file with the naming convention lastname-e3 (ie. "cleveland-e3.fla") putting it into this folder. Then, publish it to create the .html, .js, and depedent files needed. Upload your lastname-e3 folder (with all the .fla, .html, .js and dependent files/folders within) to the exercise3 folder on the MAT server. See Publishing Instructions and FTP Info for the MAT Server for detailed instructions and a video tutorial.

Haiku Resources

Tutoring + Academic Support + OPEN LABS

MiraCosta has a number of tutoring and support services available to you, including the ability to make in-person or zoom appointments with tutors or work in our open labs. For hours and more information, see Tutoring and Student Support Services.

LINKS + RESOURCES

Animation software (beyond Animate)

SITES of INSPIRATION

> Go to Top

Week 4 (2/10 + 2/12)

UPCOMING Topics + Learning OBJECTIVES

  • Custom Easing and the Motion Editor
  • Working with MovieClips and Buttons
  • Rollover Buttons
  • Invisible Buttons
  • Creating Complex/Animated Buttons with Movieclips
  • Building Complexity using Movieclips
  • Nesting Movieclips and Symbols

> Go to Top