Multimedia Tutorial Production Guide
McKinney Engineering Library
A guide to the production of multi-media library instruction using streaming media technology.
Is Streaming Media the Right Choice?
ing in online library instruction. Nancy Dewald
notes in the Journal of Acadmic Librarianship
that “active learning is accomplished with indi-
vidual or collaborative exercises, questioning
by the librarian... or other forms of practice to
1
reinforce instruction.” Similarly, Brandon Hall
states in the Web-based Training Cookbook that
“Interactivity makes the difference between a
program that simply presents information, and
2
one that actually trains the user. By integrat-
There are a variety of media formats that can fa- rich learning experiences, Flash animation is
cilitate the successful delivery of online instruc- far more time-consuming to produce and more
tion; the one you choose should reflect the goals complex to modify than a SMIL-based tutorial.
ing streaming media instruction with interactive
segments like quizzes, assignments, or follow-
along exercises, the effectiveness of your tuto-
rial may be improved. Keep in mind that even on
the Web, doing is a better teacher than simply
watching and listening.
and abilities of your instructors and learners.
In addition, Flash production requires a highly-
specialized set of technical skills and costly
This guide is based on the redesigned online software. The use of simple HTML was rejected
Engineering Communications Tutorial at the because an audio component was deemed cru-
University of Texas, developed by the McKin- cial to the multi-lingual sections of the tutorial.
ney Engineering Library in partnership with the
Digital Information Literacy Office and Digital Li- When you are deciding on a format for your
brary Services Division. The tutorial underwent tutorial, remember to consider your audience’s
analysis and revision with the goal of creating learning environment. If you expect the majority
effective library instruction with guidance in mul- of learners to use a dial-up connection or older,
tiple languages and diverse media. Streaming lower-speed computers, you may wish to avoid
media was the format selected for the project bandwidth-intensive solutions that rely upon the
because it would allow the development team to latest browsers and plug-ins. FlashMX is an
use separate audio files for each language while example of current technology that is not ubiq-
drawing from a common bank of visual imagery. uitously available. Even SMIL, the technology
The images and audio files could be synchro- recommended in this guide, has cross-platform
nized using the Synchronized Media Integration limitations.
Language, or SMIL.
Looking Ahead
Other formats—such as Flash and simple Although this guide focuses on the produc-
HTML—were rejected for a variety of reasons. tion of audio/visual elements, the Engineering
Although Flash offers many interactive features Communications Tutorial development team
that lend themselves to the development of acknowledges the importance of active learn-
p. 3
Planning Your Instruction
Instructional designers spend a great deal of
time planning instruction before actually creat-
ing any instructional materials. This step is vital
whether you are a teacher planning classroom
activities, a writer developing a textbook, or a
course developer for online instruction.
1
2
3
Course Goal:
1. Acquaint students with strategies for effective Internet searching.
Course Objectives:
3.1
1.1
1.2
Before you begin creating your online library
instruction tutorials, take the time to thoroughly
identify and organize the information you want
to deliver. Remember that “library instruction
is best-recieved when it is course-related, and
1. Students will be ae differenferent search enges.
•
•
•
Google
Yahoo
Altavista
1.1.1
1.1.2
3
2. Students will be able tce.
specifially assignment-related.” Assuming that
3. Students will be able to construct a Boolean search.
you have already identified a genuine need for
online instruction on the topic of your tutorial, the
next step is to analyze your learners and estab-
lish instructional goals.
4. Students will be able to explain the concept of stop-words and identify the more common
ones.
5. Students will be able to identify signs of unreliable information.
Analyzing your Learners
him or herself? Now determine what the learner ers will need to master before they can success-
will need to be able to do to demonstrate that fully complete the different sections of your tuto-
the instruction has achieved the stated goals. rial. Looking at this list may bring attention to the
Write out instructional objectives in the form of areas that require the most attention and may
activities that the learner will be able to perform even suggest topics of instruction that weren’t
when finished with the tutorial. This exercise will in the original outline. For example, if students
help you structure your tutorial to the greatest must know how to construct a boolean search
advantage of your learner. It will also assist you string in order to complete a tutorial about your
in evaluating whether or not your completed tu- library catalog, you may wish to include a sec-
Consider the age, experience, cultural back-
ground and technical expertise of your learning
audience. Are they a homogenous group with
similar goals or do they vary widely? What are
learners’ probable goals in completing the on-
line tutorial? What aspects of online instruction
might they prefer to classroom instruction? How
will they use the knowledge they gain?
torial meets all of its instructional objectives.
tion or even a separate tutorial on the subject of
boolean logic.
Once you have successfully answered these
questions, you are in a good position to create
online instruction that will be both meaningful
and enjoyable for your learning audience.
Finally, make an outline of the topics you’ll cover
over the course of the tutorial and think about Consult “Tips for Developing Effective Web-
the most sensible order in which to present based Library Instruction” by the ACRL for more
them.
4
recommendations.
Clarifying Instructional Goals/Objectives
Think about your instructional goal for the learn-
er. Does it match the probable goal of the learner
It may also be useful to list the skills that learn-
p. 4
Determining Available Technology/Skill Sets
The technology with which you choose to deliver
your instruction should complement the instruc-
tional goals and audience profiles that were de-
fined in the first section. This guide focuses on
the use of streaming media (using Real® media
delivery tools) to deliver audio, video, animation
and slide-show presentations. Bear in mind that
the use of streaming media can be augmented
by more interactive material that engages your
learner in active learning.
something about optimizing them. Optimizing
images allows you to reduce file sizes with as
little image degradation as possible.
If you wish to use video in your tutorial, the obvi-
ous requirements are a video camera and video
editing application. In addition, you will need to
become familiar with the options for synchroniz-
ing your audio and video segments as well as
optimizing video files for streaming in Real me-
dia format.
If you are using this guide to prepare your tuto-
rial, you need to have some basic knowledge
of:
For screen capture video, the product Camtasia
is one of the only products on the market and
• SMIL (an XML-based mark-up
language like HTML)
• audio recording
• image manipulation
(Fireworks®, Photoshop®, etc.)
• Real® media formats
Flash animations can be played in RealPlayer
7 or 8 and the RealOne Player, although sound
effects embedded in the Flash animation itself
will not be heard. Instead, sound must be syn-
chronized using SMIL. Flash animations can
be created using either Macromedia Flash or
Adobe LiveMotion.
RealText files that will synchronize the audio
and visual components of the finished tutorial.
Optionally, you may wish to use video or ani-
mation, in which case you’ll need to be familiar
with:
The audio for your tutorial will need to be
digitally recorded and saved in the appropriate
Real format. This process requires a computer
equipped with a sound card, high-quality micro-
phone and software for recording and editing
the audio files. An inexpensive option for audio
software is the RealSystem Producer Basic,
which is freely downloadable (as of summer
• digital video editing
• video screen capture
(Camtasia®)
• Flash® animation production
Software/Hardware Requirements
Many of the files required to produce your tutori-
al can be created using a variety of applications
that are available at little or no cost.
Image manipulation can be done using a vari-
ety of applications including the ever-popular
Photoshop and Fireworks. In addition to being
able to create the images, you’ll want to know
A basic text editor like WordPad or Notepad can
be used to create all of the SMIL, RealPix and
p. 5
Script Creation
The first step in producing your instructional ma-
terials is creating the audio scripts for the indi-
vidual sections. The audio will guide the learner
through the information in each section of your
tutorial, so the script should be crafted with your
instructional goals and objectives in mind.
Create scripts for each section of the tutorial
outline that you developed in the instructional
planning stage. Include staging notes in your
script that describe what the learner might be
seeing while the script is being played. This will
assist you when you create the visual materi-
als. In addition, the types of visual cues that you
plan to offer your learners may alter the script
considerably.
Once you have created your scripts, proceed
to the visual media creation step. DO NOT
RECORD your scripts before you have created
your visual media. You will likely discover new
and creative ways of presenting the information
throughout the visual media creation process,
which can result in significant script revision.
p. 6
Visual Media Creation
The options for visual media creation are limited
only by your imagination—and project dead-
line! Between static images, animations, video,
and text there are infinite combinations of rich,
expressive visual delivery methods for your in-
struction.
of PowerPoint you use. Refer to the PowerPoint
help documentation for further directions.)
More on Image Creation
If you are familiar with PhotoShop, Fireworks,
or other image creation applications, creating
your visual media can be a lot of fun. Although
streaming your media allows you to use larger
file sizes than would be reasonable on a stan-
dard Web page, you should not neglect image
optimization. If your final presentation is too
large, it will take a long time to load, and may
not play as smoothly as you’d like. Since you are
saving your images as gifs, optimization means
reducing the number of colors as much as pos-
sible without significantly reducing the quality of
the image. Refer to the help documentation of
your image creation application for details.
The next step is to create visual media that will
be displayed as the learner listens to your audio
lecture. Using the script that you wrote, begin
creating visual pieces to accompany each por-
tion of the lecture. As you assemble a series of
images, you will likely find that your audio script
requires revisions here and there. Remember
as you create your media that your learner will
need at least several seconds to absorb each
new piece of visual information.
It is important to save your images in GIF
format. Gif is the only image format that sup-
ports streaming. (Animated gifs are supported
as well; however, to obtain the smallest pos-
sible file size, you may wish to use short Flash
animations rather than animated gifs.) You don’t
need to do anything special with the gif files
themselves; you will learn how to synchronize
the images with the audio when we create our
SMIL file later on.
The final determination should be based on the
quality of server you will be using to host the
tutorial and the type of media that will be pres-
ent. For example, Real video requires more
bandwidth than Flash animations, so a tutorial
containing a lot of Real video should be smaller
on the screen than one containing Flash.
Flash Animation
Flash animations can be played through Real
Players 7 and 8 as well as the RealOne Player.
If you would like to animate sections of your
tutorial, Flash provides a low-bandwidth alterna-
tive for doing so, as long as you keep a few rules
in mind.
Image Creation for Beginners
First, sounds that you create in your Flash movie
will not play through Real. Create silent anima-
tions and synchronize any audio using SMIL.
Perhaps the easiest and fastest method of
creating visual media is through the creation
of PowerPoint slides. You may create an entire
presentation in PowerPoint and then save your
slides as gif images.
Your final tutorial will run in a Real Player window
of a specified size. Before you begin creating
your media, be sure to establish the size of your
tutorial. DO NOT plan on using the entire screen
for your presentation. In order to keep download
times reasonable, you’ll need to restrict the size
of your tutorial to around 500x350 OR LESS.
Second, don’t spend too much time perfecting
the timing of your Flash pieces. As with video,
Flash segments will need to be synced up with
the Audio portion of your tutorial later on and
this will likely include some tweaking within the
(The precise method for exporting your slides
as images may vary depending on the version
p. 7
Visual Media Creation
Flash segment itself. Short, simple animations or Website. Screen capture video is not as effec-
are the easier to integrate with audio than pro- tive for teaching conceptual knowledge such as
longed displays.
Boolean logic or information evaluation.
Third, the more keypoints in your Flash movie, Regardless of the software/hardware or format
the larger the file. Keep keypoints to a minimum. in which your original video is captured, you
Complex scripting should also be avoided. will need to convert the file to Real media for-
Although Real maintains that interaction with mat (.rm). Real Producer, Camtasia, and other
Flash elements as defined using ActionScript media creation applications provide options for
is preserved through the Real player, we rec- saving your files in Real media format. Your set-
ommend extensive testing before you include tings will vary according to the type of server that
significant interactive elements in your Flash will host your media and the connection speeds
pieces.
of your users. To determine the appropriate set-
tings for your tutorial, consult your Webmaster
Don’t forget that the use of Flash for our pur- and the Real Networks online documentation.
poses is only to enhance the display of visual
information. If you find that Flash is becoming
the centerpiece of your tutorial, you may wish to
reassess the decision to use streaming media
as your method of delivering instruction.
Video Production
Digital video is a bandwidth intensive medium
that requires some special skills to edit and
prepare for presentation. If there are segments
of your tutorial that will benefit greatly from the
inclusion of video, use it. However, if your tuto-
rial does not require video to be successful, you
may choose to use other, less complex visual
elements.
One way of using instructional video is to cap-
ture actions on a computer screen with a prod-
uct like Camtasia. This can be helpful if you are
trying to convey procedural knowledge such as
interaction seqences with a computer program
p. 8
Audio Media Creation
be saved in the Real media format (.rm) using
settings appropriate for your server and audi-
ence. See Real Networks documentation for
details.
There are as many software combinations avail-
able for audio media production as there are for
visual media production. In addition, a range of
audio recording hardware is available depend-
ing on your needs and expertise. Remember
that the quality of your audio is affected by the
quality of every step in the recording and editing
process; the microphone, the mixer, the sound-
card and the software you use will all influence
the caliber of your final presentation.
TIP: When you save your audio files, be
sure to use the same Real media settings
for your audio as you used to save any
video.
The simplest hardware option for recording
your audio is using a high-quality microphone
that plugs directly into the back of a computer
with a sound card. In conjunction with free soft-
ware such as Real Producer Basic, or Windows
Sound Recorder, this method will result in ser-
viceable audio files, but not professional grade
sound. If high-quality audio is a priority for your
tutorial, secure the use of a professional-grade
microphone and mixer.
Regardless of how you capture your audio
tracks, media cleaning software such as Media
Cleaner® will help reduce background noise
and increase the quality of your final product.
Since animation and video sequences have their
own timeline, the synchronization of your audio
with animated or video segments will demand
considerable attention. For video segments, you
may choose to incorporate your audio into the
video file itself. Remember that audio in Flash
movies will not play through Real player.
As with video, your final audio files will need to
p. 9
Synchronizing Your Tutorial with SMIL
SMIL, the synchronized multimedia integration
<smil>
language, is an XML-based mark-up language.
<head>
If you’ve ever used HTML to create a Web page,
<meta name=”title” content=”Engineering Communications Tutorial”/>
SMIL will look somewhat familiar.
<meta name=”author” content=”Tutorial Team”/>
<meta name=”copyright” content=”(c)2002 McKinney Engineering Library”/>
<layout>
A very simple SMIL file and an included RealPix
file appear on the right.
<root-layout background-color=”white” width=”500” height=”330”/>
<region id=”graphics” top=”0” left=”0” width=”500” height=”330”/>
</layout>
Notice that in SMIL, as in XML, every tag is
closed using the ‘/’ character. If the tag does not
contain other tags, the ‘/’ character simply ap-
pears adjacent to the closing ’>’.
</head>
<body>
<par>
<audio src=”rtsp://real.myserver.edu/tutorials/audio.rm”/>
<img src=”intro.gif” region=”graphics” begin=”0s” end=”06s”/>
<img src=”picture1.gif” region=”graphics” begin=”06s” end=”12s”/>
<img src=”slides.rp” region=”graphics” begin=”12s” end=”25s”/>
<img src=”conclude.swf” region=”graphics” begin=”25s” end=”35s”/>
</par>
The two most important sections of the docu-
ment appear in red and blue. The red section
simply describes the layout of the presentation.
The root-layout appears in every SMIL file; it
defines the dimensions of the entire SMIL pre-
sentation. Once the root layout has been estab-
lished, individual regions are defined within the
root area in which the visual media may appear.
In this file, only one region has been defined. It
begins 0 pixels from the top of the presentation
and 0 pixels from the left and occupies the entire
presentation area.
</body>
</smil>
<imfl>
<head width=”500” height=”330”
title=”Indexes”
author=”Engineering Communications Tutorial Team”
copyright=”(c) 2002 McKinney Engineering Library”
timeformat=”dd:hh:mm:ss.xyz”
duration=”0:13.0”
bitrate=”100000”
aspect=”true”/
background-color=”#ffffff”/>
<image handle=”1” name=”images/slide1.gif”/>
<image handle=”2” name=”images/slide2.gif”/>
<image handle=”3” name=”images/slide3.gif”/>
In the blue section, the individual pieces of me-
dia are synchronized. The audio and the first
image begin simultaneously (as indicated by the
<par> tags), but the first image disappears after
6 seconds. Note that the audio file is referenced
with the full URL using the protocol “rtsp” instead
of “http”; this is because the audio file is hosted
on a machine running Real Server. The second
image appears 6 seconds into the audio piece
and disappears at 12 seconds. The third image
<fill start=”0” color=”white”/>
<fadein start=”0” duration=”1” target=”1”/>
<crossfade start=”3” duration=”1” target=”2”/>
<wipe direction=”up” start=”6” duration=”2” target=”3”/>
<fadeout start=”12” duration=”1” color=”white”/>
</imfl>
p. 10
Synchronizing Your Tutorial with SMIL
file—called “slides.rp”—is a RealPix file. The
contents of the RealPix file appears to the lower
right. RealPix is a lot like SMIL; it’s a mark-up
language that makes it easy to define transitions
like fade-outs and wipes between your images.
Notice that the RealPix file contains references
to three images, for a total of six visual media
files to be played with the audio file.
TIP: You may wish to create a skeletal
SMIL or RealPix file that sequences your
visual media without precise timing. Then
listen to your audio track, note the times at
which image transitions should occur and
modify the SMIL file accordingly.
Real Networks maintains excellent documen-
tation on producing multi-media presentations
with SMIL and RealPix. Refer to thier support
help files and to learn about more sophisticated
SMIL syntax.
p. 11
Publishing Your Tutorial Online
The final step in producing your online tutorial
is publishing it on the Web. Your tutorial may
consist of just one SMIL presentation, or it may
be a series of presentations. You must decide
how to present these files in a way that facili-
tates your instruction. You may wish to provide
a link to the SMIL presentation directly from an
existing Web page. Or you might create a spe-
cial “tutorial” Web page with links to one or more
related presentations. Alternatively, you can
embed your presentation in HTML files, which
allows for substantial control over the viewing
environment. (In addition, embedding in HTML
allows you to include quizzes, assignments and
other non-multimedia elements in a consistent
framework.)
By now, you will have determined whether Real
Server is available to host your media. If so, be
sure to place any media, RealPix and SMIL files
on the Real Server. If you elect to embed your
multi-media segments in an HTML framework,
place the HTML files in your usual Web-publish-
ing folder.
TIP: Remember that streamed audio and
video hosted on a machine running Real
Server are retrieved using the “rtsp” proto-
col instead of “http.” Be sure to reference
your media appropriately.
p. 12
Evaluating Your Tutorial
Evaluation is a crucial step in the instructional
design process. Evaluation allows you to con-
tinuously increase the effectiveness of your
instruction and hone your design skills. Since
your instruction is an online tutorial, you’ll face
unique challenges in evaluating your work—but
don’t be discouraged! You will likely learn as
much from the evaluation process as you did
throughout the planning and production stages.
determine whether or not users of your tutorial
are learning the skills you are trying to teach.
Be selective when choosing evaluation partici-
pants. Don’t use staff members or even regular
patrons of your library to test library instruction
unless they are the intended learners. While it
is tempting to use the resources close at hand,
you’ll be surprised at the fresh perspective and
ideas that outsiders will bring to the project.
Your tutorial has elements of both a Website and
instructional material. To accommodate these
dual purposes, we’ll look at two different evalua-
tion processes, one that examines the usability
of Web resources, and one that assesses the
success of the instruction itself.
When designing the test itself, use the instruc-
tional goals you developed in the planning
stage. Imagine ways that your learner could
demonstrate newfound competencies; whether
you use a written skills test, a personal dem-
onstration or a personal interview, be sure to
maintain a consistent format for each evaluator.
Finally, remember that you are testing your in-
struction—not the evaluators!
Usability
In recent years, usability has taken center stage
ability is to observe first-time users navigating
in the world of Web development. Becoming
familiar with standard usability heuristics (such
as those published by Jakob Nielsen), can
help you make good design decisions through-
out the planning and production processes.
your page or site and accessing the instructional
materials. Don’t worry about the success of the
instruction itself while you test for Usability. First
determine whether or not users understand how
to use the tutorial and can do so successfully.
Usability problems can create false negatives
when you test the efficacy of your instruction;
it’s best to eliminate lingering usability problems
before evaluating the instruction itself.
Remember, usability encompasses a wide
range of Website characteristics such as ac-
cessability for the disabled, visual and syntactic
organization, navigation and labeling, and many
other distinct features of interaction. When you
test the usability of your tutorial, do it in multiple
browsers and platforms--the most basic test of
usability is whether or not your site can be seen
by Mac and PC users with a variety of browsers.
Evaluating Instruction
Instruction is generally evaluated using learner
assessments of some kind. Assessment may
include an interview, a skills demonstration or
a written test. By carefully planning and choos-
ing participants for the evaluation, you can
The best way to test your finished tutorial for us-
p. 13
Thanks and Credits
The redesigned Engineering Communications
Tutorial and the development process upon
which this guide was based would not have been
possible without the contributions of the staff at
the Digital Library Services Division and the Dig-
ital Information Literacy Office, eLeader Project.
Thanks go out to Aaron Choate, Peter Keane,
Mason Jones, Carolee Miles, and Susan Rit-
tereiser for contributing their technical and
creative expertise to the tutorial design and pro-
duction process. We also thank Tina Ochiai and
Adriana Oldham for their translation services.
For More Information
Visit the Engineering Communications Tutorial
on the McKinney Engineering Library Homep-
Contact McKinney Engineering Library for more
information about our online library instruction
initiatives: [email protected]
This guide was created by Andrea Forte: aforte
p. 14
References
1. Nancy H. Dewald, “Trasnsporting Good Library Instruction Practices into the Web Environment: An Analysis of Online Tutorials, ” Journal of Aca-
demic Librarianship 25 (January 1999), 26.
2. Brandon Hall, Web-Based Training Cookbook (New York: John Wiley & Sons, 1997), 4.
3. Dewald, 26.
4. ACRL Instruction Section Teaching Methods Committee, “Tips for Developing Effective Web-Based Library Instruction,” <http://www.lib.vt.edu/
istm/WebTutorialsTips.html> (accessed 06/05/2002)
Other Resources:
Anderson, Anne, David Gray and Jacque Dessino, “Tutorials and Other Web Aides,” Inquiry 4 n2 (Fall 1999), 48-57
Dewald, Nancy H. “Web-Based Library Instruction: What is Good Pedagogy?” Information Technology and Libraries 18 (1999): 26-31.
Dick, Walter et al, The Systematic Design of Instruction, 5th ed. Boston: Addison-Wesley Publishing 2000.
Dixon, Lana, Marie Garrett, Rita Smith, and Alan Wallace. “Building Library Skills: Computer-Assisted Instruction for Undergraduates.” Research
Strategies 16 (1998): 93-102.
Duchastel, “A Web-Based Model for University Instruction,” Journal of Educational Technology Systems 25 (1996/97):225.
Dupuis, Elizabeth A. “The Times They Are A’Changin: Students, Technology and Instructional Services.” Reference Services Review 26.3-4 (1998):
11-16.
Gagne’, James and Lesie Briggs, Principles of Instructional Design, 4th ed. Fort Worth: Harcourt Brace Jovanovich College Publishers, 1992.
Kocour, Bruce, Using Web-based Tutorials To Enhance Library Instruction, College & Undergraduate Libraries v7 n1 p45-54, 2000.
Tobin, Tess and Martin Kesselman, “Evaluation of Web-Based Library Instruction Programs” In: IFLA Council and General Conference. Conference
Programme and Proceedings (65th, Bangkok, Thailand, August 20-28, 1999)
p. 15
|