Skip to Navigation | Skip to Content

MAT 150 - Animation and Interactivity

Menu

Class Schedule

Week 1 (1/21 + 1/23)

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/30)

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/28 + 1/30)

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/13)

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/4 + 2/6)

Topics + Learning OBJECTIVES

  • 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/20 2/25)

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

SITES of INSPIRATION

> Go to Top

Week 4 (2/11 + 2/13)

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

REquired Assignments + Tasks

REcommended or OPTIONAL Tasks

VIDEO TUTORIALS

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)

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

SITES of INSPIRATION

> Go to Top

Week 5 (2/18 + 2/20)

Topics + Learning OBJECTIVES

  • Working with MovieClips and Buttons
  • Scripting and Interactivity
  • Controlling the Timeline and Movieclips
  • Rotoscoping
  • Building Complexity using Movieclips

REquired Assignments + Tasks

REcommended or OPTIONAL Tasks

VIDEO TUTORIALS

Introduction to Scripting + Interactivity (updated for Animate CC)

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

History of Rotoscoping (from Vox)

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

Exercise 4 Demo and Rotoscoping (updated for Animate CC)

  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)

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)

Exercise #4: Button dance - Rotoscoping and INTERACTIVITY (Due 3/6)

In Animate CC, create an animated and interactive button using rotoscoping.

View Rotoscoping Button Samples

You are welcome to explore creative and/or alternative styles of rotoscoping animation, but the instructions and examples focus on creating a "silhouette-style" animated button. Check out how rotoscoping is used in Waking Life and A Scanner Darkly for more sophisticated examples of rotoscoping techniques. You might also check out YouTube videos such as this one and this one.

1) Shoot around two seconds of video of yourself (or a friend or pet) in motion. You can use any digital camera that can take simple video (and create .avi, .mov, or .mp4 files). If you cannot create your own video, you can download and use this video of me.

2) Create a new file in Animate using the platform type of ActionScript 3.0. Import the video (File > Import > Import Video) onto the stage in Animate and choose to "Embed H.264 video". Note that Animate does not natively support all video formats, so you must convert your video to H.264 encoded video in the .mp4 format or .flv encoded video prior importing your video. You can accomplish this with the Adobe Media Encoder (AME), which should launch automatically if you click the "Convert Video" button. Lock the video layer, and create a new layer on top of it. Insert a series of blank keyframes (Modify > Timeline > Convert To Blank Keyframes) into the new layer.

3) Using the brush tool in Animate/Flash, paint (rotoscope) on top of the video. To create "silhouette-style" artwork, outline the shape of your body and then fill in the outlines with the paint bucket tool. Create a series of 12 - 24 frames in this manner, choosing to paint the series of frames that contain the most interesting motion.

4) Once complete, copy the painted frames (without the video). To copy frames, select the sequence of frames you wish to copy and right click to choose Copy Frames (or Edit > Timeline > Copy Frames). Paste your copied frames into a movieclip (Insert > New Symbol > Movieclip). Paste them again a second time, and then reverse the second sequence of copied frames (Modify > Timeline > Reverse Frames) so that your created animation loops seamlessly back and forth inside the movieclip symbol.

5) Add your movieclip to the stage and give it an instance name (such as roto_mc).

6) Create an "invisible" button about the size of or in the shape of the artwork on frame 1 of your movieclip. To do so, create a new button symbol (Insert > New Symbol > Button). Select and insert a blank keyframe (F7) in the "Hit" frame. Either draw a shape in that frame or insert/nest the movieclip created in step 4 into the "Hit" frame of the button by dragging it in from the library. Select the movieclip in the "Hit" frame and break it apart (Modify > Break Apart) so that the artwork will take on the shape of your frame 1 artwork (but no longer be an animated symbol).

5) Return to the main movie scene, create a new layer and add your button (from the library) to the stage, placing it on top of the movieclip you create. Give you button an instance name (such as "invis_btn"). You can delete your other layers (or turn them into guides).

6) Convert your file to HTML5 Canvas to add scripting (File > Convert To > HTML5 Canvas). Open your "Actions" panel and add some JavaScript/CreateJS code to enable your interactive button to control the playback of your animation.

Add the following sample script to enable roll over and roll out controls:

//note that this assumes your movieclip has the instance name of "roto_mc" and your button is named "invis_btn"

var _this = this;
_this.stop();
_this.roto_mc.stop();

stage.enableMouseOver();

_this.invis_btn.on('mouseover', function(){     _this.roto_mc.play();

});

_this.invis_btn.on('mouseout', function(){     _this.roto_mc.stop();

});

Add the following sample script to enable play/pause controls:

//note that this assumes your movieclip has the instance name of "roto_mc" and your button is named "invis_btn"

var _this = this;
_this.stop();
_this.roto_mc.stop();

var playing = false; _this.invis_btn.addEventListener('click', onClick); function onClick(e) {
     if (!playing) {
         _this.roto_mc.play();
         playing = true;
    } else {
         _this.roto_mc.stop();
         playing = false;
    }
}

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

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

SITES of INSPIRATION

  • The Story of Stuff (video/animation originally built using Flash, documentary, activism)
  • Jonathan Harris (computer science, anthropology, visual art, and storytelling)

> Go to Top

Week 6 (2/25 + 2/27)

Topics + Learning OBJECTIVES

  • Project #1 Introduction and Demos
  • Character Development and Drawing
  • Buttons, Scripting, and Interactivity
  • Building Complexity using Movieclips and Symbols

REquired Assignments + Tasks

REcommended or OPTIONAL Tasks

VIDEO TUTORIALS

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)

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

Project #1 - Animation (Due 4/17)

Create an animated character and scene.

Using the drawing tools in Animate (and/or imagery created in Photoshop, Illustrator, or elsewhere), create an animated character of your choice (this can be an animal, bird, fish, robot, spaceship, or anything you can think of). Using nested movieclips and/or graphic symbols, animate at least two elements on the character (such as the wings and eyes).

Place your character within a scene that contains a foreground, middleground, and background. Animate the scene.

At minimum, you are required to create one animated character/scene. This requirement is purposely broad so that you can adapt this assignment to your own creative goals and level of expertise. However, you are encouraged to expand upon your animation and/or explore animation techniques in one of several ways, such as:

  • Using your animation to tell a simple short story, wherein you include a beginning, middle, and end (or have a narrative structure of some kind such as a setup, a conflict, and and a resolution).
  • Alternatively (or in addition), you are encouraged to explore voice-over and lip-syncing techniques so that you make your character sing or talk.
  • Alternatively (or in addition), you are encouraged to explore rigging a character and animating it using layer parenting and/or inverse kinematics (and the bone tool).
  • Alternatively (or in addition), you are encouraged to explore using the Camera tool to stage and animate your scene using panning and zooming as appropriate.
  • Alternatively (or in addition), you are encouraged to explore "parallax scrolling" wherein you animate the foreground, middleground, and background at varying relative speeds such that it appears that the background graphics move more slowly than foreground graphics, creating the illusion of depth in your 2D scene. If your character is in the foreground, for example, you may choose to create simple panning (and perhaps looping) animations for the background (such as clouds or mountains) and middleground (such as trees or objects) and animate the foreground/middleground graphics so that they are faster than the background graphics to give a sense of perspective, realism, and immersion.

Your animation project must include appropriate sound (background sounds, event sounds, or both).

Lastly, your project must include opening credits and/or a title screen with the project’s title and your name.

Begin by creating a new file (File > New) and selecting ActionScript 3.0 as the platform type, as you will ultimately export your animation to video. I recommend a stage size of 1280x720 and frame rate of 24 fps for the project, but you may use any size you feel is appropriate (no larger than 1920x1080).

Create a folder with the naming convention of lastname-p1 (ie. "cleveland-p1). Save your file (File > Save As) into this folder and name it with the naming convention of lastname-p1.fla (ie. "cleveland-p1.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 project1 folder on the MAT server. See Publishing Instructions and FTP Info for the MAT Server for detailed instructions and a video tutorial.

Project #1: Character Animation – Creative Research and Process Work

Some Sample Student Work From Previous Semesters

  1. Sample Project
  2. Sample Project
  3. Sample Project

LINKS + 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.

SITES of INSPIRATION

> Go to Top

Week 7 (3/4 + 3/6)

Topics + Learning OBJECTIVES

  • Project #1 Character Animation Demos
  • Building Complexity using Graphic Symbols and Movieclips
  • Nesting Movieclips and Symbols
  • Sample File (bee_body_eys.fla)
  • Sample File (bee_progress.fla)

REquired Assignments + Tasks

REcommended or OPTIONAL Tasks

VIDEO TUTORIALS

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

  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)

LINKS + 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.

SITES of INSPIRATION

> Go to Top

Week 8 (3/11 + 3/13)

Topics + Learning OBJECTIVES

  • Working with Sound and Music
  • Importing, Compressing, and Editing Sound
  • Background Sounds and Event Sounds
  • Sound Syncs and Properties
  • Lip Syncing with the Frame Picker
  • Auto Lip Syncing
  • Playing External Sound Files
  • Controlling Sound with Scripting
  • In Class Demo File (monkey_lip_sync_starter.fla)

Required Assignments + Tasks

Recommended or OPTIONAL Tasks

VIDEO TUTORIALS

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)

Exercise #5: LIP SYNC animation (Due 4/3)

Explore working with sound, graphic symbols, and lip syncing to give voice to a simple character.

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

Draw/illustrate the head and face of a character (a human, animal, robot, or anything you want). This can be a simple and static illustration except for the mouth; the mouth will be animated using a graphic symbol and lip syncing. Within subsequent keyframes in a graphic symbol, draw/create at least 6 different mouth shapes, including a 'neutral' mouth and at least 5 additional mouth shapes/illustrations to represent different visemes (a viseme is an image that corresponds to and/or describes a particular sound). You may wish to research lip sync charts/illustrations or visemes for examples.

Make your character talk or sing using your 'mouth' graphic symbol and lip syncing techniques.

Find or record at least 3 seconds of audio to use (recording your own audio is preferred). For example, you may wish to give voice to your character by recording your own voice or that of a relative or friend. You will only need to record a sentence or two of dialogue in order to fulfill the minimum length requirement (more is optional). Alternatively, you may choose to use the audio from a song with lyrics (like you might if creating an 'animated music video'). Depending on your recording, you may wish to edit your audio in Adobe Audition or Audacity prior to importing it into Animate (for length, quality, or to change the pitch, etc.).

Import your audio into a layer within Animate CC and set its 'Sync' property to 'Stream.' Using the frame picker and/or auto Lip Syncing feature, apply lip syncing so that your character's mouth animates to correspond with your recorded dialogue/audio. The best lip syncing tends to be achieved manually, but the auto lip syncing feature can save time on longer sequences. If using the auto lip syncing feature, explore manually editing particular frames and/or sequences using the frame picker to refine your animation to the best of your ability. While it is only required that you illustrate the head and animate the mouth of a character, you are welcome to illustrate and/or animate other elements too if you wish (including using this exercise to explore possibilities for your Project #1 character animation).

Create a folder with the naming convention of lastname-e5 (ie. "cleveland-e5). Save your file (File > Save As) into this folder and name it with the naming convention of lastname-e5.fla (ie. "cleveland-e5.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 exercise5 folder on the MAT server. See Publishing Instructions and FTP Info for the MAT Server for detailed instructions and a video tutorial.

LINKS + 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.

SITES of INSPIRATION

> Go to Top

SPRING BREAK (3/17 - 3/22)

NO CLASS THIS WEEK

  • Go to the beach
  • Sleep
  • Step away from the computer

> Go to Top

Week 9 (3/25 + 3/27)

Topics + Learning OBJECTIVES

  • Working with Scenes
  • Working with the Camera
  • Asset Warping
  • Layer Parenting
  • Masking Effects
  • Sample Files for Class (.zip)

Required Assignments + Tasks

Recommended or OPTIONAL Tasks

VIDEO TUTORIALS

Modern Rigging and Asset Warping - Animate CC Feature

  1. Modern Rigging and Asset Warping - Bitmap Character - Part 1 (15:59)
  2. Modern Rigging and Asset Warping - Vector Monkey Character - Part 2 (18:30)

Layer Parenting - Animate CC Feature

  1. Layer Parenting (13:29)

Working with the Camera

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

Working with Scenes

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

Masking Effects

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

LINKS + RESOURCES

MAT Tutoring + Open Labs

SITES of INSPIRATION

> Go to Top

Week 10 (4/1 + 4/3)

Topics + Learning OBJECTIVES

Required Assignments + Tasks

Recommended or OPTIONAL Tasks

VIDEO TUTORIALS

Working with Bitmaps (older but still relevant)

  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)

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

  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)

Controlling MovieClips and Creating a Character Using PNG Bitmap Images (OLDER, OPTIONAL)

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

Exercise #6: Interactive Slideshow Application - Working with Bitmaps, Buttons, and Actions (Due 4/17)

Create an interactive slideshow of bitmap images.

Begin by creating a new Animate file (File > New) and selecting HTML5 Canvas as the platform type with a stage size no larger than 1280 x 720.

Import your slideshow images into your library and place them sequentially on the stage/timeline. Create buttons and add actions/interactivity that give the user some control over the slideshow. Example scripting for enabling the functionality of "Next" and "Previous" buttons is provided below and demonstrated in the tutorials. You may also wish to review Basic JavaScript Samples. Optionally, you may wish to animate your slideshow images and/or apply a mask to them. It is strongly preferred that you use your own photos for the slideshow, but you can explore working with the images from the demo by downloading them from here.

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

Add this script to frame one (and be sure to give instance names to your next and previous button instances):

var _this = this;
_this.stop();

if(!_this.next_btn.hasEventListener("click")) {
  _this.next_btn.addEventListener("click", onNext);
  _this.prev_btn.addEventListener("click", onPrev);
}

function onNext() {
  if (_this.currentFrame == _this.totalFrames - 1) {
    _this.gotoAndStop(0);
  } else {
    _this.gotoAndStop(_this.currentFrame + 1);
  }
}

function onPrev() {
  if (_this.currentFrame == 0) {
    _this.gotoAndStop(_this.totalFrames - 1);
  } else {
    _this.gotoAndStop(_this.currentFrame - 1);
  }
}

LINKS + RESOURCES

MAT Tutoring + Open Labs

SITES of INSPIRATION

> Go to Top

Week 11 (4/8 + 4/10)

Topics + Learning OBJECTIVES

  • Project #1 Finishing Touches, Scenes, Sounds, and a Title Screen
  • Inverse Kinematics and the Bone Tool

Required Assignments + Tasks

Recommended or OPTIONAL Tasks

VIDEO TUTORIALS

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

  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)

Inverse Kinematics and the Bone Tool (recommended/optional)

  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)

LINKS + RESOURCES

MAT Tutoring + Open Labs

SITES of INSPIRATION

> Go to Top

Week 12 (4/15 + 4/17)

Topics + Learning OBJECTIVES

Required Assignments + Tasks

Recommended or OPTIONAL Tasks

  • Catch up on any video tutorials and/or topics that you missed (no new video tutorials from the instructor this week)
  • Modern Rigging in Animate (Playlist from Adobe)

Project #2 - INTERACTIVE INTERFACE (Due 5/15)

Conceive, design, produce, and program (using Animate CC and HTML5/JS) an interactive user interface and/or interactive and animated information graphic using content of your choice.

Animated CC is a powerful tool for enabling interactive storytelling that can integrate media (text, graphics, animation, audio, video, etc.) and be distributed to a wide variety of platforms, including on the Web (within the browser), on the desktop (as a stand-alone executable application for an informational kiosk at a museum or library, for example), or on a mobile device (as an app for iOS or Android).

Explore such interactive media design by creating an interactive user interface with at least 3 or 4 content sections ("screens" or "pages" or "pop up, flyout, or modal content"). You should invent (or gather) your own content for the project. Your content could take the form of an interactive (mini) documentary, how-to demonstration, or tour of something. It could take the form of an animated, interactive information graphic (such an interactive map). Or, it could take the form of a more traditional website, microsite, or interactive brochure that explores an idea or topic. Content sections can include: text sections (written content), image/slideshow sections (image content), video sections (video content), info graphic sections (like maps, charts, diagrams, etc), and/or multimedia sections (content with some combination of text/video/graphics/animation/audio, etc.).

Building on your knowledge of Animate CC and as demonstrated in class tutorials, your interface design should have all the basic components of any typical interface or website, such as a header (with a logo/banner/name of the project, site or application), a navigation menu (with 3-4 rollover and/or animated buttons), page/screen identifier graphics (so we know which content section we're currently viewing), and of course, your body content (which might be textual content or graphics, photos, video or some combination).

Enable the navigation buttons on your interface to navigate to (or open/reveal) the body content/sections.

The basic user interface requirements are purposely broad so that you can adapt this assignment to your own content, creative goals, and level of expertise. However, you are encouraged to explore interactive media design and production techniques in one of several ways, such as:

  • Using animation (withing the interface, or in the transitions from section to section, and/or on buttons that animate on ROLL_OVER and ROLL_OUT).
  • Using sound (such as event/button interface sounds, background soundtracks, or by considering audio as narrative content).
  • Using video (.mp4) that dynamically loads into your interface.
  • Using pop out, flyout, or drop down items (such as on info graphics)
  • Dynamically loading your content sections (in the form of movieclips), such that you create an interface shell with section content that dynamically loads into the interface.
  • And/or whatever creative directions or production techniques that support your vision.

Begin by creating a new Animate file (File > New) and selecting HTML5 Canvas as the platform type. You can use any document size you wish, provided your interface will fit within most standard browser windows. I'd recommend a size of 1280 x 640 (which will fit within the viewport of most desktop browsers without the need to scroll).

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

Sample Code that may be useful for Scripting Navigation and Interactivity

LINKS + RESOURCES

MAT Tutoring + Open Labs

SITES of INSPIRATION

> Go to Top

Week 13 (4/22 + 4/24)

Topics + Learning OBJECTIVES

REquired Assignments + Tasks

Recommended or Optional Tasks

VIDEO TUTORIALS

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

LINKS + RESOURCES

SITES of INSPIRATION

> Go to Top

Week 14 (4/29 + 5/1)

Topics + Learning OBJECTIVES

  • Review of Project #1 Animations (continued)
  • Project #2 Demos
  • Integrating Animate with Photoshop or Illustrator
  • Adding animation and complexity to the interface and navigational system
  • Creating animated buttons and menus
  • Animated Infographics
  • Shark Demo Starter Files (.fla)

Required Assignments + Tasks

Recommended or Optional Tasks

VIDEO TUTORIALS

Adding Animations to Your User Interface (UI) Elements

  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)

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

  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)
  5. Interface Project - Production on UI Elements and Buttons (19:35)
  6. Interface Project - Adding Content Sections and Go to Frame Navigation (22:44)
  7. Additional videos (7 - 12) in this series will be posted next week

If you'd like to view older tutorials on this subject, see this playlist (but these use Actionscript/Flash and the new tutorials will use HTML5/JS as now required).

LINKS + RESOURCES

SITES of INSPIRATION

> Go to Top

Week 15 (5/6 + 5/8)

Topics + Learning OBJECTIVES

  • Project #2 Demos (continued)
  • Adding animation and complexity to the interface and navigational system
  • Integrating Animate with Photoshop or Illustrator
  • Using Video witin Animate Canvas/HTML5 Projects

Required Assignments + Tasks

Recommended or Optional Tasks

VIDEO TUTORIALS

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

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

Using Video witin Animate Canvas/HTML5 Projects

  1. Video within HTML5 Canvas - Components and Controls (16:56)

LINKS + RESOURCES

SITES of INSPIRATION

> Go to Top

Week 16 (5/13 + 5/15)

Topics + Learning OBJECTIVES

  • Project #2 Review
  • Focus on Your Final Project
  • Exporting and Publishing Animate Content
  • Publishing Options and Formats

Required Assignments + Tasks

  • Complete Project #2 (due 5/15)
  • Focus on your Final Project (due 5/22)
  • Catch up on anything you've missed or haven't turned in (by 5/23)

Recommended or Optional Tasks

VIDEO TUTORIALS

Publishing and Deploying Animate Content (OPTIONAL)

  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)

LINKS + RESOURCES

> Go to Top

Finals Week (5/22 at 11 am)

For FINALS WEEK, WE WILL MEET ON CAMPUS ON THURSDAY, 5/22, from 11:00 am - 12:50 pm in OC28103.

There is no class on Tuesday, 5/20, but I will have extended office hours that day.

Required Assignments + Tasks

The final day to turn in any work for grading consideration is Friday, 5/23. i cannot accept any late work beyond this date.

> Go to Top