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

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

ART 222

Digital Multimedia

Digital Video and more

Digital Multimedia introduces digital video editing and motion graphics design for film, television, and the web. The full production process for time-based media is explored using Adobe Premiere, After Effects, Audition, and Encore.

Digital Multimedia

An Introduction and Course Overview

Multimedia can be defined as image + text + sound. Today's designers often need to integrate video and advanced motion graphics into web projects requiring a foundation in the production process for time-based works of digital multimedia.

This class provides studio experience in multimedia concepts and techniques through the creation of time-based works of art. During the first few weeks of the semester students learn the basics of video production using digital camcorders, video editing using Adobe Premiere, sound design using Adobe Audition, intermediate motion graphic design using Adobe After Effects, and DVD authroing using Adobe Encore. During the second half of the semester, students go through the full creative process of pre-production, production, and post-production creating a time-based work of digital multimedia.

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 17 Due:
1. Video Project Week 6
2. FINAL: Synopsis Week 7
3. FINAL: Storyboard Week 8
4. FINAL: Story Reel Week 11
5. FINAL: R1 Draft Week 14
6. FINAL: R2 Draft Week 15
7. FINAL: DVD+Site Week 17

Calendar

A monthly overview of the semester

Lessons

A Week-by-Week Breakdown

1 Intro to the Course Expand/Collapse

Week 1: This week we will go over the course and the major assignments and deliverables. Lessons include an intro to the creative design & production process for time-based multimedia.

Agenda:

  1. Introduction to the course
    • In this class we will go through in detail the design process of planning and designing time-based works of digital multimedia.
  2. Game plan for the semester
    • Overview of the syllabus
    • two projects, one small, one large
  3. We will take a look at student work from past years.
  4. Intro to video editing with Adobe Premiere.

Presentation:

Class Overview - The Design Process for Time-Based Media:

Class examples + related links:

Video Modal Window Examples:

Product Video Examples:

Web Site Features Video Examples:

Related Articles:

Other Related Resources:

Lessons:

Assignment: Video AssignmentDue: Week 6

  1. Set up your class web page.
  2. Watch the Intro to Premiere video lesson above.
  3. Go to the Adobe TV web site and view the intro lessons on Adobe Premiere.
  4. Skim the Adobe DV primer posted above.
  5. Start thinking about concept ideas for your video project.
2 Intro to Digital Video Expand/Collapse

Week 2: We will continue where we left off last week learning the basics of video editing in Adobe premiere including more advanced options such as using keyframes for simple animation inside of Premiere.

Agenda:

  1. Lessons:
    • More control options for clips on the timeline (ie. keyframes)
    • In-class demo of equipment
    • Some ideas/options for your video assignment

Class examples + related links:

Assignment: Video AssignmentDue: Week 3

  1. Familiarize yourself with the NMA stock video collection and audio library.
  2. Begin planning your video project. Start by writing down potential ideas, then come up with a concept to execute. Prepare to shoot your own video.
3 Video Production Expand/Collapse

Week 3: We will demo equipment in class and introduce topics such as framing & composition, depth of field, and recording audio with various microphones. We will also begin signing out equipment for your video project.

Agenda:

  1. In-class demo of equipment

Class examples + related links:

Assignment: Video ProjectDue: Week 6

  1. Familiarize yourself with the NMA copyright/royalty free stock video and audio collection.
  2. Sign out DV equipment as needed.
  3. Continue working on your Video Assignment project.
4 Video Production Expand/Collapse

Week 4: Work week to dedicate time toward your video project. In-class time for 1-on-1 supprt and feedback. Short lessons on the production process for DV.

Agenda:

  1. Work Week: to continue working on your video project.
  2. Lesson: The Full DV Production Process
    1. Pre-Production
      • planning, writing, storyboarding
        • logline
        • synopsis
        • outline
        • treatment
        • script
        • shot list
        • storyboard
        • story reel/animatic
    2. Production
      • the shoot (using a tripod, setting up camera settings, lenses, lighting)
    3. Post-Production
      • logging & capture (digitizing/transferring the video from media to the computer)
      • editing & adding effects (ie. duration, speed, color correction)
      • sound design/adding audio
      • distribution/exporting video clips as mp4
      • authoring/burning a dvd
  3. Mini-lessons: how to change the duration & speed of video in Premiere, intro to 3-point lighting & chiarascuro.

Class examples + related links:

Assignment: Video ProjectDue: Week 6

  1. If you haven't done so already, you should be shooting video and capturing/logging it this week.
  2. If you haven't done so already, you should already have the basic framework of your project in Premiere, and in the process of putting together an initial rough cut/1st draft.
5 Intro to After Effects Expand/Collapse

Week 5: Work week to complete your video project plus an introduction to After Effects. In addition to some in-class working time, we will begin learning how to create more advanced motion graphics using Adobe After Effects.

Agenda:

  1. Work week: work on your video projects.
  2. Lesson: Intro to After Effects
    • Introduction to the AE interface & Workflow
    • Working with Compositions and common AE panels
    • Rendering and exporting from AE

Class examples + related links:

Assignment: Video ProjectDue: Week 6

  1. Watch all of the above Adobe TV video lessons on After Effects.
  2. By now you should be done with your principal production of your video project (gathering music + video, shooting video, recording audio, etc.) and working on your editing, sound design, and over-all polish (post-production).
  3. Please post your final video file as a .mp4 (H264) on your class web page for Tuesday's class next week.
6 Time-based Multimedia Project Expand/Collapse

Week 6: Critique of the video project. After the critique we will continue our After Effects Lessons and tests including the basics (translation, rotation, and scale) and some text animation techniques.

Agenda:

  1. Critique: video projects
  2. Intro to Final Project
    • Review of the Pre-production Process
      • logline » synopsis » outline » treatment » script » shot list » storyboard » story reel/animatic
    • What is a synopsis?
      • A synopsis is a brief summary/plot breakdown of a story. Typcially it should be no longer than one to two pages (often cases a few paragraphs will suffice). Where a logline/tagline summarises the story in one sentence, and a treatment shows more of a scene-by-scene outline of a film, the synopsis lies somewhere in between and is often requested to explain time-based media projects.
    • What is the purpose?
      • To define and communicate your conceptual idea concisely before you begin production.
  3. Lesson:
    • After Effects Basics
    • Text Animation Techniques in After Effects

Class examples + related links:

Assignment: Final Project - SynopsisDue: Week 7

  1. Write up a synopsis describing your final project idea. Consider beginning some of the other pre-production planning steps such as writing up an outline, a treatment, a script, and a storyboard.
  2. Post your synopsis online on your class web page (ie. in pdf format).

Assignment: Time-based Multimedia ProjectDue: Week 17

  1. Start thinking of project ideas for your final.
  2. Heads up: Next due dates are Week 8 (treatment) and Week 10 (tests/story reel) [MIDTERM CRITIQUE]
    • MIDTERM critique deliverables:
      1. Visual Tests - be prepared to show a series of visual tests as evidence of your design process.
      2. Story Reel - put your treatment/storyboard into motion and add preliminary music to create a time-based piece that demonstrates the full story (beginning, middle, and end).
7 Time-based Multimedia Project Expand/Collapse

Week 7: Brainstorm sessions to help figure out the client and conceptual direction of your final projects. We will also learn some different line animation techniques in After Effects.

Agenda:

  1. Brainstorm: final project ideas
  2. Continuing the Final Project
    • Review of the Pre-production Process
      • logline » synopsis » outline » treatment » script » storyboard » story reel/animatic
    • What is a storyboard?
      • The definition and depth varies - all depending upon the project and the director, but in most cases a storyboard consists of cinematically framed sketches designed to quickly communicate a scene-by-scene, shot-by-shot visual outline of a time-based work. The visual frames are often accompanied by written text explaining the directorial action, key story points, or dialogue of a particular scene. In our case, you must describe the full story, or concept, of your intended piece. Depending upon your project, you might want to consider drafting a treatment, which one can define as a more loosely structured storyboard. Depending upon the director and project, a treatment can consist of text alone or a combination of visual sketches and written text in a story/paragraph format, or it could be a series of sketches with supplemental text, much like a storyboard. It can also be experimentally crafted, ie. a visual map with accompanying text or legend, or any combination of any of the above or other method that communicates the full story/concept of the project.
    • What is the purpose?
      • To write-out your idea before you begin production.
      • To define the scope of your project (how much time it will take to produce, duration of final product, etc.).
      • To establish a conceptual framework and a game plan that you can stick to over the next couple of weeks.
  3. Lesson:
    • Line Animation Techniques in After Effects

Class examples + related links:

Assignment: Final Project - StoryboardDue: Week 8

  1. Write up a detailed storyboard that visually communicates your project. Include text to help accompany the visual sketches.
  2. Post your storyboard online on your class web page (ie. in pdf format).

Assignment: Time-based Multimedia ProjectDue: Week 17

  1. Consider also creating other pre-production elements such as a detailed outline, a shot list, character/scene sketches, a full written script, and a treatment.
  2. Start conducting a series of visual tests to determine the visual style of your final piece. Be prepared to show some visual tests to me in the coming weeks.
  3. Heads up: Next due date is Week 10 [MIDTERM CRITIQUE]
    • MIDTERM critique deliverables:
      1. Visual Tests - be prepared to show a series of visual tests as evidence of your design process.
      2. Story Reel - put your treatment/storyboard into motion and add preliminary music to create a time-based piece that demonstrates the full story (beginning, middle, and end).
8 Time-based Multimedia Project Expand/Collapse

Week 8: Storyboard Critique plus lessons on 3D in After Effects using parented layers and navigating with custom cameras in a 3D space.

Agenda:

  1. Informal review of final project ideas to date (synopsis + storyboard).
  2. Continuation of After Effects tips & tricks.

Class examples + related links:

Assignment: Final Project - Story ReelDue: Week 11

  1. Start working on your Story Reel/Animatic.
  2. Each person's story reel may be slightly different than others. The purpose of the story reel is to provide a time-based framework/test run of the full piece (beginning, middle, and end) that can act as an early look at the timing, pacing, and general tone of the piece. At the very least, a story reel should have a full audio track for the full duration of the piece and visuals of sketched storyboard frames (some may have parts in motion) to communicate the story.

Assignment: Time-based Multimedia ProjectDue: Week 17

  1. Conduct as many tests in After Effects as you can, then place small versions of your tests into an html page using HTML5 video and MediaElement.js. See John Doe's AE Tests for an example.
  2. Heads up: Next due date is Week 10 [MIDTERM CRITIQUE]
    • MIDTERM critique deliverables:
      1. Visual Tests - be prepared to show a series of visual tests as evidence of your design process.
      2. Story Reel - put your treatment/storyboard into motion and add preliminary music to create a time-based piece that demonstrates the full story (beginning, middle, and end).
9 Time-based Multimedia Project Expand/Collapse

Week 9: Continue lessons on 3D in After Effects and how to display video on an HTML web page via HTML5 that is cross-platform, cross-browser, and backward compatible.

Agenda:

  1. Final Project midterm goals + plans for Spring Break
    • Things that you should be working on include:
      • Mandatory:
        • The story reel! (due in two weeks)
        • Visual Tests to determine a) your visual style (including a typography exploration) and b) your animation style
      • Recommended:
        • Writing an exact/final script (for any dialogue, voice over, or text that will animate, such as the tag line).
        • Consider doing a full outline, shot list, and full storyboard.
        • If you haven't done so already, you should be creating all assets (graphics, vector versions of the logo, etc.)
        • Audio, Audio, Audio! You should have identified your primary audio/music by now. If you will be using voice over, do a recording of your voice as stand-in audio for your story reel.
        • Start your first draft.
  2. Lessons
    • HTML5 lesson: how to place video into html via MediaElement.js.
    • How to put together a story reel.
    • Cut-out style animation.
    • Intro to AE Expressions: Wiggle

Class examples + related links:

Assignment: Final Project - Story ReelDue: Week 11

  1. Continue working on your Story Reel. Be prepared to post your story reel on your class web page using HTML5 video and MediaElement.js.
  2. Conduct as many tests in After Effects as you can, then place small versions of your tests into an html page using HTML5 video and MediaElement.js. See John Doe's AE Tests for an example.

Assignment: Time-based Multimedia ProjectDue: Week 17

  1. AE Tests:
    • Complete your 3D-in-AE tests, then place your mp4 video into an html page on your AE Tests page using HTML5 video and MediaElement.js.
    • Do a cut-out animation (Guinness Commercial) and wiggle test in After Effects, then place your mp4 file into an html page on your AE Tests page.
  2. FINAL PROJECT: Continue working on your final project. Be prepared to present your story reel and all pre-preproduction development in-class in a critique-style format in two weeks.
    • Pretend as if you are an ad agency and the client would like a mid-project report on what the design agency will be creating.
    • Be prepared to present any and all pre-production documentation
      • An updated synopsis and treatment is mandatory.
      • A full script, outline, shot list, and storyboard are helpful, but optional.
      • Post any visual tests that you have conducted to date. If you have not yet conducted any tests, post style examples for us to visualize what style animation you may be considering for your final project.
    • 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 and visual style tests are due in two weeks (week 11).
10 Time-based Multimedia Project Expand/Collapse

Week 10: Continue lessons in After Effects. Full work week for the final project to preparation for the midterm critique (story reel + visual tests) and first-round draft.

Agenda:

  1. Work Week
    • Work on your final project. Story reel and visual tests are due next week. First round drafts are due soon after spring break, so be sure to start your first round draft and plan accordingly.
    • In-class working time. Be sure to take advantage of in-class 1-1 support.
  2. After Effects Lessons:
    • Brief overview of last week's lessons: cut-out style animation and wiggle.
    • More After Effects: Motion Tracking, Puppet Tool, and more.
  3. Flash Video Lesson:
    • Brief Overview of Flash Video (advantages and disadvantages).
    • Playing multiple videos in one Flash video component.

Class examples + related links:

Assignment: Final Project - Story Reel/TestsDue: Week 11

  1. Complete your Story Reel, if you haven;t done so already. Post your story reel on your class web page using HTML5 video and MediaElement.js.
  2. Conduct as many visual tests as you can and posts these tests for review next week. If you are posting any video files as tests, be sure to place your tests into an html page using HTML5 video and MediaElement.js. See John Doe's AE Tests for an example.

Assignment: First Round DraftDue: Week 14

  1. If you haven't done so already, please begin working on your first round draft.

Assignment: Time-based Multimedia ProjectDue: Week 17

  1. Continue working on your final project.
  2. Be sure to begin thinking about the three components of your final project:
    1. Final Video (exported as either .mov, .avi, or .mp4).
    2. Final Video inside of a Web Interface (ie. a HTML microsite/micropage).
    3. Custom DVD Interface with Menu (that contains all of your class video projects).
11 Mid-term Critique Expand/Collapse

Week 11: Midterm Critique. We will take a look at the story reels and visual tests, then provide feedback to move to the next step: 1st round drafts of the final project.

Agenda:

  1. Final Project Story Reel Critique
    • Approx. 10 minutes per person.
    • Order will be determined at 8am each class with an order sign-up on the white board.
    • Further feedback should be provided for your peers via Laulima under each persons's final project discussion area.

Class examples + related links:

Assignment: Time-based Multimedia ProjectDue: Week 17

  1. Over the break continue working on your final project by working on your first round draft. Consider making changes to your project that were suggested during the midterm critique.
12 Spring Break Expand/Collapse

Week 12: Spring Break. No class this week due to the break. Use this week off to relax, take care of yourself, play catchup, or go ahead to begin your final project. Be sure to backup all of your work to date.

  • ----- [ NO CLASS - SPRING BREAK ] -----
13 Time-based Multimedia Project Expand/Collapse

Week 13: Intro to Encore and how to create a Custom DVD. Continue working on your first drafts. In-class working time will be availible and 1-on-1 support.

Agenda:

  1. Intro to Encore & how to create a custom DVD interface.
  2. In-class working time. Be sure to take advantage of in-class 1-1 support.

Class examples + related links:

Assignment: First Round DraftDue: Week 14

  1. Please bring in a first round draft to class next week for an informal critique.

Assignment: Time-based Multimedia ProjectDue: Week 17

  1. Continue working on your final project.
  2. Be sure to be working on all three components of your final project:
    1. Final Video (exported as either .mov, .avi, or .mp4).
    2. Final Video inside of a Web Interface (ie. a HTML microsite/micropage).
    3. Custom DVD Interface with Menu (that contains all of your class video projects).
14 Time-based Multimedia Project Expand/Collapse

Week 14: Review of the 1st drafts plus brief lessons how to improve your audio using Audition and how to use video modal boxes.

Agenda:

  1. In-class review of 1st round drafts.
  2. In-class working time. Be sure to take advantage of in-class 1-1 support.
  3. Lesson: Brief Overview of Adobe Audio Tools
  4. Lesson: Video Modal Boxes

Class examples + related links:

Assignment: Second Round DraftDue: Week 15

  1. Please bring in a second round draft to class next week for an informal critique.

Assignment: Time-based Multimedia ProjectDue: Week 17

  1. Continue working on your final project.
  2. Be sure to be working on all three components of your final project:
    1. Final Video (exported as either .mov, .avi, or .mp4).
    2. Final Video inside of a Web Interface (ie. a HTML microsite/micropage).
    3. Custom DVD Interface with Menu (that contains all of your class video projects).
15 Time-based Multimedia Project Expand/Collapse

Week 15: Review of the 2nd drafts and in-class working time will be availible with 1-on-1 support.

Agenda:

  1. Informal critique of 2nd round Drafts.
  2. In-class working time. Be sure to take advantage of in-class 1-1 support.

Class examples + related links:

Assignment: Time-based Multimedia ProjectDue: Week 17

  1. Continue working on your final project.
    • In addition to working on your final video, be sure to balance working on your DVD and web interfaces.
  2. Be sure to be working on all three components of your final project:
    1. Final Video (exported as either .mov, .avi, or .mp4).
    2. Final Video inside of a Web Interface (ie. a HTML microsite/micropage).
    3. Custom DVD Interface with Menu (that contains all of your class video projects).
16 Time-based Multimedia Project Expand/Collapse

Week 16: Full work week. In-class working time will be availible with 1-on-1 support.

Agenda:

  1. Full work week. Be sure to take advantage of in-class 1-1 support.
  2. Announcements:
    • Please fill out the online eCafe student course evaluation form.
    • The final project is due next week Tuesday. There will be class next week Thursday.
    • After the critique, any revisions to the final project will be due by the following Tuesday after the final critique.

Class examples + related links:

Assignment: Time-based Multimedia ProjectDue: Week 17

  1. Continue working on your final project.
    • At this point you should be done or putting the final touches on your final video and working on your DVD and web interfaces.
  2. Be sure to complete all three components of your final project:
    1. Final Video (exported as either .mov, .avi, or .mp4).
    2. Final Video inside of a Web Interface (ie. a HTML microsite/micropage).
    3. Custom DVD Interface with Menu (that contains all of your class video projects).
17 FINAL CRITIQUE Expand/Collapse

Week 17: Final critique. Last day of class. All final project deliverables are due this week.

Agenda:

  1. In-class Final Critique.
    • 10 minutes per person.
    • Order will be determined at 8am with an order sign-up on the white board.
    • Further feedback should be provided for your peers via Laulima under each persons's final project discussion area.
  2. Announcements:
    • Please fill out the online eCafe student course evaluation form.
    • There will be class on Thursday
    • After the critique, any revisions to the final project are due by next week Tuesday.

Critique Schedule:

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

Quotes

Random quotes that are relavent to this class

"Perhaps it sounds ridiculous, but the best thing that young filmmakers should do is to get hold of a camera and some film and make a movie of any kind at all."

Stanley Kubrick, Filmmaker

"I think the ad agencies saw very fresh and very innovative work coming from the flash design community and wanted some of that energy. At the same time us motion designers on the web are always drawing inspiration from film titles/broadcast commercials. So yes, from a design perspective it would seem as if the two mediums are feeding each other."

"It's a whole different story creating video for the web, because you have to condense information, telling your story in a tighter timeframe than broadcast and that is a challenge and really appeals to me."

Hillman Curtis, Filmmaker, Designer and Author

↑ back to the top ↑