Motion Graphic Design
Motion Graphic Design introduces the basic principles of animation using the elements of graphic
design. Geared mainly toward applications for the web, students in this course work on projects
that combine elements of shape, image, typography, and sound in time-based media.
"Motion-graphics design is not a single discipline. It is a convergence of animation,
illustration, graphic design, narrative filmmaking, sculpture, and architecture, to name
only a few."
- Matt Woolman, Associate Professor and Chair of the Department of Graphic
Design Program at Virginia Commonwealth University School of the Arts
From the book Motion design: moving graphics for television, music video, cinema,
and digital interfaces
"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.
SYLLABUS & GRADESHEET:
MAJOR ASSIGNMENT LIST:
| 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:
WEEKLY SCHEDULE + DIGITAL ASSETS:
Click on the top bar for each week to expand or collapse the contents, or you can expand all weeks or collapse all weeks.
Agenda:
- 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.
- Introduction to the two major projects in this course:
- Typography in Motion (Kinetic Typography)
- 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: Week2
- Set up your class web page.
- Animate your 10 Sec. Bouncing Ball Assigment.
Agenda:
- 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).
- Intro to your next assignment: Kinetic Typography (Type in Motion)
- More Flash Tips & Techniques: Rotation, Adding Sound, Masking, & Motion
Guides (time permitting)
Presentation:
Class examples + related links:
Assignment: Kinetic Typography - Type in MotionDue:
Week5
- 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.
- Then bring the words to life by animating them in Flash.
- Suggestion: start with your audio. Convert your audio file(s) to mp3. Use your audio
to set the pacing and timing of the animation.
Agenda:
- Lessons: Line animation techniques, text animation techniques, and an intro to
storyboarding.
- In-class work time to work on your kinetic type assignment.
Presentation:
Class examples + related links:
Assignment: Kinetic Typography - Type in MotionDue:
Week5
- Continue working on your Kinetic Typography animation.
Agenda:
- Lessons: Shape hints, motion guides, and animating gradients.
- In-class work time to work on your kinetic type assignment.
Class examples + related links:
Assignment: Kinetic Typography - Type in MotionDue:
Week5
- Finish your Kinetic Typography animation.
Agenda:
- In-class critique of the Typography in Motion projects.
- Lesson: the cinematic pre-production process.
- What is a logline? synopsis? treatment? shot list? script? storyboard?
- Lesson: storyboarding.
- Intro the the final project.
- In-class work time to start thinking about your final project.
Class examples + related links:
Final Assignment: Motion Design Animation Project [FINAL]Due: Week 16
- Choose a format (title sequence, logo animation, experimental animation, flash
intro, music video, short film, etc.).
- Start by doing lots of research. Figure out the target audience. What is the primary
objective? What are some potential conceptual ideas?
- Start thinking about the audio as early as possible. Gather mp3 files.
- 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.
- 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/animatic will be
due two weeks after that, so start storyboarding now if you know your idea.
Agenda:
- Brainstorm session on project ideas.
- Lesson: what is a story reel/animatic?
- In-class work time to storybaord.
Class examples + related links:
Final Assignment: Motion Design Animation Project [FINAL]Due: Week 16
- By now you should have a working script/outline/treatment/shot list/etc. - please
post these in one document (pdf) on your class web site as a creative brief.
- Continue working on your storyboards.
- Storyboards are due next week.
Agenda:
- In-class wall critique of storyboards.
- Lesson: what is a story reel/animatic?
- In-class work time for story reel/animatic development.
Class examples + related links:
Final Assignment: Motion Design Animation Project [FINAL]Due: Week 16
- Use the elements from your storyboard to pre-visualize your final project set to
time with audio by creating a story reel/animatic.
- Story reels are due next week (week 8).
Agenda:
- Quick critique of the story reels/animatics
- Lesson: more on animated masks
Class examples + related links:
Final Assignment: Motion Design Animation Project [FINAL]Due: Week 16
- Continue working on your animation.
- By now you should have your primary audio track and you should be in the process of
creating all graphical assets.
- You should 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.
- 1st round drafts are due in three weeks. Do not wait three weeks to get started!
Agenda:
- FULL WORK WEEK!
- Class is optional on Thursday. I will be in Kopiko 202 to help students out 1-1.
Final Assignment: Motion Design Animation Project [FINAL]Due: Week 16
- Continue working on your animation. Take advantage of the in-class work time to ask
for help.
- By now you should have already conducted several animation tests and have figured
out exactly what technology and techniques you will use to animate your project.
- You should be starting your first draft with final quality graphics and final audio.
- 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 15
second animation is not acceptable. All shots, scenes, graphics, and audio should be
included in the 1st draft.
- For those who did not create a shot list, you may want to consider doing so to help
in plannig and mapping out your time management. This may help to ensure that you
will have a completed first draft in two weeks.
- 1st round drafts are due in two weeks!
Agenda:
- Lesson: How to place Flash (.swf) into HTML using SWFObject
- In-class work time to continue coding. One-on-one support during class.
Class examples + related links:
Final Assignment: Motion Design Animation Project [FINAL]Due: Week 16
- Continue working on your animation. Take advantage of the in-class work time to ask
for help.
- By now you should be making strong progress on your first draft with final quality
graphics and final audio.
- 1st round drafts are due next week!
Agenda:
- Critique of 1st round drafts
- In-class work time. One-on-one support during class.
Final Assignment: Motion Design Animation Project [FINAL]Due: Week 16
- Use the feedback from the critique to make the appropriate changes to your project.
- Continue working on your animation. Take advantage of the in-class work time to ask
for help.
- By now you should have a complete draft with a beginning. middle, and end with final
quality graphics and final audio.
- 2nd round drafts are due in two weeks.
Agenda:
- Lesson: Nesting Movie Clips & Animating Complex Compositions
- In-class work time. One-on-one support during class.
Class examples + related links:
Final Assignment: Motion Design Animation Project [FINAL]Due: Week 16
- Continue working on your animation. Take advantage of the in-class work time to ask
for help.
- By now you should be in the middle of production, completing all unfinished scenes
and reworking sections/graphics that were not working before.
- 2nd round drafts are due next week.
Agenda:
- Finish the Nesting Movie Clips & Animating Complex Compositions Lesson
- In-class work time. One-on-one support during class.
Final Assignment: Motion Design Animation Project [FINAL]Due: Week 16
- Continue working on your animation. Take advantage of the in-class work time to ask
for help.
- By now you should be have a mature, working draft that clearly demonstrates the
visual style, timing, and overall narrative of the piece.
- 2nd round drafts are due this week.
Agenda:
- Full work week. In-class work time to continue animating. One-on-one support during
class.
- ----- [ no class on Thursday (Thanksgiving) ] -----
Final Assignment: Motion Design Animation Project [FINAL]Due: Week 16
- Continue working on your animation. Take advantage of the in-class work time to ask
for help.
- By now you should be almost done with the bulk of the production for your final
project. You should be focusing on post-production (editing, adding sound effects,
refining/polishing scenes, etc.)
- 3rd round drafts are due next week.
Agenda:
- Informal 3rd round critique.
- Lessons: Simple Flash banner sd, replay button, review of exporting to video from
Flash
- Full work week. In-class work time to continue animating. One-on-one support during
class.
AS3 Coding: Replay Button
import flash.events.MouseEvent;
stop();
b_replayButton.addEventListener(MouseEvent.CLICK, replay);
function replay(event:MouseEvent):void {
gotoAndPlay(1);
}
Final Assignment: Motion Design Animation Project [FINAL]Due: Week 16
- Continue working on your animation. Take advantage of the in-class work time to ask
for help.
- 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.)
- Final versions are due next week.
Agenda:
- Final Critique
Final Assignment: Motion Design Animation Project [FINAL]Due: Week 16
- This is the last week of class; all projects are due at the beginning of the
critique class meeting this week.