Download Bringing Multimedia to the Web

Bringing Multimedia
to the Web
Jim Lehman
Educational Technology, Purdue
http://www.soe.purdue.edu/~lehman
Today’s Topics
Tips and techniques for:
Interactive multimedia in “basic” HTML
Putting familiar multimedia on the Web
HyperStudio
 Director
 QuickTime

Flash – a tool for animation and
interaction designed for the Web
Interactive Multimedia
with Basic HTML
Text, Graphics, & Links
Even the most basic web page has
multimedia capability through text,
graphics, and links
Use linking to add interactivity to what
otherwise could be mostly static pages
Example
Plain HTML - Tips
Avoid revealing answers to students by
Setting alink and vlink to the same color (if
using common feedback screens).
 Using image alt tags that are non-specific.
 Using JavaScript to control the message
displayed on the status bar (i.e. so the URL
does not reveal the correct answer.

Plain HTML – Tips, contd
Limit the size of images to minimize
loading times
72 dpi
 GIF for images with limited colors (e.g., clip
or line art)
 JPEG for high color images – experiment
with levels of JPEG compression

JPEG Example
20% compression
file: 31K
50% compression
file: 19K
80% compression
file: 12K
Enhanced Example
You can further enhance your basic
pages by
Using animated GIFs, where appropriate,
to highlight information.
 Using layers to display feedback rather
than a separate page.

Example
Resources
Macromedia Dreamweaver

www.macromedia.com
GIF Construction Set

www.mindworkshop.com
JavaScript Bible by Danny Goodman
Putting Familiar
Multimedia on the Web
HyperStudio
With the HyperStudio plugin, and the
<EMBED> tag, your HyperStudio stacks
can easily be viewed on the web.
Use the Export WebPage Extra to
automatically generate the HTML.
Example
HyperStudio Tips
HyperStudio plugin required
EMBED tag syntax

<EMBED SRC=“stackname.stk"
WIDTH=512 HEIGHT=342>
Server support

Even with the plugin, stacks will not work
unless the server “understands” the
HyperStudio mime type and extension.
HyperStudio Tips, contd
Name your stack consistent with
common web naming conventions
Safest: 8 characters with no spaces
 Extension: STK to denote a stack

File size can be a BIG problem.
(Example is over 1 Mb.) To reduce
overall file size, reduce component
elements, especially images.
Director
As with HyperStudio, with the proper
plugin (Shockwave), and the <EMBED>
tag, you can display shocked Director
movies on the Web.
Example
Director Tips
Shockwave plugin required
EMBED tag syntax (same as Hstudio)

<EMBED SRC=“filename.stk"
WIDTH=640 HEIGHT=480>
Server support

Even with the plugin, stacks will not work
unless the server “understands” the
Shockwave mime type and extension.
Director Tips, contd
Director movies must be shocked
before they will operate on the Web.

Extension: DCR
File size is a problem (example 207 Kb),
although shocking introduces some
economies. To reduce overall file size,
reduce component elements, and read
Director documentation.
QuickTime
With the QuickTime plugin, and the
<EMBED> tag, you can display
QuickTime movies (and many other
forms of media as well) on a page.
Example
QuickTime Tips
QuickTime plugin required
Basic EMBED tag syntax


<EMBED SRC=“name.mov"
TYPE="video/quicktime" HEIGHT="262"
WIDTH="320" AUTOSTART="FALSE"
CONTROLLER="TRUE">
(Add 22 pixels for the controller.)
Alternative – Direct Link

An alternative to using <EMBED> is to simply link
to the file. This opens the movie in a separate
window.
QuickTime Tips, contd
Make sure the server supports the
QuickTime mime type.
Name your movies properly
Safest: 8 characters with no spaces
 Extension: MOV to denote a movie

QuickTime’s plugin is very versatile and
supports many other forms of media
such as WAV and AIFF audio files.
QuickTime Tips, contd
File size is a BIG problem with
QuickTime files.
When creating your own movies for use
on the Web, consider usage (e.g.,
intranet or Internet) and use a utility
such as Media Cleaner Pro to minimize
file size.
QuickTime Examples
Cinepak for 4X CD-ROM

320 x 240, 3 Mb
Sorenson for CD-ROM

320 x 240, 1.2 Mb
Sorenson for Web

240 x 180 (pixel doubled), 205 Kb
Sorenson for 56K connection

192 x 144 (pixel doubled), 54 Kb
Resources
HyperStudio

www.hyperstudio.com
Director

www.macromedia.com
QuickTime

www.apple.com/quicktime
Media Cleaner Pro

www.terran-int.com
Flash: Multimedia
Made for the Web
Flash
Flash is a relatively new Macromedia
product that supports vector graphics,
animation, and interaction on the Web.
Because it is designed for the Web, if
delivers very compact files.
The Flash or Shockwave/Flash plugin is
required to play back files.
Example
Flash Tips
Flash or Shockwave/Flash plugin
required; mime type server support
required (.swf extension)
OBJECT and EMBED tag syntax is a bit
more complex than others. Let Flash
create the HTML automatically.
Files sizes are significantly smaller than
other methods (example is only 36 Kb)
Flash Tips, contd
Stick to use of vector graphics
whenever possible; this keeps file size
low; avoid bitmaps and large audio files.
Adjust publish settings to achieve the
best compression rates without loss of
quality.
Don’t try to use Flash for large Directorlike projects; it isn’t built for it.
Flash Resources
Macromedia

www.macromedia.com
Asmussen Interactive Flash Guide

www.turtleshell.com/asm/tutorials/index.htm
Just Do It
Dive in and try new ways to bring your
multimedia to the web.
Don’t be afraid to experiment and to try
new tools and techniques.
Multimedia can add interest,
excitement, and interactivity to your web
pages.
Bringing Multimedia
to the Web
Questions?
For presentation
content…
Visit my web page at:
http://www.soe.purdue.edu/~lehman