Rebuilding...

Introduction to Multimedia: Fall 2010 Syllabus

BMCC MMP 100

Borough of Manhattan Community College
The City University of New York
Multimedia Programming & Design

Course Number: MMP 100
Course Title: Introduction to Multimedia
Instructor: Matthew Belanger
Semester: Fall 2010
Lecture Hours per Week: 2
Lab Hours per Week: 2
Credits: 3

A. Description

This course introduces students to the fundamentals of multimedia production. In a hands-on class, students will learn the essentials of program design and authoring software in an integrated computer environment. Students will learn how to combine graphics, audio and text to create programs for industrial and educational applications.

B. Prerequisites

Prerequisite: None
Co-requisite: None
Basic Skills: ENG 088 or ESL 062, ACR 094, MAT 011

C. Student Learning Objectives

By the end of the course students will be expected to:
• Demonstrate an ability to work with web standards.
• Design a complete web page that implements XHTML and CSS web standards.
• Create a Flash-based project that incorporates animation.

D. Readings

Required Texts
Title: Adobe Creative Suite 5 Design Premium Digital Classroom
Author: Jennifer Smith, Jeremy Osborn and AGI Creative Team
Publisher: Wiley Publishing, Inc.
ISBN: 978-0-470-60779-4

Recommended Texts
Additional readings may be assigned by the instructor.

E. Evaluation and Requirements of Students

Grading
• Class and Homework: 40%
• Midterm Project: 20%
• Final Project: 30%
• In Class Performance and Attendance: 10%

Assignments must be handed in on time. Points will be deducted on work handed in late. Assignments may not be accepted for grading if they are late.

Use of Technology
• Software Adobe Creative Suite 5 including Flash Professional, DreamWeaver, Photoshop, Illustrator, Sound Forge.
• Hardware Portable media for storing projects, such as a flash drive or CD ROMs will be necessary. Students will also load their projects onto the MMP server.

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: 212-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 here.

I. Outline of Topics

1. Process of Design
• Design Brief (Statement of Goals)
• Analysis of Design Goals
• Research
• Specification
• Conceptualization
• Development
• Testing
• Implementation
• Evaluation

2. Designing for Objects and Systems
• Design Patterns
• Elements of Visual Design
• Typography
• Design for Time-Based Medium
• Designing with Sound

3. Content and Presentation
HTML, XML, and XHTML
CSS

4. Web Platforms
• Desktop and Mobile
• Mac and Windows
• Browsers

J. Office Hours

Thursdays, 4:20 – 5:20pm in room S110F. Contact me to schedule an appointment outside of office hours.

K. Weekly Breakdown

Week 16 | Class 28 | December 7

1. Adobe Illustrator
• Tools
  • Selection
  • Direct Selection
  • Magic Wand
  • Lasso
  • Pen
  • Type
  • Line Segment
  • Rotate
  • Warp
  • Scale
  • Free Transform
• Panels
  • Transform
  • Layers
• View
  • Outline
  • Preview
  • Rulers
  • Grid
• Groups
  • Creating A Group
  • Cloning A Group (Option Alt)
• Repeating A Transform (Control D)

2. Assignment O
• Read Illustrator Lesson 2: Adding Color

3. Work on Final

Week 15 | Class 27 | December 2

1. Work on Final

2. Assignment N
• Read Illustrator Lesson 1: Illustrator CS5 Essentials

Week 15 | Class 26 | November 30

1. Midterm Due

2. Work on Final

Week 14 | Class 25 | November 23

1. Work on Midterm

Week 13 | Class 24 | November 18

1. Work on Midterm

Week 13 | Class 23 | November 16

1. Work on Flash In Class Exercise

Week 12 | Class 21 | November 11

1. Adobe Flash
• Animation
  • Classic Tween
    • Motion Guides
  • With ActionScript
    • Properties
    • Tween Class
• Publishing
  • For Web
    • Adobe
    • HTML
    • JavaScript
  • For Desktop
    • Projector
    • AIR

2. In Class Exercise
• Create an animation that includes 3 basic shapes, a circle, a square, and a triangle. Through your animation, try to give these basic shapes personality. Try to create a short narrative. Consider creating a storyboard before you begin animating. A good storyboard will allow you to pre-visualize your animation. Your animation should be at least 20 seconds long (480 frames at 24fps). Make use of the Motion and Shape Tween. Optionally make use of the Classic Tween and ActionScript.

Week 12 | Class 20 | November 9

1. Basic Movement and Physics
Newton’s Laws of Motion
History of Animation
• 12 Basic Principles of Animation
Velocity
Acceleration
Distance
Gravity
Friction
Elasticity

2. Adobe Flash
• Review
• Panels
  • Motion Editor
• Animation
  • Frame By Frame
  • Motion Tween
    • Tween Paths
  • Shape Tween
  • Onion Skinning

3. Assignment M
• Read Flash Lesson 4: Delivering Your Final Movie

Week 11 | Class 19 | November 4

1. Adobe Flash
• Review
• Tools
  • Rectangle Primitive
  • Oval Primitive
  • PolyStar
  • Paint Bucket
  • Ink Bottle
  • Eye Dropper
  • Spray Brush
  • Paint Bucket
  • Eraser
  • Text
  • Hand
  • Zoom
• Panels
  • Timeline
    • Layers
    • Layer Groups
  • Transform
  • Filters
• Modify
  • Combine Objects
  • Break Apart
  • Transform
  • Align
• File
  • Import
• Drawing Objects, Groups, and Symbols

5. Assignment L
• Read Flash Lesson 3: Creating Basic Animation

Week 11 | Class 18 | November 2

1. Adobe Dreamweaver
• Any questions?

2. The Flash Platform
Platform
Adobe Flash CS5
ActionScript 1.0, 2.0 and 3.0
Adobe Flash Builder
Adobe Flex
Adobe Flash Catalyst
Adobe Flash Player
Adobe AIR
Flash Media Server

3. Computer Graphics
Raster Graphics
Vector Graphics

4. Adobe Flash
• The Interface
• Creating & Saving A New Document & Basic Document Settings
• Tools
  • Selection
  • Subselection
  • Free Transform
  • Lasso
  • Pen
  • Text
  • Line
  • Shapes
  • Pencil
  • Brush
• Panels
  • Stage & Work Area
  • Timeline
  • Properties
  • Design
  • Align
  • Color
  • Swatches
  • Transform
  • Library
  • Actions
  • Help
• Modify
  • Document
  • Convert to Symbol…
  • Group
• Graphics, Buttons, and Movie Clips
• Symbol Names vs. Instance Names
• Animation
  • Frames
  • Key Frames
  • Frame Labels
  • Motion Tween
  • Shape Tween
• ActionScript
  • stop();
  • gotoAndStop();

5. Assignment K
• Read Flash Lesson 2: Getting Started with the Drawing Tools

Week 10 | Class 17 | October 28

1. JavaScript
Variables
Operators
Conditionals
Functions
Array
Loops
Events

2. Assignment J
• Read Dreamweaver Lesson 5: Managing Your Web Site: Reports, Optimization, and Maintenance and Flash Lesson 1: Flash CS5 Jumpstart

Week 10 | Class 16 | October 26

1. Adobe Dreamweaver
• Panels
  • CSS Styles

2. HTML & CSS
• Creating Menus by Styling Lists

3. JavaScript
Introduction
How
Where
Statements
Comments
Alert Boxes

4. Assignment I
• Read Dreamweaver Lesson 4: Styling Your Pages with CSS

Week 9 | Class 15 | October 21

1. Adobe Dreamweaver
• The Interface
• Tools
  • Open Document
  • Collapse Full Tag
  • Collapse Section
  • Expand All
  • Select Parent Tag
  • Line Numbers
  • Highlight Invalid Code
  • Word Wrap
  • Syntax Error Alerts
  • Apply Comment
  • Remove Comment
  • Wrap Tag
  • Recent Snippets
  • Indent Code
  • Outdent Code
  • Format Source Code
• Panels
  • Insert
  • Properties
  • Assets
  • Search
  • Reference
  • FTP Log
• Pages
  • Fixed & Liquid Layouts
  • Page Properties
    • Appearance (CS5)
    • Appearance (HTML)
    • Links (CS5)
    • Headings (CSS)
    • Title / Encoding
    • Tracing Image

2. Assignment H
• Read Dreamweaver Lesson 3: Adding Text and Images

Week 9 | Class 14 | October 19

1. Adobe Photoshop
• Any questions?

2. Elements of the Web
  • Internet Protocol Suite
  • HTTP & FTP
  • IP Addresses, Domain Names & DNS
  • URLs
  • HTML, CSS, Flash, JavaScript, PHP, etc.
  • Text Editors
  • Content Management Systems
  • Web Servers & Hosts
  • Web Browsers

3. Adobe Dreamweaver
• Dreamweaver
• Creating & Opening Documents
  • Related Files
• Points of View
  • Code
  • Design
  • Split
  • Live Code
• Managing A Site
  • Defining a New Site
  • Local & Remote root Folders
  • Adding Pages
• Panels
  • Files

4. Assignment H
• Read Dreamweaver Lesson 1: Dreamweaver CS5 Jumpstart & Dreamweaver Lesson 2: Setting Up a New Site

Week 8 | Class 13 | October 14

1. Adobe Photoshop
• Working with Brushes
• Panels
  • Brush
    • Shape Dynamics
    • Scattering
    • Color Dynamics
    • Transfer
    • Noise
    • Wet Edges
    • Airbrush
    • Smoothing
    • Protect Texture
  • Brush Presets
• Layers
  • Blending Modes
• Retouching Images

3. Assignment G
• Read Photoshop Lesson 6: Creating A Good Image

Week 8 | Class 12 | October 12

1. In Class Exercise
• Using the images provided to you or your own, isolate at least 5 different objects within an image by making use of the selection tools available to you in Photoshop. Use the Marquee Tool, Lasso Tool, Quick Selection Tool, Magic Wand Tool, and Pen Tool at least once each. Use the Quick Mask feature as necessary. Save each of your selections. And copy paste each selected object into it’s own layer. With at least 1 selection, create an Adjustment Layer and use Curves to modify the visual characteristics of your selected object. With at least 1 selection, use the Drop Shadow Effect to create a false shadow. Save your PSD file and email it to me.

3. Assignment F
• Read Photoshop Lesson 5: Painting and Retouching

Week 7 | Class 11 | October 7

1. Adobe Photoshop
• Creating Selections
  • Quick Mask
  • Pen Tool
  • Saving Selections
• Layers
  • Adjustment Layers
  • Grouping Layers
  • Linking Layers
• Effects
  • Drop Shadow
  • Inner Shadow
  • Outer Glow
  • Inner Glow
  • Bevel & Emboss
  • Satin
  • Color Overlay
  • Gradient Overlay
  • Pattern Overlay
  • Stroke

2. Assignment F
• Read Photoshop Lesson 4: Making the Best Selections

Week 7 | Class 10 | October 5

1. Adobe Photoshop
• Rulers
• Grids
• Guides
• Creating Selections
  • Squares
  • Circles
  • From a Center Point
  • Converting to a Layer
  • Adding To and Subtracting From
  • Feathering
Channels
Histograms
• Adjustments
  • Brightness/Contrast
  • Levels
  • Curves
  • Hue/Saturation
  • Color Balance
  • Invert
  • Posterize
  • Selective Color
  • Desaturate
  • Replace Color
• Saving Image Files
  • JPEG
  • GIF
  • PNG
  • PSD
  • TIFF
  • EPS
  • PDF
  • BMP

2. Assignment E
• Read Photoshop Lesson 3: The Basics of Working with Photoshop

Week 6 | Class 9 | September 30

1. Adobe Photoshop
• Tools
  • Eraser
  • Blur, Sharpen & Smudge
  • Dodge & Burn
  • Zoom
  • Hand
  • Type
• Panels
  • Colors
  • Swatches
  • Layers
• Filters
  • Artistic
  • Blur
  • Brush Strokes
  • Sharpen
  • Sketch
  • Texture
• Puppet Warp
• Screen Modes
• Working with Multiple Documents
  • Tabs
  • Windows
  • Arrange Documents
• Image Size and Resolution
• Combining Images

2. Assignment D
• Read Photoshop Lesson 2: Getting to Know the Workspace

Week 6 | Class 8 | September 28

1. Review Page Layout

2. Adobe Bridge
• Introduction to Adobe Bridge
• The Interface
• Browsing Your Files
• Managing Files & Folders
• Favorites & Collections
• Metadata & Keywords
  • Metadata Templates
  • Search & Filters
• Batches
• Output
  • PDF
  • Web

3. Adobe Photoshop
• Introduction to Adobe Photoshop
• The Interface
• Tools
  • Move
  • Marquee
  • Lasso
  • Quick Selection & Magic Wand
  • Crop
  • Brush
  • Spot Healing Brush
  • Clone Stamp
  • Gradient
• Panels
  • History
• Mini Bridge
• Cropping & Resizing Images
• Rotation & Scaling

Week 5 | Class 7 | September 23

1. Review Lists and Tables

2. Page Layout

3. HTML
• New Tags, <div>, <link>
HTML Attributes: id vs. class

4. CSS
• External Stylesheets
Class, ID, Group, and Contextual Selectors
• New Property: float

5. Assignment C
• Read Photoshop Lesson 1: Using Adobe Bridge and Exploring Photoshop

Week 5 | Class 6 | September 21

1. Structured Content
Lists
Tables

2. HTML
• List Tags, <ul>, <ol>, and <li>
• Tables, <table>, <tr>, <th>, and <td>

3. CSS
• Styling Lists
  • New Property: list-style
• Styling Tables
  • New Property: border-collapse

Week 4 | Class 5 | September 16

1. Look at Common Issues and Errors from Assignment B
• Failure to Close Tags
• Improper Nesting of Tags
• Use of Capitalization in HTML Tags or CSS Declarations
• Failure to Use HTML Entities
• Missing or Malformed Doctypes

2. Images
• Role and Prevalence of Images on the Web
• Image File Formats, JPEG, GIF, PNG
Photoshop Save for Web and Devices
• Image Dos and Don’ts, Using Images for Text, Busy Images, Lack of Contrast
• Balancing Image Quality and File Size
• Copyright and Licensing Issues

3. HTML
• Review
HTML Entities
• New Tag, <img>
Tag Attributes, alt, height, and width

4. CSS
• Review
• New Properties: border, margin, padding
• Styling Images

Week 3 | Class 4 | September 7

1. Color
Color Theory
Color Wheel
• Color Systems, Additive vs. Subtractive
• Color Schemes, Monochromatic, Analogous, Complementary, Split-Complementary and Triadic
• Color Tools, 4096 Color Wheel and Color Scheme Chooser
Web Safe Colors
RGB Color vs. Hexidecimal Color

2. Typography
Serif, Sans Serif and Monospace
• Letter Spacing, Tracking vs. Kerning
• Line Spacing, Leading
Lorem Ipsum / Greek Copy

3. HTML
• Review

4. CSS
• Review
• Working with Type
  • Web Safe Fonts
  • CSS Font Properties, font, font-family, font-size, font-style, font-variant, font-weight

Week 2 | Class 3 | September 2

1. HTML
• Review
• Additional Tags
  • The <hr> Tag
  • The <b> & <i> Tags
  • The <span> Tag
  • The <style> Tag

2. CSS
CSS and it’s Syntax
• Internal vs. External CSS
The Box Model, margin, border, padding, content
• Working with Color
  • Defining Color with CSS
  • CSS color Property

3. Assignment B
Create a webpage using the HTML 4.01 Transitional Doctype and all default tags. Also, use at least 2 different <h1> – <h6> tags, 3 <p> tags, and 1 <a> tag. Feel free to include any other tags you are comfortable with. Style your text using the <span> and <style> tags as well as the relevant CSS color properties. Validate your HTML, save the file as index.html, and email it to me. Due 09/07.

Week 2 | Class 2 | August 31

1. Discuss As We May Think by Vannevar Bush

2. Review Introduction to HTML, XML and XHTML

3. Fundamentals of HTML
• Default Tags
  • The <html> Tag
  • The <head> Tag
  • The <title> Tag
  • The <body> Tag
• Additional Tags
  • The <h1> – <h6> Tags
  • The <p> Tag
  • The <br> Tag
  • The <a> Tag
Comments
Validation
Doctypes
• Saving HTML Files
  • Folders / Directories
  • Naming Conventions
  • Extensions
  • Local vs. Remote File Systems
• Web Servers
  • Linux vs. Windows
  • Apache vs. IIS

Week 1 | Class 1 | August 26

1. Introductions

2. Class Structure and Overview

3. Brief History of Computing and the Internet

Antikythera Mechanism
Al-Jazari and his Mechanical Automata
Joseph Marie Jacquard and the Jacquard Loom
Charles Babbage, the Analytical Engine and Ada Lovelace
Alan Turing, Bletchley Park and the Enigma Machine
Electronic Memory and the Microcontroller
Early Personal Computers
Internet History
ARPANET
Telnet and CompuServe
TCP/IP
NIC and DNS
HTTP
Email and WWW
Vannevar Bush and As We May Think
Douglas Engelbart and Hypertext
Mosaic Web Browser

4. Introduction to Web Design
• Idea Development and Concepting
• Information Architecture, Site Maps and Wireframes
• Interaction Design, Prototyping and Usability Testing
• Design
• Develop
• Validation, Testing and Debugging
• Launch

5. Introduction to HTML, XML and XHTML
HTML
XML
XHTML
Semantic HTML
• Tags, Attributes, Content, and Elements
• Nesting Tags

6. Assignment A1: Email me at prof@fatbits.net. Please include the course number (MMP100) and your full name in the subject. Feel free to include links to your work in the body.

Assignment A2: Read As We May Think by Vannevar Bush.