KCC New Media Arts - Chris Gargiulo's Faculty Web Site

Kapi‘olani Community College, University of Hawai‘i - NMA Interface Design

ART 257

Motion Graphic Design

Design in Motion

Motion Graphic Design introduces 2D animation using Adobe Flash to add the element of time to basic graphic design principles. Students learn the basics of 2D animation techniques for web-based applications.

Motion Graphic Design

An Introduction and Course Overview

Motion Graphic Design is a broad field that includes motion graphics for film, television, and the web. In its most basic form, it is graphic design with the addition of time and audio. Depending upon the medium, context, and style, the technologies for motion graphics production vary. As mediums converge and technologies evolve, the means may change, but the underlying principles of animation and motion graphics remain the same.

In this class we will learn the basics of motion graphic design by creating animations for the web using Adobe Flash. During the first few weeks of the semester we will explore core animation principles such as squash and stretch, timing, and easing (slow in/out). Topics and assignments will range from kinetic typography, or type in motion, to commercial interstitials, promotions, and advertisements. Techniques will range from basic keyframe animation to advanced masking. During the second half of the semester, we will go through the full design process of planning, designing, and animating one large-scale motion graphics piece.

Major Assignments

Overview of the Major Projects for this Course.

Assignment: Week: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Due:
1. Bouncing Ball Week 2
2. Type in Motion Week 5
3. FINAL Motion Project Week 16

Calendar

A monthly overview of the semester

Lessons

A Week-by-Week Breakdown

Click on the top bar for each week to expand or collapse the contents, or you can expand all weeks or collapse all weeks.

Week 1: Intro to the Course

Agenda:

  1. Introduction to the course
    • In this class we will learn the basics of animation by going through the full design process for motion graphics, specifically geared for the web.
  2. Introduction to the two major projects in this course:
    1. Typography in Motion (Kinetic Typography)
    2. FINAL Motion Graphic Design Project

Presentation:

Class Overview - Going Through The Full Design Process for Motion Graphic Design Design:

Class examples + related links:

Assignment: Due: Week 2

  1. Set up your class web page.
  2. Animate your 10 Sec. Bouncing Ball Assigment.
Week 2: Animation Basics - Bouncing Ball Animation Due

Agenda:

  1. We will take a look at the bouncing ball animations and review tweening in Flash along with the basic animation principles of squash and stretch, timing, and slow-in and slow-out (easing).
  2. Intro to your next assignment: Kinetic Typography (Type in Motion)
  3. More Flash Tips & Techniques: Rotation, Adding Sound, & Masking.

Presentation:

Class examples + related links:

Assignment: Kinetic Typography - Type in Motion Due: Week 5

  1. Choose a few sentences from anywhere you like (a line from a book, a quote from a speech, a line from a movie, a line from a song, etc.) or make up your own.
  2. Then bring the words to life by animating them in Flash.
  3. Suggestion: start with your audio. Convert your audio file(s) to mp3. Use your audio to set the pacing and timing of the animation.
  4. Consider creating a 15 second advertisement or TV spot, with tagline, logo and possibly a call-to-action (e.g. a button) at the end.
Week 3: Typography in Motion
Week 4: Typography in Motion
Week 5: Typography in Motion - Final Version Due

Agenda:

  1. In-class critique of the Typography in Motion projects.
  2. Lesson: the cinematic pre-production process.
    • What is a logline? synopsis? treatment? shot list? script? storyboard?
  3. Lesson: storyboarding.
  4. Intro the the final project.
  5. In-class work time to start thinking about your final project.

Class examples + related links:

Final: Motion Design Project [FINAL]Due: Week 16

  1. Start by doing lots of research. Identify a client and product. Figure out the context (will this be a promo animation found on the home page of a new company's web site? or will this be an animated banner ad found on the right hand side of espn.com?) Define the target audience. What is the primary objective? What are some potential conceptual ideas?
  2. Start thinking about the audio as early as possible. Gather potential mp3 files.
  3. Write up a brief description and outline (consider writing a logline, synopsis, treatment, script, etc.) to help to develop a shot list that will enable you to begin storyboarding.
  4. Graded progress of the design process will be due weekly. Project ideas are due next week. Storyboards are due in two weeks, and a animated story reel will be due two weeks after that, so start storyboarding now if you know your idea.
Week 6: Motion Graphic Design Project - Intro

Agenda:

  1. Brainstorm session on project ideas.
  2. Lesson: what is a story reel/animatic?
  3. In-class work time to storyboard.

Class examples + related links:

Final: Motion Design Project [FINAL]Due: Week 16

  1. At the end of this week you should have your project idea. Please write up a brief description and post it on your class web page, along with any other supplemental pre-production documentation that you may have created, such as a script/outline/treatment/shot list/etc. - please post these in one document (pdf) on your class web site as a creative brief.
  2. Continue working on your storyboards - which are due next week.
Week 7: Motion Graphic Design Project - Brief & Storyboards Due

Agenda:

  1. In-class wall critique of storyboards.
  2. In-class work time for story reel/animatic development.

Class examples + related links:

Final: Motion Design Project [FINAL]Due: Week 16

  1. Use the elements from your storyboard to pre-visualize your final project set to time with audio by creating a story reel/animatic.
  2. As you begin to narrow and define your visual style, conduct multiple animation tests to ensure that you can technically and conceptually execute your vision.
  3. Story reels and visual tests are due in 2 weeks (week 9).
Week 8: Motion Graphic Design Project

Agenda:

  1. In-class work time for story reel/animatic development and visual tests.
  2. Demo: animated masks, bones, & 3D

Class examples + related links:

Final: Motion Design Project [FINAL]Due: Week 16

  1. Continue working on your story reel/animatic.
  2. By now you should have a Flash file setup with 1) digitized storyboard content (sketches) and 2) stand-in audio (temporary is ok).
    • Digital storyboard content - you may need to redraw elements and backgrounds that will be animated during the animatic, such as larger backgrounds to show camera movement, or individual objects that will be animated.
    • Audio - you should also have a preliminary audio track with temporary/stand-in music and/or voice narration and sound effects. Use your own voice for now for any voice over.
  3. You should also be conducting as many preliminary animation tests as needed in order figure out how you will execute your motion graphics. Depending upon the results of these early tests, you should be making adjustments and refinements to your visual style.
  4. Story reel/animatic and visual tests are due next week.
Week 9: Motion Graphic Design Project - Story Reel & Tests Due

Agenda:

  1. Animatic/Story Reel/Visual Tests Critique
  2. Lessons:
    • How to insert Flash into HTML using SWFObject.
    • How to record high audio.

Class examples + related links:

SWFObject

Final: Motion Design Project [FINAL]Due: Week 16

  1. By now you should have figured out exactly what visual style and animation techniques you will use to execute your project.
  2. You should be starting your first draft with final quality graphics and final audio. Take advantage of the in-class work time to ask for help.
  3. NOTE: 1st round drafts should be complete, with the beginning, middle, and end for the full time/duration of the piece. In other words, the first 5 seconds of a 30 second animation is not acceptable. All shots, scenes, graphics, and audio should be included in the 1st draft.
  4. For those who did not create a shot list, you may want to consider doing so to help in planning and mapping out your time management. This may help to ensure that you will have a completed first draft in two weeks.
  5. 1st round drafts are due in two weeks!
Week 10: Motion Graphic Design Project

Agenda:

  1. Full Work Week

Final: Motion Design Project [FINAL]Due: Week 16

  1. Continue working on your 1st drafts of your animation. Take advantage of the in-class work time to ask for help.
  2. 1st round drafts are due next week!
Week 11: Motion Graphic Design Project - 1st Drafts

Agenda:

  1. Critique of 1st round drafts.
    • 5-10 minutes per person.

Final: Motion Design Project [FINAL]Due: Week 16

  1. Use the feedback from the critique to make the appropriate changes to your project.
  2. Continue working on your animation. Take advantage of in-class work time.
  3. Any questions that do not get addressed in class, please post to Laulima or email Chris and he will do his best to answer as soon as he can.
  4. By now you should have a complete draft with a beginning, middle, and end with final quality graphics and final audio. Your goal for the next draft is to improve upon it, make any necessary revisions/edits, enhance the graphics/sound/motion, fix all parts/sequences that aren't working well, and elevate the overall production quality to match that which one might see produced by the industry.
  5. 2nd round drafts are due in two weeks.
Week 12: Motion Graphic Design Project

Agenda:

  1. Full Work Week
    • In-class work time during class. Additional support availible from Chris via Laulima and email.

Class examples + related links:

Final: Motion Design Project [FINAL]Due: Week 16

  1. Continue working on your animation. Take advantage of the in-class work time to ask for help/feedback from Ailed. Any questions that do not get addressed in class, please post to Laulima or email Chris and he will do his best to answer as soon as he can.
  2. By now you should be in the middle of production, reworking parts that need improvement or were not working before.
  3. 2nd round drafts are due next week.
Week 13: Motion Graphic Design Project - 2nd Drafts

Agenda:

  1. Critique of 2nd round drafts.
    • 5-10 minutes per person.

Final: Motion Design Project [FINAL]Due: Week 16

  1. Use the feedback from the critique to make the appropriate changes to your project.
  2. Continue working on your animation. Take advantage of in-class work time.
  3. Any questions that do not get addressed in class, please post to Laulima or email Chris and he will do his best to answer as soon as he can.
  4. By now you should have a solid draft that is almost ready to go live. Finishing touches, sound design, and advanced easing are all common polishes that could help to elevate the overall production quality to match that which one might see produced by the industry.
  5. Starting this week you should begin the design of the html page that you host your motion graphics animation.
  6. 2nd round drafts are due in two weeks, to be displayed on the html page that you are designing/coding.
Week 14: Motion Graphic Design Project

Agenda:

  1. Full Work Week
    • In-class work time during class. Additional support availible from Chris via Laulima and email.

Final: Motion Design Project [FINAL]Due: Week 16

  1. Continue working on your animation. Take advantage of the in-class work time to ask for help/feedback from Ailed. Any questions that do not get addressed in class, please post to Laulima or email Chris and he will do his best to answer as soon as he can.
  2. By now you should be pretty much done with production, and are now adding the finishing touches and coding the html page that will be displaying your animation.
  3. 3rd round drafts are due next week, to be displayed on the html page that you are designing/coding.
Week 15: Motion Graphic Design Project - 3rd Drafts

Agenda:

  1. Informal 3rd round critique.
  2. Lessons: Simple Flash banner ad, replay button, exporting to video from Flash
  3. Last work week. In-class work time to continue animating. One-on-one support during class.

Class examples + related links:

Exporting video from Flash:

Three Different Animated Banner Ads:

Simple Flash Replay button:

AS3 Coding: Replay Button

import flash.events.MouseEvent;

stop();

b_replayButton.addEventListener(MouseEvent.CLICK, replay);

function replay(event:MouseEvent):void {
	gotoAndPlay(1);
}

Final: Motion Design Project [FINAL]Due: Week 16

  1. Continue working on your animation. Take advantage of the in-class work time to ask for help.
  2. By now you should be 99% done, focusing on post-production tasks such as fine-tuning the editing (ie. pace), adding/re-recording sound effects, refining/polishing any underdeveloped scenes, etc.)
  3. Final versions are due at next week's critique.
Week 16: Motion Graphic Design Project - [FINAL]

Agenda:

  1. Final Critique
Tuesday Thursday Time
---------- SETUP ---------- 8:00-8:15
#1 #8 8:15-8:25
#2 #9 8:30-8:40
#3 #10 8:45-5:55
#4 #11 9:00-9:15
---------- 15 Min. BREAK ---------- 9:15-9:25
#5 #12 9:30-9:40
#6 #13 9:45-9:55
#7 #14 10:00-10:10
---------- CLOSING REMARKS ---------- 10:15-10:30

Final: Motion Design Project [FINAL]Due: Week 16

  1. This is the last week of class; all projects are due at the beginning of the first critique class meeting this week.

Assignment: RevisionsDue: Week 17

  1. For those hoping to make revisions to any assignments from this class, you have one week from the last day of class to submit changes/revisions. If you do this, be sure to post all revisions on your class web page and email me prior to 8am on Thurs. Dec. 15th so that I can go back and adjust your grade accordingly. If I do not receive an email from you indicating that you made updates, then your grade will be based upon what you handed in as of the last day of class.

Quotes

Random quotes that are relavent to this class

"Today a seasoned broadcast designer is expected to command a baffling array of professional abilities that include, among others, the typographic chops of a print designer, the motion and timing smarts of an animator, the stylistic rendering talents of an illustrator, the narrative skills of a writer or editor, the music sensibilities of a composer and the cinematic and live-action directing abilities of a filmmaker."

- Dan Pappalardo, Troika Design Group
From the book Motion by Design.

↑ back to the top ↑