Multimedia Production Tools Syllabus        Instructor: Diana Schwartz This course provides a comprehensive background for working with digital sound, images, and video for multimedia projects ranging from CD-ROM title production to website design. This ten-week course will help the student become familiar with current major software packages used in multimedia production. The software packages explored this semester include Adobe Photoshop, Macromedia Director, DeBabelizer, SoundEdit 16, Adobe Premiere, Elastic Reality, Logomotion, PhotoVista, and Apple QuickTime VR Authoring Studio. Additional Web tools covered include BBEdit, JavaScript, Shockwave, Streaming Audio, Real Video, Adobe PageMill, GifBuilder, and various Netscape Plug-Ins. Prerequisites: Students must have a working knowledge of the Macintosh operating system. Students must be able to launch applications; save, retrieve, name and rename files; organize work on hard disks, Zip cartridges; and work with plug-ins, extensions and control panels. Without this basic knowledge of the Mac OS this course will prove to be very frustrating. Textbooks:

		Multimedia: Making it Work by Tay Vaughan; Osborne McGraw-Hill Publishers; 1998 (fourth edition).
		Designing Multimedia Web Sites by Stella Gassaway, Gary Davis, Catherine Gregory; Hayden Books; 1996.

Optional supplementary readings: See the complete Multimedia Production Tools Bibliography for details. Required Final Project: A substantial multimedia prototype application (for example, a CD-ROM title proof-of-concept demonstration or complete website design) incorporating photographic images, digital sound, QuickTime video, Shockwave animation and interactivity (hyperlinks). This project may be done as part of a group or individually. It is highly recommended that the project be done as part of a group since part of the goal of this class is to establish proficiency in collaborative design and production. Weekly Topics Week 1: General Introduction to Web Page Authoring; HTML Tags, Elements and Attributes; Web Browsers Week 2: Web Graphic File Formats and Their Preparation: GIFS, JPEGS, Transparent and Animated GIFS Week 3: HTML Tables; Image Maps; Image Acquisition: Scanning and Retouching Tools; Color Enhancement using Adobe Photoshop Week 4: Sound Editing Tools; The Use of Sound on the Web, The AU, WAV, AIF and MIDI File Formats Week 5: Introduction to Macromedia Director; Using Shockwave Animations on the Web; HTML Frames; Fonts and Colors in HTML Week 6: HTML Forms; Designing a Multimedia Website; Working in Teams Week 7: QuickTime, QuickTime VR and Digital Movie-Making Tools; Using Video on the Web Week 8: Working with JavaScript; onMouseOver and onMouseOut Event Handling Week 9: META Tags and Search Engines; Hybrid HTML Design; Morphing, Warping and 3-D Tools Week 10: Demonstrations of Final Projects   Week 1: General Introduction to Web Page Authoring; HTML Tags, Elements and Attributes; Web Browsers Tools Covered: Netscape Navigator, Internet Explorer, BBEdit, SimpleText. An introduction to the HyperText Markup Language (HTML), the basic language used to create web pages. The different components of HTML: Tags and Elements and their attributes. The structure of an HTML document. Previewing web pages in Netscape Navigator and Internet Explorer. Formatting text using HTML: Headings, Paragraphs, Breaks, Lists, etc. Website file structure and naming conventions. Introduction to the integration and assembly of text, still images, and links in HTML. Editing HTML using BBEdit. Creating anchors and hyperlinks.   Week 2: Web Graphic File Formats and Their Preparation: GIFS, JPEGS, Transparent and Animated GIFS Tools Covered: BBEdit, Netscape Navigator, Adobe Photoshop, Debabelizer, GifBuilder Introduction to the GIF image format, the Netscape 216-color palette, transparent GIFS, Interlaced GIF images. Discussion of Color Palettes. Discussion of Netscape 216-color palette versus standard 256-color, 8-bit multimedia palette. Converting images to GIF and JPEG formats for the Web. Reducing the number of colors in an image for faster load times. Using GifBuilder to make Animated GIF files. The JPEG image format: Using JPEG to store images in millions of colors. Using Debabelizer for optimal JPEG compression and image size reduction. Using the <IMG> Element, Adding a LOWSRC Attribute; Using the ALT attribute; Using Transparent GIFS, Wrapping text around an image. The single pixel GIF trick for placement. Using images as hyperlinks. Assigned Reading: Vaughan Chapter 14: How the Internet Works. Projects Due Week 2: Project 1: Create a simple web page containing the following tags: <BR>, <P>, <UL>, <OL>, <LI>, <HR>. Project 2 (optional): Create two web pages: each one containing a hyperlink to the other. Places to Browse: The Multimedia Library The Nobelchannel Ink and Image Studio Software Cultures.com Carnegie Hall The Metropolitan Opera   Week 3: HTML Tables; Image Maps; Image Acquisition: Scanning and Retouching Tools; Color Enhancement using Adobe Photoshop Tools Covered: BBEdit, Adobe PageMill, Adobe Photoshop, DeBabelizer Introduction to HTML Tables. The concept of table rows and table data. Creating client-side image maps using Adobe PageMill. Introduction to grayscale and color scanning for the web. Techniques for improved quality of scans. Introduction to Adobe Photoshop. Basic concepts of digital image handling using Photoshop layers. Photoshop tools for manipulation of images. Use of Photoshop Plug-in filters. Discussion of the significance of image formats and resolution both for scanning and for multimedia screen display. We will digitize, retouch and restore images, adjust brightness, contrast and color balance, gamma levels and set resolutions and palette. Use of batch processing using DeBabelizer, how to merge color palettes, rearrange pixels, change pixel depth, create 24-bit to 8-bit color reductions without loss of color or image quality. Assigned Reading: Vaughan Chapter 11: Images Optional Reading: "Designing Multimedia Web Sites" - Chapter 1, "Designing Web Graphics" - Chapter 6 Project Due Week 3: Project 1: Create an animated gif using Photoshop and GifBuilder. This could be an advertising banner (468 pixels wide by 60 pixels high). Places to Browse: How'd They Do That in HTML? Coolnerds.com The Bare Bones Guide to HTML HTML Helper Web Cams HTML Dictionary Hints for Making Tables   Week 4: Sound Editing Tools; The Use of Sound on the Web, The AU, WAV, AIF and MIDI File Formats Tools Covered: SoundEdit 16, Macromedia Director, SimpleText for MIDI Conversion, QuickTime The uses and integrative effect of sound. Digital sound technology basics. Basic concepts of digital sound sampling. Understanding the basic properties of the sound signal. An overview of sound editing tools. Adding fade-ins, fade-outs and other digital effects to sound files. Sound Acquisition and Editing. SoundEdit 16 as a means of recording and editing digital sound on a Macintosh. Discussion of the use of different sample and compression rates for multimedia. The use of sound on the Internet. The HTML Embed command. Embedding sound in Director movies for Shockwave, use of steaming audio in Shockwave. Using MIDI in conjunction with QuickTime. Embedding MIDI files in web pages. Web sound file formats. Discussion of Real Audio and Real Audio encoding. Assigned Reading: Vaughan Chapter 12: Animation. Optional Reading: "Coloring Web Graphics", Chapter 5: Imaging Techniques, Page 76-109. Project Due Week 4: Project 1: Scan a color photograph, sharpen, adjust levels, color correct, and save as a 72 dpi, JPEG file. Make sure this image will load in under 30 seconds (REMEMBER: 1K = 1 second download time on a 28.8K modem.) Create an HTML page incorporating this image. Places to Browse: The Planet Turntable.com SonicNet.com Broadcast.com Real Networks   Week 5: Introduction to Macromedia Director; Using Shockwave Animations on the Web; HTML Frames; Fonts and Colors in HTML Tools Covered: Macromedia Director, Netscape Navigator, BBEdit Creating web animation using Director. Adding interactivity with Lingo. Creating Shockwave animations for the web. Dealing with bandwidth constraints. Creating a navigational structure using HTML frames. Changing font sizes and colors in HTML. Assigned Reading: Vaughan Chapter 10: Sound. Optional Reading: Designing Multimedia Web Sites, pages 224-248 and Macromedia Director "Learning Director" Manual, Pages 131 - 144. Projects Due Week 5: Project 1: Create a web page listing the names of your family members in an HTML table. This page should also contain HTML Links and Anchors. Include photographs. The page should include an E-mail link allowing the user to send you a response. Project 2 (optional): Record your voice describing an event, add appropriate background music from available royalty free music clip CD-ROMs of available music, or from an audio CD. Mix your voice and the background track into an AU sound file in SoundEdit 16. Embed this sound file in a web page. Places to Browse: Vanguard Media Zoetek Adveract.com Sites With Audio Clips Internet Underground Music Archive Mike Peterson's Rock MIDI Page MIDI Net   Week 6: HTML Forms; Designing a Multimedia Website; Working in Teams Tools Covered: BBEdit, Netscape Navigator Understanding the multimedia design process including audience analysis, content analysis, system analysis, learning objectives, content decisions, paper prototype, interface design, navigation maps, skeleton screens, prototypes, etc. How to plan and create a successful multimedia product. How to design its look and feel, build its interactive features, acquire and combine the appropriate images, sounds, and text. The use of storyboarding and flowcharting in navigation planning. The "team" approach to developing multimedia titles. Defining the roles of project manager, interface designer, writer, videographer, sound person, programmer, and content expert. Basic principles of interactive design. Discussion of common interface design elements: backgrounds, buttons, controls, sliders, cursors, pop-up menus and windows. Design based on a logical grouping of material. Establishing structural metaphors. Use of metaphor as a design principle. Use of analogy as a design principle; visual representation of analogy. Using color, sound, cursors, rollover events, icons. Designing virtual space, combining paradigms. Assigned Reading: Vaughan Chapter 18: Designing for the World Wide Web Projects Due Week 6: Project 1: Clean up the Glenn Gould color scan included on the Class CD-ROM. Project 2 (optional): Create a Photoshop collage file (640 x 480) using layers. Use this file to describe aspects of your personality, your job, your family, etc. Places to Browse: Website Promotion and Development Photoshop Tips and Tricks Macromedia.com Netscape Dynamic Documents Vancouver Film School: Training in Film and 3D Computer Animation   Week 7: QuickTime, QuickTime VR and Digital Movie-Making Tools; Using Video on the Web Tools Covered: Adobe Premiere, Apple MoviePlayer, PhotoVista, Make QTVRPanorama, VRL, and Apple QuickTime VR Authoring Studio Basics of the Apple QuickTime compressed video standard. Editing tools for QuickTime image sequences. Image compression technology. Image capture techniques including the basics of inputting source material, story construction, use of transitions, superimposition, audio and titles. Creating transitions using dissolves, page turns, use "blue screens" to change backgrounds, sync soundtracks, set titles, and alter video frame-by frame with custom filters, transitions and rotoscoping. Introduction to QuickTime codecs. Methods of optimizing video for CD-ROM and web playback. Using the Cinepak codec. The Sorenson QuickTime Codec. Data rate optimization algorithms. Dithering a Quicktime movie to a custom palette using Debabelizer. Basic introduction to QuickTime VR technology. The basic tools for producing QTVR. Introduction to Photovista and Spin Panorama for easy stitching. Use of Apple's Make Panorama tool and QTVR Authoring Studio. Compositing still images into a QTVR panorama using Photoshop and Apple's Make Panorama. Adding hot spots and objects to QTVR movies. Putting QTVR movies on a website. Assigned Reading: Vaughan Chapters 16, 17, and 19. Project Due Week 7: Project: Create a paper-based plan for a website. Draw the levels of interactivity and describe the content you envision for each section. Discuss the ways the users will interact with each page. After you have created your site outline, create a functioning text-only version. Places to Browse: Multimedia Library QuickTime VR Section Multimedia Library QuickTime VR Sites Apple QuickTime VR Developer Page List of Bay Area Photo VR Scenes QTVR.com   Week 8: Working with JavaScript; onMouseOver and onMouseOut Event Handling Tools Covered: BBEdit, Netscape Navigator, JavaScript Introduction to the JavaScript language. JavaScript objects, properties, methods, and event handlers. Including scripts in HTML pages. Creating JavaScript Rollovers. Opening new windows using JavaScript. Inter-window communication using JavaScript. Using the onMouseOver and onMouseOut events to display information in the Netscape status bar. Assigned Reading: Vaughan Chapter 13: Video. Projects Due Week 8: Project 1: Using clip video CD-ROMs, create your own 30-60 second QuickTime movie with sound. One idea might be to make a movie of a numeric countdown as seen on film reels, (10, 9, 8, 7, 6, 5, 4, 3, 2, 1) with something interesting happening at each of the 10 points. Project 2 (optional): Create an unusual website background tile. Places to Browse: Director Web Net Resources Jim Heid's Web site Animatics Interactive   Week 9: META Tags and Search Engines; Hybrid HTML Design; Morphing, Warping and 3-D Tools Tools Covered: Elastic Reality, Logomotion, BBEdit The META tag is used to provide information about the HTML document. This meta information can be extracted by web servers to identify and index web page content. using the META tag to add keywords which can be used by search engines. Using the META tag to force browsers to automatically load a new page at a specified interval. Designing Web pages for other web browsers: Internet Explorer, Mosaic and America Online. How to maintain the integrity of your Web page design in most of the current browsers. Morphing and Morphing Software. The concept of morphing. Introduction to Elastic Reality. Morphing as an animation aid. Uses of morphing in multimedia applications. Introduction to the creation of 3-D graphics using Logomotion. The creation of easy flying 3-D logos. Assigned Reading: Vaughan Chapters 20: Delivering. Optional Reading: "Designing Multimedia Web Sites" - Chapters 7 and 8 Projects Due Week 9: Project 1: Create and animate your own 3-D logo using Logomotion. Embed it in a web page as a QuickTime movie. Project 2 (optional): Create a morph or warp animation between two different PICT files using Elastic Reality. Turn this final animation into an animated GIF file and call it from an HTML page. Project 3 (optional): Use Photoshop to make individual files containing single words of anti-aliased text. Stitch these together using Photovista to create a scrolling word list. To make this interactive (like random poetry), try creating several smaller QTVR files with only three or four words. Display these smaller QTVR files in Director or Netscape to allow the user to create sentences based on your words. Places to Browse: Fox Interactive Venu Interactive Webreference.com Cool Site of the Day.com   Week 10: Demonstrations of Final Projects Each group will give a formal presentation of their final project to other class members and possible visitors.