CSE 332: Multimedia Design and Development
Goals of the course:
- To learn how to design and develop multimedia for real world e-learning
- To practice software engineering in a learner-oriented project
- To learn and apply cognitive principles of user interface design
- To learn how to implement multimedia e-leaning in Adobe (formerly Macromedia) Flash
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):
- Lecture on goals and requirements of course; hypermedia and interactive multimedia (PowerPoint)
- Lab 1: Flash workspace, drawing and text tools (Powerpoint).
- Lecture on assembling a multimedia development team and roles (PowerPoint)
- Lab 2: Flash timelines and animation (Powerpoint).
- Lecture on multmedia life cycle: multimedia as a software development process (PowerPoint)
- Lecture on structures and tools (Powerpoint format).
- Lecture on user interface design and prototyping (Powerpoint). Includes a blog assignment and a project assignment.
- Lecture on e-learning (Powerpoint). Based on Clark and Mayer, e-Learning: The Science of Instruction, chapters 1-2, and other materials (Powerpoint)
- Lecture on Design: storyboards and scripts (PowerPoint)
- Multimedia and contiguity principles from e-Learning: The Science of Instruction, chapters 3-4 (PowerPoint)
- Modality (visual and audio) and redundancy principles from e-Learning: The Science of Instruction, chapters 5-6 (PowerPoint)
- Coherence, personalization and practice principles
from e-Learning: The Science of Instruction, ch 7-9 (PointerPoint)
- Lecture on sound in multimedia (Powerpoint)
- Testing through user observations (PowerPoint).
- The Importance of Color (Steve Zanias's PowerPoint).
- Startup and (advanced) Flash development (Rob Sandie's Flash Paper presentation).
- Lecture on Dynamic HTML and AJAX: Cascading Style Sheets, Document
Object Model, JavaScript (Powerpoint) (Word)
Old lecture notes (will update as semester progresses):
Lectures on Authorware (Word format).
- Guide for
Storyboard Authors, by MATTER project in UK. Includes a template and
a nice summary of user interface techniques to consider. Some of what they
include in storyboarding I call preliminary analysis.
- Dr. Ward Cates' storyboard form (Word document)
- Storyboard sketch form--horizontal (Word
document)
- A sample script, for a chapter of The Universal
Machine, written by a professional script writer, Jennifer Birch
(Word document)
- Another
sample script, for the CIMEL project, a prototype lesson
on Design Patterns, written by a CS graduate student (Word document, with
graphics)
- Script
writing guidelines, for the CIMEL project (Word).
- Project User Interface Design Guidelines
(Word document) Review these pointers for your projects!
- Interface design
checklist for the CIMEL project (HTML).
- More Interface
Design for Computer-based Learning Environments by Marshall G. Jones
of Northern Illinois University and James R. Okey of The University of Georgia
- Sample design document for a student project,
2001 (Word document)
Lecture on User interface
design (Word format). PowerPoint here.
- Lecture on graphical image development (Word format) (Powerpoint).
- Lecture on Text and fonts (Word format), (Powerpoint).
- Lecture on Media types (sound, animation, video) (Word format)
- Lecture on web development using Dreamweaver (Word format)
- Lecture on Authorware Web Package and designing Authorware
pieces for the web (Word format)
- Review
of HTML authoring tools, PCWeek, 1/24/00
- A simple CGI script that collects information from
a form and forwards it via email
- Some Javascript that does drag and drop
- Evaluation Design and Tools,
notes by Neff Walker (Georgia Tech) and Gilbert Valdez (North Central Regional
Educational Laboratory), with my highlights in bold italics (from http://www.ncrel.org/tandl/eval2.htm).
- Lecture
on acquiring and negotiating permissions for content and talent (Word
format)
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).