G22.3033.01 Introduction to Multimedia

Fall 1999 Mon. 5-7 P.M., 102 Weaver Hall
Prof. Jack Schwartz(212) 673-3242Schwartz@cs.nyu.edu
719 Broadway Room 1226

Contacting Me: You can contact me by an appointment. preferably by E-mail, but by phone in more urgent cases. I can make appointments most days, including meetings after the end of our Monday class (but not before.)

Teaching Assistant: The Teaching Assistant for this course is Andruid Kerne, who can be contacted at andruid@cs.nyu.edu.

Course Requirements: There will be no examinations; your entire grade will be determined by the project work you submit. Starting in the second week of the course you will be asked to establish an Internet home page for yourself (if you do not have one already.)

Submitting Homework: All homework will be submitted by including it on your home page. E-mail the grader when you have posted the homework. Put a link to each week’s homework at the start of your page, so that the grader can find it easily. The grader will then examine your page, issue a grade, and send this to you by E-mail, along with any appropriate comments. Homework in Director and Lingo can be submitted as Shockwave modules embedded in your HTML page.

Up to 1 page of the code you have used can be included in your E-mail to the grader. Be careful to mail only the most interesting parts of your code.

All project homework is due two weeks after it is assigned in the syllabus. For example, the project assigned in Week 2 (Mon, Sept. 21) should be submitted no later than Saturday evening, Oct. 3. The Teaching Assistant will generally be able to respond to your submission within the following week.)

Final major project. Besides the weekly homework, each enrolled student is responsible for one final ‘major’ project. Final ‘major’ projects are due one week after the term ends. ‘Major’ projects can be done cooperatively in groups of up to 3 students. Please let me know by E-mail, no later than the 10th week, what report or project you have chosen.

During the remainder of the term,, you can access the Javascript Helper and the HTML Helper.


(1) "Director 7 Quickstart Guide for Macintosh and Windows", by Andre Persidsky. Peachpit Press, 1999.

(2) "JavaScript, the Definitive Guide", by David Flanagan. O’Reilly Publishers, 1996.


Other useful references:

(1) "Multimedia - Making it Work", by Tay Vaughn. Osborne McGraw-Hill Publishers 1998 Edition

(2) "HTML Sourcebook", 3nd Edition, by Ian S. Graham. John Wiley 1997.

Software you will need, download sources:

You will Netscape Communicator 4, available at www.Netscape.com. Microsoft Internet Explorer, available free from the Microsoft web site, can be used instead. You will also need the Shockwave plugin for Netscape or Internet Explorer. This is available free from http://www.macromedia.com/software/downloads/. From this source you can also get free 30-day trial copies of Macromedia Director, which you will need starting in the second week of the course, and Macromedia Flash, which you will need in the sixth week.

General References:

(1) "JavaScript/HTML Helper" available on Internet, for the time being at www.MultimediaLibrary.com.

A useful site for general information about multimedia tools, with examples, references, and tutorials, is:


Other Internet Download Sources:

(i) http://www.lycos.com (general search engine)

(ii) http://home.netscape.com/eng/mozilla/3.0/handbook.javascript (JavaScript Language specification)

(iii) http://www.sdsc.edu/vrml (VRML repository)

(iv) http://home.netscape.com/eng/mozilla/3.0/handbook/plugins/index.html (index of Netscape plugins)

(v) http://www.macromedia.com/rools/Shockwave/index.html (general source for Shockwave software and information)

Other references:

(1) "Shocking the Web" by Cathy Clarke, Lee Swearingen, and David K. Anderson, Macromedia Press, 1997

(2) "Netscape Plug-in Book" by S. Turlington. Ventana Communications 1996.

(3) "Adobe Illustrator 8.0 Classroom in a Book", by Adobe Creative Team. Peachpit Press, 1998.

(4) "Adobe After Effects: Classroom In A Book". Adobe Systems, Inc., Adobe Press, Mountain View, CA, 1999.

(5) "Adobe Photoshop: Classroom In A Book - Version 5.5" - Adobe Systems, Inc., Adobe Press, Mountain View, CA, 1999.

(6) "Adobe Premiere: Classroom In A Book" - Adobe Systems, Inc., Adobe Press, Mountain View, CA, 1998.

(7) "Advanced Adobe Photoshop: Classroom In A Book" - Adobe Systems, Inc., Adobe Press, Mountain View, CA, 1995.

(8) "Creating and Designing Multimedia with Director" - Paula Petrik and Ben Dubrovsky, Prentice hall, Upper Saddle River, NJ, 1997.

(9) "GIF Animation Studio: Animating Your Web Site" - Richard Koman, O'Reilly and Associates, Sebastopol, CA, 1996.

(10) "How to Digitize Video" - N. Johnson, F. Gault, and M. Florence, John Wiley, New York, New York, 1994.

(11) "Interface Design with Photoshop" - J. Scott Hamlin, New Riders, Indianapolis, IN, 1996.

(12) "Kai's Power Tools - The Illustrated Guide" - Nick Clarke, Addison-Wesley, New York, NY, 1995.

(13) "Photoshop 5 For Macintosh - Visual Quickstart Guide" - Elaine Weinmann and Peter Lourekas, Peachpit Press, Berkeley, CA, 1999.

(14) "Photoshop Type Magic 2" - Greg Simsic, Hayden Books, Indianapolis, IN, 1996.

(15) "QuickTime: The Official Guide for Macintosh Users" - Judith L. Stern and Robert A. Lettieri, Hayden Books, Indianapolis, IN, 1994.

(16) "VRML 2.0 Sourcebook" - Andrea Ames, David R. Nadeau, and John l. Moreland, John Wiley, New York, New York, 1996.

Week 1 (September 13): General Introduction to Multimedia. A first Look at HTML, JavaScript, and Macromedia Director.

Overview of course. An introduction to basic multimedia resources: bitmapped and related graphics, 3-D graphics, video; digital audio, and MIDI music. The basic issue: adapting the multimedia environment to human cognitive capabilities and aesthetic reactions.

Introduction to the major tools to be covered: Web Browsers and HTML. JavaScript; Director. Director as a tool for Multimedia Prototyping. Making Shockwave files from Director source. Introduction to Director/ JavaScript communication.

Readings: Visual Quickstart Guide: Chaps. 1 (Basics of Director); Chap. 2 (Casts); Chap. 3 (Score.) Flanagan: Chaps. 1 (Intro to JavaScript); 2 (Lexical Structure of JavaScript).

Things to Browse: HTML Helper, available thru http://www.multimedialibrary.com. First six items from the Tutorials from Macromedia collection available thru the class home page and at http://www.multimedialibrary.com. (Intro. to animation, Cast basics, Score basics, Frame-by-frame animation, Sprites, Animation by Drag)

Project 1: Establish your home page. Look over the collection of fonts available to you. Set up copies of a paragraph in three different fonts on a page linked to your home page. One should be deliberately bad, the two others good. Your paragraph should give your view of the advantages and disadvantages of the fonts for various purposes. Your home page should include at leat one good HTML trick which you have discovered by browsing other Web pages and examining their HTML source. It should also use internal Links and Anchors, at least one Table, and half-a-dozen links to Web sites of interest to you. All Homework prepared during the term must be submitted by including it on this page. Your page should include an E-mail Link allowing the grader to send you your grades by clicking on the Link.

Week 2 (September 20): Comments on Educational Multimedia. A small gallery of multimedia classics.

Readings: Visual Quickstart Guide: Chaps. 4 (Animation), 5 (Playing Movies);

Flanagan Chap. 3 (JavaScript variables and Functions).

Things to Browse: Items 7 thru 12 from the Tutorials from Macromedia collection. (Motion Modification, Vector Shapes, Rotating Sprites, Skewing Sprites, Ink effects, Color Inbetweening). First 10 pages of Director Tutorial 1,

available thru the class home page and at http://www.multimedialibrary.com. Also browse the project_1 (fonts gallery) Director embed available via the class web site.

Project 2: Adapt the HTML page you constructed for project 1 to display your paragraph in a text field inside a Director ‘embed’, like that shown in the project_1 embed available via the class home page. You can use anything taken from that page and its source. Your Director embed should contain hyperlinks which allow the text font for the paragraph to be set interactively. Include no more than 2 fonts in your Director project cast.


Week 3 (September 27): The Director Paint Window. First Survey of Lingo. Behaviors.

Survey of Lingo facilities. Graphics development tools and techniques in Director. Patterns, Gradients, and Inks. Bitmap depth. Storage considerations. Techniques for attaining Precision. Features of the Score. The Director tool palette and Text menu. Fonts and Font Management, importance of fonts. General structure of the Lingo language. Points at which code can be placed; Flow of events. Handlers and procedures. Behaviors library, use of behaviors.

Readings: Visual Quickstart Guide: Chaps. 6 (Paint Window); 8 (Tool Palette); 16 (Behaviors)

Things to Browse: Items 13 thru 18 from the ‘Tutorials from Macromedia’ collection. (Basics of Lingo, Lingo Behaviors, Rectangle-to-rectangle Mapping, Lingo waiting, Lingo Frame ready testing, Lingo Media ready testing.) Pages 11-20 of Director Tutorial 1. Also, browse the behaviors library collection supplied by Macromedia, examing the code of the simpler behaviors to see how they are set up.

Project 3: Set up a simple Director animation, in which a small circular ball with an attached caption bounces across the Stage each time a button is pressed but disappears if the button is pressed while the ball is visible on Stage. Use a ‘behavior’ to make your bounce accelerate and decelerate according to the laws of physics.

Project 1 due this week.

Week 4 (October 4): The Director Shapes Window. More Advanced Features of Lingo. Movies in Windows. Objects and Object-oriented usage of Lingo. Animating Shapes. Dynamic Creation of Graphics.

Lingo conditionals and loop structures. List and string capabilities. Easy links and navigation using Lingo. Facilities for screen interaction., moving graphics, etc. Use of draggable graphics; sliders. The Message window. Debugging. Strings in Lingo. Some Examples of Lingo coding: manipulation of text, algebraic computation. Lists in Lingo. Parent scripts and behaviors. Ink Tricks. Use of submovies. ‘Tell’ and Director Inter-window communication. Sprite dragging, puppet sprites. The Director ‘picture of stage’ and ‘crop’ statements.

Readings: Visual Quickstart Guide: Chaps. 9 (Color) 11 (Text); 7 (Shapes Window);

Things to Browse: Items 19 thru 22 from the ‘Tutorials from Macromedia’ collection. (Intro. to Internet coding, Preparing HTML pages using Aftershock, Lingo Streaming, Lingo Stream ready testing). Also, pages 21-30 of Director Tutorial 1. Browse the snapshot_of_stage Director embed available via the class web site. Also, from the Web: browse http://www.illusionworks.com/

Also look over some of the educational items listed in the education section of www-b.gamelan.com/index.shtml.

Project 4: Set up a Director animation, in which square morphs into an irregularly shaped blob, then into a triangle, then back to a blob which splits into two parts each of which continues this same animated motion. Try to make this animation reasonably natural looking, in a cartoon sense. Your shapes should contain interesting gradients, and grow/shrink in size.

Project 2 due this week.

Week 5 (October 11): Sound in Director. Introduction to Sound Edit. Other Advanced Features of Lingo.

The integrative effect of sound. Digital sound technology. Basic concepts of digital sound sampling. Properties of the sound signal. The Lingo Sound tracks. Sound editing tools. Sound Acquisition and Editing using Sound Edit 16. Vector Shapes control in Director. Graphical Puppets. Techniques for use in the Week 8 Face-puppet project.

Reading: Handout: Visual Quickstart Guide: Chaps. 17 (Lingo); 17 (Projectors); 12 (Sound)Sound Edit 16.

Things to Browse: Browse the Curve Object Animation Director embed available via the class web site. Also examine








No Project assigned this week.

Project 3 due this week.

Week 6 (October 18): Introduction to Macromedia Flash.

Flash graphics capabilities. Use of Layers and groups. Flash animations. Flash interactivity and the Flash programming language. Controlling Flash from Lingo. Producing animated GIFs. Use of Flash on the Web.

Readings: Visual Quickstart Guide: Chap. 10 (Digital Video); Flanagan, Chapters 4 (JavaScript expressions); 5 (JavaScript expressions); 6 (functions)

Things to Browse: Download a free trial copy of Flash from the Macromedia website and browse the 8 Flash lessons available in its Lessons folder.

Project 5: Add sound to your Project 3 animation, in a way which adds to its interest. Pay careful attention to the graphics-to-sound sychronization issues involved. Try to minimize the size of the sound files involved.

Project 4 due this week.

Week 7 (October 25): Quicktime and QuicktimeVR in Lingo.

Quicktime and QuicktimeVR movies and tools for constructing them. Lingo movie and QuicktimeVR control facilities. Introduction to Adobe Premiere.

Adobe Premiere and Apple MoviePlayer. The Apple QuickTime compressed video standard. Editing tools for QuickTime image sequences. Image compression. Video editing using Adobe Premiere; Systematic survey of facilities of Adobe Premiere.

Introduction to QuickTime VR; file formats. Tools for producing QTVR. Stitching images using Photovista and Spin Panorama. Use of Apple's Make Panorama tool. Compositing still images into a QTVR panorama using Photoshop and Apple's Make Panorama. Discussion of Apple QuickTime VR Authoring Suite 2.0. Adding hot spots and objects to QTVR movies. Putting QTVR movies on a web site.

Readings: Flanagan, Chapters 4 (JavaScript expressions); 5 (JavaScript expressions); 6 (functions); 7 (objects); 8 (arrays).

Things to Browse: Examine the Face Puppet embed available via the class home page. Review the ‘Movie and QTVR control sections’ of the the class home page Lingo Tutorial. Also examine the http://www.multimedialibrary.com QuicktimeVR section, and the w3.QTVR.com site.

Project 6: Use Flash to create an animated GIF for use on your Web page. This should involve at least four frames. Adapt this construction to operate as a small Flash movie usable in Director, and sensitive to rollovers.

Week 8 (November 1): Score creation in Lingo. Use of Lingo to develop project setup and management utilities.

‘beginRecording’ and ‘Endrecording’, and their associated cast and score maintenance operations. Use of multiple casts, cast member generation. Organization of Larger Director Projects.

Things to Browse: Examine the ‘Score Generation’ embed available via the class home page. Download the director source file of this embed, and use it to generate a set of pages designed as commercial website storyboards.

No Project assigned this week.

Project 5 due this week.

  Week 9 (November 8): The HTML/JavaScript interface. Frames in Javascript. Javascript document element naming.

Including scripts in HTML pages. The ‘eval’ function. Javascript Debugging. HTML Forms as JavaScript interactivity areas. Frames and Windows. Inter-window communication.

For this week's work and during the remainder of the term,, you can access the Javascript Helper and the HTML Helper.

Things to Read: Flanagan, Chapters 1-4.

Things to Browse: Review the ‘Help’ text of the on-line ‘HTML Helper’ and the ‘Lingo/Javascript communication’ page available via the class home page. Work through the first half of the ‘Help’ text of the on-line ‘JavaScript Helper’. Also, examine:





Browse the Gamelan ‘Java’ website: www-b.gamelan.com/index.shtml. Look at 10 or 20 interesting Javascript examples.

Project 7: Use Director to create an arrangement of fields which acts as a small spreadsheet. This should be an n by 2 arrangement of text fields, the first containing space for a number, the second for a formula which defines the value of the text field in terms of others. The first field should be editable if and only if the second is empty. The Tables should have a ‘Go’ button, which when clicked checks all the fields that have been filled in, and uses the formulas attached to some of the fields to fill all possible values.

Project 6 due this week.

Week 10 (November 15): Survey of JavaScript functions.

Things to Browse: Work through the second half of the ‘Help’ text of the on-line ‘JavaScript Helper’.

Project 8: Complete the Face-puppet project described in class. This should be driven by a set of sliders, one for each of the internal parameters of the Face-puppet. (Students who submit outstanding Face-puppets may be excused from the class final project.)

Things to Read: Flanagan, chapters 5-9; also pp. 181-271.

Week 11 (November 22): Creating Interactive pages using the Netscape ‘Layers’ Facility

Multilayer graphics in HTML pages. Handling of events in the Netscape ‘Layers’ environment. Creating draggable and animated graphics. Comparison of Director and Netscape event handling. Applications of ‘Layers’.

Things to Read: Flanagan, chapters 9-12; also pp. 271-end.

Things to Browse: Examine the ‘Flash Movies’ and ‘Interactivity Objects’ embeds available via the class home page.

Project 7 due this week.

Project 9: Rewrite the Week 7 Lingo Spreadsheet Project in Javascript. This should involve replacement of all your Lingo code with comparable Javascript code.

Week 12 (November 29): EZ Vision and MIDI.

Using SimpleText for MIDI Conversion, QuickTime format for MIDI. Frequency and filtering. MIDI basics and tools; EZ Vision as an example.

Things to Read: Handouts: Sound Edit 16, Introduction to MIDI

Things to Browse: Examine the documentation section of the Macromedia Director XTRA’s development kit available on the Macromedia website, and think thru the correspondence between the C procedures describe there and the operations available in Lingo.

Project 8 due this week.

Project 10: Create a ‘color picker’ which allows you to set the color of a square in an HTML page to any RGB value by dragging three sliders (one each for R, G, and B) to any desired position. The current numerical value of each of the three sliders should be displayed in three corresponding text fields.

Week 13 (December 6): Additional Lingo Facilities; An extended example:

Use of Director with other tools; Xtras, etc. Reading and writing external files. Lingo Intrnet operations. Survey of some objects useful for educational interactivity. ‘Event transformers’ in general.

Transitions. Fade-ins/outs and crossfades; Video Castmembers and sprites; video and audio in Shockwave.

Things to Read: Plant and Smith, Chapters 15-21, Chapters 26-31.

Things to Browse (i) Shockwave Developer Tools: http://www.macromedia.com/shockwave/devtools.html

(ii) Director and Shockwave Click Zone


No Project assigned this week. Start to concentrate on your final major project.

Project 9 due this week.

Week 14 (December 13): Additional Tools for creating multimedia elements: Images and Photoshop.

Photoshop as A Director Supplement. Survey of Photoshop Capabilities. Digital image handling using Photoshop layers. Use of Photoshop Plug-in filters. Color Palettes and DeBabelizer. Kai's Texture Explorer and other texture tools. Bryce fractal landscapes.

Things to Browse:





Other Things to Browse:

(i) Making GIF Animations: http://members.aol.com/royalef/gifmake.htm

(ii) Icons, Background Tiles, and Animated GIFS: http://pixelplace.com/

No Project assigned this week. Concentrate on your final major project.

Project 10 due this week.