COMD 3662 — E264 Interactive Animation

Day & Time:	Tuesday, 6:00PM – 9:20PM
Instructor:	Jerron Smith
Email:	thepixelsmith@gmail.com
OpenLab site:	https://openlab.citytech.cuny.edu/smithcomd3662fa2018/

COURSE DESCRIPTION (from college manual)

Vector-based animation and interactivity are important presentation tools for engaging the user. The goal of this course is to teach the development of time-based animation skills. It will introduce the concepts of the timeline and vector art for use on the World Wide Web using software such as Flash. This course is a prerequisite for the Interactive Art Direction and Interactive Interface Design courses.

ADDITIONAL COURSE DESCRIPTION

The days when creative professionals were limited to one medium for their entire careers is long gone. In the modern work environment you can be called upon at any time to create a print, animation or video piece. To deal with this new reality creative pros need to know how to a wider range of software and media skills that have ever been necessary before. In this class we will enter and explore the range of rich media tools available to the modern creative.

ATTENDANCE (COLLEGE) AND LATENESS (DEPARTMENT) POLICIES:

Attendance is taken and is important to success in this class. Both absences and arrival more than 15 minutes after the start of class will be marked. If excessive, the instructor will alert the student that he or she may be in danger of not meeting the course objectives and participation expectations, which could lead to a lower grade.

ACADEMIC INTEGRITY STANDARDS

Students and all others who work with information, ideas, texts, images, music, inventions, and other intellectual property owe their audience and sources accuracy and honesty in using, crediting, and citing sources. As a community of intellectual and professional workers, the College recognizes its responsibility for providing instruction in information literacy and academic integrity, offering models of good practice, and responding vigilantly and appropriately to infractions of academic integrity. Accordingly, academic dishonesty is prohibited in The City University of New York and at New York City College of Technology and is punishable by penalties, including failing grades, suspension, and expulsion.

RESEARCH

A large emphasis will be placed on awareness of the design world by observing the state of design in our community: books, publications, web sources, museums and graphic art organizations. Students are expected to gather reference materials for all their projects and are encouraged to use the college’s library resources. http://library.citytech.cuny.edu

More important than simple library research user research techniques such as but not limited to user interviews, focus groups, A/B Testing and surveys will be utilized.

CLASS POLICIES

Unless otherwise noted, projects given as Homework Assignments are due at the beginning of class and must be handed in (if physical), placed on the server, Flash Drive or sent in email to be reviewed; otherwise it is considered late.
ANY MISSED ASSIGNMENTS WILL EARN ZERO POINTS. Assignments received after the deadline will drop a grade at the end of the class. After that time period, any late assignment will earn a zero. A final folder of all projects will be handed in via DropBox, Google Drive, Creative Cloud or other file storage/sharing service along with the final project at the end of the semester.

CLASS PARTICIPATION

You are expected to give thoughtful, constructive feedback in class. At the heart of it, this is a design class. Learning how to constructively talk about, analyze and create different types of media are at the heart of what you do in this class.  You are to be prepared for each session, meaning you will have read all required selections, performed all appointed tasks, and completed all homework. You are to do your homework with professionalism and to seek help as soon as possible.

INSTRUCTOR’S RECOMMENDATIONS

Come to class on time: Students arriving more than 15 minutes late may be marked absent.

Attend all classes: Each week we will build on the work learned the week before. If you must miss a class, please let me know ahead of time. It is your responsibility to obtain any missed material from your fellow classmates, and to turn assignments in on time even if you are absent. Students missing more than two classes risk failing the course.

Turn in assignments on time: Homework turned in late will lose 10 points for every day that it is late. Work turned in more than two weeks from the due date will not be accepted. Project 1 and Project 2 may not be turned in late. Missing projects may result in a failing grade for the project.

Ask Questions: This is a technical class, and we will be covering a lot of information in a short time. If you are confused, lost, need clarification, etc, please don’t hesitate to ask questions in class. Chances are your fellow students will benefit from the answers AND this will add to your class participation grade! I am also available between classes via email.

SAVE, SAVE, AND SAVE AGAIN: There will be no sympathy for work lost for not saving properly.

BACK UP YOUR WORK: Murphy’s Law Applies In All Things–You will lose your flash drive or it will become corrupted. Save your work in at least two places. Cloud-based services like dropbox can work as well if not better than a computer at home.

INSTRUCTOR’S PREROGATIVE

I reserve the right to change the syllabus or grading formula as I see fit, given the composition and progress of the class. I will notify the class as to these changes in writing in a timely fashion.

CLASS SUPPLIES

FLASH DRIVE: or other portable storage device. This will be used to transfer your work from home and class.

SKETCHBOOK/NOTEBOOK: For taking notes during technical demonstrations, brainstorming sessions, and for sketching ideas for projects. YOU WILL HAVE TO PUT PENCIL TO PAPER AND DRAW. I highly recommend you use a squared sketchbook.

RECOMMENDED BOOKS

The Animator’s Survival Kit Richard Williams	Motion Design Matt Woolman
Animation The Mechanics of Motion Chris Webster	The Human Figure in Motion Eadweard Muybridge

ADDITIONAL CLASS RESOURCES

W3 HTML Reference: http://www.w3schools.com/html/default.asp

W3 CSS Reference: http://www.w3schools.com/css/default.asp

Official jQuery reference: http://api.jquery.com/

W3 Schools jQuery Tutorials: http://www.w3schools.com/jquery/default.asp

Adobe TV – tutorials for Adobe Software: http://tv.adobe.com/

Animation & Video – Instructional Resources

This is a list of additional resources I have put together over the years to help me in my own journey to greater understanding of the disciplines of Animation and Video creation. There are articles here, along with notes on tools, cool videos and other resources that I have at one time or another found helpful.

https://docs.google.com/document/d/1f4OB76kob-dzhFOwZIyq0MHcX4EP84h44oTNNgPQOp0/edit?usp=sharing

CLASS OBJECTIVES

For the successful completion of this course students should be able to:	Evaluation method/criteria:
Demonstrate knowledge on most appropriate media for client deployment needs	Written examination, in-class presentation
Demonstrate ability to create and edit audio projects	in-class work, take home project, homework
Demonstrate ability to create video projects	in-class work, take home project, homework
Demonstrate ability to create stand-alone animated projects	in-class work, take home project, homework

GRADING FORMULA

Grade	Numerical	Meaning of Grade
A (Excellent)	4.0	Represents exemplary work. Work consistently exceeds expectations of professional craft and quality.
B+	3.5
B (Good)	3.0	Work meets basic expectations of professional craft and quality.
C+	2.5
C (Satisfactory)	2.0	Work does not meet professional expectations of craft and quality.
D (Unsatisfactory)	1.0

GRADING CRITERIA

The final grade for this course will be determined by the grades each student earns on the following projects and assignments. The grading is done using a numerical point system with each gradable assignment worth a certain maximum number of points. The maximum numerical value that is possible exceeds 100, allowing a student to make up for a weak showing in one area with a stronger final project.

 

Project/Assignment	Maximum Value
Project 1: Audio Project – Spotify or Pandora Ad	10 pts
Project 2: Animated Gif/ HTML 5/CSS/JQuery Project – Google Doodle	15 pts
Project 3: Video Animation Project – Social Media Ad or Explainer Video	20 pts
Project 4: Video Editing Project – Interview or Brand Sizzle Reel	30 pts
Participation & Preparation	10 pts
Homework5	pts
Attendance	15 pts
Total:	105 pts

 

Range in %	Letter Grade	Range in %	Letter Grade
95-100	A	72-77	C
90-94	A-	70-71	C-
88-89	B+	68-69	D+
82-87	B	62-67	D
80-81	B-	60-61	D-
78-79	C+	0-59	F

PROJECT BREAKDOWN

Project 1: Audio Project – Spotify or Pandora Advertisement

Project 2: Animated Gif/ HTML 5/CSS/JQuery Project – Google Doodle

Project 3: Video Animation Project – Social Media Ad or Explainer Video

Project 4: Video Editing Project – Interview or Brand Sizzle Reel

TOPICAL OUTLINE

	Class 1:  Introductions – review syllabus and class policies | Digital image formats | Video Formats | Audio Formats | Delivery Media | Social Media Platforms | Engaging an Audience
	Class 2: Discussion – Project 1: Audio Project | Audio Project Concepting | Working with Audio | Introduction to Recording Audio | Introduction to Audio Editing |  Creating or Locating Audio Resources Homework 1:   Audio Project Scripting
	Class 3: Audio Project Script Reviews & Rewrites | Multi-Track Audio Editing | Exporting Audio Files
	Class 4: Project 1: Audio Project Due | Discussion – Project 2: Google Doodle | Discussion: Principles of Animation | Animated GIF – HTML5 & Javascript Animation | how much code do you really need to know? | Basic CSS Interactivity: transition and transform properties; :hover pseudo-class Homework 2: Google Doodle 20 thumbnail/concept sketches
	Class 5: Review and Critique Google Doodle 20 thumbnail/concept sketches |  CSS Animate property | Applying animations to HTML elements | keyframes in CSS Homework 3: Refine to 2 polished concept mock-ups
	Class 6: Review & Critique Concept Mock-ups | JS/jQuery Fundamentals: objects, variables and methods; functions and triggers. Simple JS/jQuery Interactivity: toggle, fadeToggle and toggleClass; integration with CSS transition/animation; HTML5 <canvas> overview.
	Class 7: Project 2: Google Doodle Due | Discussion – Project 3: Social Media Ad or Explainer Video | Understanding Video Properties | Social Media Video Guidelines | Animation Timeline Basics | Understanding Keyframes | Adding and Animating Effects | Creating or Locating Animatable Resources Homework 4: Create 5 concepts for Animation Project  – Visuals with Descriptions
	Class 8: Review & Critique Animation Concepts |  Animating Text | Masks & Track Mattes Homework 5: Create storyboard for Animation
	Class 9: Review & Critique Animation Storyboards | Greenscreen Removal | Motion Tracking and Rotoscoping | Exporting Video Animation
	Class 10:  Project 3: Timeline Animation Due | Discussion – Project 4: Video Editing Project | Shooting and Recording your Video |  Lighting and Sound | Staging | Tripods, MonoPods, Gimbal and stabilization systems | Principles of Video Editing Homework 6: Create 5 concepts for Video Editing Project  – Visuals with Descriptions
	Class 11: Review & Critique Video Editing Project Concepts | Establishing Mood and Narrative Through Editing | Video Timeline Basics | Creating or Locating Video Resources | Importing and Organizing Media | Cutting Video Clips | Transitions and Effects Homework 7: Create storyboard for Animation
	Class 12: Review & Critique Animation Storyboards | Integrating Graphics into Video Projects | Working with Audio | Homework: Create Rough Cut of Video Editing  Project
	Class 13: Review & Critique of Rough Cut | Blending Modes and Transparency | Image and Video Overlays
	Class 14: Final Exam | Studio Day
	Class 15: Presentations – All Projects and Final Critiques