Web Multimedia Design GD/COM 309
Instructor
BARRY C. ERDELJON
e-mail: barry.erdeljon@marymount.edu
Phone: 703-284-1652

Class meeting times
TU 6:30-9:15P.M. StJO 7

Office Hours
TUE 02:30-04:30PM GAILHAC 33C
WED 5:00-6:00PM GAILHAC 33C
TH 03:30-04:30 GAILHAC 33C
Other times by appointment.

SYLLABUS

STUDENT WEB SITE URLs SP 08

REQUIRED TEXTS:
On-line assigned readings
Project specific periodicals and reference books

REQUIRED MATERIALS:
500MB USB Drive or larger. A second USB drive recommended!
Several recordable CDs/DVDs
Mini DV tapes as needed
Project specific reference material as needed

EDUCATION PRICED SOFTWARE
journeyEd
http://www.journeyed.com/
Campus Tech
http://www.campustech.com


Please remove U3 software from all USB drives being used in the Mac lab. The remover can be downloaded here http://www.u3.com/uninstall/uninstall.aspx.
U3 is not compatible with the Mac lab and will render the Macs inoperable. And you risk loosing your project files.

STUDENT WEB SITE URLs SP09

RESOURCES
Creative Commons
http://search.creativecommons.org/

Music
http://www.royaltyfreemusic
.com/free-music-clips.html


Flash Kit
http://www.flashkit
.com/index.shtml


Inexpensive stock images
http://www.istockphoto.com
http://canstockphoto.com/
http://www.123rf.com
http://www.bigstockphoto.com

Clip art, photos,
sounds, and video clips



INSPIRATIONAL SITES
CA Interactive
http://www.commarts
.com/CA/interactive/
AIGA Loop Journal
http://loop.aiga.org/

REFERENCES
1. Web Monkey
2. Creativepro.com
3. Designinteract.com
4. http://www.wpdfd.com/
5.http://www.commarts
.com/


WRITING
Citing other Sites
Writing for the Web

DESIGNING
1. Good Sites Bad Sites
2. Layout
3. Typography
4. Color
5. Navigation


FLASH HELP
Macromedia Flash
Support Center
http://www.macromedia
.com/support/flash/


On-line Tutorials
Flash Kit
http://www.flashkit
.com/tutorials/

Macromedia
http://www.macromedia
.com/support/flash/
tutorial_index.html

Web Monkey
http://hotwired.lycos.com
/webmonkey/multimedia/
shockwave_flash/

PRELOADER
create a preloader

Links to preloaders

SEARCH LISTINGS
Keywords & Description
Search engine registration

WEEKLY
READINGS
LECTURES
ASSIGNMENTS
 

1/13
LECTURE
Course Introduction: What this class will achieve. Discuss syllabus. What is interactive multimedia.

Interactive Flash Quizzes

LAB
Flash Review:
1. Timeline, stage & work area, changing views, frames, fps, toolbox, pallets, property inspector, getting help
2. Frames, keyframes, symbols, library, instances
3. Invisible buttons,
4. Adding actions; using action panel, to frames

DUE 1/27
ASSIGNMENTS
Design a Flash interactive quiz
1...... Choose quiz questions from the following link
Great Moments in Multimedia History
http://writing.atomicmartinis.com/moments.htm

2...... At 6 true false questions
........ or at least 6 matches
3...... Rollover hinting for answers
4...... One correct answer screen with sound/music
5...... One wrong answer screen with animation
6...... 550w x 400h pixels at 12fps
Reference: Interactive Flash Quizzes

Extra credit: design both a true false quiz
and a matching quiz.



Interactivity by Design
pages: 1-32
1/20 No Class School closed - inaguration
  1/27 No Class School closed - snow

 


2/3
LECTURE
ImageReady: creating frame animations
Flash: animation: using a motion guide layer
Changing background images
.......Fade one image into another using motion tween and Alpha channels 

LAB
finish flash quiz project
set up course Web site


DUE 2/10
ASSIGNMENTS
A Create course website
B. Complete Flash interactive quiz  
C Post flash quiz on course website

DUE 2/10
ASSIGNMENTS
B. Create an animation:
...... 1 Create an animated movie clip
...... 2Have the movie clip follow a path using a motion tween and guide layer
...... 3 Add background cross fade betwen two photos or illustrations 

 

Interactivity by Design
pages: 34-61

 

Interactivity by Design
pages: 62-92

2/10
LECTURE
Visual metaphors

Storyboards and Flow Charts:
A storyboard is a sketch visually describing the flow and interactivity of your piece.
http://www.usu.edu/sanderso/multinet/wwwnavi.html
http://nmc.loyola.edu/intro/html/art/handdrawnstoryboard.htm
http://nmc.loyola.edu/intro/syllabus/images/funky-messages-storyboard.gif
http://nmc.loyola.edu/intro/syllabus/webart/default.htm#
http://www.towson.edu/~lieb/MCOM407/lauren_storyboard2.gif

Quote Interpretation assignment
African Experience
http://www.dreams2.com/flash/afrika/movie.htm
The remedi project http://www.theremediproject.com/
Communications Arts Interactive design Annual
http://www.commarts.com/CA/interactive/

LAB
Photoshop: Saving Image Files: Save Optimized As: JPEGs, GIFs, PNGs.
Formats Link
Image pans http://cdn3.libsyn.com/cspodcast/podcast-PS-zoomify.mp4?nvb=20090210033800&nva=
20090211034800&t=02105d7595582d7847db9

Text settings, Image settings and formats

DUE 2/17
ASSIGNMENTS
A Peace project Link to assignment
...... 1 Storyboard flow chart
...... 2 Opening screen with animation
...... 3 All visuals

B Three example sites for each of the following:
...... 1 Visual style
...... 2 Visual metaphor
...... 3
User interface


 

Interactivity by Design
pages: 93-122

Communications
Arts Interactive Design Annual
http://www.commarts
.com/CA/interactive/

2/17
LECTURE
Transitions and comic strips

Forgotten http://theforgotten.org/site/intro_eng.html
A Beautiful Mind
http://www.abeautifulmind.com/main.html
Sleeping Giants http://www.kodak.com/US/en/corp/features/sleepingGiants/
Georgia http://oneworldjourneys.com/georgia/
Havaianas http://www.havaianas.com/eng/1024/home.html

Holocost http://www.ushmm.org/museum/exhibit/online
/doyourememberwhen//02/02.htm
Motown http://classic.motown.com/timeline/

LAB
Flash: Bitmaps: importing, compression, converting to vectors

Using a mask guide layer
Animating a text block


DUE 2/24
ASSIGNMENTS
A. Interactive Multimedia Site Review
of a an event, person, people or place.
Posted to your class Web site.
Link to assignment

B Completed Peace Project
Link to assignment

 

 


A Beautiful Mind http://www.abeautifulmind.com/main.html
Margaritaville http://www.margaritavilletequila
.com/margaritavilletequila/index.jsp
Red Bull http://www.redbullcopilot.com/
Case Study
http://www.macromedia.com/cfusion/showcase/index.cfm?
event=casestudydetail&casestudyid=7107&loc=en_us

Chinese Home http://www.pem.org/yinyutang/
Mark Twain http://www.pbs.org/marktwain/index.html
Second Story http://www.secondstory.com/
African Voices http://www.mnh.si.edu/africanvoices/

2/24
LECTURE
Elements of effective interactive Web multimedia

visual metaphors, intuitive navigation, unique perspective
(UIP) and emotional experience...

Select topic and subtopic for interactive media project

Example of a class project: http://www.prettyloaded.com/

Person: http://www.thomasedison.org/
http://www.pbs.org/marktwain/
http://georgewashington.si.edu/index.html

People:
http://classic.motown.com/timeline/
http://www.mnh.si.edu/africanvoices/

Place:
http://www.kodak.com/US/en/corp/features/sleepingGiants/
http://www.pem.org/yinyutang/
http://explorer.monticello.org/

Event or Time in Historyhttp://www.kodak.com/US/en/corp/features/endurance/
home/index.shtml?CID=go&idhbx=endurance
http://www.pbs.org/stantonanthony/

Event & people: http://www.ushmm.org/museum/exhibit/online/doyourememberwhen/

Time in History & People http://classic.motown.com/timeline/

LAB
Flash: labels, publishing, and preloader

DUE 3/17
ASSIGNMENTS
For your approved topic:
1...... Prepare a concept strategy statement
2...... Prepare a universe outline
3.......Start preparing rough a content outline

3/3 NO CLASS Spring Break
  3/10
LECTURE
Case studies: Interactive Media Projects

Elements of effective splash screen, visual metaphors, unique perspective (UIP) and emotional experience...

Mercedes http://www.mercedes-amg.com/
Havaianas http://www.havaianas.com/eng/1024/home.html
African Voices http://www.mnh.si.edu/africanvoices/
The Chopping Block http://www.choppingblock.com/
American History House http://americanhistory.si.edu/house/
Georgia http://oneworldjourneys.com/georgia/
Barbie http://barbie.everythinggirl.com/
Pinhole Camera http://pinholespy.com/
Eye4u http://www.eye4u.com/home/

DUE 3/17
ASSIGNMENTS:
Interactive media project:
For your approved topic:
1...... Narrow down your topic based on research findings
2...... Research:
.........A. Sample images from: Posters, CD/Album covers, Movie/DVD posters and covers, T-shirts, Concert Photos, magazine and online articles, etc...
.........B. Sample videos and video clips
.........C. Primary sources: personal letters, correspondence, diaries, news articles/clips, etc...
.........D.Timeline: History of your topic
.........E. Why: quotes form performers; why they chose that style, lyric, beat, etc...
.........E. In the Media: how is it framed politically and socially, historically and contemporary - positive media, and or negative media
.........Reserach sholuld include a trip to the library for books, and interviews, if appropriate musuem and histotoic site visits, and or attending events.. NOT JUST SEARCHIN THE WEB

 

3/17
LECTURE
Determining process, schedule, and consaquenc of assignment
Discussion of reserach and finalize topics
Interactive media project archetecture

DUE 3/24
ASSIGNMENTS:
Interactive media project:
For your approved topic:
1...... Prepare a concept strategy statement
2...... Prepare a universe outline
3.......Completed reserach and summary to discuss in class
4.......Start preparing rough a content outline

3/24-4/28

The Archeology of Seattle's West Point
http://www.washington.edu/burkemuseum/westpoint/

Churchill And The Great Republic
http://www.loc.gov/exhibits/churchill/interactive/

Cover Art: The Time Collection at the
National Portrait Gallery
http://www.npg.si.edu/time/

Curating the City: Wilshire Blvd.
http://www.curatingthecity.org/

Forests Forever
http://www.forests-forever.com/cgi-bin/index.cgi

MoMA: Tall Buildings
http://www.moma.org/exhibitions/
2004/tallbuildings/index_f.html

Barbie http://barbie.everythinggirl.com/

Sleeping Giants http://www.kodak.com/US
/en/corp/features/sleepingGiants/

Holocost http://www.ushmm.org/museum/exhibit/online

Margaritaville http://www.margaritavilletequila
.com/margaritavilletequila/index.jsp

African Experience http://www.dreams2.com/flash/afrika/movie.htm

Mercedes http://www.mercedes-amg.com/

Havaianas http://www.havaianas.com/eng/1024/home.html

Leading Interactive design Studios
The Chopping Blockhttp://www.choppingblock.com/Second Story http://www.secondstory.com/

 

TOPICS:
Andrea Alves & Sarah Cornejo - Salsa Brazilian
Jag Griffiths - Classic Rock
Alellena Hillery – Movie scores
Jeanette Romero & Marlon Hernandez - Hip-Hop / Rock
Minjeong Park - Jazz
Daniel Lozano & Yusef Alahmad - Deep House
Dina Guardado & Vanessa Harris - Origins of country music
Alicia Carter & Rosie Iankova - Trance

Sarah Albanawi – Color Therapy
http://muweb.marymount.edu/~sma24937/multimedia

LECTURES 3/24-4/28
splash screen
Roughs screen layouts & story boards
Photoshop: Animalizing and Type settings
Timelines and Scrolling Images
Infographics
Effective use of sound
Effective use of video
Preloader

Multimedia Design April Schedule.
Meeting all deadlines = grade increase by 0%
Final presentation counts 100% of grade

March 24
           Completed research & information design
including concept strategy statement
and universe outline

March 31
Open Lab Work On Your Projects
Create and or collect all media including:
Copy, quotes, photographs and illustrations, animations,
music, sound effects, video clips, voice overs

April 7
Create and or collect all media including:
Copy, quotes, photogaphs and illustrations, animations,
music, sound effects, video clips, voice overs

April 14 (No class Monday schedule)
1. Create and or collect all media including:
Copy, quotes, photogaphs and illustrations, animations,
music, sound effects, video clips, voice overs

2. Assemble contnet and programming

April 21
Assemble contnet, programming and testing

April 28
Presentation of interactive media projects

Final interactive media projects are due May 2nd by Midnight!
Final grades will be submitted on the morning of May 5th.

A. Items to be handed in on my office door:
         1. Labeled CD or DVD with your name, date and project title
         2. Four files:
                  1. Flash player (projector) file of your project
                  2. Folder with: .html and .swf file for your project
                  3. Your .fla project file
B. Upload your file to your course Web site
         (If file to large to upload then never mind)

Extra Credit: design a CD or DVD label and case insert for you project