New Media Technology multi-media User Manual

McKinney Engineering Library

Multimedia Tutorial Production Guide

A guide to the production of multi-media library instruction using streaming media technology.

Table of Contents

Is Streaming Media the Right Choice? ........................................... 3

Planning Your Instruction ......................................................... 4

Determining Available Technology/Skill Sets .................................. 5

Script Creation ..................................................................... 6

Visual Media Creation ............................................................. 7

Audio Media Creation ............................................................. 9

Synchronizing Your Tutorial with SMIL .......................................... 10

Publishing your Tutorial Online .................................................. 12

Evaluating Your Tutorial ........................................................... 13

Thanks and Credits ................................................................ 14

p. 2

Is Streaming Media the Right Choice?

There are a variety of media formats that can fa­cilitate the successful delivery of online instruc­tion; the one you choose should reect the goals
and abilities of your instructors and learners.

This guide is based on the redesigned online
Engineering Communications Tutorial at the
University of Texas, developed by the McKin­ney Engineering Library in partnership with the
Digital Information Literacy Ofce and Digital Li­brary Services Division. The tutorial underwent
analysis and revision with the goal of creating
effective library instruction with guidance in mul­tiple languages and diverse media. Streaming
media was the format selected for the project
because it would allow the development team to
use separate audio les for each language while
drawing from a common bank of visual imagery.
The images and audio les could be synchro­nized using the Synchronized Media Integration
Language, or SMIL.

Other formats—such as Flash and simple
HTML—were rejected for a variety of reasons.
Although Flash offers many interactive features
that lend themselves to the development of

rich learning experiences, Flash animation is
far more time-consuming to produce and more
complex to modify than a SMIL-based tutorial.
In addition, Flash production requires a highly­specialized set of technical skills and costly
software. The use of simple HTML was rejected
because an audio component was deemed cru­cial to the multi-lingual sections of the tutorial.

When you are deciding on a format for your
tutorial, remember to consider your audience’s
learning environment. If you expect the majority
of learners to use a dial-up connection or older,
lower-speed computers, you may wish to avoid
bandwidth-intensive solutions that rely upon the
latest browsers and plug-ins. FlashMX is an
example of current technology that is not ubiq­uitously available. Even SMIL, the technology
recommended in this guide, has cross-platform
limitations.

Looking Ahead

Although this guide focuses on the produc­tion of audio/visual elements, the Engineering
Communications Tutorial development team
acknowledges the importance of active learn-

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
reinforce instruction.”1 Similarly, Brandon Hall
states in the Web-based Training Cookbook that
“Interactivity makes the difference between a
program that simply presents information, and
one that actually trains the user.2 By integrat­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.

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.

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
specially assignment-related.”3 Assuming that
you have already identied 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.

Analyzing your Learners

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?

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.

Clarifying Instructional Goals/Objectives

Think about your instructional goal for the learn­er. Does it match the probable goal of the learner

Course Goal:

1. Acquaint students with strategies for effective Internet searching.

Course Objectives:

1. Students will be able to explain the differences between different search engines.

2. Students will be able to dene relevance.

3. Students will be able to construct a Boolean search.

4. Students will be able to explain the concept of stop-words and identify the more common

5. Students will be able to identify signs of unreliable information.

him or herself? Now determine what the learner
will need to be able to do to demonstrate that
the instruction has achieved the stated goals.
Write out instructional objectives in the form of
activities that the learner will be able to perform
when nished with the tutorial. This exercise will
help you structure your tutorial to the greatest
advantage of your learner. It will also assist you
in evaluating whether or not your completed tu­torial meets all of its instructional objectives.

Finally, make an outline of the topics you’ll cover
over the course of the tutorial and think about
the most sensible order in which to present
them.

It may also be useful to list the skills that learn-

• Google

• Yahoo

• Altavista

ones.

1 2 3

1.1

1.1.1 1.1.2

1.2

ers will need to master before they can success-
fully complete the different sections of your tuto­rial. Looking at this list may bring attention to the
areas that require the most attention and may
even suggest topics of instruction that weren’t
in the original outline. For example, if students
must know how to construct a boolean search
string in order to complete a tutorial about your
library catalog, you may wish to include a sec­tion or even a separate tutorial on the subject of
boolean logic.

Consult “Tips for Developing Effective Web­based Library Instruction” by the ACRL for more
recommendations.

3.1

4

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 proles that were de­ned in the rst 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.

If you are using this guide to prepare your tuto­rial, you need to have some basic knowledge
of:

• SMIL (an XML-based mark-up
language like HTML)

• audio recording

• image manipulation
(Fireworks®, Photoshop®, etc.)

• Real® media formats

Optionally, you may wish to use video or ani­mation, in which case you’ll need to be familiar
with:

• digital video editing

• video screen capture
(Camtasia®)

• Flash® animation production

Software/Hardware Requirements

Many of the les required to produce your tutori­al can be created using a variety of applications
that are available at little or no cost.

A basic text editor like WordPad or Notepad can
be used to create all of the SMIL, RealPix and

RealText les that will synchronize the audio
and visual components of the nished tutorial.

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 les. An inexpensive option for audio
software is the RealSystem Producer Basic,
which is freely downloadable (as of summer

2002) at www.realnetworks.com.

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

something about optimizing them. Optimizing
images allows you to reduce le 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 les for streaming in Real me­dia format.

For screen capture video, the product Camtasia
is one of the only products on the market and
can be found through www.realnetworks.com.

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.

Script Creation

The rst 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 signicant 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 innite combinations of rich,
expressive visual delivery methods for your in­struction.

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 nd 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 le size, you may wish to use short Flash
animations rather than animated gifs.) You don’t
need to do anything special with the gif les
themselves; you will learn how to synchronize
the images with the audio when we create our
SMIL le later on.

Your nal tutorial will run in a Real Player window
of a specied 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.

The nal 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.

Image Creation for Beginners

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.

(The precise method for exporting your slides
as images may vary depending on the version

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
le sizes than would be reasonable on a stan­dard Web page, you should not neglect image
optimization. If your nal 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 signicantly reducing the quality of
the image. Refer to the help documentation of
your image creation application for details.

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.

First, sounds that you create in your Flash movie
will not play through Real. Create silent anima­tions and synchronize any audio using SMIL.

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

Visual Media Creation

Flash segment itself. Short, simple animations
are the easier to integrate with audio than pro­longed displays.

Third, the more keypoints in your Flash movie,
the larger the le. Keep keypoints to a minimum.
Complex scripting should also be avoided.
Although Real maintains that interaction with
Flash elements as dened using ActionScript
is preserved through the Real player, we rec­ommend extensive testing before you include
signicant interactive elements in your Flash
pieces.

Don’t forget that the use of Flash for our pur­poses is only to enhance the display of visual
information. If you nd 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 benet 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.

or Website. Screen capture video is not as effec­tive for teaching conceptual knowledge such as
Boolean logic or information evaluation.

Regardless of the software/hardware or format
in which your original video is captured, you
will need to convert the le to Real media for­mat (.rm). Real Producer, Camtasia, and other
media creation applications provide options for
saving your les in Real media format. Your set­tings will vary according to the type of server that
will host your media and the connection speeds
of your users. To determine the appropriate set­tings for your tutorial, consult your Webmaster
and the Real Networks online documentation.

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

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 inuence
the caliber of your nal presentation.

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 les, 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.

be saved in the Real media format (.rm) using
settings appropriate for your server and audi­ence. See Real Networks documentation for
details.

TIP: When you save your audio les, be
sure to use the same Real media settings
for your audio as you used to save any
video.

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 nal 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 le itself. Remember that audio in Flash
movies will not play through Real player.

As with video, your nal audio les will need to

Synchronizing Your Tutorial with SMIL

SMIL, the synchronized multimedia integration
language, is an XML-based mark-up language.
If you’ve ever used HTML to create a Web page,
SMIL will look somewhat familiar.

A very simple SMIL le and an included RealPix
le appear on the right.

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 ’>’.

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 le; it
denes the dimensions of the entire SMIL pre­sentation. Once the root layout has been estab­lished, individual regions are dened within the
root area in which the visual media may appear.
In this le, only one region has been dened. It
begins 0 pixels from the top of the presentation
and 0 pixels from the left and occupies the entire
presentation area.

<smil>
<head>
<meta name=”title” content=”Engineering Communications Tutorial”/>
<meta name=”author” content=”Tutorial Team”/>
<meta name=”copyright” content=”(c)2002 McKinney Engineering Library”/>

<layout>

<root-layout background-color=”white” width=”500” height=”330”/>
<region id=”graphics” top=”0” left=”0” width=”500” height=”330”/>
</layout>

</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>

</body>
</smil>

tutorial.smil

<im>
<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”/>

In the blue section, the individual pieces of me­dia are synchronized. The audio and the rst
image begin simultaneously (as indicated by the
<par> tags), but the rst image disappears after
6 seconds. Note that the audio le is referenced
with the full URL using the protocol “rtsp” instead
of “http”; this is because the audio le 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

<image handle=”1” name=”images/slide1.gif”/>
<image handle=”2” name=”images/slide2.gif”/>
<image handle=”3” name=”images/slide3.gif”/>

<ll 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”/>
</im>

slides.rp

p. 10

Synchronizing Your Tutorial with SMIL

le—called “slides.rp”—is a RealPix le. The
contents of the RealPix le appears to the lower
right. RealPix is a lot like SMIL; it’s a mark-up
language that makes it easy to dene transitions
like fade-outs and wipes between your images.
Notice that the RealPix le contains references
to three images, for a total of six visual media
les to be played with the audio le.

TIP: You may wish to create a skeletal
SMIL or RealPix le 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 le accordingly.

Real Networks maintains excellent documen­tation on producing multi-media presentations
with SMIL and RealPix. Refer to thier support
website (http://service.real.com/) for detailed
help les and to learn about more sophisticated
SMIL syntax.

Publishing Your Tutorial Online

The nal 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 les 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 les, 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 les
on the Real Server. If you elect to embed your
multi-media segments in an HTML framework,
place the HTML les 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.

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.

Usability

In recent years, usability has taken center stage
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.

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.

image by freeimages.co.uk

The best way to test your nished tutorial for us-

ability is to observe rst-time users navigating
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 efcacy of your instruction;
it’s best to eliminate lingering usability problems
before evaluating the instruction itself.

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

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.

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!

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 Ofce, 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­age: www.lib.utexas.edu/engin.

Contact McKinney Engineering Library for more
information about our online library instruction
initiatives: [e-mail]

This guide was created by Andrea Forte: aforte

@alumni.utexas.net.

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)