BOROUGH OF MANHATTAN COMMUNITY COLLEGE
The City University of New York
MULTIMEDIA PROGRAMMING & DESIGN
Spring 2007

Title of Course: MMP 200 (Multimedia Design)
Professor: Viviana Espinosa
Lecture Hours/week: 2
Lab Hours/week: 2
Credits: 3

CLASS DESCRIPTIONS WEEK BY WEEK:
Class Web Presentation Assignment:
In addition to the assignments listed below, each student will make a presentation in class analyzing a website or other screen based project.
A written report summarizing the presentation will also be submitted. Students will sign up for a date to present on a sign-up sheet in class during the first 2 weeks of the semester. One presentation will take place at the beginning of each class



1    2    3    4    5    6    7    8 & 9 - FLASH: 3/20 - 3/29  FLASH LINKS 10: Spring Break 4/2 - 4/10  
11: April 12  12: April 17 - 19   13: April 24 - 26  14: May 1 - 3rd  15: May 8 - 10  16: May 15 - 17

A. Description:


Building on the principles learned in Introduction to Multimedia, students will learn to manipulate graphics and text in more sophisticated ways for use in print layout as well as multimedia. An emphasis will be placed on design concepts for the creation of pages.

B. Prerequisites:

Basic Skills: ENG 088, ESL 062, RDG 062, MAT 010/011 AND MMP 100 Co-requisite: MAT 051
Good TEXT editor for PC

C. Student Learning Objectives:

By the end of the course the student will be expected to: Understand how to work with web standards Understand and implement the elements that make up an effective interface design. Understand technical considerations involved in the creation of a Flash-based multimedia program. Identify and implement interface design patterns Design a complete website that implement XHTML web standards and use CSS design.

D. Required Texts and/or Supplemental Material:

Title: Designing Interfaces
Author: Jenifer Tidwell
Publisher: O'Reilly Media
ISBN: 0596008031

Title: Head First HTML with CSS & XHTML
Author: Elisabeth Freeman, Eric Freeman
Publisher: O'Reilly Media
ISBN: 059610197X

Recommended
Title: Macromedia Flash 8 for Windows & Macintosh (Visual QuickStart Guide)
Author: Katherine Ulrich
Publisher: Peachpit Press (Prentice Hall)
ISBN: 0321349636

E. Evaluation and Requirements of Students:

Class and homework assignments: 40% (you will need to provide a printout of it at the beginning of class)
Midterm Project: 20%
Final Project 30%
Class performance and attendance: 10%
Use of Technology:

Software used: Macromedia Studio 8 with Flash Professional, Adobe CS2, Sound Forge, Windows Movie Maker.
Portable media for storing projects, such as a flash drive or CD ROMs will be necessary.

F. Attendance Policy

The CollegeÕs attendance policy states: ″At BMCC, the maximum number of absences is limited to one more hour than the number of hours a class meets in one week. In the case of excessive absence the instructor has the option to lower the grade or assign an ÔFÕ or ÔWUÕ grade.Ó

G. Disability Accommodation Policy

Students with disabilities who require reasonable accommodations or academic adjustments for this course must contact the Office of Services for Students with Disabilities (Room N769; Telephone # 220-8180). BMCC is committed to providing equal access to all programs and curricula to all students.

H. BMCC Policy Statement on Plagiarism

Plagiarism is the presentation of someone elseÕs ideas, words, or artistic, scientific, or technical work as oneÕs own creation. Using the idea or work of another is permissible only when the original author is identified. Paraphrasing and summarizing, as well as direct quotations, require citations to the original source. Plagiarism may be intentional or unintentional. Lack of dishonest intent does not necessarily absolve a student of responsibility for plagiarism.
Students who are unsure how and when to provide documentation are advised to consult with their instructors. The library has guides designed to help students to appropriately identify a cited work. The full policy can be found on BMCCÕs web site, www.bmcc.cuny.edu.

I. Outline of Topics:


1. The design process


Idea development
User testing
Project planning

2. Design


The design concept
Design patterns
Elements of visual design
Design for time-based medium
Screen typography
Designing with sound

3. Content organization - information design

Classification schemes and metaphors
Complex structures

4. Designing for interaction

Interactive tools
Interactive structures

5. Web development with CSS

6. Production with Macromedia Flash MX

7.

K. Weekly Breakdown

LINK TO BOOK SAMPLES

Week 1: Jan 30 - Feb 1TOP

Introductions
Class Structure and Overview
Discussion of the Design Process
User Research
HTML Review
XHTML Review
Web Standards
Reading: Designing Interfaces Chapter 1. ÒWhat Users DoÓ
Assignment 1 (HTML) due Feb 6th

TOP

Week 2: Feb 6 - Feb 8TOP

Cascading Style Sheets
Block vs. inline elements
Text
Anchors
Colors
Site organization and structure
Reading: Designing Interfaces Chapter 2. ÒOrganizing the Content: Information Architecture and Application StructureÓ

Week 3: Feb 13 ONLY (the 15th is a Monday schedule)TOP

- More CSS
o Selectors
o The box model
o Page layout in CSS
o More on Page Layout
- Discussion of Midterm Project

CSS box layout samples
Assignment 2 (CSS) due February 20

Week 4: Feb 2 - Feb 22TOP

Project Planning
Information Design
Photoshop as a production and design tool
Assignment 3 (CSS Layout) due Feb 27
Reading: Designing Interfaces Chapter 3. ÒGetting Around: Navigation, Signposts and WayfindingÓ

Week 5: Feb 27 - March 1TOP

Identifying navigational structures
Choosing an appropriate navigation scheme

CLASS SAMPLES:
Properly name images and attributes for them on HTML

HOMEWORK:
Project Description and Flowcharts due for Midterm Project due March 6
Reading: Designing Interfaces Chapter 4. Organizing the Page: Layout of Page Elements

Week 6: March 6 - March 8TOP

Visual Hierarchy
Visual Flow
Alignment and grouping strategies
Work on Midterm Projects

CLASS EXAMPLE: CSS AND HTML LAYOUT

Week 7 March 13 - March 15TOP

:::: MIDTERM PROJECTS DUE March 15. Presentations in Class ::::

Week 8-9: March 20 - March 29TOP

Flash Interface Review -HANDOUT
Flash objects: buttons and movieClips** BUTTON SAMPLE ** - use to do your homework (which is to make buttons for your site)

Flash tools
Using ActionScript
Tweening
Doing Things: Actions and Commands
Command structures: more about buttons
**IN-CLASS SAMPLE**(right-click and download)
** BUTTON SAMPLE #2 **
and FLA file (right-click and download)
Designing for interactivity
Design for time-based media: animation MIDTERM exercise
How to embed a flash file into HTML

Use this code to embed files into your html (view the source of this page and paste the code line located under this one, replace the liked files code only
	
										
										
										
										 
								

:::: Links ::::TOP
There are far too many sites and projects that use Flash to list. Below is a sampling of some you may find useful, interesting, inspirational, or all three.

Resources
- Actionscript For Flash MX2004: The Definitive Guide, on O'Reilly Safari
This is an invaluable Actionscript reference.
- Foundation Flash 8, by Friends of ED
This is the auxiliary class text. This book is optional to this class; it covers the Flash environment (IDE) with detailed tutorials.
- ultrashock.com is an all-around Flash community, with forums, tutorials, news, job listings, and more.
- Macromedia's DevNet has up-to-date news on Flash, including LiveDocs, a continually-updated reference to Flash and Actionscript.
- actionscript.org is another good Flash community site, with a deep repository of tutorials.
- flashkit.com has a very broad repository of cut-n-paste code. not good for learning, but great for cheating.
Navigation
- Intentionallies is a Japanese architecture firm whose site was designed by Flash superstar Yugo Nakamura (see 'Experimental Sites' below).
- Grant Skinner is a Flash developer who has an interesting and simple navigation scheme.
- global-action.org is an NYC media education non-profit, whose site is driven by a ColdFusion back-end that allows fully-updatable content.
- transmote.com. NYU FLASH professor site.
Games
- orisinal.com is a collection of simple, beautifully-rendered games.
- shockwave.com and playfirst.com are commercial game sites, with a ton of flash content.
Experimental Sites
- yugop.com is Yugo Nakamura's showcase of his personal and for-profit works. Great experiments in interactivity.
- levitated.net is Jared Tarbell's playground of generative flash experiments. Some beautiful generative art.
- uncontrol.com is Manny Tan's collection of flash (and processing) experiments. Very lifelike animation.
- Amit Pitaru and James Patterson are two artists who often blend their programming, music, and illustration skills on their collaborative site insertsilence.com.
- vectorpark.com houses a series of creative animations, some interactive, some not, made by Patrick Smith.
- hoogerbrugge.com is a collection of, well, weird sh*t. interactivity ranging from subtle to mild. from the twisted mind of Han Hoogerbrugge.

Week 10: Spring Break April 2 - 10TOP

:::: ENJOY PLAYING WITH FLASH!! ::::

Week 11: April 12TOP

Tweening
Assignment 4 (Flash) due April 12. Design for time-based media: animation ::: VACATION exercise::: (animation following a path)
Reading: Designing Interfaces Chapter 9. Making It Look Good: Visual Style and Aesthetics

Week 12: April 17 - 19TOP

Discuss Final Project
Using sound in Flash
Sliders and other interactive control structures: DOWNLOAD ADVANCED EXAMPLES
Visual Design Elements
Color
Typography
Spaciousness and crowding
Images
- April 12 bring in a plan or sketch of what your animation is going to be about.
- Assignment 5 (Flash) due April 19. Design for time-based media: 1 minute animation:
Choose your own topic, have different characters do different things, check out the FLASH LINKS websites on week 8 for ideas
- Project Description and Flowcharts for Final Project due April 26

Week 13: April 24 - 26TOP


- Project Description and Flowcharts for Final Project due April 26, but will show progress during class the 24th

Link to urls in Flash
- More Visual Design Elements
Angles and curves
Texture and rhythm
Cultural references
Project Description and Flowcharts for Final Project due

- Work on Final Project

Week 14: May 1 - 3rdTOP 15 min. meeting with professor to follow up final progress

Project Management
Production issues
Pulling design concept together with production
Work on Final Project

Week 15: May 8 - 10 (work on final during class)TOP

Week 16: May 15 - 17TOP

FINALS: FINAL PROJECTS PRESENTATION DUE (Dec 17 - last day of classes)