Creating Interactive Tutorials Using Adobe Captivate 3 A Training ...
University of Maryland Libraries
User Education Service s and the Guides Group
Creating Inter
active Tutorials
using
Adobe Captivate 3
A Training Manual
Revised: J une 1, 2009
Filename: Creating Interactive Tutorials Using Captivate 3 A Training Manual University of Maryland Libraries * User Education Services * June 2008
This Training Manual was produced by Shannon Simmons,
Graduate Student Assistant and Chair of the Guides Group.
The Guides Group is sponsored by User Education Services
at the University of Maryland Libraries
Permission to reproduce this manual or any of its parts for non-commercial educational
purposes is granted. Appropriate citation is appreciated.
University of Maryland Libraries
User Education Services
2113 McKeldin Library
www.lib.umd.edu/UES/index.html
libues@umd.edu
June 2008
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
2
Table of Contents
1.
Introducing Adobe Captivate...………………………………………. 5
2.
Important Things to Consider Before Getting Started…………….. 6
3.
Best Practices Using Adobe Captivate……………………………… 7
4.
Getting Started……………………………………………………...…. 10
5.
The Recording (Screen Capturing) Process..………………………. 12
6.
The Editing Process……………………………………………………. 17
Customizing Screen Captures……………………………….. 23
Text Caption Boxes…………………………………………… 23
Highlight Boxes……………………………………………….. 26
Mouse Click Boxes…………………………………………… 28
7.
The Audio Process……………………………………………………. 29
Preview your tutorial on the Web …………………………. 34
Troubleshooting Slide Timing……………………………… 34
8.
Publishing your Tutorial and Getting it Online ……………………… 41
Loading Tutorial Files in WebSpinner………………………. 45
9.
Contacting Your Guides Group Representative……………………. 48
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
3
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
4
1.
Introducing Adobe Captivate
Reference and instruction librarians are always looking for new and innovative ways of
delivering content to users. Our objective is to create a new generation of user guides and
instructional materials to develop and enhance the information literacy skills of our users. There
are many benefits to using streaming media in education. It is more engaging and interactive for
students than the common static print guide or web page. Other benefits to using Adobe
Captivate include:
• Students who are part of the Digital, Millennial or Google Generation frequently use
Internet technology for education (i.e. information and research purposes),
communication, entertainment, and self-expression. They prefer to be interactive and
want to be users not just viewers or listeners.
• Studies have shown that students receiving streaming instruction in addition to
traditional instruction show dramatic improvements in achievement.
• Captivate files are viewable virtually anywhere, anyplace, thus an unlimited number of
users can be reached.
• They can be viewed multiple times, and can accommodate slower learners.
• Captivate files can be indexed so parts can be watched and re-watched as often as
desired.
• And, Adobe's Captivate software offers a simple, low-cost alternative to creating
streaming audio and video content.
We invite you now to review this Training Manual and learn how to use Adobe Captivate to
produce meaningful learning objects for users.
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
5
2.
Important Things to Consider Before Getting Started
LIBRARIES’ KEYSERVER:
Adobe Captivate is made available through the Libraries’ Keyserver, which is maintained
by ITD or the Information Technology Division. Through the KeyServer, various
software applications are made available to library staff on a first come first served basis.
Call the ITD Help Desk at 301-405-9188 to have Adobe Captivate linked to your
workstation’s desktop; please have your workstation number ready.
COMPUTER SPEAKERS:
You will need to have speakers connected to your workstation. If you do not have any,
contact User Education Services to borrow one; call 301-314-5889.
USB MICROPHONE:
You will need a USB microphone to record audio or voice overlays. Call User Education
Services at 301-314-5889 to borrow one.
ADOBE CAPTIVATE MANUAL
User Education Services owns a copy of the “Essentials of Adobe Captivate 3” manual,
ISBN 1-93273317-5. You may borrow it by calling 301-314-5889.
BEST PRACTICES:
The Libraries’ Guides Group, a team sponsored by User Education Services, develops
and oversees standardized procedures for creating and maintaining general and subject-
specific Guides to Information Resources. In Spring 2008, this group expanded its
mission to review all guide tutorials designed using Adobe Captivate. These Best
Practices are contained in this document.
QUALITY CONTROL:
Guides designed using Adobe Captivate need to be built ‘offline’ in WebSpinner’s JUNK
directory. Guides cannot ‘go live’ until they have been reviewed by the appropriate
Guides Group representative, see: www.lib.umd.edu/guides/group/ggmembers.html
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
6
3. Best Practices Using Adobe Captivate
These best practices were developed by the Libraries’ Guides Group. They may be applied to
tutorials or other products developed using TechSmith’s Camtasia.
KNOW YOUR USER:
Identify your users before getting started. Is the audience students, faculty or staff? Design
with users in mind.
ARTICULATE the LEARNING GOALS:
Establish the goal. What is/are the most important information to be conveyed? Articulate
what you want users to learn. Be realistic about your learning goals; avoid squeeze in too
many learning objectives. Tutorials designed using Captivate need be short and to the point.
They should not be designed to completely replace comprehensive subject guides or in-
class presentations. Use Captivate to help design a tutorial that would emphasize certain
points or features (i.e., of a database, a web site) that are difficult to grasp without
visualization.
DEVELOP A SCRIPT or STORYBOARD:
Writing a clear and concise script is key to the success of your project. Using Captivate, you
are creating a tutorial that puts together a number of short segments that join to make up a
scene. This scene is intended to convey a specific message or set of learning outcomes to
users. To be effective, the message, script or storyboard needs to be well planned. The
script articulates the goals and acts as a guide for the entire production. Without a well
defined script, the job to create a meaningful tutorial will become unmanageable.
PRODUCTION LENGTH:
The Guides Group recommends that Captivate tutorials be produced for no more than 3.5
minutes in length.
NAVIGATION:
Create a clear visual navigation. Logically navigate the user through the desired features on
a screen, web pages or steps. Avoid jumping around a page and going too quickly or slowly.
Should you want users to move from one web page to another, alert users when linking
away to another page, or be clear about their need to click on a link to move forward.
NARRATION:
The narrator needs to speak clearly. Avoid speaking too slowly or quickly. Solicit feedback
from colleagues on the pace of your narration. The Captivate tutorial author does not
necessarily need to be the narrator. Include layperson's definitions for technical or librarian
terminology. Avoid using acronyms. Tighten the language to be as clear and concise as
possible, using clear and simple language.
Continued…
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
7
STANDARD ELEMENTS:
To maintain a consistent look and feel with all Captivate tutorials, guide authors need to include:
AUDIO INTRODUCTION:
Captivate tutorials need to begin with the following audio introduction:
Welcome to the University of Maryland Libraries’ Guide to [insert name of guide]
DESIGN ELEMENTS:
Captivate tutorials need to conform to these design standards:
Fonts:
Verdana
Font Sizes:
14 pt.
Text/Callout box colors:
Adobe Blue
Important considerations about text:
• Include as few words as possible so text can be easily scanned by users.
• Left-justify all text.
• Avoid overusing italics; they are difficult to read on a computer screen.
• Avoid overuse of all-caps.
LINKS:
Captivate tutorials need to include standard forms of information when linked:
Learning to navigate the Libraries’ Home Page [2.5 minutes]
If you cannot view this tutorial, learn how to enable Javascript and download Adobe Flash (free).
HTML Code:
<p><a href=”insert your link”>Learning to navigate the Libraries’ Home Page</a>
[2.5 minutes] <br><font size=”-2”> If you cannot view this tutorial, learn how to <a
href=”pagetobe developed”>enable Javascript and download Adobe Flash
(free)</a>.</font></p>
NAMING FILES
Give meaningful names to your files. Follow Web Services’ guidelines on file naming,
see: http://libi.lib.umd.edu/naming-directories-files-and-links.
Use this:
www.lib.umd.edu/guides/annotated_bibliographies.swf
Instead of:
www.lib.umd.edu/guides/annotbibcaptivate.swf
Continued…
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
8
PROOFREAD and SPELL CHECK
Proofread and spell checks your text boxes. Have someone else review your production and
text for flow, transition, grammar and content.
QUALITY CONTROL:
Captivate tutorials need to be built in WebSpinner’s JUNK directory. Guides cannot go live
and be linked to the Libraries’ Web site until they have been reviewed by the appropriate
Guides Group representative, see: www.lib.umd.edu/guides/group/ggmembers.html Guide
authors will need to use the Guide Notification Form (or yellowsheet) to submit guides for
review: www.lib.umd.edu/UES/yellowform.html
ONGOING MAINTENANCE:
As is the case with all other guides, authors will be required to review their Captivate
tutorials every year by the beginning of each Fall semester
(http://www.lib.umd.edu/guides/group/ggcreating.html).
• The guide's author will receive a reminder to revise the tutorial.
• If no revision has been made by the date supplied by the Guides Group, the tutorial will
be de-linked from Research Port and the Guides home page. It will be put in the JUNK
directory making it unavailable to the public.
• The tutorial will be "relinked" again by User Education Services once notification of
revision has been received.
Ongoing Maintenance Suggestions from Web Services:
http://libi.lib.umd.edu/ongoing-maintenance
• Keep the information up-to-date:
Read through your pages regularly and make minor edits as needed.
• Keep contact information current:
Make sure all names, phone numbers, and e-mail addresses are correct
• Don't be afraid to start fresh:
Here are some good reasons to get rid of your tutorial and start anew:
o Your skill level may have gone up since you made the original tutorial.
o You may have inherited an untidy tutorial from someone else.
o Some design and formatting standards may have changed since the tutorial's
original creation date.
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
9
4. Getting Started
Take a few minutes to review the sample Captivate tutorial produced by User Education
Services (UES). It was designed to illustrate how this software could be used to instruct users.
UES’ Homepage Tutorial is referenced throughout this Training Manual:
www.lib.umd.edu/UES/homepage.swf
Have you thoroughly incorporated the best practices for using Captivate into your planning
process? Review the following:
1. What is/are your learning objectives?
For Example:
When User Education Services designing the Homepage Tutorial, the objective was to
provide a concise introduction to the Libraries’ homepage. While we could have discussed a
number of features, we made sure to stick to the most important points.
2. Who is your audience?
For Example:
The User Education Services ‘homepage’ tutorial was aimed at incoming undergraduate
students who are generally unfamiliar with the Libraries’ homepage.
3. What are the main points that you want to cover in your tutorial?
4. Begin writing your script or storyboard. Keep these points in mind:
• Set aside some uninterrupted time to write out exactly what you would like to say or
narrate in your tutorial. You will want to actively navigate the page that you are
describing as you create your script.
• Begin by walking through the page and thinking of what you would like to point out to
users, paying attention to the logical flow of topics introduced. (Tip: you don’t want to
jump around the page erratically; users will not be able to follow these jumps). Creating
your script is much like structuring the content for a class or presentation.
• Once you’ve walked through the ideas covered, you can begin taking notes and
including the words that you will use to narrate your tutorial.
• Just as our guides all have a unified header, we want to be sure that all tutorials built
using Captivate or Camtasia have a standardized introduction as well.
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
10
• Include the following introduction:
F
or Example:
W elcome to the University of Maryland Libraries’ guide to [insert name].
• You might not be the most appropriate person to narrate this tutorial, even though you
are designing it. For the final recorded version you might wish to solicit the help of a
colleague or graduate student who you feel can speak with a smooth and easily
understandable voice.
• After recording your draft on paper you will want to walk through these steps again to
see if you have left anything out and to determine whether all of the materials are
coming together.
• Once you believe you have covered all your goals, read the script and time your
narration. As you read the script, be sure to take a very slow and steady approach to
your narration. The voice that you use to narrate these tutorials should be much slower
than that which you would use in regular conversation.
• Your goal is to cut your presentation down to 3 minutes or less. You will need to edit
your script numerous times in order to make sure that you have been both clear and
concise.
• During the editing process make sure that you remove all jargon and acronyms
from your script.
For Example:
Say “inter-library loan” instead of “ILL.”
• After each revision of the script, read through it and time it again until you have
made it concise enough to fit within the recommended timeframe.
• Once you believe that you have condensed your main points into this framework,
we recommend reading your script aloud to someone else in order to make sure that
they are able to follow your presentation and give feedback.
• In summary:
Blocked out some time to work on your project;
Decide on the content you want to cover;
Figure out the best way to cover each learning objective ‘navigation-wise;’
Begin creating a draft script;
Read through your script at least 10 times, editing it along the way;
Time each reading;
Add points of clarification (if appropriate) and edit out all unnecessary elements
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
11
5. The Recording (Screen Capturing) Process
Throughout this Training Manual, ‘record’ means to ‘screen capture.’ It does not mean to
record your voice or audio record; this is covered in section 7 – The Audio Process, page 29.
• Turn on your computer’s speakers.
• Before opening Captivate, close all unnecessary software applications on your desktop
other than the one you wish to record. This is an important step because Captivate will
record any pop-ups, such as e-mail notifications that suddenly appear.
• Make sure that you close unnecessary tabs in your web-browser. If you want to screen
capture or record activity within the entire web browser, users will be able to see any
open tabs or favorites buttons that are customized on your computer.
Favorites, Tabs and minimized Windows
are all visible. Close them so that they do
not appear to users in your tutorial.
• Click on the Adobe Captivate icon on your desktop.
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
12
• Click Record or create a new project:
• The New project options window which now opened will allows you to screen capture a
portion of the screen.
• To screen capture within your web browser, click Application and click OK:
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
13
• After you click Application, a pop-up window will appear asking you to select the
window or screen you would like to record or capture.
• Reviewing the illustration below, Select the window you’d like to record from the
drop-down menu. Click Record button once you are ready to begin:
• You are now in recording mode.
• Very important considerations. Read this:
What do you plan on showing users in your tutorial? Will you be showing or teaching
users how to use the features on one single web page? If yes, then you will simply need
to capture one single image of that page, then exit out of recording mode.
Will you want to navigate users throughout a number of web pages? If yes, you will need
to capture screenshots of each one.
For Example: In recording the screenshots for the User Education Services’ Homepage
Tutorial, it was necessary to record the following 3 pages, as these were the 3 web pages
featured in the tutorial:
1. Libraries’ Homepage;
2. How Do I…? page;
3. Return back to the Libraries’ homepage
No matter how many pages you incorporate into your tutorial, be sure to go slow enough
so that Captivate has time to record each and every web page.
Pause after recording or screen capturing a web page. You will hear a camera-shutter
like sound which indicates a ‘screen capture’ has been made.
Keep in mind that Captivate does not work like Snag-it. Using Captivate, you will be
able to add text boxes, mouse pointers, mouse clicks and highlight box to the web pages
you capture later on during the Editing Process, see page 17.
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
14
• Once you have finished navigating the web pages that you are incorporating into your
tutorial, you will want to exit recording mode. Click on the Captivate window that’s been
minimized at the bottom of your screen.
• A Captivate pop-up box will appear informing you that Your capture session is ending.
Click OK.
• A Save Project Files window now appears. You will need to give your project a name
and indicate the directory in which you want to store your project files.
• Save your files to your M: or Z: drives, and not to your desktop.
1. Name your project
2. Indicate where you
want to store or
save your project
files
3. Click OK
• Click OK.
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
15
• Once you have saved your project files, your slides will automatically appear, displayed
as a storyboard, or series of screen captures.
• Review your slides to make sure that all the web pages you need for your tutorial were
captured.
• Are you missing screen captures for particular web page? If yes, you will need to go
back to the start of the recording process (see page 12) and record or capture your
screenshots again. Be sure to advance through the web pages slowly enough so that
Captivate is able to record each and every screen.
• Have all of your web pages been recorded? If yes, then you are ready to move on to the
editing phase; see section 6 – The Editing Process.
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
16
6.
The Editing Process
• To edit your tutorial, click the Edit tab, located on the top left corner of the screen:
• If the Timeline appears, close it by clicking the black X in the upper right portion of its
window:
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
17
• Click on your first slide to begin customizing your presentation.
• Annoyingly, Captivate automatically adds sample default elements to your slides to show
you the kinds of features you can add to enhance your presentation. These include: text
boxes, mouse pointers, mouse dragging actions, etc.
• You will want to remove these default elements from your slides so that you may begin
customizing your slides to illustrate to users the particular features you want to include.
Single-click on each of these default elements one by one; a dotted box will hen appear
around each element. Press the delete key on your keyboard.
Examples of default elements:
Cursor Movements (including both
the hand pointer and the blue line)
Text Boxes
To remove default elements:
1. Right click on the element you
wish to remove (square handles
will appear).
2. Click on ‘X’, found in the editing
toolbar, or right click and select
‘Delete’ to remove the element.
3. A Captivate pop-up box will
appear (see below) asking if
you are sure you want to delete
the caption. Click on yes.
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
18
• Now, look at your script to determine how much content relates to each of your slides.
Before adding anything, you need to determine how to break up this content.
For example:
If you want to show users 5 different features on one web page, you will need to create 5
copies of that web page, then introduce each feature one by one to users.
• Below you will find the script that User Education Services created for the Homepage
Tutorial. From start to finish, we introduced users to 10 different features on 3 web
pages. Therefore, we made 10 separate slides to illustrate each point:
User Education Services’ script for the Homepage Tutorial:
www.lib.umd.edu/UES/captivate_skin.swf
SLIDE 1:
Narration or Audio:
Welcome to the University of Maryland Libraries home page. This is your gateway to information
about the Libraries and its resources.
SLIDE 2:
Starting in the upper right corner, you will find some news about the latest exhibits taking place in
the Libraries. Click on the link for the Events Calendar to learn more.
SLIDE 3:
The "Tip of the Week" help you learn to how to make the most about your library experience.
SLIDE 4:
The lower navigation bar is an important feature. Use these links to find out about the 8
libraries on campus, our special collections, and more.
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
19
SLIDE 5:
Before visiting one of the 8 campus libraries, be sure to click on HOURS and then on a link for a
specific library to learn when it's open.
It is important to keep in mind that the resources linked to the Libraries home page are available 7
days a week, 24 hours a day. Let's take a minute now and introduce them to you.
SLIDE 6:
In the center portion of the home page, you will find prominent links to the CATALOG and to
RESEARCH PORT. Both serve as important gateways to finding information.
SLIDE 7:
The Catalog provides an inventory of the materials owned by the campus libraries, whether
these materials exist in print, online, or some other format. Currently the Libraries own over 3
million books and have subscriptions to over 33,000 journal titles, and more.
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
20
SLIDE 8:
Research Port provides access to the Libraries subscription databases, which contain a variety
of sources such as: biographies, critical essays, technical reports, as well as articles from
newspapers, magazines and peer-reviewed journals. At present, the Libraries subscribes to over
300 databases.
Both are excellent resources to use when you need to find information for your research topics.
Now, let's move to the top left corner of the home page. Here you will find the "How do I..?" link.
Click on this link.
SLIDE 9:
Here you will learn the answers to a number of frequently asked questions, such as "How do I -
print in the library, borrow items, find materials on course reserve, and more. Click on
HOME to return.
SLIDE 10:
We hope this brief introduction has increased your confidence in your ability to navigate the
Libraries home page. To learn more, click on Ask Us!
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
21
In summary from the example illustrated above:
• User Education Services created 8 slides of the Libraries homepage. Why 8 slides?
Since we introduced 8 different features on the Libraries’ homepage, we made 8
separate slides of this page. We made 1 slide of the second web page which was the
“How Do I…?” page, then concluded with 1 slide of the third web page, which was our
return to the Libraries’ home page.
• It is important to have your script finalized at this point in order to determine how many
features you are covering and how many slides you will need to generate.
• Once you have determined how many copies you will need of each slide, insert
duplicate slides. To do this, right click on the slide you want to copy and select
Duplicate Slide, or click Edit at the top of the screen and click Duplicate Slide.
OR
• Repeat this step several times until you have added the appropriate number of duplicate
slides for each screen capture. Return to slide 1 to begin customizing each of your
screen captures; see next section.
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
22
Customizing Screen Captures
• In this section, your aim is to balance content with design elements. There are a number
of options for customizing your slides with text caption and highlight boxes. Let’s cover
these now.
• Text Caption and Highlight Boxes can be used in tandem to help identify specific areas
on the screen that you want to draw users’ attention to.
• Use varying combinations of these design elements on each slide, but be careful not to
include too many of either on an individual slide.
Text Caption Boxes:
• Text Caption Boxes are used to highlight key points from your script. Keep the amount of
Text included in these boxes to a minimum.
• Before attempting to insert a text caption box on a slide, click View at the top of the
screen. If Snap to Grid has a check mark next to, click to uncheck it. Unchecking this
design feature will allow you to move these boxes more easily around the screen.
Click to uncheck
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
23
• To add a text caption box, click Insert then Text Caption:
• In the New Text Caption box enter your text. Use the standard font type: Verdana and
font size: 14 pt. The dropdown box under Caption Type allows you to select the display
style of your textbox; use the standard caption type: Adobe Blue.
• Be sure to check the Apply to all box in the lower left corner of the New Text Caption
box. Checking this box will ensure that Captivate applies these settings to subsequent
text captions.
• Once you have entered your caption and selected the appropriate color scheme, font
and font size, click OK.
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
24
• Your text caption box will now appear on the slide. Position this box on the appropriate
part of the slide. Should you wish to move it around the screen, left-click on the text
caption box and drag it.
• To adjust the size of the text caption box, click on it and pull one of the square handles.
• Important Consideration: take some time to maneuver the positioning of your text
caption boxes so that it blends in nicely with the other items on the screen, i.e. other text,
images, colors.
Which looks better? Maybe this one where the text caption box covers
only part of the footer?
Or, this one where the text caption box is stretched to cover the
entire footer?
Answer: From User Education Services’ point of view, the second choice makes
the page less cluttered because it covers up unnecessary competing text.
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
25
• When placing text and highlight boxes on the slide you may find it helpful to zoom in and
out. The zoom feature is located at the top right corner of the editing window:
• Zooming in (ex. 150%) will help you to better align text and highlight boxes with existing
elements.
• Zooming out (ex. 66%) will give you a better idea of what viewers will see when watching
the completed tutorial.
• Remember to save your project files. Click File then Save As…
Highlight Boxes:
• It is important to introduce features of a web page individually; don’t overwhelm viewers.
• Highlight boxes allow you to draw the viewer’s attention to particular elements.
• Before attempting to insert a highlight box, click View at the top of the screen. If Snap to
Grid has a check mark next to it , uncheck it.
Click to Uncheck
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
26
• To add a highlight box, click Insert, then Highlight Box:
• In the New Highlight Box window select a Frame width value between 3 and 5. Click
OK and the highlight box will appear on your slide.
• Similar to moving text caption boxes, you may drag the highlight box to the appropriate
area of the slide. You can adjust the size by dragging the handle bars.
• Remember to save your project files. Click File then Save As…
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
27
Mouse Click Boxes:
Mouse click boxes are used to actively engage the user in navigating the tutorial. When you
incorporate this element into a slide, the tutorial will come to a complete stop until the user clicks
on the indicated area. It will be important for you to include specific directions for your users to
click on a certain area:
For Example:
Now, let's move to the top left corner of the home page. Here you will find the "How do I..?"
link. Click on this link.
Including mouse click boxes into your production will allow the user to more readily remember
how to navigate a page through hands on experience.
• Before attempting to insert a mouse click box, click View at the top of the screen. If
Snap to grid has a checkmark next to it - uncheck it.
• To add a mouse click box, click Insert then click box. A New Click Box window will
appear.
• On the Click Box tab, use the drop down menu next to On success and select go to
next slide.
• The default setting allows users infinite attempts click on the desired link.
After this option has been unchecked you can select other options.
• Once you are satisfied with your settings, click OK. Remember to save your project files.
Click File then Save As…
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
28
7.
The Audio Process
When you are satisfied with the visual elements of your tutorial, it is time to add audio or voice
overlays. If you have not already borrowed a USB microphone, call User Education Services at
301-314-5889 to borrow one. These microphones simply plug into the USB port on your
computer’s CPU tower. These devices are plug and play, which means no special software is
required. Audio is added to each individual slide. Recording your audio in small chunks has its
advantages, as you will not have to record the entire presentation in one sitting, and will not
have to re-record the entire presentation if you make a mistake while narrating.
• Starting at your first slide, click Audio from the top menu bar.
• Click Record this slide.
• A Generating Preview for Recording Audio window appears very briefly
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
29
• It is followed by the Record Audio – Slide 1 window:
Record button
• Before clicking the Record button, take a moment to consider the following:
Are you in a quite location?
Do those around you know that you should not be interrupted?
Are you free from interruptions?
Have you read through the script recently?
To get the best quality recording, make sure that your microphone is not directly
next to your keyboard or mouse (which ever one you will use to start and stop the
recording. Every sound you make will be picked-up by the microphone.
Think of your first recording as a trial run. You can record as many times as you
need to. It may take a few attempts to familiarize yourself with the process and
become comfortable using it.
• Turn on the USB microphone.
• When you click on the Record button, a pop-up box will appear saying Adobe
Captivate must establish audio input and recording sensitivity levels to create the
best audio quality. Do you want to continue testing audio levels?
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
30
• Click Yes.
• A Calibrate audio input box will appear. In order to check the input level of the
microphone you will need to read the sentence displayed in this box, and keeping
the microphone about 18” away from your mouth:
“I am setting my microphone recording level for use with Adobe Captivate”
• Once the microphone has been successfully calibrated and the Input level OK
message appears, click OK to initiate the recording process
(NOTE: recording will begin as soon as you click on OK):
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
31
Record Audio Window:
Close Up of Record/Playback Controls:
• If the recording process begins automatically, but you are not yet ready to begin
narrating, simply click on the stop button:
• Once you are ready to begin again, press record:
• Once you have finished narrating the slide, click on the stop button:
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
32
• To preview your recording, press the play button:
• Record the audio for each slide as many times as you like. Captivate will use the
most recent version of the recording in your tutorial. To overwrite the current file,
simply click on record and repeat the steps listed above.
• Captivate estimates the display time for each slide based upon the amount of
text added to each slide. If your narration is significantly longer than the text
added to the screen, you may need to adjust the timing for the slide (this is
covered in the next section).
• Once you are satisfied with the audio recording, click OK.
• Your audio recording will now be associated with your slide.
• Repeat this process to add audio to each of your slides.
• If you decide at a later time that you would like to re-record the audio for a
particular slide, click Audio then Record this slide, and repeat the process.
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
33
Preview your Tutorial on the Web:
Once you have added audio recordings to your slides, you will want to preview the
tutorial to see how the presentation is flowing, and see how users will view it. Keep in
mind that you will need to adjust the timing of your slides, so do not feel discouraged if
your first preview provides a less than seamless presentation.
• To preview your entire tutorial in a web browser, click Preview icon at the top of
the screen, and click In web browser:
• While you are watching the preview, take note of any slides needing adjustments
• Once you have finished watching the preview, close the browser to return to
Captivate and begin making the necessary adjustments.
Troubleshooting Slide Timing:
• While watching the preview of your tutorial, you will likely notice some timing
problems.
• All of these problems can be solved by adjusting the display time of the slide
and/or the individual items.
• To make these adjustments, you will need to watch the preview again and make
a note of the first occurrence of a timing issue. Once you have identified a slide
which needs adjustment, pause your preview, go back to the editing screen
within Captivate and follow the proceeding instructions for adjusting timing.
• Captivate determines the default length of each slide based on the amount of
content you have added. This best guess may leave too much dead air at the
end of your slide. Don’t worry! This is easy to adjust.
• As a default Captivate will display each of your text captions and highlight boxes
as soon as the slide begins playing. You may want these items to pop up at the
precise moment that you mention them. Again, this is fairly easy to adjust.
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
34
• The goal of adjusting the timing of your slides and the various items which
appear on them is to have all elements working together to best explain the
features highlighted.
• Your slides should be just a bit longer than your narration (by 1-2 seconds) to
give viewers time to absorb what you’ve said.
Problem 1: Slide continues playing after the narration has ended
• If your slide is running long, you can easily adjust the display time
• As an example we’ll adjust the following slide, which is displaying for 18
seconds, even though the narration ends after 12 seconds.
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
35
Solution: Adjust the display time for the slide
To adjust the display time for the slide, double-click within the slide and the Slide
Properties window will appear:
• Adjust the duration of the slide by changing the value in the Display Time field.
e.g., you want your slide to display for twelve seconds, so enter 12.0 in the
Display Time field.
• Click OK.
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
36
Problem 2: Text Caption or highlight box does not display at the proper time, or
the for the right amount of time
• Double-click within the text caption or highlight box
The Text Caption or Highlight Box window appears (note: these steps are the
same for text captions and highlight boxes).
• Click the Options tab:
The options tab allows you to indicate when you would like your Text Caption Box to
appear and how long you would like it to stay on the screen:
If you want the text caption or highlight box to display for the entire length of the
slide, use the following settings:
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
37
In this instance we want the text box to appear for the duration of the slide so we have
selected Display for: ‘rest of slide’ and Appear after: ‘0.0 seconds’.
Here’s an example of when you would want to use these settings:
When creating my introductory slide, I wanted the text caption to display for the entire
length of the slide.
If you want the text caption or highlight box to appear after a certain number of
seconds and then display for the rest of the slide, use the following settings:
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
38
Here’s an example of when you want to use these settings:
If you want the slide to appear after specific number of seconds for a certain
length of time, use the following settings:
Here’s an example of when you would want to use these settings:
When creating this slide I wanted the text box to display the entire time, but I didn’t want
the highlight box surrounding ‘hours’ to appear until it was mentioned at the four second
mark.
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
39
In Summary:
Once you have made adjustments to your slide, use the preview feature to see if
you are now happy with the timing.
Advice: be advised that this review process will take some conscientious thought
and effort on your part. Try not to get frustrated if it takes multiple attempts to get
the timing issues worked out.
This is time well spent because once the tutorial is approved by the Guides
Group and goes live hundreds of users will be looking at it 24/7.
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
40
8.
Publishing your Tutorial and Getting it Online
Once you have finished editing your slides, you are ready to publish the finished project.
• Click on the Publish button found in the Captivate toolbar:
• When the Publish window appears, Captivate automatically selects a flash
(SWF) file output:
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
41
• You will now generate flash (SWF) files that can be posted online using
WebSpinner.
• Before proceeding, check the folder location. This is where your project files will
be stored. If you wish to select another folder, use the Browse button to select a
location.
• Be sure to save these files on your M: or Z: drive and NOT your desktop. These
files are large enough that storing them on your desktop will cause delays when
loading your profile each day.
• Click Publish button.
• You will see the following windows will appear as Captivate generates your
project files:
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
42
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
43
• Once the publishing process is complete, open the folder containing your project
files:
You will see that the publishing process generated four files (left to right):
HTML File
Tutorial (Flash/SWF) File
Tutorial Skin (Flash/SWF) File
Java Script File
In order to submit your tutorial for review by your Guides Group representative, you will
need to load your files to the JUNK folder in WebSpinner. This will allow you to access
your tutorial directly via a URL.
For example, the Libraries’ Homepage tutorial can be accessed directly at:
lib.umd.edu/UES/homepage.swf
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
44
Loading Tutorial Files in WebSpinner:
Sign into WebSpinner: www.lib.umd.edu/cgi-bin/WebSpinner
Select the JUNK directory and click on ‘Go to directory’:
• Once you are in the JUNK directory you will need to load the Flash/SWF files.
For example:
I will need to upload the Flash file and the Flash skin file to WebSpinner using the
following file names selected when publishing the project in Captivate (NOTE: the HTML
file and Java Script file do not need to be uploaded):
captivate.swf
captivate_skin.swf
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
45
To load the first Flash file in WebSpinner Select ‘New File’:
To load your file you will need to:
1. Enter the file name (Make sure it ends in .swf and matches the file name you
used when creating your HTML page).
2. Click on ‘Browse’ and locate the file
3. Click on Create File
Example:
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
46
Repeat the above steps to load your Flash skin file:
You should now be able to view your tutorial using the following URL template:
www.lib.umd.edu/JUNK/filename.swf
For example, if my tutorial had been uploaded to the JUNK directory, it would be
accessible at: www.lib.umd.edu/JUNK/homepage.swf
NOTE: The homepage tutorial is accessible at www.lib.umd.edu/UES/homepage.swf
because it has already been reviewed and approved.
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
47
9. Contacting your Guides Group Representative:
Once your tutorial is accessible online you can submit it to your Guides Group
representative for approval using the the Guide Notification form:
www. lib.umd.edu/UES/yellowform.html
• To submit your tutorial for review, you will need to fill in your name and contact
information in addition to the information highlighted above.
• Once submitted your tutorial will be reviewed to ensure that it meets the best practices
outlined in the beginning of this manual.
• If any changes need to be made to bring the tutorial in line with these best practices,
your Guides Group representative will contact you with further information.
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
48
• Once your guide is approved, it will be linked to the appropriate subject guide, or linked
separately from the ‘Guides to Information Resources’ page:
www.lib.umd.edu/UES/library_guides.html
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
49
Filename: Creating Interactive Tutorials Using Captivate 3 University of Maryland Libraries * User Education Services * June 2008
50
