CSE 332: Multimedia Design and Development

Goals of the course:

Course description:
Analysis, design and implementation of multimedia software, primarily for e-learning courses or training.
Projects emphasize user interface design, content design with storyboards or scripts, creation of graphics, animation, audio and video materials, and software development using high level authoring tools, such as Flash. Prerequisite: CSE12, CSE15, CSE16, Engr 1 or consent of instructor. Blank.

An example of multimedia e-learning:
A lesson from a chapter introducing concepts on computer networks, from The Universal Computer.
Note use of Flash animation, text, sound, and interactivity (towards the end of the les son).

Syllabus and assignments:

  • Syllabus, with office hours, textbooks, course requirements, readings and assignments.
  • Class learning activity criteria and topics. Please submit your topics early. (See class participation grading criteria.)
  • Project grading criteria. (Check here for details about what you should submit and how I will evaluate your e-learning projects.)
  • Project role assessments, to be filled out after design in mid-March and end of project in May (Word) (HTML).
  • Class participation grading criteria. Crtical thinking about e-learning design and constructive feedback to your peers is important in this course.
  • Sample student project: Flash IN Flash, from Spring 2008 (zip file).

  • Lecture notes and supplementary material (note--these will be updated during the semester):

    Some shareware or trial version software you may want to download:
  • Adobe (formerly Macromedia) downloads. From here you can download trial versions of Adobe (formerly Macromedia) software, including Authorware, Dreamweaver and Freehand. Trial periods of 30 or 45 days. These downloads are quite large! (Author Attain 5 is about 30MB compressed, the others are a bit smaller.) Shockwave web players and XTRAs (Authorware and Director plug-ins) are also available from this site.
  • Audacity sound editor program, a free, open source, cross platform.
  • Macromedia Flash extensions facilitate interesting interactions. Information about what Flash learning extensions do (quizzes, drag and drop, page turning navigation, etc.) There are other extensions as well. From Macromedia, requires Flash 5.
  • Adobe (formerly Macromedia) Dreamweaver extensions add useful features to Dreamweaver. Check out the CourseBuilder for Dreamweaver or the Authorware extensions in the learning interactions category list box at the bottom of this page--and let me know if you use an extension and what you think. From Macromedia, requires Dreamweaver 4.
  • JASC PaintShop Pro 7.0 Comes with a GIF animation package and screen capture facility. Also available from download.com. About 30MB zipped. If you'd like to download something smaller, Paintshop Pro 4.12 is about 3MB zipped, with tutorial.
  • Screenhunter. A completely free screen capture utility, captures rectangle, window and full screen to BMP, JPEG or GIF files.
  • GIFCON animation program, a shareware program for creating GIF89a animation files, playable in Web browsers, about 1.45MB zipped.
  • LOOKOUT for C++--, a programming environment for C++ programming. About 8 megabytes zipped, about 20 megabytes unzipped. Already installed on the Lehigh LANs
  • . Made at Lehigh. Anyone want to help me create a new and improved version?

    Some sites that may help you with multimedia and web site development:
  • Ten Good Deeds in Web Design.
  • Some good rules of thumb to consider.
  • Caboodles of clip art on the web.
  • About.com's well-organized clip art site.
  • Free sound flies and animated GIFs.
  • Flash ActionScript tutorials. Learn how to write ActionScript for Adobe (formerly Macromedia) Flash.
  • A nice tutorial for creating web pages in HTML, with pointers to tutorials for JavaScript and Java and other useful resources for web page design.
  • Web site resources. Links to some HTML and art resources.
  • Graphics resources. ZDnet's links to some multimedia resources.
  • Eyeball Design. Photoshop tutorials and more. (Click on one of the rotating balls.)
  • Flash tutorial. More Flash tutorials. For example, here's how to convert bitmap to vector art in Flash.
  • Essential ActionScript 3.0 Programming, by Colin Moock, O'Reilly.
  • 3D graphics in Flash. (Review of Swift 3D, a commercial add-on to Flash.)
  • Tutorial on forms using CGI and Javascript, a fairly simple introduction.
  • A more advanced tutorial on how CGI and HTML forms, using PERL.
  • Another tutorial on using PERL to create CGI scripts. Nice table of contents up front.
  • W3C (World Wide Web Consortium). Learn about new standards for web development.
  • Web Site Garage. Free services for maintaining and improving your Web site. Automate site maintenance checks, optimize your graphics and analyze your traffic.
  • RVG Hexadecimal Color Chart. Can be useful for hand-coding color into HTML. Also some color swatches.
  • An automated self-promotion site. Once you've gotten your site up and running, you may want to let others know about it.

  • Some e-learning sites:
  • Why e-learning? SkillSoft, an e-learning solutions company, gives their answer.
  • E-learning and customer loyalty: "Customer education can be a vital tool for both acquiring and retaining customers."
  • Learn2.com's demo, introducing Java.
  • UserActive's programming demos. Emphasizes guided discovery approach with a "Learning Sandbox".
  • Quia's demo. Teaching facts: state capitols drill and practice by matching.
  • Mathdork for Algebra I. Teaching concepts: consider the use of animation in these lessons.
  • Webmonkey e-learning lessons. Teaching procedures: lessons on various technical tools and concepts.
  • Particle Adventure. Teaching principles: What do you think of the trivia questions? How do they contribute to learning?".
  • SCORM: Sharable Content Object Reference Model. Defines a Web-based learning "Content Aggregation Model" and "Run-Time Environment" for learning objects. A unified "reference model" of interrelated technical specifications and guidelines designed to meet DoD's high-level requirements for Web-based learning content.

  • A few cool pages illustrating Flash:
  • DDT for Malaria Control. Researchers developed this educational, interactive Flash movie for The Malaria Foundation International.
  • Learn about vision. Another cool site developed in Flash 5.
  • Nice user interface with back button--the source code and other goodies are available at http://www.robertpenner.com/.
  • Nice dynamic Flash animation--after a few moments, try moving the mouse around to see what the characters do. Take a look at Moock's ectures to learn how he did it, using Flash actionscript.
  • Tutorials for creating interactive elements in Flash: drop-down list, speed slider, mouse tracker, news ticker, and games.
  • A professional developed site using Flash to sell furniture in Europe.
    A few cool pages developed by students for this course:
  • Momentum and Collisions --a Physics tutorial for high school students (Megan Vasta, Nick Moukhine and Brigette Swan, 2005)
  • Jeff Lutz's page has a fixed background layer, combines DHTML and an animated gif, etc.
  • Mike Mercincavage's page uses Dynamic HTML to implement running dinosaurs, menu, dropdown box, etc.
  • Doug Stewart's page uses Dynamic HTML for dynamic menus; nice graphic design. (Netscape only).
  • Soma Roy's drag and drop Flash movie (Flash source code).