Professional Documents
Culture Documents
239 Tips: For Producing and Managing Flash-Based E-Learning Content
239 Tips: For Producing and Managing Flash-Based E-Learning Content
You may download, display, print, and reproduce this material in unaltered form only (retaining
this notice) for your personal, non-commercial use, or use within your organization. All other
rights are reserved.
This is a FREE Digital eBook. No one is authorized to charge a fee for it, or to use it to collect data.
Attribution notice for information from this publication must be given, must credit the individ-
ual contributor in any citation, and should take the following form: The eLearning Guild's 239 Tips
for Producing and Managing Flash-based e-Learning Content
Readers should be aware that Internet Web sites, offered as citations or sources for further infor-
mation, may have disappeared, or been changed, between the date this book was published and
the date it is read.
Table of Contents
I. How to Use These Tips . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5
A. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5
II. 105 Tips for Using Adobe Flash Professional & Flash Player . . . . . . . . . . . . . . . . . . . . . . . .6
III. 6 Tips for Using Adobe Acrobat Connect Pro (Breeze) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .44
IV. 26 Tips for Using Adobe Captivate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .46
V. 3 Tips for Using Adobe Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .54
VI. 2 Tips for Using Adobe Presenter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .55
VII. 9 Tips for Using Articulate Presenter & Engage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .56
VIII. 4 Tips for Using Artculate Rapid e-Learning Studio & Studio Pro . . . . . . .61
IX. 6 Tips for Using Trivantis Lectora . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .63
X. 4 Tips for Using Camtasia Studio Screen Recording & Presentation . . . .66
XI. 21 Tips for Using Other Tools
A. Microsoft PowerPoint (6) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .68
B. Microsoft Word (1) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .70
C. Qarbon Viewlet Builder (1) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .71
D. zPhoto (1) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .71
E. Second Life (5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .71
F. Code Baby (1) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .72
G. Microsoft InfoPath (1) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .72
H. Flash wrappers (1) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .72
I. Ignite Pro Studio (1) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .73
J. Audio Generator (1) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .73
K. Sonic Memo (1) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .73
L. Zamzar (1) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .73
239 Tips for Producing and Managing Flash-based e-Learning Content | 4
List of Advertisers
Adobe Captivate ..................................................................................................................... 50
Adobe Flash CS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9
Adobe Flash Lite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15
Adobe Notre Dame . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40
Articulate eBook . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .57
Articulate Rapid e-Learning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .62
Atlantic Link . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .89
Beeline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .26
Dazzletech . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .66
Harbinger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .75
QuickMind . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .34
239 Tips for Producing and Managing Flash-based e-Learning Content | 5
• Adobe
• Articulate
• Atlantic Link
• Beeline
• Dazzle Technologies
• Harbinger
• QuickMind
If you're not familiar with their products for e-Learning, or if you haven't checked them out
lately, we encourage you to take a look at your earliest convenience.
239 Tips for Producing and Managing Flash-based e-Learning Content | 6
Tool Tips: Look at Sorenson Squeeze for Mac or PCs, or for Mac Video users look to Episode, for your
compression toolset. Tipster: Nick Floro
239 Tips for Producing and Managing Flash-based e-Learning Content | 7
Don't just test on TARGET TO FLASH PLAYER 7 AS MUCH AS YOU CAN — Many systems don't have access to a more
updated player version, such as, obviously, older systems like Windows 95 and NT, but most impor-
Firefox, Internet tant, newer platforms such as the Nintendo Wii. It's surprising how many people are using them
Explorer, Opera, to browse the Internet. Naturally, this decision depends on your target user profiles.
Tipster: Adrián Murillo
and so on. Test
TEST YOUR CONTENT ON MULTIPLE BROWSER VERSIONS — Don't just test on Firefox, Internet
several browser
Explorer, Opera, and so on. Test several browser versions also, such as FF 1, FF 2, IE 6, IE 7, or as
versions also, such appropriate. Sometimes the very same version of the Flash player behaves differently on different
browser versions. Tipster: Adrián Murillo
as FF 1, FF 2, IE 6,
IE 7, or as appro- TEST YOUR CONTENT ON MULTIPLE PLAYER VERSIONS, STARTING FROM YOUR MINIMUM REQUIR-
ED UP TO THE LATEST VERSION — Adobe has a tendency to implement new “security” fixes that
priate. Sometimes sometimes may block some functionality. Don't just test over major version changes, such as 7, 8,
the very same or 9. Test over minor, such as 9.0.48, 9.0.115. For example, starting with version 9.0.115, the Flash
player blocks the getURL function calls, causing many problems on already-deployed content.
version of the Tipster: Adrián Murillo
Flash player
HOW TO HAVE THE HOT SPOT E-LEARNING OBJECT DISPLAY THE CORRECT ANSWER — When
behaves differ- using the Flash learning objects you can specify the incorrect feedback. For example, "Sorry that
ently on different is not the correct answer. The sun rises in the East and sets in the West." Entering text works great
for multiple choice, T/F, and fill-in-the-blank type questions. But what about “Click the area of the
browser versions. window” questions? Here's a tip that will allow you to show the correct answer for a hot-spot
learning object.
Adrián Murillo
1. Create a new layer above the Components layer — to keep yourself organized, name the layer
"mcCorrect".
2. Create a new movie symbol. In the symbol, draw a circle; this is what will be used to highlight
the correct answer.
3. Place this symbol in frame 1 of the mcCorrect layer, and name the instance "mcCorrect". Move
the mcCorrect over the object that is the correct answer.
4. Add the following ActionScript to frame 1 of the main timeline.
mcCorrectSpot._visible = false;
5. In the Action panel, open the HotObjects_single. In the actions for the object, scroll down
to line 188. You'll see:
router.sessionStop();
router.submitScore();
_root.mcCorrectSpot._visible = true;
239 Tips for Producing and Managing Flash-based e-Learning Content | 8
minimize sur-
You can apply the same logic to the drag-and-drop learning object. Note, you will need to add an
rounding ani- instance of the mcCorrect symbol for every drop object. For example, if you have four drop
mation. Move- objects, you would need to have mcCorrect1, mcCorrect2, mcCorrect3, and mcCor-
rect4. You would need to adjust the script to hide and show each instance accordingly.
ment on the Tipster: Tracey Kogelmann
screen can dis-
SELECTING VOICES — For your narrations, prefer female voices, or men with a medium register.
tract the user, This allows you to better disguise the high whistles (quantization errors) the MP3 Flash compres-
sion produces, commonly called “artifacts.” In short, avoid putting Darth Vader against the micro-
making long
phone. Tipster: Mario Gutiérrez Toledo
passages diffi-
TEST EARLY FROM A REMOTE SERVER — Many content problems in Flash, such as external resource
cult to read. loading or XML communication issues, may not present themselves until the .SWF is streaming
Flashkit.com is from a remote server over the Internet. Keep bandwidth constraints in mind when designing and
developing content. Just because a .SWF loads quickly from your local hard drive or network does
a tremendous not mean it is bandwidth-friendly over an Internet connection. Always remember that users may
resource for all be accessing your content from home, via Cable, DSL, or over a modem.
Flash develop- Additionally, keep your loading screens light. Your loading indicators should display quickly, regard-
ers. less of the user’s connection speed. When you must display long text passages, minimize sur-
rounding animation. Movement on the screen can distract the user, making long passages diffi-
Jason Harris cult to read. Flashkit.com is a tremendous resource for all Flash developers. The Flash community
heavily traverses their forums, and the site contains countless sound loops, sound effects, and
graphics for royalty-free use. Tipster: Jason Harris
ADD EXTENSIVE COMMENTS TO ANY ACTIONSCRIPT CODE — One comment for each line that
does something unique. If you don't, I guarantee that when you come back to the .FLA file some
time later, or someone else is using your file, you won't remember what the code is doing. Keep
your ActionScript on a separate locked layer in the timeline so that all the code is in one place. Use
Datasheet
PROFESSIONAL
CREATE AND DELIVER RICH,
INTERACTIVE CONTENT
Adobe Flash CS3 Professional software is the most advanced
authoring environment for creating rich, interactive content
for digital, web, and mobile platforms. Create interactive
websites, rich media advertisements, instructional media,
presentations, games, and more. Depend on Flash CS3 and
Adobe Flash Player software to ensure your content reaches
the widest possible audience.
Related products
• Adobe Flex
• Adobe Flash Media Server
Create rich, interactive content for digital, web, and mobile platforms.
Adobe, the Adobe logo, Acrobat, Acrobat Connect, ActionScript, Adobe Premiere, After Effects, Contribute, Creative Suite, Dreamweaver, Fireworks,
Flash, Flash Lite, Flex, Flex Builder, Illustrator, Photoshop, Soundbooth, and Version Cue are either registered trademarks or trademarks of Adobe
Systems Incorporated in the United States and/or other countries. Mac OS and Macintosh are trademarks of Apple Inc., registered in the U.S. and other
countries. Intel, Intel Centrino, Intel Core, Intel Xeon, and Pentium are trademarks or registered trademarks of Intel Corporation or its subsidiaries in the
United States and other countries. PowerPC is a trademark of International Business Machines Corporation in the United States and/or other countries.
Microsoft, Windows , and Windows Vista are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other
Adobe Systems Incorporated countries. All other trademarks are the property of their respective owners. The names and logos referred to in the sample artwork are fictional and not
345 Park Avenue intended to refer to any actual organization or products.
San Jose, CA 95110-2704
USA © 2007 Adobe Systems Incorporated. All rights reserved. Printed in the USA.
www.adobe.com 95008976 3/07
239 Tips for Producing and Managing Flash-based e-Learning Content | 11
The rich media of XML where possible, so that it is not necessary to republish the .SWF with each use — the XML
can drive the content. Tipster:Wendy Phillips
Flash provides an
USING FLASH TO MARKET E-LEARNING COURSES — Marketing is key to successful implementa-
excellent means
tion of an e-Learning course, and Flash is an excellent tool for this purpose. The rich media of Flash
of gaining your provides an excellent means of gaining your audience’s attention to a course, why the course
is relevant to them, and the benefits of taking it. Many marketing strategies utilize electronic
audience’s atten-
announcements, such as e-mails or Intranet articles, but via Flash you can deliver a more effective
tion to a course, and entertaining message than with text and static graphics alone. Here are some tips for using
Flash to market your courses:
why the course
1. Reuse any appropriate Flash objects already created for the course. Not only will this save you
is relevant to a lot of time, but it will also give the audience a preview of the content and design they will
them, and the encounter in the course.
2. Use characters in the advertisement. If the course has characters in it, use them. They can act as
benefits of taking
a spokesperson, or as actors in a skit. For example, they can be discussing their thoughts on the
it. Many market- course, and why it was beneficial to them.
ing strategies uti- 3. Make it interactive. This will not only keep your audience’s attention, but also provide a preview
of the interactive elements in the course. If you can make the advertisement a short game, that
lize electronic is a plus. However, the game must have the same goal as the advertisement, which is communi-
announcements, cating why they should participate in the course.
4. Make it entertaining. If using humor, be very cautious not to offend anyone.
such as e-mails or
5. Include audio and any appropriate sound effects. Sound is a great attention grabber, easy to
Intranet articles, import into Flash, and if you are using it in your course it can provide a preview of the course’s
but via Flash you use of audio as a medium.
6. Be sure to communicate why the course is relevant to your audience, and the benefits of taking
can deliver a the course (what’s in it for them).
more effective 7. Keep the advertisement as brief as possible without sacrificing your message.
and entertaining 8. Conclude the advertisement with instructions on how to access the course, and a link to it or to
the learning management system where they can launch it.
message than
9. Place the advertisement where the audience will most likely see it. For example, your organiza-
with text and tion’s Intranet homepage, the training department’s homepage, the first page of your learning
management system, and so on. I also like to e-mail a link to the advertisement to all potential
static graphics
participants and their supervisors, preferably with some sort of tease that encourages them to
alone. click the link. I find that if people like the advertisement, they will forward the e-mail, furthering
the reach of the advertisement’s message. FYI: I load the Flash .SWF to my Intranet and send a
Jeffery Goldman
link instead of sending the Flash .SWF directly in the body of the e-mail. Most e-mail systems
will strip the Flash .SWF out of the body of the e-mail. With Flash used as your marketing tool
you will get more of a “buzz” around e-Learning releases, and with that, an increase in the num-
ber of people visiting and participating in your e-Learning courses. Tipster: Jeffery Goldman
239 Tips for Producing and Managing Flash-based e-Learning Content | 12
Be sure to in- LOOPING AND STREAMS — If you set your sound's sync to stream, and then add loops, the file size
can grow huge for each loop that is specified. Avoid looping sounds that are set to the stream set-
clude sniffer ting. Tipster: Carlyne Lynch
code at the start
ADDING AUDIO TO FLASH PIECES MAKES A POWERFUL LEARNING TOOL — However, audio adds a
of the module lot to the final file size and benefits from external editing before importing into Flash. You can also
use the Property Inspector's audio-edit feature to trim dead air off the start and end of audio files.
to ensure that
Even silent audio space takes up kilobytes. Consider adding a text display to any files with audio.
learners have This can be a simple text feature that the user can show or hide, and it helps make your content
richer and more accessible. Tipster: David Miller
the correct
Flash player. SNIFFER CODE — Be sure to include sniffer code at the start of the module to ensure that learners
have the correct Flash player. Tipster: David Becker
David Becker
HOW TO WORK WITH pageFiles — My tip is to break apart every single Flash file, and deliver con-
tent on the fly and only when is needed. Let’s say that the course is going to look like a book, with
some chapters and several pages. Each chapter is a SCO, and each page would be a single Flash file
(pageFile). Therefore, when the user enters the Course/SCO, he would see the first page of the
book, when he finishes reading it he will jump to the next pageFile and so on. Flash Files work
with levels; we can load as many Flash files into another as we want, but two .SWFs can't be load-
ed at the same level. This means that we can control different .SWFs loaded at the same time, but
hosted on different levels. The pageFiles should not be larger than 100K so Internet and Intranet
users can view them. To do that, you must have a file that controls it all. HTML must load this host
Flash (mainFile), and it will never be unloaded (Level 0). The mainFile must have all functions to
control communication between pageFiles and the LMS through SCORM/AICC commands like:
loadNextFile, setScormScore, setScormStatus
and so on. When you load a pageFile (Level 1) it will call a function hosted on mainFile, and the
mainFile will calculate, organize, and take an appropriate action, like calling another pageFile or
setting a status completed on the LMS. Doing that, you can have a single file with all functions
(programming once) and several files with just content. This means that you can focus on content
and forget about codes and everything to communicate with LMS. You can reuse this technique
on all of your courses with just a little bit of a change between each one. I’ve developed this tech-
nique, and applied it at major e-Learning companies in Brazil. They said, doing that they improved
performance and reduced the time to develop and deliver a course to the client. Now they have
more time to focus on content and animations, improving the quality of the courses. If you need
more information, and samples of how to do it and how it works, just ask and I’ll be glad to help.
Tipster: Eber Ribeiro Pinto
SCRIPTING FOR BUTTONS IN THE FIRST FRAME — Put scripting for all buttons throughout your
program in the first frame. (I learned this tip from Chris Florio, and it's changed my workflow.)
Tipster: Susan Steinfeldt
239 Tips for Producing and Managing Flash-based e-Learning Content | 13
Place the audio IMPORTING PHOTOSHOP CONTENT INTO FLASH — I have to believe that you have received num-
erous suggestions on this topic. Because it is such a good NEW tool in FLASH Creative Suite 3, I
in a single mov- wanted to add my support. You can now import content created in Photoshop directly into Flash.
ie clip and use Flash asks if you want the .PSD layers to be created as separate symbols. This has been huge for
me. I create a layered .PSD file with objects that are not even related to each other. As long as the
it using Action- image size will accommodate the needed image, I create it in one .PSD file. I have had 30-some
Script, instead of layers of non-related imagery in one file. I will manage content in layer folders sometimes. Now
comes the beauty of the new feature — from within Flash I import the .PSD file, and all the
placing it on the images are created as symbols in FLASH from the different layers in Photoshop. The user can
timeline along choose which layers to import with a checkbox. It neatly puts the new symbols into a folder in
the FLASH library ready for use in the FLASH project. It does take a little getting used to while
with animation. working in Photoshop. To create a file with multiple images unrelated to one another is not how
I have used Photoshop in the past for creating FLASH content. However, the benefit of having one
Ram Mohan
master .PSD has proved to be a good thing when looking for changes. I then only import/update
the layer that was changed. Tipster: Joe Shultheis
SAVE TIME BY CREATING RE-USABLE OBJECTS ONLY ONCE — Put things like the navigation, com-
pany logo, help menu, glossary, or anything else that will be part of the interface throughout the
entire CBT in a separate .SWF file to be loaded into the main movie. You can then build each indi-
vidual lesson or module without repeating these objects. Tipster: Marge Rutter
USING FLASH TO SCALE IMAGES IN AND OUT DURING YOUR ANIMATION — My advice is to use
some simple ActionScript on a blank layer of a single keyframe at the start of your movie. Here is
that ActionScript to copy into a blank keyframe on your timeline:
setProperty('', _highquality, '2')
I think you will find the results very effective and surprising. Try doing a simple scale of an image
in a symbol from 50-100% over 30 frames or so, with and without this ActionScript to compare
the results. Tipster: Kevin O'Donnell
TIPS FOR FASTER DEVELOPMENT — I develop interactive tutorials on software for GE Healthcare.
We have developed a Flash template that produces smaller published file sizes than Captivate,
and is just as fast, if not faster, to develop tutorials in. Other tricks we use are capturing screen
captures as .GIFs and then importing them into Flash, having the majority of text loaded from a
text or XML file (easier to quickly modify), and having pre-built interactions such as double click,
text validation, and single clicks. We can incorporate audio and video using .MP3 and .FLV files.
These are loaded from external file sizes, and do not add extra load time to the tutorial. We also
develop storyboards first, to make sure the tutorial is correct before developing it in Flash. It is
faster to make changes recommended by a SME in Word than it is in Flash. We also love using
SnagIt for taking screen captures. Tipster: Jeff Krebs
REDUCE ANTI-ALIASING — Use the document properties in Flash to set your most-often-used
frame rate, stage size, and background color as your default. Now, every time you create a new
239 Tips for Producing and Managing Flash-based e-Learning Content | 14
Create a template Flash piece you can save a few clicks. In addition, using “snap to pixels” will reduce anti-aliasing of
your text and images, and yield crisper and more professional results. Tipster: David Miller
with your back-
MORE TEMPLATE TIPS — Create a template with your background, navigation, code to make the
ground, naviga-
course work with your LMS, and so on. Then start each course or module with the template so you
tion, code to don't need to keep spending time recreating the wheel, or running the risk of missing something
critical. Tipster: Kathy Zottmann
make the course
work with your AUDIO TIP — Place the audio in a single movie clip and use it using ActionScript, instead of plac-
ing it on the timeline along with animation. Tipster: Ram Mohan
LMS, and so on.
Then start each BUILD YOUR FLASH TUTORIAL USING “MODULAR DESIGN” PRINCIPLES — Here is something valu-
able I learned as I started down the path of e-Learning and building tutorials in Adobe Flash. Learn
course or module to be resourceful when you’re building your .FLA files. If you take as much time as I do to organize
with the tem- your learning content into usable “chunks,” you should also apply this method to your main .FLA
Flash files. Instead of placing all your content into one extremely long timeline, try developing
plate so you don't your master .FLA file to be “modular.”Think about it:When you’re organizing your learning con-
need to keep tent, you probably do what I do — you divide the content into topics, and then subtopics. Why not
do the same thing with your main .FLA file?
spending time
As you well know, Adobe Flash has the ability to separate content by placing it into individual
recreating the “scenes.”This allows the developer to easily move between different tracks of content and/or
actions, and keeps them separate for easy organization. This allows the developer flexibility in
wheel, or running
editing, adding, or removing content. Need to move your “Standards” content so it appears before
the risk of missing your “Roles and Responsibility” content? Easy — simply go to your Scenes window, left-click and
hold on the scene with the “Standards” content, and drag it up to a place before the scene holding
something criti-
“Roles and Responsibility” content. After some navigational revisions, it’s all in place. Your content
cal. will play out in sequence. Tipster: Fredd Gorham
Kathy Zottmann SIMPLE EXAMPLE OF MODULAR DESIGN — Here’s an example of how I do this. This example
assumes you have already outlined your content into its main sections and laid out the first scene
(usually named “Scene 1”) in your .FLA document. You also need to have your “Scenes” menu win-
dow open (you can do this by going to WindowOther PanelsScenes.
1. Go to the ”Scenes“ window and highlight ”Scene 1.” Duplicate this scene once for every major
topic your learning content has by clicking the “Duplicate Scene” button at the bottom of the
window.
2. Go through these scenes, and rename them with the title of your major topic, in order.
3. Add your content. When you’re developing the scenes in your .FLA file, keep in mind that in order
to keep everything as seamless as possible, the beginning and end of each scene should follow a
common “transition” theme that does not vary much. This will allow you to move your scenes
around without much worry of creating a confusing experience for your viewers, or creating
more work for you. If your scenes start with content fading into view, and end with content fad-
ing out of view, you should follow that theme with each scene. Tipster: Fredd Gorham
Why not take your apps mobile?
With Adobe® Flash® Lite, you already ™
know how.
For a long time, mobile content was the future. Now, it’s the present.
And with Flash Lite technology, you can design and push innovative
content to millions of mobile devices using the Flash skills and tools
you already have today.
Adobe, the Adobe logo, Flash, and Flash Lite are either registered trademarks or trademarks of Adobe Systems Incorporated
in the United States and/or other countries. All other trademarks are the property of their respective owners.
Flash Lite content and images provided by 01design, BlueskyNorth Ltd., CELL, Design Assembly GmbH., Moket, and Smashing Ideas, Inc.
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in the USA. 95010046 9/07
239 Tips for Producing and Managing Flash-based e-Learning Content | 16
Writing Action- ADDING NEW SCENES — If your tutorial is used on a regular basis, it may require additions to
update it. This is a strong point of modular .FLA file design. Here is an example:
Script for control 1. Once you identify where the additional content should reside, go into your ”Scenes“ window
functions on a and highlight a nearby scene. Click on “Duplicate Scene.”
button can be 2. Rename the duplicate scene with the name of the new topic.
3. Open the newly-created scene, and remove any content not relative to the new content. If ele-
difficult to find ments from the prior scene are relevant (that is, headers, section names, etc) you can just leave
at a later date. them in place, saving you time from having to recreate or reposition them again.
4. Add new content. That’s it in a nutshell. Tipster: Fredd Gorham
Place as much of
the control func- PRELOADER AND STATUS BAR TIP — Always build a preloader and status bar when building large
interactions and animations. It lets users know that the interaction will load on the page. Often
tions as possible
times, users click Next to move on because they didn't realize there was an interaction on the
in its own page. Tipster: Cliff Singontiko
“action” layer. SMOOTHING IMAGE EDGES — Do you sometimes tween images and notice how pixilated the
Chris Stape
edges look as they move? For smoother results, check “Allow smoothing for” under “Bitmap Pro-
perties” for the images in question. You will notice the jagged edges are gone, and your anima-
tion will look much smoother. Tipster: David Miller
BUTTON CONTROL FUNCTIONS — Writing ActionScript for control functions on a button can
be difficult to find at a later date. Place as much of the control functions as possible in its own
“action” layer. Tipster: Chris Stape
CONTROLLING A CAPTIVATE .SWF FROM A FLASH .SWF — Here is a tip for controlling a published
captivate file that's loaded into a Flash movie. There are various reasons as to why you may not
want to use Captivate's inherent controls. Create custom controls that you can place anywhere in
the Flash movie. Launch some event upon completion of the Captivate. Sure you can do this using
Captivate, but you may want to dynamically change what gets loaded based on any number of
conditions. You also have greater control of how the item gets loaded. Using Captivate, the item
will take over the whole window. Here is what you can do:
• Stop the loaded Captivate
• Resume
• Back one slide
• Forward one slide
• Check if Captivate is complete.
Chapter 9 of the Captivate manual lists additional commands.
The following script loads a Captivate .SWF using the MovieClipLoader class. You can copy and
paste everything below this line directly into the Actions panel of a frame:
var myMCLoader:MovieClipLoader = new MovieClipLoader();
myMCLoader.addListener(this);
myMCLoader.loadClip('captivateFile.SWF', mcHolder);
239 Tips for Producing and Managing Flash-based e-Learning Content | 17
If you wish to //mcHolder is the MC into which the captivate gets loaded
//add these commands to buttons or other events to control
“trigger” different //to play
actions on screen, someButton0.onRelease = function(){
mcHolder.rdcmndResume = 1;
for example an }
animation or a //to pause
someButton1.onRelease = function(){
quiz, use a mcHolder.rdcmndPause = 1;
streaming audio }
//to go back
file in the back- someButton2.onRelease = function(){
ground for that. mcHolder.rdcmndPrevious = 1;
}
Add a media //to go forward
streamer compo- someButton3.onRelease = function(){
mcHolder.rdcmndNextSlide = 1;
nent, give it a }
reference to an //is the captivate movie complete
//this will trigger when the last slide is reached,
audio file, and //you want to add a blank slide at the end no content if you are
then create a list //triggering some event so your viewers don't miss the content
//on the real last slide.
of actions hap-
pening every time onEnterFrame = function(){
if(mcHolder.rdinfoCurrentSlide == mcHolder.rdinfoSlideCount){
you reach a spe- // it's done! do something
cific amount of }
}
seconds. //Do something while the captive is loading - this is tricky
//the Captivate will start running (streaming) before it's
//completely loaded, so you don't want to use
Fabio Cujinoa
USING TRIGGERS FROM AUDIO FILES — If you wish to “trigger” different actions on screen, for
example an animation or a quiz, use a streaming audio file in the background for that. Add a
media streamer component, give it a reference to an audio file, and then create a list of actions
happening every time you reach a specific amount of seconds. What will happen is that (for exam-
ple) an animation (movie clip) with an instance name of “myAnimation” will play when you get to
239 Tips for Producing and Managing Flash-based e-Learning Content | 18
When developing xx seconds in the audio file. This is a great technique, and it makes the flow of elements perfect.
Tipster: Fabio Cujino
in Flash, remem-
DON'T FORGET TO ANTI-ALIAS YOUR TEXT — This will help with readability for the user.
ber to adjust the
Tipster: Anonymous
frame rate in the
FIND OUT HOW TO CREATE AND SAVE A FLASH DOCUMENT IN CS3 PROFESSIONAL —
Property Inspect- For Mac: http://www.atomiclearning.com/almovie?key=32731
or. A higher frame For PC: http://www.atomiclearning.com/almovie?key=32803
Tipster: Kathy Schroeder
rate (24 fps is rec-
ommended) will LEARN MORE ABOUT THE FLASH CS3 PROFESSIONAL INTERFACE —
For Mac: http://www.atomiclearning.com/almovie?key=32732
produce smooth- For PC: http://www.atomiclearning.com/almovie?key=32804
er animations, Tipster: Kathy Schroeder
but be more ADJUST THE FRAME RATE FOR SMOOTHER ANIMATIONS — When developing in Flash, remember
processor inten- to adjust the frame rate in the Property Inspector. A higher frame rate (24 fps is recommended)
will produce smoother animations, but be more processor intensive. The default of 12 fps is quite
sive. The default slow for today's computers.
of 12 fps is quite Tipster: Angela Nicholas
slow for today’s LET USERS RESUME WHERE THEY STOPPED (AUTO BOOKMARKING) — If you use Flash Slide
Presentation to build learning content, you can use Flash Shared Objects to remember which slide
computers.
the user last visited. Upon re-visiting the content, the end user is returned to the place they left.
Angela Nicholas This works for Web and CDROMs.
1. On the root slide, frame 1, add:
// Create the SO
pager_so = SharedObject.getLocal(“my_page”,'/');
2. On the first child slide, add this code to screen actions, under the 'on (reveal)' event:
// The first slide is always opened when a presentation
// is started. This code then loads the SO value and
// bounces the user off to the slide stored in the
// 'currentpage' variable.
if (_root.pager_so.data.currentpage != undefined) {
trace(“It exists! “+_root.pager_so.data.currentpage);
_root.currentSlide.gotoSlide(eval(_root.pager_so.data.current-
page)); } else {
trace(“does not exist”);
// Do some other actions
}
3. On every other slide throughout the presentation, you want to add this code to the slide's
'on (reveal)' event:
239 Tips for Producing and Managing Flash-based e-Learning Content | 19
Place navigation // This records the name of the slide into the SO.
// Tip: don't use spaces in slide names, this will not work.
either in the // In #2 above, the SO is loaded and the value of 'currentpage'
Flash, or out- // is the name of the slide that is getting stored in this step.
_root.pager_so.data.currentpage = “_root.” + this._name;
side. Providing Enjoy your auto-bookmarking! Tipster: John Anderson
both options
TO REDUCE THE FILE SIZE OF YOUR FLASH MOVIE — After finishing your movie, go to File | Publish
gets confusing. setting, then go to Flash tab, and in .JPG quality, you can assign the quality of images to 90. There
won't be much difference in the output, but file size is much reduced, and in the same Flash tab,
Swan
under Audio Stream | Event, in the Set button, you can assign 32 kbps for bit rate, and Best for
quality. Tipster: Mrs. G. Mythili
PLACE NAVIGATION EITHER IN THE FLASH, OR OUTSIDE — Providing both options gets confusing.
Tipster: Swan
GIVE YOUR LEARNERS FULL CONTROL OF VOICE-OVER AUDIO AND SYNCHRONIZED VISUAL CON-
TENT IN YOUR FLASH LEARNING OBJECTS —
1. Create a generic media controller to (a)pause, (b)play, (c)go back to beginning, (d)go to end, AND
(e)replay just the audio [but with all visuals on screen].
2. Link each voice-over file to the media controller.
3. When building your Flash object, add your audio file to the timeline (as well as linking it to the
controller) so you can easily see where to synchronize your visual layers. When you've finished,
just remove it from the timeline. NOTE: Spread your timeline across the length of the audio.
Label your first and last frames so your controller can remember where you pause/play (as % of
total — same as for sound).
Tipster: Sanatan Saraswati
AUDIO INTEGRATION WITHIN FLASH CAN BE TRICKY — It's even trickier when you have to make
changes to the audio, or if you want to localize your Flash movie. Remember these tips — all good
development practices — that will make it easier and more efficient.
1. Audio clips should be located in the same timeline, but in a separate layer. Changes to your
audio, or translation of your audio segment, will likely involve different audio play times, so
adjustments to the timeline are required.
2. Audio should be sequenced into separate pieces. This is called “chunking.”Time these chunks to
your screen transitions. Transitions include subtle changes (or focus on the screen), not just tran-
sitions to a new screen or window. Tie your audio segments to small, distinct subject contexts.
Smaller audio chunks are easier to sequence in the timeline, and they are more cost effective to
change since they affect less recorded audio time.
239 Tips for Producing and Managing Flash-based e-Learning Content | 20
Keep your text- 3. Leave a second or two of empty frames in the timeline before your audio starts playing. This
buffer allows users to focus their eyes on any visual elements before hearing the audio, and pro-
based content in vides a window to adjust audio playback in the timeline, if you change the audio in the future.
external (usual- 4. Consider providing an optional subtitled text window to display your audio text. This gives you
flexibility in the future, should you want to provide your movie in different language markets.
ly XML) files so Audio recording can be expensive, and this technique gives you the option to provide subtitle
that updating text instead of recorded audio if cost becomes a factor. Identifying the appropriate “chunking”
takes some practice. Always plan as if you will have to change the audio, or replace it with trans-
the content is lated language versions.
easy. Tipster: Robert (Butch) Pfremmer
Grant Sherson
EASY UPDATES — Keep your text-based content in external (usually XML) files so that updating
the content is easy. Tipster: Grant Sherson
ACTIONSCRIPT 2 — Keeping track of multiple variables was difficult until I started assigning them
to the _root. By doing that, you can reference them from anywhere in your Flash movie(s). Assign
it, _root.myVariable=1, call it, _root.myVariable, check it, if (_root.myVari-
able==1){... Tipster: Scott Gale
FLEXIBILITY FOR UPDATES — Plan to ensure that as much of the content as possible exists outside
of the .SWF file, and is pulled in dynamically. Text is a good starting point. This provides flexibility
for being able to update the text should it need to change (such as technical specification chang-
es at the last minute), as well as the opportunity to easily localize the content for other regions.
You can certainly treat images, sounds, and animations the same way. Production times dramati-
cally increase when you have to either engage multiple people to get a single change made, or
teach someone making a writing change, for instance, how to make the same change in Flash. It's
much more effective to make changes to externalized assets that are dynamically pulled into the
.SWF. Flash is very effective at rendering dynamic text (in whatever font and size you wish),
images, and sounds. The programming that encompasses the dynamic nature of external assets
should also be external to the Flash files, and thus is easily updateable and reusable amongst
other Flash files. Using this methodology parallels the methodology of creating small, reusable
SCOs, and can allow for maximum reuse of a variety of content if your directory structures are set
up properly from the outset. Tipster: Scott Merrett
ACTIONSCRIPT 2 — When you want a hit spot over some text, you may want to size and move
the hit according to the text it is related to. By relating the hit to the text, the size of the hit will
always match the related text. This works well when you have language changes, or move the
text around during your movie. You can call an empty hit box from the library with ActionScript, or
drag an instance onto the stage. Once you have the hit identified, you move it and size it to the
related item on your stage. Like this:
button1Hit_mc._x=button1txt_mc._x;
//move hit for button 1 into position and size it
239 Tips for Producing and Managing Flash-based e-Learning Content | 21
PUBLISH DOWN TWO VERSIONS — In my experience developing Flash content for an organiza-
tion, despite the latest technologies and functions available in the latest version of the Flash play-
er, it is best to produce content for a previous version. For example, Flash player 9 is currently avail-
able, but I publish down to Flash player 7. The reason being, when multiple sites are accessing your
content, there is no guarantee that their users have current Web browser plug-ins. Your site may
support Flash 9, but the next site over may only support Flash 8. By publishing down to two ver-
sions previous, it is almost certain that there will not be any issues in users accessing the content. I
hope that helps — let me know if you would like any further insight as I work with Flash daily.
Tipster: Thomas Gnas
BUILD IN FLASH “CONTENT PLAYERS” — The content players will play content from XML files at
runtime. This way, your content developers can develop content in applications like MS Word (with
the XML tool pack). For example, I’ve created a “course player” that can be reused with content cre-
ated by multiple developers. All that people developing the course content have to do is, in Word,
identify the screen name and the content for that screen. Another one I’ve developed is a
”Concentration” game. A collection of “boxes” covers an image. To make a box disappear, you have
to answer the question right. The questions come from a Word file. Again, to use the content play-
er, all the developer has to do is to modify a Word document. The content reuse ideal of SCORM is
239 Tips for Producing and Managing Flash-based e-Learning Content | 23
Adding a small largely a pipe dream. The real power in SCORM isn’t content reuse, it’s tool reuse (isn’t it really all
about interoperability within LMSs [tools]?). By creating tools in Flash that can play content loaded
bit of silence to at runtime, we can significantly extend our toolset. If you’re wondering, yes, people are successful-
your audio ly using this method. For example, the folks at Disney are using this method to quickly and effi-
ciently develop e-Learning modules for their Cast Members. Tipster: Andrew Teasdale
before import-
ALWAYS USE EXTERNAL TEXT STRINGS IN YOUR FLASH FILES — It's a good development practice,
ing it into Flash
and allows for easy modification of the text in future updates. Like all good development prac-
helps assure tices, it allows for a more efficient translation process should you decide to localize your Flash file.
Set the text field to Dynamic type text in the Properties panel, and assign the string a unique
that it will not
identifying variable. After making the text dynamic, you can build the source XML file with Note-
clip off the pad or any XML editor of your choice. Briefly, the strings in the XML file are referred to as elements
(or nodes). You reference these strings through XML Object type in ActionScript. Your ActionScript
beginning of
should be easy to find in your Flash file, so put it in the first frame of your timeline — another
your audio. good development habit. There are many excellent examples you can look at on the Web for a
complete tutorial. Tipster: Robert (Butch) Pfremmer
Oddly enough,
this also helps USE DREAMWEAVER EXTENSIONS TO DOWNLOAD A SCORM BUILDER — If you happen to have
Dreamweaver as well as Flash, use the Dreamweaver extensions to download a SCORM builder.
with clicking The SCORM builder will load all of your files, and package them to send to your LMS.
sounds, or dis- Tipster: Anonymous
torted audio SHARE FILTER PRESETS — You can share filter presets with other team members by providing
(audio that them with the filter config file. This is an XML file saved in the Flash Configuration folder:
C:\Program Files\Macromedia\Flash 8\en\Configuration\Filters\fil-
sounds like you ters.xml Tipster: Carlyne Lynch
recorded it in
AVOID MAKING DISTRACTIONS — Just because you can do it in Flash, doesn't mean you should. It
the bathroom). might be fun to make things move, blink, buzz, or grab your attention in other ways, but if it does-
n't help the user learn, don't do it. It just adds to your development time, and turns into a distrac-
Andre' Chatelain
tion for users. Tipster: Steve Johnson
MAKE AUDIO BEHAVE IN FLASH — I've discovered that there are many tricks to making audio
work well in Flash, and even when you use the right settings, the audio will not always sound the
way it should. Here are a few of the tricks that I have discovered through several users and online
blogs:
1. Do not rely on Flash to compress your audio. Compression is dependent upon application, but
MP3 is the most commonly used for most purposes.
2. In the Flash Library, change the Export Settings of your audio files to Default.
3. In the Flash Publish Settings, change the Audio stream and event settings to MP3, and the Bit
rate to something no lower than what you originally compressed your audio.
4. On your timeline, change your audio to streaming if the visual corresponds or is timed to the
239 Tips for Producing and Managing Flash-based e-Learning Content | 24
If you happen audio. Event is usually used for sound effects, or things that need to start at the right time, but
nothing is depending on it to end at a specific time.
to have Dream- 5. Adding a small bit of silence to your audio before importing it into Flash helps assure that it will
weaver as well not clip off the beginning of your audio. Oddly enough, this also helps with clicking sounds, or
distorted audio (audio that sounds like you recorded it in the bathroom).
as Flash, use the
Tipster: Andre' Chatelain
Dreamweaver
FLASH-ANIMATED JOB AID AND GLOSSARY TO ASSIST LEARNER PREPARATION — We have been
extensions to
very successfully combining instructor-led simulators with student preparation. In order to pre-
download a pare students, they are taking standard CBT prior to entering the simulator. We have developed a
Flash-animated job aid and glossary that contains alphabetized movie clips that show the key
SCORM builder.
concepts, math calculation examples, and so on, that can be accessed through a laptop or iPod
The SCORM that the students have with them in the simulator, and can take with them onto the job. Each clip
is less than one minute long, and does not make the student look through an entire lesson to find
builder will load
the exact function, concept, buttonology, and so on, that they need. Because the concepts are each
all of your files, in an independent movie clip, they can be used to create custom glossaries for each lesson, or
combined for the entire course. We have also started using them in different schools across the
and package
enterprise. Tipster: Janeann Hudson
them to send
DRIVING INTERACTIVE NEED — In our training department we wanted to move toward interac-
to your LMS. tive on-line training. The hard part was finding the time and resources to move forward quickly. It
Anonymous also seemed we had to “sell” the idea too much. We develop our products in Flash ActionScript 2,
so the learning curve is steep, and projects take a fair amount of time to create. The payoff comes
when the end product is very customized to what we need. Creating interactive training drove
some need, but our real ROI home runs came from some not-so-traditional products. Internal
demand for our products increased dramatically when we started building sales tools, simulators,
and selection tools. You can say all these tools are training, and I would agree, but they stretch the
limits of what we normally would do. A sales tool is training, targeted at what we want to present
or show a customer or sales person. A fancy Flash showing the product and all its parts, so when
you mouse over it shows details or specific uses. A tool could be a customer ROI calculator show-
ing what they will save with our product. Our sales folks like an interactive presentation that
includes videos and sound where they can walk a customer through a product depending on their
needs, and not just a PowerPoint. Simulators can reproduce the experience a customer will have
with the products. We mainly use them for showing how to navigate through interface screens,
controls, or computer screens. In this case, a customer is learning how to use the screens or con-
trols by actually doing it. We can set up scenarios, and make sure they understand how to handle
multiple situations. Our highest-demand item though is selection tools. These often have very lit-
tle training associated with them. A selection tool asks a series of questions that allows a cus-
tomer to choose certain features they need. Based on their answers, a Graco product is identified
along with related accessories. Sounds easy, but often times, when dealing with equipment, the
items a customer selects determines other items they can or cannot select. If you pick motor 1,
then you can pick pump A, B, or C, but if you pick motor 2 then you can pick pump B, C, or D. If you
239 Tips for Producing and Managing Flash-based e-Learning Content | 25
Any bitmap used want a stainless pump, then you have to pick pump C or D. It gets complicated real quick, and it is
hard to show all the relationships in a catalog. The result is customers ordering the wrong combi-
more than once nations, or frustrated with the process. They will just call their sales rep, who not so gladly spends
(including in two his or her time ordering for their customer. With a selection tool, we can ask the questions of what
they need, and then only show items that fit their requirements. If they select a 240V motor, we
keyframes) should only show accessories for a 240V motor and pumps, and so on. If they require a medium flow rate,
be converted into we don't show them small pumps or really large pumps. We allow them to choose what they
need, and items that fit together. Internal demand for selection tools is far greater than our
a symbol so it resources, and we will eventually add more head count because of it. This demand directly sup-
only downloads ports interactive training. To summarize, if you want to increase demand for interactive training,
you may want to look at building some not-so-conventional sales tools and selection tools. In the
once. right situation, you directly drive sales, have more concrete ROI numbers, and internal demand for
your products will increase. Tipster: Scott Gale
Angela Nicholasa
CONVERT YOUR BITMAPS INTO SYMBOLS — Any bitmap used more than once (including in two
keyframes) should be converted into a symbol so it only downloads once. Tipster: Angela Nicholas
HOW TO USE VERSION CONTROL TO MANAGE CHANGES — When developing applications using
Flash, use .AS files to separate complex code functionality from the .FLA file, and check them into a
version control system such as Subversion. Taking the code out of the .FLA file will allow you to uti-
lize the tools provided by the version control system to more effectively manage changes to the
code over time, and across multiple team members. Tipster: David Williams
USE MOVIE CLIPS WHENEVER POSSIBLE — This makes your design more modular so you can move
movies easily around the stage, or export them into other Flash-based e-Learning. Build it once —
use it often. Tipster: Steve Johnson
PREVENTING USERS FROM TAKING SCREEN SHOTS OF YOUR APPLICATION — There is no direct
way to prevent users from using the PrintScreen key in the keyboard, since this function is con-
trolled by the operating system. Here is a little hack to nullify the clipboard when the user presses
the PrintScreen key. Use this code:
Enable workforce development any time, anywhere, using eLearning to provide training
and practice in your content and processes. Partner with Beeline to design, develop and
deliver engaging, effective custom eLearning. Our creative and skilled team of award-
winning developers has the experience across business segments and content areas to
bring your eLearning to life. Project management tools allow for rapid, collaborative
development and review. Your projects will be on target, on time, and on budget.
1 2 7 2 4 G r a n B a y Pa r k w a y W e s t , S u i t e 2 0 0 , J a c k s o n v i l l e , F L 3 2 2 5 8 - 4 4 6 7
239 Tips for Producing and Managing Flash-based e-Learning Content | 27
your design more 2. Make EVERYTHING a symbol. It takes a few extra seconds, but saves you tons of time when edit-
ing the file later.
modular so you 3. When possible, paste in your graphics, instead of importing them. This seems strange, but when
can move movies you paste graphics in you can control the output compression for all items in the export settings.
If you import them, you have to either use the originally imported compression, or a specific
easily around the compression for each graphic individually. You cannot globally set the output compression of
stage, or export imported graphic files.
4. If you have developers on both Macs and PCs, spend some time up front choosing OR creating
them into other
fonts that will render similarly on both systems. Then make sure the final output is from one
Flash-based platform or the other. (Macs usually render fonts a little nicer than PCs.)
e-Learning. Build Tipster: Tim Bobo
it once — use it USAGE OF COMMON LIBRARY FOR ASSETS — Situation: Typically, in Flash-based e-Learning cours-
often. es, the graphic team used to have a lot of graphic elements specific to that page, including global
items like bullets, buttons and so on. When can something go wrong? With the above practice, if
Steve Johnson we get any change request like change the size of a bullet and the color, what is the pain? The
team will end up opening each of the course pages to update the graphic element. How to avoid
this? Build all the global graphic elements, possibly the page-specific graphic elements, in a single
Flash file. Then, while working on pages, choose File | Open External Library, and drag
the graphic element to your stage. This will create a link to the external Flash file. Advantage:
Global maintenance of the graphic elements, therefore updating is simple. each page (.FLA) is not
heavy. It helps in exhibiting and getting approval of all graphic assets before the start of the work.
Tipster: Madhanaraj Kubenderan
SEPARATE SUPPORTING TEXT FROM SIMULATIONS — If part of your content is a simulation, keep
the simulation separate from the content that describes and/or supports it. That way you can eas-
ily reuse the simulation in other contexts. For example, you might be building a simulation that
describes how an electric motor works, and your target audience is tertiary learners. If you put all
the text and explanations in the same Flash file as the simulation, you cannot easily reuse that
simulation with junior school children, or with another language group. Tipster: Grant Sherson
MODIFYING MOVIE CLIPS — Movies have clips that have independent timelines, and you can ap-
ply effects, filters, and blends to these clips. Add the movie just once, and change the attributes of
the movie on the stage and the movie clip will remain unchanged in the library.
Tipster: Carlyne Lynch
FLASH THAT MODIFIES ITSELF “ON THE FLY” — A good teacher can read their audience, and alter
their script based on their receptivity in real time. The best e-Learning is highly customized, self-
239 Tips for Producing and Managing Flash-based e-Learning Content | 28
While Flash is changing depending on the user's choices. Flash is a very powerful programming tool that allows
you to make use of complex variables that can alter the very nature of a training exercise as the
generally good learner progresses through it. The more you can take advantage of arrays, variables, objects, and,
at resizing con- more recently, classes, you can not only produce reusable training components, but you can make
learning that adjusts itself in real time. If you are simply using Flash to make entertaining anima-
tent, keep in tions or funny buttons, you are likely missing the boat. I would challenge everyone in e-Learning to
mind that most make use of Flash as a tool to teach, not just present, content. Tipster: Ryan Cameron
content devel- DO LEARNERS SEE WHAT DEVELOPERS SEE? — While Flash is generally good at resizing content,
keep in mind that most content developers have larger screens with higher resolution than the
opers have larg-
average learner — set a sensible base level for visual content. Tipster: Stuart Hornsey
er screens with
SCORM ADAPTER FOR FLASH 8 AND 9 — Pipwerks recently has released a SCORM adapter for
higher resolu- Flash 8 and 9. It is a wonderful solution for tracking to a SCORM 1.2 or 2004 LMS without having
tion than the to figure out the ADL documentation. http://pipwerks.com/lab/scorm/ Tipster: Matt Perkins
average learner USE JAVASCRIPT TO SYNCHRONIZE FLASH MOVIES — When using multiple Flash movies embed-
— set a sensible ded on the same page, it is sometimes necessary to synchronize the two, or send information
from one to the other. For example, when the first movie stops playing you'd like the other to
base level for start playing. One way to do this is by using JavaScript as a relay. ActionScript in Movie A calls a
visual content. JavaScript function, which in turn calls an ActionScript function in Movie B. The Actionscript
ExternalInterface class is the recommended mechanism for communication between
Stuart Hornsey JavaScript and the Flash Player, though fscommand() and getURL() may be used but are asyn-
chronous and unidirectional, therefore less flexible. A simpler way to communicate between Flash
movies, which doesn't involve JavaScript, is by using the ActionScript LocalConnection class.
Movie A and Movie B both establish LocalConnection instances, which can then call methods
on each other's instance. Since a LocalConnection channel has two endpoints, this method
works best for a pair of movies that need to communicate. Unlike the JavaScript relay approach,
LocalConnection works across HTML frames and even browser windows without any addi-
tional effort. Here is a LocalConnection example provided by the Adobe documentation:
paper, you PLAN AHEAD — Then plan some more. E-learning projects go together so much better when a
client can give a developer a “road map” to follow instead of aiming for one target, only to alter
won't be able to
the target for a different one mid-project (or later). Doing this can also save the client money,
make it work in and/or make more money for the developer by not having to waste time/resources.
Tipster: Jon Weber
Flash.
David Miller
PUBLISH TO THE CORRECT FLASH PLAYER VERSION — Remember to use the Publish settings to
decide which version of the Flash player your .SWF file is intended to work with. There are two key
considerations. The first depends on the version of the player that installed on the desktops where
your content is being viewed. You will need to ensure that the piece you create is less than or
equal to the version of the player available on the desktops of the learners. (Especially in environ-
ments where upgrades by the individual user are not an option). If you do choose an earlier ver-
sion of the player to ensure better compatibility with desktops, then keep in mind you may have
to sacrifice some features in your program development. (As an example, the “Slide” feature in
Flash Professional 2004 requires you to publish for Flash Player version 6 or higher.)
Tipster: Rob Wiggins
TRY IT OUT ON PAPER FIRST — It's all too easy to jump into Flash and start creating your interac-
tions. Although they are often based on storyboards, it sometimes helps to sketch it out on paper
first. If you can't make it work on paper, you won't be able to make it work in Flash.
Tipster: David Miller
239 Tips for Producing and Managing Flash-based e-Learning Content | 30
Plan ahead. USE XML TO FACILITATE FLASH WORKFLOW — Unlike the basic e-Learning technologies of HTML,
Javascript, JPEG, and other image formats, in Flash the format for the deployed content is different
E-learning proj- than the format of the working documents. This results in workflows that must accommodate
ects go together the one-way .SWF compilation process. On teams where the instructional designer is not the Flash
developer, the compilation process requires that the Flash developer be involved in every develop-
so much better ment iteration and maintenance iteration, which affects staffing requirements and schedules
when a client can among other things. Flash's proficiency with XML can be harnessed to free the Flash developer
from each development iteration by unloading content, structure, and/or logic from the Flash
give a developer product into XML-formatted documents, which will be familiar to HTML users and don't require
a “road map” to compilation. You can realize changes to text, swapping of images or videos, and new behavior for
interactions without touching the raw or compiled Flash files. In the simplest case, text to display
follow instead of in the Flash object can be loaded from a separate XML file. Why XML? It is immediately readable
aiming for one by both humans and machines, and there are thousands of tools for manipulating, processing,
and managing XML — not to mention that Flash happens to be quite handy with XML. You can
target, only to then implement text changes without a Flash developer. Furthermore, the text becomes search-
alter the target able, since it is no longer stored in Flash's binary files. Beyond text extraction, content structure
and sequencing is a prime candidate for offloading into XML, allowing you to rearrange, cut, or
for a different augment the presentation's flow with a quick edit of the XML elements. You can even effectively
one mid-project state programmatic logic in XML, if abstracted thoughtfully, without the need for additional
ActionScript. One compelling advantage of XML-based content is the possibility of including use-
(or later). Doing ful information that Flash won't use, such as metadata. Flash files have limited capability for hold-
this can also save ing metadata, but XML is practically built for the task. You can safely keep properties, comments,
references, attributions, keywords, change histories, or complete documents inside the XML data.
the client money, The trick to making this all work is having a good developer, who knows how to effectively sepa-
and/or make rate content concerns from the Flash machinery and provide a usable format for the XML data. Of
course, a cost-benefit analysis will reveal to what extent you should abstract content from Flash.
more money for Expertise with XML will go a long way in making sure things run smoothly. For instance, having a
the developer by DTD or XML schema can enforce proper formatting of the XML files so that Flash can use them
without issue. There are XML authoring tools like Altova Authentic that can put a user-friendly
not having to face on XML editing, making it as easy as filling out Web-based forms. In our case, we have been
waste time/ using these techniques and technologies to improve information accessibility, asset management,
maintainability, traceability, team coordination, version management, standards adherence, and
resources. development time. Additionally, it has reduced the need for Flash and ActionScript expertise since
the content-free Flash objects are inherently reusable. Finally, any improvements made to the
Jon Weber
generic Flash objects immediately benefit our entire portfolio of e-Learning products.
Tipster: Lawrence Yau
TRACKING STUDENT PROGRESS WITHOUT AN LMS — If you are not using an LMS, use the Flash
SharedObject to keep track of student progress, so students won't have to complete a CBT in
one sitting.
1. Initialize the SharedObject in the main module.
2. Create a variable that will track student progress and store it in the SharedObject.
239 Tips for Producing and Managing Flash-based e-Learning Content | 31
If you get really 3. Update the value of that variable at milestone markers along the way (ie. after each completed
module)
stuck on some 4. Check the value of that variable each time the CBT launches. You can then build a simple table
ActionScript, of contents that somehow marks the completed modules vs. those the learner has yet to do.
The users’ computers will store their information.
and have
Tipster: Marge Rutter
searched the
SECTION 508 COMPLIANCY ISSUE FOR READERS — It is possible to produce Section 508 content
forums, take a
using Adobe Flash 8 and higher. It is not easy, or even reliable, when using a content reader in dif-
break! Five min- ferent browsers. One way we figured out how to make a portion of text read on a button press
was to dynamically set the button's description onPress to the text we needed the reader to
utes away from
read. Then you update the AccProperties for the button. Then directly after that, on the same
the computer, button press, we set it back to “” (blank), so when the student tabs back to the button it will be
reread. Flash will not reread something it recognizes as having already been read. It looks like this:
and your chal-
myButton.onPress = function(){
this._accProps.description = “the text you want read”;
lenge, might be
worth an hour Accessibility.updateProperties();
of frustration. this._accProps.description;
Accessibility.updateProperties();
}
David Miller
This took a little playing around to figure out. There might be an easier way out there; if you find it
please let me know. Tipster: Rodger Stuffel
KEEP YOUR FLASH FILES SMALL — This tip is very basic, but I see people doing this wrong all the
time. When you are working to create a Flash-based e-Learning program, you really need to make
sure you break up your Flash content into small bite-sized pieces. Unless you are showing a video,
never force the user to load more than a megabyte or two at a time. Keeping your files smaller is
best. There are tons of ways you can optimize your output files, and Adobe has tools built right
into Flash to allow you to analyze the bandwidth requirements of any Flash file. Take time to learn
these tools, and use them to optimize your content so it plays well over your lowest target band-
width speed. Tipster: Tim Bobo
USE HIGHER FPS RATES FOR SMOOTHER ANIMATION — The default frames per second (fps) in
Flash is 12, but when using Flash I like the design to appear more like video, so I bump it up some-
where between 24 and 32. While it can be more memory intensive, I try to keep my movies as
small and efficient as possible so it does not become a problem. Tipster: Steve Johnson
ALMOST ANY FLASH INTERACTION WILL BENEFIT FROM A LOADING INDICATOR FOR THE USER —
A 300 KB piece can take five seconds to load at DSL speeds. To be effective for small files, the
loader itself has to be small. Here is ActionScript for a loader that is about 300 bytes. Simply create
a horizontal fill, for example 5 pixels by 100 pixels, and convert it to a “movieclip.” Add this code to
239 Tips for Producing and Managing Flash-based e-Learning Content | 32
If you are going the “movieclip” itself to make it self-contained and reusable. This will be your loading indicator
that you place in the first frame of the root timeline. This code includes a function to fade out the
to use narration “movieclip” if it spans more than one frame.
in Flash, it's best
to record the onClipEvent (enterFrame) {
this._parent.stop();// stop the root timeline
audio first and
percent = Math.abs(_parent.getBytesLoaded()*100/_parent.
import it, then getBytesTotal());
time the visual this._width = percent;// the movieclip that will scale
horizontally
portion to it.
if (percent=100) { // you can set this to any number (0-
Flash makes this 100), 100 represents the entire .SWF
easy by placing this._parent.play();// any action you want after loading
reaches the amount you specify
this._alpha = this._alpha - 5; // this fades the loader
the audio on the
timeline for ref- movieclip by 5% per frame
STARTING OUT SMALL WITH FLASH — The beauty of Flash is that you can use it at so many differ-
ent levels: learning interactions, graphics, Flash videos, quizzes, animations, and slideshows (to
name just a few), or an entire SCORM-compliant course. To ease the transition, start small by
adding Flash elements to your current courses. As you become more comfortable with the tech-
nology, you can build up to more interactive and/or multimedia experiences that really do look
professional. My suggestion to an organization thinking about using Flash for e-Learning is to
239 Tips for Producing and Managing Flash-based e-Learning Content | 33
There is not a strike a project team in your organization to create a simple course prototype. Start with a simple,
page-turner course structure, similar to a good percentage of e-Learning currently available. Learn
good method to how Flash creates the page template structure. Experiment with some short quizzes. Publish to
save data in Flash your LMS. Annotate what the development and maintenance process will be. If you do not devel-
op in-house, undertake a similar arrangement with a trusted vendor. Make sure to document your
for e-Learning. successes and issues! Tipster: Claudio Lerulli
You cannot use
TIP FOR RAPID DEVELOPMENT — Purchase or build a Flash/XML-based course player that is
cookies, because SCORM-conformant, and then skin it to fit your organization’s brand and needs. This allows for
rapid development (all structure, navigation, and communication with the LMS are taken care of
students can use
already), but you still have full flexibility to create your content in Adobe Flash.
any machine on Tipster: George Aston
the Internet to STUCK? TAKE A BREAK! — If you get really stuck on some ActionScript, and have searched the
access your con- forums, take a break! Five minutes away from the computer, and your challenge, might be worth
an hour of frustration. Tipster: David Miller
tent. Your interac-
tivites, games, or MAKE SMALLER FILES: USE .GIFs — When importing images into your Flash design, whenever pos-
sible use .GIFs instead of .JPEGs. Depending on the image, you can save a lot on file size without
lessons should not sacrificing too much in image quality. This will make your Flash animation load faster and run
take more than smoother. Tipster: Steve Johnson
30-40 minutes to RECORD THE NARRATION FIRST — If you are going to use narration in Flash, it's best to record the
complete. audio first and import it, then time the visual portion to it. Flash makes this easy by placing the
audio on the timeline for reference when placing text and illustrations, and for timing your
Joey Tuskan tweens and animations. Tipster: Kevin Wilcoxon
KEEP FLASH MODULES SHORT — There is not a good method to save data in Flash for e-Learning.
You cannot use cookies, because students can use any machine on the Internet to access your con-
tent. Your interactivites, games, or lessons should not take more than 30-40 minutes to complete.
Tipster: Joey Tuskan
ANIMATION AND SCRIPTING ARE TWO SEPARATE ROLES — We prefer to have separate roles for
animators and coding/scripters. This allows for a very professional animation design, with clean
code that results in smaller Flash files and faster downloading. The two roles work in tandem as a
team. Tipster: Tonia Dousay
TIPS FOR BETTER IMAGES IN FLASH — Edit your photographs for Flash in your image editing soft-
ware to the final size needed in the Flash piece. Avoid scaling images in Flash, unless for a tween,
to maintain optimal file sizes and best quality of your image assets. If you are not certain of the
final size needed, import your image, and, once the size is determined, use the built-in editing fea-
ture to resize your image in Fireworks or Photoshop. Turn off Allow Bitmap Smoothing if the
image is not going to be tweened, and always place your images on whole pixels for best results.
Tipster: David Miller
239 Tips for Producing and Managing Flash-based e-Learning Content | 35
Use external USE EXTERNAL XML FILES TO CONTROL AN ENGINE IN FLASH — This way you can update content
without republishing the Flash content. Tipster: Phil Cross
XML files to con-
TIPS TO HELP THE USER —
trol an engine in
1. We used to have separate pop-up windows for Notes, Bookmark, Go to Bookmark, print, help,
Flash. This way search, settings, and so on. These options can be categorized into tabs the user can use to navi-
you can update gate to any part of these options when needed. This could reduce the user interaction time, and
also make it easy for the user to access the navigation panel.
content without
2. Users can be provided with a full-screen-mode option, which could hide the other unused pan-
republishing the els and display only the content. This mode can have separate settings, which would display
only the necessary parts of the panel such as navigation buttons, show audio, audio on/off, and
Flash content.
page controls such as play/pause and replay. The user could be more focused on the course,
Phil Cross instead of viewing the complex template design. Note: The user can get the full template when
the full-screen mode is in the off state.
Tipster: S. R. Mithra
COMMENT YOUR TIMELINE — In addition to commenting within your code, also comment in the
timeline itself. Using the same double forward slashes, add comments at critical points in your
timeline, such as “//start audio here”, “//add image here”, and so on. Tipster:
David Miller
LOADING EXTERNAL .SWFs — A best practice is to load external .SWFs or smaller Flash movies into
a main Flash file or template. This process helps with the initial load time of Flash content; instead
of loading everything at once you can load specific pieces or modules on-demand, and only when
the specific content is needed. Code:
1. Create a Movieclip, and give it an instance name of “shell”
2. On the Layer above the Movieclip Layer, put some code that looks like the following:
shell.load(*file path of the .SWF);
You can then position the external .SWF with the following code on the same layer.
shell._x = 0;
shell._y = 0;
This places the externally loaded .SWF in the top left corner of your template. These values for _x
and _y are your pixel placements ... so you can move it depending on the size of your canvas by
entering different pixel values. Tipster: Scott Gaspar
USE FLASH APPROPRIATELY — Resist the urge to use animation simply for the sake of it, as poor
design can detract from learning. Make sure your Flash animations relate directly to the content
being examined, and, preferably, enhance learner understanding or engagement.
Tipster: Glenn Hansen
239 Tips for Producing and Managing Flash-based e-Learning Content | 36
Rapidly develop FASTER FRAME RATE (ONE MORE TIME) — The default frame rate in Flash has been 12 since at least
Flash 4 (was that 1999?). Today computers normally run video content at 30 frames per second, so
a professional why not try a higher rate with Flash? While the Flash Player is not the same as a video player,
interactive appropriately-sized Flash pieces will play very well at 30 frames per second, allowing you to bring
in video at its native frame rate (in the US it’s 24 for PAL), and yield better results.
Website by uti- Tipster: David Miller
lizing the many
NO EM DASHES IN FLASH! — While copying/pasting text from a script, if your writer has included
Flash templates em dashes (oh! they love 'em), these punctuation marks will not appear correctly in Flash. Just
replace all those pesky punctuations with two dashes (“--”) without spaces before and after them.
that are avail-
Of course, you need to “Search & Find” all locations of em dashes on the script before you can do
able for a small the above. Tipster: Prakash Bebington
purchase price. BUY TEMPLATES TO SAVE TIME — Rapidly develop a professional interactive Website by utilizing
As an example the many Flash templates that are available for a small purchase price. As an example www.tem-
platemonster.com. Tipster: Dave Harris
www.template-
monster.com. FLASH DRAWING TOOLS REDUCE FILE SIZES — Whenever possible, use the drawing tools provided
by Flash to reduce file size and increase loading speed. Although there are better graphic design
Dave Harris tools, with a little creativity, you can do a lot with what Flash has to offer. Tipster: Steve Johnson
USING .SWF FILES AS A RESOURCE — Of course, a great use of .SWF files from other e-Learning
tools is to use them in Flash as a resource. Say you are creating a large FLASH program that needs
a glossary. Create the glossary in, say, Articulate, of course adjusting the parameters in Articulate
to maintain a style of the parent FLASH project. Export as a .SWF file, and use it in the parent
FLASH project. A fast, clean, simple glossary with no ActionScripting needed. A no-brainer.
Tipster: Joe Shultheis
IMPORTING BITMAPS — When importing bitmaps, do not scale down or crop them in Flash for
optimum file sizes. Use an image-editing program to achieve the desired size, and then import.
Tipster: Angela Nicholas
When importing use of a simple text editor. The data must be saved as .TXT or .RTF:
term2:definition of the second term.
bitmaps, do not
term3:definition of the third term.
scale down or Content experts can continue adding terms in this relatively intuitive and readable format. Once
crop them in read, Flash interprets this data as two variables. The first one, delimiter, is just a trick to be sure
that the line breaks you will use to parse your data into a Flash array are the right ones. Anyone
Flash for opti- who has had his or her linebreaks magically change upon upload to a Web server will know what
mum file sizes. I'm getting at here. The second variable, data, is the one you must parse with ActionScript within
Flash. Here is the code you will need to use:
Use an image-
glossary_array=glossData.split(delimiter);
Now you can access each glossary entry from the glossary_array, like this:
editing program
to achieve the glossary_array[0];//returns “term1:definition of the first term”
desired size, and There are certainly many other ways to format flat text data, but I have found this to be the easi-
est for non-programmers to update successfully. The line breaks make the data much more read-
then import. able than ampersands with no white space. For more complex data types, I have used Word files
containing a macro that converts table-based data to an appropriate XML format. Content experts
Angela Nicholas
update the table, run the macro, and use the resulting file to overwrite the existing data file.
Parsing XML within Flash is beyond the scope of this tip, but I have found XML to be an extremely
reliable and flexible format for use in Flash.
Tipster: Becky Kinney
INCREASE THE QUALITY OF YOUR COURSE GRAPHICS AND DECREASE YOUR PRODUCTION TIMES
— Inexpensive subscriptions to a few great Web sites allow you to easily load and modify thou-
sands of pre-developed Flash animations, pictures, backgrounds, video clips, sound effects, and
more. You can turn a boring course into an interactive course in a matter of hours, not days, and it
requires very little Flash experience. Two Websites I recommend are: http://www.animationfacto-
ry.com and http://www.istockphoto.com Tipster: Leigh Margaret Roberts
CREATE A TALKING AVATAR IN CRAZY TALK THAT RUNS IN FLASH — Here are the instructions that
we use to make Crazy Talk videos:
1. Make voice files and save as .WAV files using slide number in name
2. Open Crazy Talk and choose avatar.
a. Choose script
b. Click on folder icon and navigate to .WAV files
c. Select .WAV file. Choose Media: AVI format, 180 x 240, and then export to videoFiles folder
d. Save as .AVI file with slide number in name
3. Import video into Flash
a. Get in correct frame and layer
b. Choose File | Import | Import video and navigate to correct videoFiles folder
239 Tips for Producing and Managing Flash-based e-Learning Content | 38
fy thousands of INCORPORATE FLASH MOVIES INTO ARTICULATE PRESENTER — Designing in Flash is a lot more
pre-developed time-consuming than designing using programs such as Articulate Presenter. To be more efficient,
I create a number of very small and relatively simple movies in Flash that have one specific func-
Flash animations, tion, then place them inside an Articulate Presenter e-Learning course. This way I can let Presenter
pictures, back- do a majority of the work by using its built-in navigation and sound capabilities, and use Flash for
interesting roll-overs, animations, and interactions. All at the same time, it takes the Articulate
grounds, video Presenter course to the next level, makes use of Presenter's simplicity and rapid development
clips, sound capability, and adds the impressive interactive abilities of Flash. Tipster: Steve Johnson
effects, and more. FLASH TO LMS COMMUNICATIONS — I have found that in our journey to effectively communicate
with our SCORM 2004 LMS, “ExternalInterface” is the method to use. In a simulation or
You can turn a
course, we will use ExternalInterface to call a JavaScript function on our SCO page that tells
boring course into the LMS to set cmi.completion_status to “completed”. On our “next” button within Flash,
we will again use ExternalInterface to SetValue(“adl.nav.request”,“contin-
an interactive
ue”) in order to allow the user to move to the next SCO. This effectively lets the LMS know the
course in a matter user has satisfied the status requirement, and allows us to navigate the LMS aggregate manifest
menu via Flash. An example in Flash ActionScript:
of hours, not days,
import Flash.external.*;
ExternalInterface.call(Javascript_function_name);
and it requires
very little Flash In SCO HTML:
experience. script type=“text/javascript”
function Javascript_function_name ()
{
Leigh Margaret Roberts
EMBED FLASH FILES IN MADCAP FLARE HELP SYSTEMS — Madcap Flare is a tool technical writers
use to build online help systems. It can also be used to build “learning systems.”You can embed
239 Tips for Producing and Managing Flash-based e-Learning Content | 39
While copying/ any Flash file into any topic in a Flare system. This means you can put any Captivate demo or sim-
ulation, and any Articulate interactions (including PowerPoint shows), in a help-system-like struc-
pasting text from ture along with text and images. I'm even embedding Captivate Flash files into Engage interac-
a script, if your tions and dropping those into Flare topics, and they work great! Using Flare lets you organize your
material and keep it all together in a flexible online structure. You can use the output for instruc-
writer has includ- tor-led training (live or remote) or as a leave-behind, self-paced system. Another benefit to Flare is
ed em dashes (oh! that you can create multiple “targets” (specifically defined outputs), each with its own table of
contents. You can put conditions on your content, so that it only displays in the targets it is intend-
they love 'em), ed for (and not others). You can create online output, or you can output to Word or FrameMaker
these punctua- from the same content pool, which makes creating participant guides and exercise books that go
along with the online component much easier. I just started working with this to develop training
tion marks will for our new customers. So far so good. I encourage others to try it if you have access to Flare. No, I
not appear cor- do not work for Madcap. .-) The only difficulty I've encountered so far is getting the Quizmaker
quizzes to display in Flare without a lot of JavaScript fancy-dancing. If anyone has the answer to
rectly in Flash. that one, I'd love to hear it! Tipster: Laura Filla
Just replace all
those pesky punc-
tuations with two
dashes (“--”)
without spaces
before and after
them. Of course,
you need to
“Search & Find”
all locations of
em dashes on the
script before you
can do the above.
Prakash Bebington
Success Story
University of
Notre Dame
W
hen students dream about
the college experience,
they are likely to imagine
themselves at the University of Notre
Dame. In fact, Notre Dame—rated
one of the top 25 universities in the
United States by virtually every
leading business and educational
publication—ranks fifth in a listing
of “dream schools” in a recent
Princeton Review survey.
The University of Notre Dame’s newly revamped
website serves as an effective marketing tool.
Using Adobe Flash CS3 Professional, the web team
was able to easily achieve the fully interactive,
custom experience they wanted—including
layers, rotation, and spinning. The team also used
Adobe Photoshop CS3 software to design the site
mockups, Adobe Fireworks CS3 to slice the files,
and Adobe Illustrator CS3 to build vector images
that resize fluidly. The improved integration
among Adobe applications was a great advantage
in updating the website’s new design.
“With Flash Player Video, people can leadership, the web team set out to leverage
Adobe technology to meet these goals.
experience the Notre Dame community “We wanted to create a virtual canvas that
would draw people in and immediately
in ways not possible with any other immerse them into the campus experience,”
says Klawitter. The team turned to Adobe
technology.” technology, including Adobe Flash CS3
Matthew Klawitter, director, Notre Dame Web Group Professional software and Adobe Flash Player
Video to deploy a revolving, interactive
carousel of video content that tells the Notre
Dame story in compelling, personal, and
With more than five applicants for each relevant ways. “With Flash Player Video,
freshman class position, the University people can experience the Notre Dame
continually seeks to attract top applicants community in ways not possible with any
from all over the world, relying primarily other technology.”
on its website as the first point of contact.
The results speak for themselves. Page visit
“In one sense, we’re in the first impression
duration has increased from 45 seconds to
business,” says Matthew Klawitter, director
nearly 5 minutes. The number of page hits has
of the Notre Dame Web Group. “People may
more than doubled year to year, and the
know we have outstanding academic programs
bounce rate has decreased by a third. “People
but they may be unaware of the amazing,
are engaged, and they keep coming back for
world-changing research that happens here.
more,” says Klawitter.
People know us for athletics but don’t know
about the special student-athletes we have.” Immersive core messages
Rather than being greeted by a pre-conceived
While Notre Dame is viewed as a world leader
institutional introduction, visitors to nd.edu
in higher education, the university needed to
are welcomed by a panel of video vignettes
focus on creating a more innovative web
from a revolving library of Flash Player Video
presence in keeping with institutional standards,
content that changes continually. Visitors
to keep visitors engaged, and to serve as an
can click on the central panel and watch, for
effective marketing tool. Under Klawitter’s
example, a snippet of a United Nations advisor
presenting a public lecture from Notre Dame’s
“Embracing Flash CS3 Professional as a
development framework enabled us to convey
the dynamic nature of our university via a
stunning, totally immersive experience rather
than just a portal to web services.”
John Nunemaker, senior developer, Notre Dame Web Group
Organization
University of Notre Dame
Notre Dame, Indiana
http://www.nd.edu
Challenge
• Deploy immersive web presence for
Kellogg Institute for International Studies. Adobe Flash technology for development as complex institution of higher learning
Or they can select an adjacent panel and well as deployment—which included tapping • Adopt industry-leading technology that
follow a computer science and engineering into a worldwide developer network and offers broad community resources and
reliable product support
professor’s progress in developing iris receiving reliable support from Adobe. The
recognition technology. New, interesting ubiquity of the Adobe Flash Player also meant • Create first-hand perspectives of campus
life that would reach global audience
personal perspectives about research, aca- that content could be seamlessly delivered to
demic achievements, faculty expertise, and a global audience. “We’re in the marketing Solution
Launch innovative new website showcasing
campus activities are regularly produced by division,” said Nunemaker, “and we easily life at Notre Dame through rich media Flash
the University’s news bureau and other made a strong case to the IT team to move Player Video
campus communications units and added to forward using Adobe Flash CS3 Professional Benefits
the Notre Dame landing page. for our first big foray into web video.” • Increased page visit duration by nearly 500%
• Doubled number of hits year to year
“The carousel is a great tool to present layers of The impact of the new site is widespread. From
• Decreased bounce rates by one third
our complex institution,” says John Nunemaker, alumni, to parents, to prospective students, a
senior developer at Notre Dame. Since the site renewed sense of pride and admiration reigns. • Enabled seamless workflows among
designers and developer for rapid
went live, Notre Dame has been flooded with The web team has received user comments that production cycles
kudos from visitors globally. “Embracing tout the new site as the best in higher education,
• Transitioned smoothly from other
Flash CS3 Professional as a development one that makes a tremendously positive frameworks to Flash development
framework enabled us to convey the dynamic impression about the institution. One visitor environment
nature of our university via a stunning, totally relayed comments that the new site reflects the • Gained unanimous team buy-in from
immersive experience rather than just a portal “golden brightness” that is truly Notre Dame. among Marketing and IT teams
to web services.” After studying trends in
traditional media including print, broadcast, Productivity gains Toolkit
and social media, the team concluded that Using a variety of tools in Adobe Creative • Adobe Creative Suite 3 Web Premium.
people want to hear about a subject from a Suite® 3 Web Premium, the designers and Components used include:
personal perspective. developers at Notre Dame are collaborating in • Adobe Flash CS3 Professional
seamless workflows. Nunemaker explains that • Adobe Illustrator CS3
From a management as well as technical the transition from working in JavaScript to • Adobe Photoshop CS3
standpoint, the decision to develop the new Adobe Flash CS3 Professional software and its • Adobe Fireworks CS3
project using Adobe Flash CS3 Professional ActionScript programming language was a
• Platform: Macintosh PowerBook, MacBook,
was easy. Previously, the team struggled with natural progression. “Honestly, we hadn’t MacBook Pro, and iMac computers using
various video formats, platform compatibility, done much Flash development prior to this Mac OS X.4
and cumbersome video players. The team
weighed the advantages of working with
To update the website, the Notre
Dame web team turned to Adobe
technology including Adobe Flash
CS3 Professional and Adobe Flash
Player Video to create a revolving,
interactive carousel of video
content that tells the Notre Dame
story in compelling and relevant
ways. Rather than being greeted
by a pre-conceived institutional
introduction, visitors to nd.edu
are welcomed by a panel of video
vignettes from a revolving library
of Flash Player Video content that
changes continually.
“Now, having embraced Flash to a huge extent, same stunning look, and would have involved
debugging and cross-platform compatibility
we are very happy with both the development checking to a much greater extent.
Adobe, the Adobe logo, Creative Suite, Fireworks, Flash, Illustrator, and Photoshop are either registered trademarks or trademarks of Adobe Systems
Adobe Systems Incorporated Incorporated in the United States and/or other countries. Macintosh and Mac OS are trademarks of Apple Inc., registered in the United States and other
345 Park Avenue countries. All other trademarks are the property of their respective owners.
San Jose, CA 95110-2704
USA © 2008 Adobe Systems Incorporated. All rights reserved. Printed in the USA.
www.adobe.com 95010493 03/08 A
239 Tips for Producing and Managing Flash-based e-Learning Content | 44
Each time you URL TRICKS FOR CONNECT MEETINGS — You can send guests an “Auto Login” URL with the follow-
ing format: http://account.acrobat.com/meetingname?guestname=name. For example, if I want-
change layouts ed to log in John as a guest to my meeting with the URL: http://acme.acrobat.com/widgets, then
while recording a the URL I'd give to John would be http://acme.acrobat.com/widgets?guestname=John. N.B. You
will name everyone who logs in with this URL “John,” so modify the URL for each guest you want
meeting, Connect to log in uniquely. If you have installed the Connect Meeting Add in, but would like to launch the
automatically cre- meeting without the Add in (instead using the Flash Player within a browser window) then use
this format: http://account.acrobat.com/meetingname?launcher=false. Therefore, to join the
ates an index “widget” meeting with just a browser, the URL would be http://acme.acrobat.com/widgets?
marker for the launcher=false. Tipster: Peter Ryce
recording tran-
script, and will
group all the
activities (slide
changes, chat
messages, or as
appropriate)
within that index
marker. When a
viewer watches
the recording,
they can easily
use the markers
to navigate to
specific places in
the meeting
recording.
Peter Rycea
239 Tips for Producing and Managing Flash-based e-Learning Content | 46
DEALING WITH LARGE SIMULATIONS (AVOIDING COGNITIVE LOAD AND DOWNLOADING ISSUES
FOR LEARNERS) — Many times we may create large simulations that show the user a wide range
of methods to learn how to do a certain process, whether for a software application or for soft
skills. It would be better to break up the simulations into small manageable sections, and save
these sections into separate Captivate movies, so that the user will have small manageable
239 Tips for Producing and Managing Flash-based e-Learning Content | 47
Try using .WAV chunks of learning rather than a long simulation with many areas to learn and to remember. In
addition, the file sizes of the movies will be small, enabling the files to load quickly for the users.
audio files rather Tipster: Bruce Richards
than .MP3 files.
TEST CAPTIVATE LINKS TO EXTERNAL URLs — If your Captivate activity links to an external URL, test
The file size may it on a server rather than just on your local machine. The default Flash security settings for local
files often prevent external URLs from opening. Tipster: Christy Tucker
actually end up
smaller by letting BUILD A FLASH BILLBOARD FOR YOUR E-LEARNING — When I first got Contribute, Ellen Wagner, in
a personal conversation, described it as “Flash for everybody else.”With that in mind, once the
Captivate convert product training was done for our client's software pre-sales demos, I made a Flash billboard that
the files to .MP3 encouraged visitors to give our client serious consideration as a supplier. A static product-landing
page became an internal advertisement. We helped them set and manage expectations (intro-
when you publish duced the product and framed its purpose), established credibility (added testimonials and per-
the Flash file. formance upside descriptions) and then went on to prove that the software would 1) Work as
promised, AND 2) Work as needed. All we did was decide on the billboard size, message, and look.
Christy Tucker It was simple, effective, and added just the amount of sizzle they wanted for their steak. Who
knew you could make a great Flash ad in under 20 minutes! Tipster: Becky Smith
IMPORTING AUDIO INTO CAPTIVATE — Try using .WAV audio files rather than .MP3 files. The file
size may actually end up smaller by letting Captivate convert the files to .MP3 when you publish
the Flash file. Tipster: Christy Tucker
No matter what tral textbox that declares the purpose of the demo or sim. For example:“In this demonstration,
you will view how to save a Word document as a template.”“In this simulation, you practiced how
development to save a Word document as a template.” Tipster: Prakash Bebington
tool you use,
CAPTION-BASED CAPTIVATE DESIGN — If you are working on a large project where many of the
one of the first authors are SMEs, but have no graphics experience, consider injecting your main graphic design
elements into custom Captivate Text Captions. There are full instructions on how to make custom
steps should be
captions in the Captivate help file. You can program in all your corporate banners, logos, paragraph
to develop tem- headings, bulleted lines, and even pieces of illustration as captions, and use them with or without
text. You then upload captions to Captivate's caption gallery directory, or, even easier, distribute
plates for your
them as templates, with the graphics elements already displayed on slides. These graphics
content to pro- become available within Captivate as instant drawing tools, which are usable and reusable at will.
Making your corporate graphics available this way speeds up work flow phenomenally, and guar-
mote continuity
antees that all Captivate authors, regardless of design experience, produce identical, professional-
for the learner standard graphics, and thus the design remains faithful to your brand. This technique has been
used to produce the Design Templates available for free download on the Captivate Exchange. In
across topics.
the real world, our company uses this design method routinely — the technique is the starting
Michael Baker point for, and strongly underpins, every large Captivate project. Tipster: Alison Lister
WORKING WITH SUBJECT MATTER EXPERTS DURING CAPTIVATE RECORDING SESSIONS — During
course development, if you will have SMEs step through online transactions that you're recording
in Captivate, capture the audio of them narrating it as they go. Have them point out what they're
doing on each screen and why, what they're looking at, and especially any errant keystrokes they
make (preferably along with how to recover). This will help you, the instructional designer, save
hours of development time. During my first use of Captivate I didn't do this, and I spent hours try-
ing to reconstruct what I thought the SME was doing, then going back to him for clarification. It
was really hard figuring out the correct sequence when the SME made a mistake and doubled
back in the screen flow. Then you can merely record your final narrative over the one you had dur-
ing development. Tipster: Mike Dickinson
TEMPLATES FIRST — No matter what development tool you use, one of the first steps should be to
develop templates for your content to promote continuity for the learner across topics.
Tipster: Michael Baker
TO FORMAT THE CLOSED CAPTIONING TEXT — Go to Project > Skin and then select settings
under closed captioning. The help files do not list this information; I had to learn it by trial and
error. Tipster: Mike Hobby
FEWER SLIDES MEAN SHORTER LOAD TIMES — When using Captivate, a good best practice is to
keep your simulations under 50 slides total. The more slides you create, the longer the load times
since Captivate does not allow you to load external .SWF's to save loading time. It is an all-at-once
load with Captivate. (See my tip “LOADING EXTERNAL .SWF'S” under “Adobe Flash Professional.”)
Tipster: Scott Gaspar
239 Tips for Producing and Managing Flash-based e-Learning Content | 49
Easy way to make IMPROVE LEARNING FOR ADVANCED USERS — If a software simulation requires the learner to
click transparent buttons to advance, also add simple backward and forward arrows in one corner.
a background This improves the learning for advanced users of the subject because 1.) advanced users can move
image in Capti- quickly through parts they know, and 2.) they feel empowered to direct their own learning, rather
than locked into a “one size fits all” course of learning. Tipster:Andrew Smith
vate. Design it in
MAKING SCORM-COMPLIANT PROJECTS, COMPLETE WITH PERCENTAGE — Simply put a “Next”
MS Word 2007,
button on each page. Make the button show up after 10 seconds or so, to give the reader time to
and save it as a complete the content. Highlight the button, and click on the “Reporting” tab. Click the “Include in
Quiz” checkbox, give it 1 point, and check the “Add to Total” box. Make sure each forward button
.JPEG. This has
does the same. Now when you publish, make sure to enable SCORM 2004 and “Report Score to
been the fastest, the LMS” as %. Import your manifest into the LMS, and you should have a content object that
automatically reports percent complete. Tipster: Scott Hersey
most effective
way to design TO CLOSE A CAPTIVATE PROJECT AFTER OPENING A NEW WINDOW: Create a very short (0.5 sec-
ond) blank slide at the end of the project, then set the Project Preferences to close the window at
and import back- the end. If you want to provide a way to exit from any slide, you can create a button to go to this
grounds for final short slide. (Theoretically, you could use JavaScript to close the window. However, JavaScript
close functions don’t seem to work in Firefox 2.0 with the additional security features.)
Captivate that Tipster: Christy Tucker
I've found to date.
EASY WAY TO MAKE A BACKGROUND IMAGE IN CAPTIVATE — Design it in MS Word 2007, and save
Laura Jaffrey it as a .JPEG. This has been the fastest, most effective way to design and import backgrounds for
Captivate that I've found to date. Tipster: Laura Jaffrey
CUSTOMIZE AND RE-USE HTML TEMPLATE FILE TO SAVE TIME — After your Adobe Captivate proj-
ect is complete, you can generate both the final .SWF and the HTML files via the File Publish menu.
The problem is that often you have to edit the resulting HTML file to conform to a specific format
or look-and-feel, and this can become a tedious and repetitive process. What you may not know is
that Captivate provides access to the template file used every time you generate a .SWF and its
corresponding HTML file, and thus you can customize this file once and reuse it for future publish-
ing. The name of this file is standard.htm, and you can find it in the installation folder, which is
likely to be C:\Program Files\Adobe\Adobe Captivate 3\Templates\Publish\. This file is a regular
HTML file, and you can edit it in any HTML editor, such as Adobe Dreamweaver, as well as a simple
text editor, including Notepad. Tipster: RJ Jacquez
HOW TO ADD CONTENT AFTER A REVIEW SLIDE — Normally, in Captivate, if you use a quiz with a
review slide, adding a slide after the quiz review can cause problems. For example, if you want a
menu slide to direct students to the next section after the review, you may find you can't even add
or move the slide there. The trick is to make sure that the buttons are not reported. Otherwise,
Captivate thinks they're part of the quiz and forces them before the review. Therefore, you should
change the recording options for any buttons before trying to move any content after the review
slide. Tipster: Christy Tucker
ADOBE® Captivate® 3
Rapidly create engaging
learning experiences
• R
apidly develop eLearning content in different learner modes such
as demonstrations, hands-on simulations, and assessments
• Add
interactivity, robust branching scenarios, and randomized quizzing
without programming knowledge
• Easily create engaging learning experiences without multimedia skills
• Give subject matter experts the ability to create their own eLearning content
• Integrate
with eLearning tools and learning management systems
via SCORM/AICC or publish directly to Acrobat® Connect™ Pro
• Deliver rich eLearning content to virtually anyone — anytime, anywhere
New question types like sequencing and hot spot Audio recording with preview
XML (XLIFF) file export and import for easy localization Streamlined workflow and usability enhancements
Awards
Adobe Systems Incorporated Adobe, the Adobe logo, Acrobat, Captivate, Connect, and Flash, are either registered trademarks or trademarks of Adobe Systems Incorporated in the
345 Park Avenue United States and/or other countries. Microsoft, Windows, Vista, and Office, are either registered trademarks or trademarks of Microsoft Corporation
San Jose, CA 95110-2704 in the United States and/or other countries. All other trademarks are the property of their respective owners.
USA
www.adobe.com © 2008 Adobe Systems Incorporated. All rights reserved. Printed in the USA.
239 Tips for Producing and Managing Flash-based e-Learning Content | 52
When using a WEB RESOURCES THAT FOCUS ON CAPTIVATE TIPS — Specifically, Iconlogic.com, which offers train-
ing materials and a free weekly newsletter with tips and answers to frequently asked questions
click box with a on Captivate and other e-Learning software. Their training materials are so easy to use that you
Tab key shortcut can teach yourself the program without attending a class. Another creative Website that offers
tips and tricks for Captivate is http://www.raisingaimee.co.uk/index.php?option=com_content&
assigned, the task=view&id=30&Itemid=29. This site offers Captivate templates and shortcuts that can save a
tab action can lot of time. Tipster: Jody McNelis
change the focus CAPTIVATE PROJECT SIZING TIPS — When sizing an Adobe Captivate project with the intention of
taking the resulting Flash output and importing it into Articulate Presenter or Adobe Breeze
from the .SWF file
Presenter, there are several important considerations. First, the maximum size for importing to a
to the browser Presenter slide without needing to crop or resize the Flash is 720 x 540. This size will consume the
entire slide. If you want to display the PowerPoint title bar while the Flash video is running, use a
itself. This does
project size of 720 x 495. Second, Captivate has skin borders enabled by default. (Select Project Skin
not create a real- and select the Borders tab to see this feature.) While this can be a nice aesthetic touch for your
published Flash file, it adds a pixel to the height and width of your output. Thus, if you are using a
istic simulation,
precise size when building your project, you could get an error message when importing into
and can confuse Articulate or Breeze (now Adobe Acrobat Connect). Third, if you are recording a software simula-
tion in Captivate (and why would you be using Captivate if you weren't doing that?!), try very hard
learners when
to record in the exact size that you will need for your Flash output. Captivate has an easy-to-use
they attempt to resizing feature, but the output will always be blurrier if you resize your project. Finally, if you
encounter a situation with any Flash development project and you want to maintain a certain
use keyboard
size, there are several useful aspect ratio calculators on the Web. Simply input the aspect ratio that
shortcuts in the you want to maintain, then type another height or width and it displays the new aspect ratio. You
can Google on “aspect ratio calculators” to find one that you like, or use this link to one that I've
tutorial.
found to be very useful: http://www.csgnetwork.com/pixelratiocalc.html. Tipster: Mark Simon
Suresh Jayaraman
HOW TO DISABLE SEAMLESS TABBING — When using a click box with a Tab key shortcut assigned,
the tab action can change the focus from the .SWF file to the browser itself. This does not create a
realistic simulation, and can confuse learners when they attempt to use keyboard shortcuts in the
tutorial. The reason for this is in the browser — a behavior called Seamless tabbing, which allows
tabbing to extend beyond the movie and start with the browser address bar. To disable, follow
these steps:
1. Open the HTML file that Adobe Captivate generates, in a note pad or HTML editor.
2. Between the XobjectX tags, add this parameter: name =“SeamlessTabbing”
value=“false”
3. Save the HTML file.
Your tabbing will now stay within the movie. It works for Internet Explorer and FireFox.
Tipster: Suresh Jayaraman
If capturing a to it to make it as powerful as Authorware. Overall it’s really simple for non-complex e-Learning
modules. As for me, I will go on by combining Lectora and Captivate to create e-Learning lessons.
complex screen Tipster: Rosh
(for example, for
TWO TIPS (NAVIGATION AND DEMO RECORDING) — 1.) Always ensure you provide a navigation
a demonstration), bar so the learner can pause, stop, rewind, and restart a Captivate Flash file. Especially if it is a soft-
ware demonstration. You never know when your learner needs to step away from the computer
only capture the
for a moment, or, sometimes they just want to be able to back up a few steps. 2.) If recording a
relevant window, software demonstration, try to include a Demo and a “Try It” where time and/or budget allows.
This way you accommodate more than one learning style. Our learners often learn better by
or a specific part
“doing” than just “watching.” Tipster: Kathleen Shykula
of the window,
CAPTURING COMPLEX SCREENS — If capturing a complex screen (for example, for a demonstra-
rather than the tion), only capture the relevant window, or a specific part of the window, rather than the whole
whole screen — screen — this will aid viewing for the student. Tipster: Stuart Hornsey
this will aid view- USE SCREENSHOTS TO REDUCE SIMULATION FILE SIZE — Here's how I use Captivate and screen-
ing for the stu- shots to simulate an application: Create a blank project in Adobe Captivate. Use SnagIt to acquire
the screenshots and regions that you will use in the presentation. Save them as .PNGs. Do this
dent. instead of recording your screen, because you will end up with a smaller file size, you won't have
erroneous slides and animations, and you will have more control over each slide and element.
Stuart Hornsey
Paste a screenshot onto a blank slide, and change the options to show the image for the “Rest of
slide” with “No transitions.” Apply these settings “to all” to make it your new default for images.
Record the audio to describe what you want the user to do in the application. Insert a highlight
box over the region that you want the user to click. Insert a click box that pauses the presentation
until the user clicks it. Make the click box action “go to next slide” or “jump to slide.” On the slide
that the click box opens, paste the image of the application, showing how it appears when they
select that option. Initially, the workflow is more than just recording your screen, but the payoff
will be an interactive presentation. The visual quality will be better. The user control will be precise.
It will be like you coaching users through an actual application — only you don't have to be there!
Tipster: Leif Nelson
239 Tips for Producing and Managing Flash-based e-Learning Content | 54
V. Adobe Dreamweaver
Use the site-man- GIVE USERS ESTIMATED DOWNLOAD TIMES AND A LINK TO DOWNLOAD THE FLASH PLAYER —
Whenever I include Flash content within the Web pages for my courses, I always include a note
ager to coordi- about the download time for those on slow connections, and a link to download the Flash player.
nate files for Dreamweaver's Snippets feature makes this very easy. I have my standard text, including the
download link, saved as a snippet so I can easily reuse it in every course. Tipster: Christy Tucker
multi-file find
USE THE SITE-MANAGER TO COORDINATE FILES FOR MULTI-FILE FIND AND REPLACE — The site-
and replace. The
manager also makes it easy to organize your courses for regular file access. Tipster: Red Resener
site-manager also
USE LIBRARY AND TEMPLATE FOR THE COMMON CODE OR OBJECT — Instead of Save As for the
makes it easy to same file. Tipster: Ram Mohan
organize your
courses for regu-
lar file access.
Red Resener
239 Tips for Producing and Managing Flash-based e-Learning Content | 55
Connect URL. Note: This only works with content hosted on an Adobe Connect server. However, it works both for
our Adobe-hosted servers, and for customer-licensed servers. Tipster: Peter Ryce
Peter Ryce
239 Tips for Producing and Managing Flash-based e-Learning Content | 56
published your IMPORTING FLASH FILES CREATED IN CAPTIVATE INTO PRESENTER — If you are creating a Flash file
in Adobe Captivate in order to import it into Articulate Presenter (or Adobe Breeze Presenter),
presentation and
there are two potential problems if you use Captivate's borders feature. 1.) When the borders fea-
you want to ture is enabled (it's a checkbox in the options area for the skin), Captivate outputs two .SWF files
instead of one. There is a separate '_SKIN.SWF' file in addition to the content .SWF file, and the
incorporate your
problem is that neither will play if imported into Articulate because they need each other to play
changes into your properly. The simple solution: Don't use Captivate borders if you want to import the Flash file into
Articulate or Breeze. 2.) The borders add an extra pixel to the height and width, and if you have
presentation, sim-
sized your Captivate project precisely to fit in an Articulate/PowerPoint slide, the extra pixel will
ply save the cause Articulate to crop or resize your Flash file. For the record, your Flash file should be a maxi-
mum of 720x540 if you are going to import it into Articulate/PowerPoint, and if you want to show
updated .swf file
the PowerPoint title bar while the video is running, crank it down to 720x495. Tipster: Mark Simon
in the same loca-
LEVERAGE YOUR RAPID AUTHORING TOOL — Articulate Presenter publishes each PowerPoint slide
tion with the as a distinct slide .SWF. This means that you can use PowerPoint as a simple Flash animation cre-
same name and ator. With some practice, you can create animations in PowerPoint that rival the animations you
see in Flash, only you don't need Flash programming skills. Publish the file in Presenter, and then
publish the pres- pull the .SWF from the data folder. I do this all the time to quickly create .SWFs for my Web site, or
entation again. to use in other applications like Quizmaker or Engage. Tipster: Tom Kuhlmann
Raghavendra EASY UPDATES TO PUBLISHED MOVIES — If you update your Flash movie after you have published
your presentation and you want to incorporate your changes into your presentation, simply save
the updated .SWF file in the same location with the same name and publish the presentation
again. Tipster: Raghavendra
Why results are what matter, and how to focus on the correct ones
How to create e-learning that contributes to the bottom line
Why measuring the wrong things is a recipe for disaster
How to manage expectations and enhance perceived value
What learners really need (and what they don’t)
Why e-learning without real world application is a waste of time
How to leverage rapid e-learning tools for maximum benefit
And much more...
You’ll also get valuable rapid e-learning tips from Tom on a regular basis, all at no charge and
all designed to make you a rapid e-learning hero. Get it now at articulate.com/ebook
239 Tips for Producing and Managing Flash-based e-Learning Content | 58
Structure your USE ARTICULATE PRESENTER PAGE LEVELS AND ARTICULATE ENGAGE FOR BETTER CONTENT
ORGANIZATION AND INTERACTIVITY — Frequently, Presenter is used to convert instructor-led
project directory training into Flash-based e-Learning Content. As most of us know, this isn’t a straight one-to-one
properly before conversion. It requires a different instructional design approach to, among other things, make up
for the lack of a live facilitator who can tailor the content to suit the needs of the audience. A cou-
you begin using ple of simple ways to allow the learner to better navigate the content, or tailor it to their own
presenter. The needs, is chunking and setting context. Breaking the content into smaller, more easily digested
chunks, isn’t new, but it is frequently overlooked when converting ILT to an online format. Setting
program auto- context may be a new concept for some, or you may know it by some other name. To me, setting
matically cre- context means informing the learner, at the start of each chunk, what it will cover, why it is impor-
tant, and how it fits into the overall unit/lesson/module. Simply put, setting context provides the
ates files, and learner with the best ability to remember the chunks of content, and allows them to choose
does not always which chunk(s) of content to consume. Setting context is crucial, especially when you can’t deter-
mine the entering behaviors of your audience. The simplest way to chunk content in Articulate
warn you if you Presenter is to use page levels. Page levels group slides into chunks of content, which is easier to
are about to navigate using a tree style menu. To do this you open the Presenter slide properties manager
using the PowerPoint add-in menu for Articulate, and set the page level to one more than the first
overwrite files. slide in the chunk. For example, if you have 25 slides you want to break into five equal chunks, the
first slide of each chunk is set, by default, to Level 1. The remaining four slides of each chunk would
Brian Dusablon
be set to Level 2. When Presenter builds the navigation, each Level 1 slide is listed in the main slide
list. Clicking a slide title reveals the four additional slides in the chunk. You use the Level 1 slide to
set context for the chunk. You can also group slides in the properties manager by slide type, who
the presenter is, the associated audio playlist, and whether the navigation automatically moves to
the next slide. A better method for chunking your content is to use Articulate Engage. Not only
does Engage do a better job of chunking your content and adding interactivity, it makes your
chunks portable. Once it has been created, you can use an Engage interaction in any presentation.
Using Engage, you take the slides for each chunk and place them in an interaction using Inter-
action Tabs or one of the following Interaction Slide types: Process, Timeline, Pyramid Diagram,
Labeled Graphic, Interactive FAQ, Media Tour, Guided Image, Circle Diagram, or Glossary. The tips
for getting the most out of Articulate Engage are a separate topic for discussion.
Tipster: Paul Vandegriff
STRUCTURE YOUR PROJECT DIRECTORY PROPERLY BEFORE YOU BEGIN USING PRESENTER — The
program automatically creates files, and does not always warn you if you are about to overwrite
files. Be very careful, especially if you are recording directly in Articulate. We lost some audio files
because of this. To work around it, we set up a directory structure with separate folders for the
PowerPoint file, the Articulate output files, and any other graphics or additional content we use.
This has helped. Tipster: Brian Dusablon
AVOIDING PROBLEMS CREATED BY HAVING TWO FLASH FILES ON ANY TWO SLIDES IN A ROW —
Articulate is great in that it allows Flash content to be inserted in the place of any slide. However,
it can also act funny if you insert two Flash files on any two slides in a row. The Flash files can be
239 Tips for Producing and Managing Flash-based e-Learning Content | 59
Because they’re drawn in the wrong place when using the arrow keys on the keyboard to move forward or back-
wards in the presentation. So, until this bug is fixed, an easy workaround is to make sure you have
so easy to cre- some sort of introduction slide in PowerPoint before any Flash content. This will ensure that no
ate, and so two Flash files are inserted in a row, and you will avoid this little Articulate bug. The result is some-
thing that feels entirely natural. For example, if we have a Flash game, we will make a PowerPoint
portable to uti- slide with an introduction and a “continue” button. The continue button will just be a PowerPoint
lize, Flash-based button that links to the next slide. Thus the users will read the instructions on the PowerPoint
slide, then hit continue and immediately be in our Flash game. The extra PowerPoint slide feels
e-Learning pre- very natural, and is easier to update than if you embedded the introduction information in the
sentations have Flash file. Tipster: Tim Bobo
changed the USE ARTICULATE TO AUTOMATICALLY ENGAGE LEARNERS — It involves delivery, but before I
explain more, let me back up a bit and introduce something a bit more conceptual first. Suppose
way training
your job was to get a balloon across a 20 foot room, how would you do it? Would you clench your
courses are first, wind up and give it a big “whack?” Or would you “tap it” at strategic and specific intervals to
ensure that your balloon reached its destination? Obviously, tapping is the correct way to go.
delivered …
Why? Because with only one whack a balloon has a tendency to slow down and fall to the
forever. ground. Why the analogy? Hang on, we’re getting there. Let’s look at an average employee in a ho-
hum position, working for a good company, but challenged daily with frustrations and distrac-
George Ritacco
tions. Now let’s look at instructor-led or classroom training for a moment. People are brought in,
flown in, or they drive in to a training session. Maybe it’s for one day, or more. And the goal is to
deliver new material, observe skill levels through role-plays, and so on, and motivate and inspire
everyone with new energy. Of course, what normally happens at a class is phenomenal. There’s
interaction, there’s collaboration, there’s observation and role-playing. Bottom line: People partici-
pate and most leave charged with a new lease on life and renewed pep in their step, ready to
tackle their daily frustrations and distractions with a new positive boost of vigor and hope! But
what happens? Soon after they return to their daily routines the “pumped” feeling they all felt at
class soon begins to wane, and they are consumed again by their daily frustrations and distrac-
tions. Now bear with me — earlier we agreed that hitting a balloon for all its worth is not the best
way for you to get a balloon across a room. Similarly, the problem with most instructor-led train-
ing or live classroom instruction is that it is like whacking a balloon ONE TIME. When you only give
your people a good boost ... without a specific follow-up regimen or plan in place ... they typically
fall to the ground (or, in our case, fall victim to old habits, distractions and frustrations) and forget
what they were taught in class. Why do you think that is? Because most classroom instruction is
not followed up with by a consistent repetition and frequency program ... the proper “tapping” if
you will. Most organizations run their BIG SEMINAR, or pack a ton of information in two days of
live training, and then they send everyone home with a workbook.
So what is there to do? Enter Flash-based e-Learning. Not only is Flash one of the best things to
come along and help trainers in a very long time, but when you have the pleasure of using a prod-
uct like Articulate, a sophisticated process becomes so easy that literally anyone can be an instruc-
tional designer. Because they’re so easy to create, and so portable to utilize, Flash-based e-Learning
presentations have changed the way training courses are delivered … forever. First off, embedding
239 Tips for Producing and Managing Flash-based e-Learning Content | 60
Download a free trial at www.articulate.com and start exploring how our e-learning
tools can dramatically improve your training effectiveness today.
AWARDS: DELOITTE FAST 500 RISING STAR • ELEARNING GUILD PLATINUM FOR OVERALL SATISFACTION • BEST OF 2006 ELEARNING! MAGAZINE READERS’ CHOICE • BRANDON HALL EXCELLENCE IN
LEARNING GOLD 2005 • TECHLEARN 2005 BEST OF SHOW, CONTENT AUTHORING AND ASSESSMENT • OVERALL WINNER, BRANDON HALL POWERPOINT TO E-LEARNING SHOOTOUT 2004
239 Tips for Producing and Managing Flash-based e-Learning Content | 63
ence to it as VarChapterComplete. I'll use this example variable in the following examples.)
Some of my favorites:
1. VarChapterComplete.getValue()– Gets the value of the variable. Good for when you
need to analyze the value before doing something else. For example, if(VarChapterCom-
plete.getValue() == true){ trivNextPage() }
2. VarChapterComplete.set(value) – Use to set a value of a variable. For example,
VarChapterComplete.set(false) will set ChapterComplete to false.
3. VarChapterComplete.contains(value) – This will test whether the variable contains
the value. For example, VarChapterComplete.contains(“t”) will look for the letter “t”
inside of the variable.
4. Button123.actionShow() and Button123.actionHide() – Show and Hide the object.
Just refer to its HTML-published name.
239 Tips for Producing and Managing Flash-based e-Learning Content | 64
By using the Ex- 5. trivNextPage() and trivPrevPage()– Send the course to the next or previous pages.
6. alert(value) – This is helpful when you are trying to debug some code. It will display any
ternal Interface value inside an alert popup window. For example,
in Flash 8 and alert(VarChapterComplete.getValue())
displays ChapterComplete's value in an alert popup.
above, you can
7. action123()– Executes the action of the button that has the same HTML-publish number. So
use Flash to mod- if you create a button, and it's HTML name is button123, then action123 will execute the
ify Lectora vari- action that is on button123's click tab. (Caution: action123 will not execute any additional
actions added to button123, ONLY it's click-tab action. If you want to execute a group of
ables, hide and actions, then have button123's click-tab action run an action group.
show Lectora con- Tipster: Tim Kindberg
playback in LEARN ABOUT THE ZOOM-N-PAN FEATURE — If you are producing at a smaller size than you've
recorded at (e.g. you recorded your entire screen, which is at 1024 x 768, but are producing out at
Adobe Flash Play-
640x480), small details like text and icons may be difficult to see clearly for your learners. So, use
er (created with the Zoom-n-Pan feature to make the area you are discussing larger.
Articulate) which Another advantage of using Zoom-n-Pan is that it isolates specific areas so that non-relevant
parts of the screen or window don't distract your learners from the focal point. This is particularly
only occurred on helpful if you are showing an application that has many complicated elements.
some machines. A word of caution though: Over-using zooms and pans can make it difficult for your learners to
maintain a sense of visual context (i.e. where in the application/screen the part you are showing
We found that
is) and can significantly increase the size of your produced file.
updating Cam- Tipster: Conan Heiselt
tasia and repub-
EASY AUDIO IN PROJECTS — When using audio in a Flash e-Learning project, I like to record the
lishing the record- audio in small bits and label the bits based on subject. For example, if I am doing a training series
on Getting Started with XYZ technology, I would record the audio in 1-2 sentence-length record-
ings fixed it.
ings, save them with names like gsXYZ01.mp3, gsXYZ02.mp3, gsXYZ03.mp3 where gs represents
Jeff Yoder the subject, XYZ represents the technology or process, and 01, 02, and 03 represents the audio seg-
ment being recording. From there I store and import each audio file, and place it in the appropri-
ate place in the Flash training. This makes for easy recording, updating, and editing of audio in a
project. I use this format with Camtasia, Captivate, and other rapid e-Learning tools as a way to
effectively edit and manage audio for a project. The metadata tags in Audacity by SoundForge are
also useful for enhanced content management of audio files. Tipster: Laura Jaffrey
AVOIDING AUDIO PROBLEMS — Be sure to use the latest version of Camtasia. After using
Camtasia to record demonstrations, we had audio problems with the Flash playback in Adobe
Flash Player (created with Articulate) which only occurred on some machines. We found that
updating Camtasia and republishing the recordings fixed it. Tipster: Jeff Yoder
239 Tips for Producing and Managing Flash-based e-Learning Content | 68
unformatted text REPLACE FLASH DEVELOPMENT BY USING POWERPOINT (SOMETIMES) — The Flash authoring pro-
through “Edit | gram is certainly powerful, but it is also quite intimidating for the masses of instructional design-
ers that rely on Microsoft Office for their daily work. Many of these designers are diehard Power-
Paste | Special | Point gurus who can animate a title sixty ways to Sunday, but would still rather avoid the stage
Unformatted and timeline. While PowerPoint may be great for drafting and storyboarding content prior to Flash
development, in many cases it can replace Flash development entirely. PowerPoint-to-Flash con-
Text.” verters have come a long way, though not all are created equal. Some conversion tools will only
take a snapshot of each slide and play them in sequence, while others support animations, slide
Prakash Bebington
transitions, videos, and sounds. Most tools offer a trial, so you can test whether it handles your
presentations. You will usually find that the more capable tools are more expensive. If you've never
delivered Flash content before, converting PowerPoint to Flash is an easy way to get your feet wet
and reach new audiences or create new business opportunities. Tipster: Lawrence Yau
In your Power- AUTOMATE POWERPOINT CONTENT TO DYNAMICALLY BUILD SHELL FILE AND FOLDER
STRUCTURES —
Point show, if you Macro code for PowerPoint:
have to present Sub BuildShellStructure()
branched infor- Dim fso
Dim fso2
mation, prefer
Dim sfol As String, dfol As String
embedded slides
Dim sfo2 As String, dfo2 As String
over custom sfol = “C:\Projects\courseTemplate”
shows. This pre- dfol = “C:\Projects\newsite”
End Sub
Set up your course shell files, then update the macro above to reflect the location of those files and
folders. Any questions about this, or automating e-Learning, e-mail RedResener@hotmail.com.
Tipster: Red Resener
Take advantage DO YOUR FLASH DEVELOPMENT HEAVY LIFTING IN POWERPOINT — Take advantage of new tech-
nologies that ease the development of Flash content. PowerPoint 2003 and above gives you the
of new technolo- ability to add motion paths to objects. For example, you can show several items on a page, cause
gies that ease the all but one to fade, enlarge and move the existing object, and add text. You can do all the heavy
lifting of creating motions in PowerPoint. Several PowerPoint-to-Flash conversion programs are
development of appearing that are inexpensive and very easy to use. They operate as PowerPoint add-ons.
Flash content. Examples are Articulate Presenter and Flashpoint. The Flash files can be set up as a complete
course with navigation and branching, or added to a development package such as OpusWorks
PowerPoint 2003 Composer by The Quality Group. Tipster: John Best
and above gives
you the ability to B. Microsoft Word
add motion paths A HALF-DOZEN USEFUL TIPS (NOT ALL RELATED TO FLASH)
to objects. Tip 1: Inculcating a discipline of setting your document styles at the start of your word processing
will go a long way in preventing formatting inconsistencies later. Explore the Format | Styles and
John Best
Formatting option right away. Also, if you are amazed at how some people magically generate
that hyperlinked Table of Contents, this too flows from the style-setting discipline.
Tip 2: If you follow style discipline, you must also follow the Paste Special rule. Never copy-paste,
always paste-special. This feature is available in Edit | Paste Special. If pasting text, paste as
Unformatted Text, then apply your preferred style.
Tip 3: MS Word is a word processing tool, NOT a drawing tool. If you want to draw autoshapes,
draw in PowerPoint, print-screen it, and paste in Word. Then, using the cropping tool, nick off those
excess white spaces around your drawing.
Tip 4: Avoid page borders if you are not an expert Word user. Page borders look great in Print
Preview, but when you print the page, an unseemly space remains at the bottom of the page.
Tip 5: If the bottom half of that table you just inserted disappeared below the page (and does not
continue to the next page), change the text wrapping in Table Properties (Table | Table Properties |
Text Wrapping | None). If the table spills over to the right outside the page, set the preferred width
in Table Properties to 100%.
Tip 6: If your table spans multiple pages, repeat the header row across the pages. For this, select
the header row, go to Table Properties | Row Options and select Repeat as header row at the top
of each page.
Tipster: Prakash Bebington
239 Tips for Producing and Managing Flash-based e-Learning Content | 71
an easy way to
add 3-D content E. Second Life
to scenarios and Add Second Life video (machinima) to your Flash work. It's easy with a few inexpensive tools and
tips. Using products such as Fraps and Sizer, capture video (at a specific frame rate and sized to
questions.
your needs) and import it into Flash. It's an easy way to add 3-D content to scenarios and ques-
David Miller tions. Tipster: David Miller
When getting video out from Second Life, size the Second Life viewer to meet your requirements.
If the final video needs to be 640 x 480 pixels, then set your viewer to that size, and test by taking
a few seconds of video and viewing the video's properties. This maintains the maximum quality
by not resampling the video, and cuts down on production time. Tipster: David Miller
To get clean and professional results for video from Second Life, hide your interface when filming
by using Ctrl Alt 1. You can also turn off the chat bubbles under Preferences if desired. Check for
attachments in a little test footage before doing your final filming. Tipster: David Miller
Make your Second Life video in Flash shine by selecting the highest quality graphics settings you
can. Reducing the size of the viewer GUI will reduce the resources needed by Second Life, and
allow for higher quality video. If you will be using separate audio files imported into Flash, then
consider turning off the audio and streaming audio (music) under preferences in Second Life too.
239 Tips for Producing and Managing Flash-based e-Learning Content | 72
Use InfoPath to Often parcels have streaming music playing that take up valuable computer resources. Make sure
to close any other programs, and consider using a third-party tool to capture video rather than the
create an XML file one built into Second Life. Tipster: David Miller
to populate your
Using screencasting software allows you to add high-quality video to your Flash e-Learning.
Flash interactions. Whether capturing metaverse video or desktop applications, using a video-based tool may work
very well. Several tools, that are very reasonably priced, are used for capturing MMORPG. While we
Create several
are used to other recording software, one that outputs a video-specific format, such as Fraps
Flash interactions (http://www.fraps.com) typically works well with Flash's video compression. Tipster: David Miller
(games, quizzes,
and other learn- F. CodeBaby
ing objects) that CHARACTER POSITION TEMPLATES — When you have a need to build multiple CodeBaby movies,
XML can popu- and you need the character(s) to be in the same position(s) from the start of each (other than the
default positions), set your character(s) in the correct starting position(s) and then save that .CBP
late. Then create file out as your template. Then, every time you need to start a new movie, you can open your tem-
an easy-to-use plate and save it out as your next movie. This eliminates having to import all your assets and set
up your characters each time you make a new movie. Tipster: Chris Bahns
form in Microsoft
InfoPath so that G. Microsoft InfoPath
your SMEs can
Use InfoPath to create an XML file to populate your Flash interactions. Create several Flash interac-
create all of the tions (games, quizzes, and other learning objects) that XML can populate. Then create an easy-to-
content on their use form in Microsoft InfoPath so that your SMEs can create all of the content on their own. It
works great! Tipster: Eric Hunter
own. It works
great!
H. Flash Wrappers
Eric Hunter
E-Learning providers migrating to Flash from Authorware are often frustrated by Flash's security
restrictions. Because the .SWF format targets the open Web rather than a corporate intranet or
local application, operations that require accessing or creating local assets are severely limited.
Deploying Flash-based content within an executable wrapper such as .SWFStudio or Zinc over-
comes many of these limitations. Adobe AIR may also be a good alternative once it matures a bit.
While it is possible to “wrap”' any .SWF using one of these tools, you will need wrapper-specific
ActionScript inside your .SWF to take advantage of the added functionality the wrapper provides.
In most cases this means using Flash itself for at least part of the .SWF publication process.
Tipster: Becky Kinney
239 Tips for Producing and Managing Flash-based e-Learning Content | 73
embed audio
training blurbs J. Audio Generator
into e-mails and LOOKING FOR A QUICK WAY TO ADD A TESTIMONIAL TO YOUR WEBSITE? — I have used Audio
Generator for over four years; it is a low-cost but highly effective method for collecting, convert-
Web pages.
ing, and creating plug-and-play code to place in your training Webpages. I use Audio Generator for
Karen Miller gathering client testimonials online, as well as creating audio training blurbs (up to 10 minutes) to
embed in my Web sites. Listen and see Audio Generator in action on my Web site
(www.design2train.com) I like it because you can embed audio in just three clicks.
Tipster: Karen Miller
K. Sonic Memo
Sonic Memo Toolkit by Jay Jennings (www.jayjennings.com) is a quick, easy tool to put VCR-con-
trol-type buttons and embed Flash-based audio into HTML pages. For a low monthly fee, training
professionals can embed audio training blurbs into e-mails and Web pages. Tipster: Karen Miller
L. Zamzar
How many times have you needed your file in another format and it becomes such a hassle to
make sure you have the right conversion tools? Worry no more. www.Zamzar.com is an online
239 Tips for Producing and Managing Flash-based e-Learning Content | 74
E. WILD Soft
WILD (Worldwide Interactive Learning Designer) was created to rapidly deploy quality courses tak-
ing the team approach. Leverage a tool where multiple users can be working on the same project.
This will decrease down time waiting on open issues to be resolved. Tipster: Andrew Bagley
239 Tips for Producing and Managing Flash-based e-Learning Content | 77
that are on the WHEN TO USE CUSTOM FLASH INSIDE ANOTHER E-LEARNING TOOL — When you have a set of
SimBuilder page, templates or tools like Lectora, Captivate, or Flypaper that offer animation, it can be a tough call as
to when to use the native animation in your e-Learning tool or when to build a custom Flash file.
outside the Flash If you leave that decision up to the graphic artist, the answer is often “custom Flash everywhere.”
animation itself. It looks better, it can be faster to produce the first time, and you can reuse that animation in other
formats. One key factor is the content. If the content is not likely to change for the foreseeable
Denise Link future, it makes sense to build it once in Flash. If that content is constantly changing, you are bet-
ter off using a less “Flashy” animation and keeping it in the tool you and your SME's can use like
Captivate or Flypaper. Another key factor is code. If you need functionality that does not exist in
your regular authoring tool, Flash may be the way to go. If the content is constantly changing, and
you have to create code anyway, you might as well load the graphics dynamically and put the text
in XML files. That way you won't need the programmer or the Flash IDE to recompile the file every
time you have to change a picture or fix a typo. The final key factor is re-use. If you are going to
build this in Flash, try to design it so it can be a template and used repeatedly. It will take much
longer to program, and you have to plan ahead, but in the end you will save time on the next proj-
ect. Examples of Flash templates abound on sites like Flash Den and Flash Kit. Flypaper has its
own system of Flash Models that are re-usable pre-programmed Flash files. If your templates are
flexible enough, you can change the look and the action enough that learners will not get bored
239 Tips for Producing and Managing Flash-based e-Learning Content | 78
When including with the “same-old, same-old.” For examples of nice templates and models go to
http://www.FlashDen.com or http://www.Flypaper.net. Tipster: Kieran Richardson
text in a Flash
When including text in a Flash file, it's best to put the text in a .TXT file or XML file. This will make
file, it's best to
it much easier to translate or update. The Flash Player has really improved how fast it loads XML,
put the text in a and there are lots of free XML editing tools. When translating, only work with translation vendors
who can take XML files and return them in the same XML format. If they want files in Word, and
.TXT file or XML
give you back a Word document, find a new vendor. Tools like Raptivity, and the coming version of
file. This will Captivate, offer options to export with folders and all the text in XML files. Flypaper exports all the
text content in XML as well. Tipster: Kieran Richardson
make it much
easier to trans-
late or update. G. Unison Web-based Collaborative e-Learning Development
Solution & Flashform Rapid e-Learning Studio (Rapid Intake)
Kieran Richardson
QUALITY ASSURANCE TESTING YOUR FLASH-BASED COURSE: HOW TO DO IT FASTER AND BETTER
WITH UNISON — If you don’t know it already, you will eventually discover that what you have
when you are finished with an online learning course is a software application. If you come from a
training background, rather than Web design or multimedia development, this concept may take
a while to crystallize.“Well, I knew that already,” you might be thinking. Okay, I agree. What I’m
pointing out with this concept is nothing that will blow your mind. However, we trainers often
want to think that developing a WBT is “different” from traditional Web sites or other software
applications because it is a tool that teaches. While that is true, the sooner we start thinking of
our online courses as software applications, and start modeling parts of our development process-
es after traditional software development models, the better off we’ll be. While most product
development models for WBT courses vary somewhat from software development (I don’t know
many software engineers who write storyboards for their software), one of the many things they
share in common is the quality assurance (QA) process.
One of the tedious, but critical, things we all have to do is make sure our course is completely
working before we release it. There is just no easy path from the fun stuff (design and develop-
ment) to the real world of the production environment. In between lies the thorny road of quality
assurance testing. We have to track down every single issue, make sure that every link works, that
every punctuation mark is correct, that every Flash movie plays at the correct moment, and so on.
Any shortcuts we are tempted to take will usually end up hurting us down the road. So how do
we make this an effective process? Here are a few tips I’ve learned from experience that I hope
will be helpful:
1. Plan for more than one round of testing. You will never catch all of the bugs and defects in your
course with just one round of testing. People traditionally call the first round of testing the
Alpha test, and the second round a Beta test. Once you do plan for more than one round of test-
ing, still attempt to find all of the defects in the first test.
2. Use the 80/20 Rule. Have just a few people test the first round, and have several more test in
later rounds. Following the old 80/20 rule, two to three people can find the majority of the prob-
239 Tips for Producing and Managing Flash-based e-Learning Content | 79
If a course has a lems. However, it sometimes takes several people to uncover the remaining problems.
3. Don’t take any issue for granted. In other words, keep a detailed log of every problem found, as
mandatory pass well as clear notes about how and when it was resolved. Later, this list can be an important
percentage re- reminder of why you made certain decisions along the way, especially if there is ever a differ-
ence of opinion among team members as to how and why an issue was resolved.
quired before a
4. Verify every fix. Although this is my personally least favorite part of the process, this step is
learner can move extremely important. As a project manager,WBT producer, or one-man-team, you need to make
on to a subse- sure that you took care of every defect before delivering it to your client. Remember though, if
you are the one that made the fix, be sure someone else verifies the fix for you.
quent course, a 5.Where possible, perform testing micro-cycles. This technique we have been using for years has
Quiz Review can turned out to be very effective. Instead of having all the testers test at the same time and then
consolidate notes, have them test one at a time, and perform quick fixes between testers. Be
be critical to a ready to get their feedback quickly, even real-time if possible (you can do this with Unison), and
learner’s success. make the fixes as the issues come in or shortly thereafter. This allows the next tester to spend
his or her time finding other problems for you rather than submitting the same problems
Joy Vinson already submitted. Because of the quick turn-around time, using micro-cycle testing will give
you more testing bang for your testing buck.
Tipster: Garin Hess
HOW TO SHOW A QUIZ REVIEW — If a course has a mandatory pass percentage required before a
learner can move on to a subsequent course, a Quiz Review can be critical to a learner’s success.
Some important components for an easy-to-understand Quiz Review are:
1. Repeat the quiz question as it was stated exactly in the quiz, including options and distracters
2. Correct/Incorrect assessment
3. Learner’s response
4. Correct Response (if learner’s response was incorrect)
How such a comprehensive Quiz Review is built depends largely upon the tools being used to cre-
ate the course and/or quiz. Flashform Rapid e-Learning Studio and Unison does the actual Quiz
Review development for you. To show the Quiz Review in Flashform, after selecting to add a page
and choosing the Quiz template, the developer fills in the Quiz Page template, making sure that
the “Include Review” box is checked in the “Quiz Settings” section. This will ensure that the learner
has the opportunity to see their answers, their scores, and what the correct answers were, if they
answered incorrectly. In Unison, the developer needs to add a page, and select the Quiz template.
When the developer gets to Step 3 of the Quiz page, he or she needs to be sure to check the
”Include Review” option. This will give the learner the opportunity to see his or her quiz results,
and all of the correct and incorrect answers.
Tipster: Joy Vinson
BOOKMARKING COURSES WITHOUT AN LMS — Usually, tracking student course data requires an
LMS. However, if you just want the learner to be able to keep track of what they have completed,
239 Tips for Producing and Managing Flash-based e-Learning Content | 80
Often, when creat- and the last page they visited, you can do that without the expense of an LMS. Traditionally, when
creating a Flash course, this type of tracking would require a lot of work:Writing the ActionScript
ing an e-Learning that would write this data to a Flash cookie (which stores data on the local machine), additional
course, you need code to read this cookie when the course started again, and still more to use the data to deter-
mine where in the course the learner should be. You’re not finished yet. Once that is done, more
your navigation to code is needed to take them to that location. Once the process is finally completed, you deserve a
link to other parts nice vacation!
Mercifully, if you are developing a course in Flashform or Unison, the whole process takes mere
of the course. It is seconds and you can do it in three simple steps:
not always linear. 1. Access the project settings by clicking Edit | Project.
In a Flashform or 2. In Flashform choose “cookie” as the tracking attribute. In Unison choose “bookmarking.”
3. Save your changes.
Unison course, you
The course is now ready to track the learner’s status. You can now place the course on a server, CD-
can do this by link- ROM, or a network drive, and direct the learners to it. With little effort, and virtually no stress, your
ing to another task is complete. It’s so easy it almost feels like YOU are ON vacation (suntan not included). (By the
way, Flashform and Unison courses also track bookmarking if they are launched from a LMS.)
page in the course.
Tipster: Steve Hancock
Steve Hancock
CREATING LINKS TO OTHER PAGES — Often, when creating an e-Learning course, you need your
navigation to link to other parts of the course. It is not always linear. In a Flashform or Unison
course, you can do this by linking to another page in the course. These pages may be visible in the
Table of Contents, or be hidden. (To hide a page, just check the hidden-page checkbox.) You can
use one of two identifiers for linking to a page: the title of the page, or the link ID that you enter
on the Advanced tab. If the title of the page is not unique, enter a link ID. You can create a link to a
page in two ways: within text, or by creating your own interaction in Flash, and then including this
movie as one of the pages in your course. To create a link to a page within a text field, simply:
1. Highlight the text that will be linked.
2. In the HTML link field, instead of entering a URL, enter the following:
asfunction:goToPage,linkID or pageTitle ;
3. The “asfunction” term is a special term used to specify a call to an ActionScript function.
4. Call the function “goToPage”. This function has been set up to allow linking to other pages.
5. Place the link ID or page title after the function name, separated by a comma. If you are creating
your own Flash interaction, you can link to another page as well. For example, to include a but-
ton in the Flash movie you are creating that links to another page simply:
a. Create the button.
b. In the event handler for that button place this ActionScript:
goToPage(“linkID or PageTitle”);
c. Place the link ID or page title after the function name, separated by a comma. When this
Flash movie is included inside a Flashform or Unison course using the external .SWF page
239 Tips for Producing and Managing Flash-based e-Learning Content | 81
Flashform or type, this ActionScript will cause the button to navigate to the page. This function is global,
so it is accessible using the simple ActionScript shown.
Unison develop- Tipster: Steve Hancock
ers are aware
CREATING LINKS TO GLOSSARY TERMS — Flashform or Unison developers are aware that an inter-
that an interac- active glossary can be created by simply entering terms and definitions. In addition, Flashform and
tive glossary can Unison offer even more glossary features. For example, in the midst of another interaction you can
link directly to a glossary term. This link will cause the glossary to open and go directly to that
be created by term. There are two ways to create a link to a glossary term:Within text, or by creating your own
simply entering interaction in Flash and then including this movie as one of the pages in your course. To create a
link to a glossary term within a text field, simply:
terms and defi-
1. Highlight the text that will be linked.
nitions. In addi- 2. In the HTML link field, instead of entering a URL, enter the following:
tion, Flashform asfunction:glossary,theTerm
Where“theTerm” refers to the actual term in the glossary.“asfunction” is a designated word
and Unison offer used to specify a call to an ActionScript function.
even more glos- 3. Call the function titled “glossary”. This function has been set up to allow linking to a glossary
term.
sary features.
4. Place the term you want to link to the glossary at the end after the comma. If you are creating
Steve Hancock your own Flash interaction, you can link to a glossary term as well. For example, if you want to
include a button in the Flash movie you are creating that links to a glossary term simply:
a. Create the button.
b. In the event handler for that button place this ActionScript:
glossary(“theTerm”);
Once this Flash movie is included inside a Flashform or Unison course using the external .SWF
page type, this ActionScript will cause the glossary to open and display the included term. Give
it a try.
Tipster: Steve Hancock
Here are two ways to reuse a glossary with Unison, and which way you will use depends on
whether you have a professional or standard license of Unison. Both options are described below:
Users with PowerPro Customization Access. If you have PowerPro Customization Access for Unison,
the process of reusing a glossary is quite simple. A glossary.xml file completely controls a glossary,
and is in every project folder. As a professional user, you have access to your online project folders.
In each you will find a glossary.xml file. To reuse a glossary that you have created in another
course, simply copy the glossary.xml file from that course, and place it in a new course, replacing
the original glossary.xml file found in that project folder. The new course will then have that main
glossary. Tip: If you are creating a master glossary that you will use for many courses, you may
simply want to keep a copy of that glossary's XML file (the glossary.xml) on your computer, allow-
ing you to simply upload that file each time you wish to put in the glossary.
239 Tips for Producing and Managing Flash-based e-Learning Content | 82
Flash supports a Standard Users. If you have a standard license of Unison, the best way for you to reuse a glossary is
to create a new course that has nothing but a glossary inside. You will then want to save this
limited number of course as a Template, so anytime you want to create a new course with that glossary, you will cre-
CSS styles that ate the course using that course template. Then, when you want to edit the master glossary, sim-
ply re-save the course as the original “glossary” course template.
can help you for- Tipster: Garin Hess
mat text through-
RESTRICTING NAVIGATION — It is not uncommon to have a course that requires learners to com-
out a Unison or plete all of the pages within a specified section or topic of a course before they can move on to
Flashform course. the next topic. The way this forced sequential navigation might occur varies depending on the
tool you are using to create the course. Flashform and Unison courses come with the ability to
Instead of format- easily restrict navigation by using the Navigation setting in the Edit Topic form. From the drop-
ting text on every down box, you need to select “Restricted based on Completion”. Once restricted, the pages of the
next topic are inactive in the TOC. If the learner tries to click the next button to move to the next
page, you can for- topic, this alert is displayed:“You must complete the current topic before you can move to the
mat the text in next topic.”The way the learner knows if a topic is complete is if a check mark appears next to
each page within the topic. Under normal circumstances, a check mark appears as soon as the
one location – the learner views the page. However, if you are using pageComplete, then there may be items on the
CSS style sheet. page that must be finished before considering the page complete. If a course contains a sequence
of topics that are restricted, the learner must to go through the course one topic at a time in
That way, if you sequential order. The learner can jump between pages within a given topic, but must complete
ever need to each page before moving to the next topic. Tipster: Joy Vinson
make a change, USING CSS TO FORMAT TEXT IN A FLASH-BASED COURSE — Flash supports a limited number of
you can change it CSS styles that can help you format text throughout a Unison or Flashform course. Instead of for-
matting text on every page, you can format the text in one location – the CSS style sheet. That
in one location way, if you ever need to make a change, you can change it in one location and it affects all of the
and it affects all text in the course. NOTE: You can always override the default style-sheet settings by clicking
Override Default Settings in the text box you are typing in. All templates that use text are already
of the text in the associated with a cascading style sheet that comes with Unison. To change the text format, simply
course. locate and open the style sheet, make changes to the settings, and save your changes. Flashform
and Unison courses use these style sheets:
Garin Hess • glossary.css to format the glossary
• glossary_menu.css to format the glossary terms menu
• narration.css to format text entered into any narration field
• .SWFs/template_.SWFs/template.css to format text entered into any page and note fields
You can find these CSS files in any Unison or Flashform project directory when you look at the
project file structure. To access the project file structure in Unison, you need to have PowerPro
Customization Access as part of your subscription account. If you do, follow these steps in Unison:
1. Click the Admin Tab.
2. Click View | Update Projects and find the project you want.
239 Tips for Producing and Managing Flash-based e-Learning Content | 83
If you are using Unison does this for you automatically. Everything you create in Unison stores the content in XML,
and then automatically populates the page content when the learner needs it.
Unison or Flash- Unison stores the data in the following XML files (you can learn more about each of these XML
form as your files by opening up Unison’s online help and looking in the Advanced Documentation section):
authoring tool, • sco.xml – This file stores most of the course data, organized by topics and pages. The sco.xml file
has five main tags that make up the file: sco, topics, topic, page, and narration. These tags are
not only can you populated with content when you fill out Unison’s forms.
create a custom • glossary.xml – This file stores all glossary terms and definitions.
• quiz.xml – This file stores all quiz question data.
interface, but also
To find these files, you need to download the course files from Unison by clicking Deploy on the
you can enable Project Home page. Once you unzip the file, you’ll find the sco.xml and glossary.xml. You’ll find the
it so that other quiz.xml file in the .SWFS folder.
Building this kind of architecture in Flash would take even an experienced Flash developer several
developers in
days or weeks. That’s one of the reasons Unison’s built-in Flash and XML architecture can save you
your company so much time.
can select and Tipster: Garin Hess
use that style in CREATING REUSABLE FLASH COURSE INTERFACES — Because of the limited number of interface
their courses. designs offered in most authoring tools, many companies wanting to present a unique look and
feel to their e-Learning courses end up creating their own. This is especially true for Flash-based
Steve Hancock courses. If you are using Unison or Flashform as your authoring tool, not only can you create a cus-
tom interface, but also you can enable it so that other developers in your company can select and
use that style in their courses. If you feel comfortable creating content in Flash, you can create a
custom style. Just follow these basic steps. For more detailed information refer to the documenta-
tion.
1. Open Flashform and create a new project. When setting up the project, select the style you
would like to use as the starting point for your custom style. Also, make sure you select the Copy
Source Files checkbox. This project will become the folder that contains your new style.
2. In the project folder, open the source files (.FLA or .AS) and make changes as necessary. You may
want to make changes in multiple files like the media controller, the quiz, any of the template
pages, or some of the other smaller files contained in a course. If you are changing functionality,
you would need to edit the code found in the different ActionScript files.
3. Publish all the .FLA files that are associated with any files you changed. When you publish the
player.fla file, include a Windows projector file and Macintosh projector file. Publishing a course
to CD-ROM uses these files. At this point you have finished the changes. However, in order to
share your newly created template, you still need to set the style up to run inside of Flashform.
4. Navigate to the Flashform install directory and copy the style.xml file from the style folder that
your custom style is based on. The style.xml file controls some of the default settings, and is
required for your style to run inside of Flashform.
5. Open style.xml and edit any of the settings (tags) that may be required. In some cases you may
not need to change any.
239 Tips for Producing and Managing Flash-based e-Learning Content | 85
Now that you see 6. Change the name of the folder containing the new custom style. The name should have no
spaces. In addition, if the style is built for Flash player 8, you should include “player8” in the
how easy it is to name. Finally, at the end of the name you should include .SWF or .JPG depending on whether or
deploy a SCORM not you can change colors in the style. [.SWF is for changing colors (for example, cus-
tomStylePlayer8_SWF)]. Lastly, you can create a preview, and then place the style in
course, let’s look Flashform, if you desire. That’s all there is to it!
at some of the Tipster: Steve Hancock
flexibility and BUILDING A SCORM COURSE AND A SCORM PACKAGE — Making your course SCORM conformant
optional elements is viewed as a “necessary evil” for most developers. Sometimes, they view getting the course to
finally run on an LMS viewed as an accomplishment equal to scaling Mount Everest. If SCORM
that are provided were easier to understand and implement, it might not elicit this kind of reaction. Thankfully, as a
in setting up Flashform or Unison developer, you have a tool that will make your Flash-based courses easy to
deploy in SCORM. Even beyond that, Flashform and Unison have built-in flexibility for those who
SCORM. First, want to begin using more of what SCORM offers. First, let’s look at how easy it is to turn a course
select a comple- into a SCORM package that is ready to upload to an LMS. With Flashform, a few simple steps is all
it takes:
tion method.
1. With your project open in Flashform, click Publish Course.
Flashform and 2. Select the SCORM version you would like to use for your course.
Unison courses 3. Complete the fields that will be used to build the manifest file.
After you have feature. This makes sure that the content on any given page has been completely viewed before
completion is marked. Set this up in the project settings area.
started your proj- • Determine completion when the learner has completed a quiz. Use the quiz settings for this
ect inside of option.
Flashform, add • Determine completion when the learner has completed a quiz and received a passing score. You
also set this up in the quiz settings.
a page that By design, Flashform and Unison courses automatically track a number of SCORM elements. If you
includes a text find it necessary to track elements of your own, you can do this by tying into the provided SCORM
functions. You do this by creating a Flash movie you want to use as content, and then using
field. This can be ActionScript to call one of the SCORM functions at the appropriate time. Here is an example of
in your notes field how you would call one of those functions:
playerMain_mc.apiSetScore(nMin,nMax,percent);
area, the main
The playerMain_mc is a unique variable for Flashform and Unison courses that refers to
body-text field _level0. In this example, we use that variable and then the function name. We then pass in the
attributes the SCORM function needs. In this case, it is a minimum score, maximum score and a
area, or even the
percent. Many preset functions are available, or you can use the general set value function:
narration field apiSetValue(sData,sValue). This function will let you set any SCORM element of your
choosing. All the SCORM functions are described further in the documentation. Flashform and
area.
Unison have taken the complexity out of making courses SCORM conformant. Now you can
Jeff Batt “climb Mount Everest” by taking the elevator!
Tipster: Steve Hancock
In some cases you may want to link to external documents which have been pre-built, such as
Excel files,Word documents, or PDFs, so that your students can fill them out and/or print them. Or,
maybe you want them to watch a video in full-screen mode. You can link to external documents
quickly and simply in Flashform. After you have started your project inside of Flashform, add a
page that includes a text field. This can be in your notes field area, the main body-text field area,
or even the narration field area. Once you have typed your text inside of one of those fields, you
then highlight the word that you want to become a clickable link to bring up that file. Use phrases
like “Click Here to pull up sample” or anything that lets the learner know that they need to click
there. Flashform will bring up a window for you to type in a URL, but instead of typing in the URL
you type in the EXACT name of the document. The name DOES have to be exact. such as,
SampleText.doc. Make sure also you include the extension. If it is a Word document, add .doc to
the end of the document name. If it is a PDF then you type SampleText.pdf. Then select the drop-
down box labeled “Target” and select “blank.”This will tell Flashform to pull up the document in a
new blank window. The next step is to make sure you place that document inside of your course
structure so Flashform knows which document to pull up. Bring up your project folder, and drag
and drop the file into the folder. That’s it! Go back into Flashform and preview your course, click on
the link and then your document will pull right up. Any time you need to update the form, all you
need to do is open up the folder in Windows, name the new file name the same thing, and drag
and drop it into your course structure and it will automatically pull up your new document.
Tipster: Jeff Batt
239 Tips for Producing and Managing Flash-based e-Learning Content | 87
Creating the CREATING REUSABLE PAGE TEMPLATES — When creating Flash-based e-Learning courses, you may
find yourself repeatedly creating the same interaction. You may also find the interaction types pro-
input form for vided by Flashform or Unison don’t meet all of your development needs. In both situations, you
Unison involves can save loads of time by creating a reusable page template. Creating reusable page templates in
Flashform and Unison requires a competent degree of Flash expertise, and some time investment.
creating an XML However, the time saved by being able to reuse that page template repeatedly more than makes
file. Refer to the up for it. Creating a reusable page template involves creating two separate documents: The
Output Page Template, which is a Flash file (.SWF) that is intelligent enough to read the informa-
documentation tion from the XML file and populate the content appropriately for the learner. And the Input Form
for more infor- used to specify how the page template works and what content it uses. This form writes the data
to an XML file. Let’s first look at the steps for creating an output page template. These steps are
mation. All you quite basic, but they will give you a feel for what is involved. Refer to the documentation for more
need to do to information.
1. Create a sample course using Flashform or Unison. It is important to have a sample course you
create an input can use to test your new page template.
page form is to 2. Determine the XML structure for the new page template. You should spend some time familiar-
create a simple izing yourself with the page tag used in Flashform and Unison courses. Next, determine what
information you need to store, and figure out how to structure that information.
XML file. 3. Create a sample page tag that includes your new page template information. Manually edit a
Steve Hancock sample course XML file (sco.xml) and enter in a sample page tag that contains the information
your page template needs. Use this as a test page.
4. Build and code the new page template in Flash. This process may take several iterations. As you
add some elements, test them, and add additional elements as needed.
5. Once everything is tested, you are ready to go.
Creating the input form is different between Unison and Flashform. We will present the Flashform
method first. Once again, more detailed information can be found in the documentation. The
input form for Flashform is a Flash file that includes Flashform components.
1. Copy and rename this FLA file: Program Files\Rapid Intake\Flashform Rapid e-Learning
Studio\Templates\Nodes\page
2. Remove components that are for settings you will not use.
3. Add additional components to provide a way for a developer to add new settings. The compo-
nents are in the library. Make sure to establish the settings properly.
4. Copy the TemplateCopySource.SWF file to the directory that contains the file you are creating.
You can find this file in the directory identified in Step 1.
5. Save the file and publish the .SWF.
6. Place the UI.SWF file in the Templates\Nodes\page folder of Flashform.
Creating the input form for Unison involves creating an XML file. Refer to the documentation for
more information. All you need to do to create an input page form is to create a simple XML file.
The XML file has a main tag called page. The XML file will take on the following generic form:
239 Tips for Producing and Managing Flash-based e-Learning Content | 88
tive injuries like GET HELP — My team, along with several third-party vendors, have implemented several versions
of our e-Learning templates that take .SWF formatted learning content from tools like Adobe
tennis elbow or Flash, Adobe Captivate, and Raptivity, to name a few, and get this content to work in an XHTML
carpal tunnel (accessibility-compliant version of HTML) to work in our internal Web environment. Thus we lever-
age the common Web-based internal navigation and actual Webpage code (UI), making it possi-
syndrome. ble to deliver courses that are 99% similar to internal Webpage templates, but also making it pos-
sible to take the e-Learning content offline. Naturally I can't share the actual code with anyone
David Miller
outside of my company (without first getting consent from Cisco Legal, and so on), however that's
not as important as explaining to others how to take primarily Flash-based e-Learning content to
the next level for your company. These types of e-Learning templates are not just a visual look-
and-feel change, but an actual fit that is coded in the same Web code that either your intranet
and/or extranet Web pages are coded in. Embrace the Web developers in your company to help
you to achieve this.
YOU MUST REALLY TEST FOR ACCESSIBILITY — This doesn't just mean alt-tags compliance. You will
need to consider how various screen readers work while being turned on or off, whether the Tab-
key-focus functions properly, and that all shortcut keys don't conflict with various browsers. There
are also many other types of accessibility issues including low visibility, color choices for color
blindness, using scalable font types, high-contrast modes, and mouse-over capabilities you must
implement that are screen-reader and tab-key compliant.
DETERMINE HOW YOU WANT TO AUTHOR — You could use a combination of Flash/Captivate and
other authoring tools to create .SWF content that goes into an e-Learning template. Once the con-
tent is properly wrapped in a sort of content-player method, then you can import the final .SWF
files into, say, Adobe Dreamweaver or other XHTML- or HTML-based authoring tool to put the
pieces together in, hopefully, an XML-based approach, or whatever approach your Web developers
currently use to deliver Web-based content in your company. This requires removing any existing
player bars or skins that come out of tools like Adobe Captivate, and then using the component
features of Flash to re-wrap the .SWF based content. Some of your components can be entirely
Flash-based, while others might leverage things like: .FLV players for video, import Captivate-based
content, and handle simple static types of content like text, graphics, and audio. Up to this point
we've discovered that most content is either time-based (audio/video), slide-based (Captivate/
PowerPoint) or possibly game- or application-based. If you use these tips, then you will reap the
239 Tips for Producing and Managing Flash-based e-Learning Content | 92
Create a style current and future benefits the Web offers your e-Learning content. Plus the content's appearance
won't shift when using various Web browsers. Tipster: Milo Dodds
guide for every
Keep your product skills razor sharp by actively participating in online forums for those products.
project, and hire
Most tools have many forums to choose from, and each forum will have it's focus as well as com-
an editor. munity feel. Try a few, and find the one that challenges you. Actively seek posts that push your
problem solving, and you will see your skills increase as well as other people's approaches to the
Tracey Kogelmann
same problems. Tipster: David Miller
The key is:When you are about to start a Flash-based e-Learning project, it is not important which
tool is selling best in the market. What is more important is to identify which one will work best
with your requirements for the current project in hand.
The first good step towards a successful project involving a Flash-based e-Learning content is to
know beforehand the kinds of functionality you will need, and which tools and options will work
best. All tools are competitive; however, certain tools score better than others, when it comes to
specific needs. One will allow rapid construction, while the other one will score better at offering
more configurable parameters so you get an output close to your specifications.
Tipster: Uday Kranti
Download and install the Web development toolbar extension for the Firefox browser. The toolbar
is very helpful for testing various issues you may have with your browser-based training. The
extension adds a toolbar to Firefox with a wide variety of handy Web development tools. Some of
the more helpful tools include the ability to view CSS style information, resize windows, and dis-
play various rulers. The extension also allows you to enable/disable numerous browsing options,
including JavaScript, cookies, cache, images, and CSS. Tipster: Mark Temple
Consider swapping between two types of mice on a weekly or monthly basis. It will help prevent
repetitive injuries like tennis elbow or carpal tunnel syndrome. Tipster: David Miller
Building custom Flash templates can be a challenge, especially if you're resizing the stage. The
Transition Mask (tranMask_mc) in the player.fla file really threw me for a loop when I increased
the overall size of the stage. I just dragged the corner of the mask to match the size of the new
stage. But every time I previewed the file, the Transition Mask was always about one third the
width of the stage. What I discovered was the Transition Mask increases in size proportionately, as
239 Tips for Producing and Managing Flash-based e-Learning Content | 93
Flash-based dictated by transitions.as. Simply increasing the size of the mask proportionately solved the prob-
lem. Tipster: Dan Karwoski
e-Learning con-
Test at every stage you can, and test whatever you can. Create a test plan to ensure you cover all
tents work fine,
areas of testing needed for Flash content. Have several people test the same piece of content.
if it allows Don’t limit yourself to testing learner interaction. Think of the bigger testing picture – such as con-
tent operability, SCORM/AICC-related testing, and server and streaming testing. Test launching it
learners to tog-
from different locations globally. How does it handle inside an LMS, or inside the other applica-
gle between dif- tions such as Web conferencing or virtual teaching environments? Tipster: Petra Jennings
ferent stages of Create a style guide for every project, and hire an editor. Tipster: Tracey Kogelmann
video content.
Place a Help Icon at the bottom of the screen. Link the Help Icon to whatever topic the instructor is
Then it’s great... teaching. Have the link create an e-mail with the subject autofilled in and directed to whatever
support e-Mail address they use. For example: The instructor is covering “How to Archive E-Mail.”
Mohammad Noumans
The student, while watching the recording, hits the Help icon. Outlook opens up with an e-mail
addressed to Support@company C, with the subject: Question regarding How to Archive E-Mail. I
find this very helpful for the students, and it only takes a little time to set up at the end.
Tipster: Todd Irvin
If you can, try not to use audio to accompany your WBT (such as someone explaining the con-
cepts). If you need to update the content, and that person is unavailable to record the narration,
then you will need to re-record all narration. Not using audio also reduces file size DRAMATICALLY!
Tipster: Petra Jennings
Flash-based e-Learning contents work fine, if it allows learners to toggle between different stages
of video content. Then it’s great... Tipster: Mohammad Noumans
The advantage of using Flash for e-Learning lies in its rich-media applications and multi-platform
accessibility. However, just having a rich-media e-Learning application means nothing if it's not
used effectively. What does this mean? The advantages of a rich-media application lie in its poten-
tial to engage and immerse users far more deeply and viscerally than a lecture or print. Being able
to experience something virtually, can have a longer-lasting impact than the written word. By this
consideration, it makes no sense to develop e-Learning rich-media applications as simply books on
the Web. Though e-Learning is a new industry, other industries have spent decades refining how
to make things captivating. Look at toy companies, game companies, advertising companies, and
films for ideas to make your e-Learning application more engaging to the user. Of course, many of
these products may be engaging in the short term, but you will find that the most powerful and
memorable media are created by those with an inherent passion for the subject matter. Take
advantage of rich-media options, and use it to its full potential. But the true potential is still with-
in the creators (clients working with vendors) to approach the subject matter with passion and
excitement. In truth, the rich-media application created by an apathetic team will have far less
impact on the learner than the short paper pamphlet created by an excited team.
Tipster: Daniel Fu
239 Tips for Producing and Managing Flash-based e-Learning Content | 94
Keep it moving, Use file-naming conventions for source files and course files. This makes it easy to locate the files,
especially if you want to repurpose them for another course. Also, use a course file structure that
not just visually, the design and development team agrees upon and adapts as common practice. This structure
but conceptual- makes it easy to locate materials, whether by navigating to a course file, or searching for a file. For
example, if all storyboards are found in a storyboard file under development, and files are named
ly. In this chan- using conventions, the files can quickly and easily be found. Tipster: Marcia Papalas
nel-surfing, can-
When producing animations with Flash, it is important to lay down some guidelines. One of them
always-hit-the- relates to the size of the Flash animation produced. As our organization offers online postgraduate
courses, we have to ensure that it does not take ages for these Flash animations to download …
rewind-button
particularly, we have learners in countries where broadband is still not widely accessible. When
era, learners there is audio in the FLASH animation, always check that only the necessary information is includ-
ed and narrated. Tipster: Peggy Pang
have low toler-
ance for produc- My comment is more around how Flash is included into the structure of your e-Learning content.
My personal opinion is that, as a developer, I should have a toolbox of e-Learning content develop-
tions that are ment tools. I know this is sometimes not economically feasible, but on this particular topic, I don't
inefficient with recommend creating your content in Flash alone. I would even possibly rename the title to be
How to incorporate Flash content into your e-Learning module. We tried to create an e-Learning
their time. module completely in Flash, and it turned out to be not only a huge file, but a huge maintenance
Roger Courville effort. Even after breaking it up into smaller pieces, the flow kept being interrupted by the “Please
Wait, Module Loading” messages. Flash has a lot of Learning Interactions that (with a little imagi-
nation) can be incorporated into some HTML content very effectively, or included as animation
between static content slides of a Web conference. There are also a lot of tools (such as those at
SwishZone.com and Camtasia Studio) that create .SWF files for use within an e-Learning module.
Tipster: Brian Lauer
Organize your learning interactions by the task they support. For instance, you may have a Flash
file that allows a user to simulate logging into your proprietary system. You can insert that file
into a self-paced course, push it out during a synchronous learning event, or post it under the help
portion of your intranet. Since one learning interaction can have several uses, use naming conven-
tions and folder structures that allow you, and others, to easily find them when needed.
Tipster: Andrew Shields
Smaller is better! This especially applies to computer or software training. Make each task an indi-
vidual Flash file. You can then combine them to make a larger, overall task. This approach allows
you greater flexibility with reusing and repackaging the Flash files to suit varying needs, enables
the student to consume one task at a time and target their learning, and helps you manage file
size for storage and filing handling such as importing into LMSs. Tipster: Petra Jennings
When creating images in Flash or Captivate, make sure that the image size is not real big. This will
help in load time, and also in playback. Tipster: Kelly Peterson
239 Tips for Producing and Managing Flash-based e-Learning Content | 95
I have been creat- For large projects or organization-wide development efforts, use an LCMS to manage and share
Flash blocks between authors to ensure best practices and optimize reuse. Tipster: Stuart Hornsey
ing multimedia
Keep it moving, not just visually, but conceptually. In this channel-surfing, can-always-hit-the-
for over 10 years.
rewind-button era, learners have low tolerance for productions that are inefficient with their time.
Conceptually Tipster: Roger Courville
clear is more I embed Flash .SWF files in PowerPoint slides to give the slides some interactivity. Though I have
important than added complex learning objects, a very simple use of this technique is to build a simple .SWF file
made up of Flash's built-in components, such as scrolling fields, graphic panes, and text-entry
technically accu- fields. This works especially well for building e-Book self studies where screen real estate is at a
rate. That's my premium. You may use PowerPoint's ability to import Flash files. The technique is even easier with
the Adobe Presenter plugin installed, which offers a menu item on the PowerPoint menu bar for
less-than-10- importing Flash. Tipster: Mark Scher
minute story, and
All of our courses have a Help button, as well as a final page which instructs the learner how to
I'm sticking to it. complete a post-assessment for the course. Since we constantly update our LMS, the content for
the Help and final pages often changes. What we've done is create one global page each for the
Scott Newman
Help and final sections using Adobe Flash, and we simply link these global pages to each CBT,
regardless of the tools with which we created each CBT. That way, if the content changes for the
Help and final page sections, we only have to update those two pages rather than each CBT.
Tipster: Maureen A. Barlow
TEMPLATES, TEMPLATES, TEMPLATES! —Try to create templates wherever possible. This includes
templates in all tools. Set up things like colors, themes, pop-ups, text boxes, timing, logos, behav-
ior, output, skins, the lot! Take the time to map your templates out, test them, and pilot them
before you create your content. This will save you an incredible amount of time, and will guaran-
tee you a consistent and great looking end product! Tipster: Petra Jennings
I have created Flash-based training courses for healthcare companies and the Department Of
Defense for the past eight years. Over that time, I have learned that the most critical component
to any course is a shared delivery framework. This is a standardized frame or player, which auto-
matically loads all learning content based on the user's role and the content available. The goal of
this shared delivery framework, or shared player, is that a standard look can be stored and called
up every time a user loads a set of content. The player would be stored remotely in one location,
while the content is entirely loaded from different locations. This also helps to reduce rework time,
since any changes to the player only need to happen once to affect all content. Basically, the
shared player system is comprised of three or four components, depending on your use. A player, a
menu, content .SWFs, and audio MP3s.
• The Player: This standard component runs the course. This includes your custom branding, as
well as a specific look and feel. Any buttons should be obvious, yet unobtrusive. Text boxes
should be clear, and large enough for any variables that are loaded into them. The player ensures
a consistent look and feel is maintained through the course.
239 Tips for Producing and Managing Flash-based e-Learning Content | 96
Know your audi- • The Menu: This is the listing of content .SWFs to be loaded into the player. This includes titles,
and link locations or URLs for each lesson. The menu can be a simple .TXT file, but an .XML file is
ence, specifically much easier to edit and modify. A different menu file can be created for each lesson or topic in a
their technical course, or one menu file can be used throughout an entire course.
• The Content .SWFs: These are the teaching components. These should have a similar design style
capabilities. This as the player, but this is up to the designer. The content .SWFs should reside in folders based on
helps you to cre- topics or lessons. Content .SWFs can be simple slideshows, basic user interactions, or even com-
plex animations.
ate the appropri-
• The Audio MP3s: Depending on your use, you may want to include narration for your content. If
ate media, and you were to include this audio in the compiled content .SWFs, the resulting file size would make
allows you to loading next to unbearable for the user. The best way to include audio is to stream it in at play-
time. This means that external MP3 files are loaded in and played while the user is viewing the
have a known content .SWFs.
testing environ- • How They Work Together: To begin, the user will open a link which will load the remote player
and a local menu file. The player will process the menu file, and populate a graphical menu with
ment. the titles of the content .SWFs. The player can then display the menu to the user, allowing the
Eric Shiblom user to select the content they need. Once the content is selected, the player can load the con-
tent .SWF, and any available MP3s, based on the link listed in the menu. Also, this player is capa-
ble of loading or executing more than standard .SWFs. The player can also launch Web pages,
PowerPoint slideshows, open PDF documents, and even display images based on the variables
set in the menu file.
Tipster: Rich Gamer
Remember the early 1990s when tool vendors told Instructional System Designers (ISDs) that no
programming skills were required to create online learning? It was so simple even an ISD could
do it! Well, I'm an ISD, not a programmer, and I struggled with early authoring tools. Today, the
e-Learning tools vendors come through on their claims. Creating content in PowerPoint and out-
putting it as Flash really is simple, using tools such as Adobe Presenter 6 or Articulate. So, my tip is
to evaluate these products to see which best meets your needs, and use them when they are the
right development tools for a given situation. The temptation, though, is to put such tools solely in
the hands of Subject Matter Experts (SMEs) which is going to produce what we'd expect … SME
brain dumps with clip art in Flash. The need for good ISD and graphic arts hasn't lessened with the
introduction of these rapid development tools into our toolkits. In fact, design may be more
important than ever. Our role is in “figuring things out” during the analysis phase, and designing
the most creative, learner-centered, job-relevant learning experiences possible, given the limita-
tions of PowerPoint-to-Flash authoring tools. Further, we can set up content-free instructional
frameworks for SMEs to populate with content. These approaches embrace the easy-to-use tools
of today, while not discarding quality in terms of instructional integrity and quality visuals.
Tipster: Susan McDonald Osborn
DON'T LET THE TECHNOLOGY DRIVE YOUR TRAINING! — When building e-Learning, it's best to
start by determining the needs and objectives of the training. Once you have a clear vision for
239 Tips for Producing and Managing Flash-based e-Learning Content | 97
Build content what the training needs to accomplish, then you can determine the best technology to support
the training. Too many times, e-Learning professionals get a new technology and want to use it in
in small blocks, their next training initiative, when that might not be the best way of delivering the content. Don't
which can be let the technology drive the training. Once you establish the needs and objectives of the training,
then use technology to support the training needs and objectives. Tipster: Chris Bahns
easily edited
While developing bespoke e-Learning courses that you need to translate or localize in multiple
and reused
languages, you should take care of the amount of text and graphics included in a screen. This is
repeatedly to especially true for courses being developed in Flash, without the help of authoring tools. The
developer should keep at least 30-40% extra space in the content area and graphics with text.
form larger
Even the buttons should be bigger so as to accommodate an increase of text after translation. A
pieces of learn- simple example is the word Print, which in Spanish is Impresion, an increase of four alpha charac-
ters. Tipster: Himadri Chowdhury
ing.
Hedley Hamilton Know your audience, specifically their technical capabilities. This helps you to create the appropri-
ate media, and allows you to have a known testing environment. Tipster: Eric Shiblom
Tell a story, make it “meaty,” and tell it in less than 10 minutes. Yes, that requires scripting, and cut-
ting out the fluff is not easy for most people to do. Never use transitional sentences like “On this
next slide you will see…” Those are just wasted words that bore people to tears. Moreover, don't
put any graphics on screen unless they directly support what you are saying. Sorry, when you are
talking about e-mail, the worst thing you can show is that tired old animated .GIF of a mailbox
opening and closing. RESIST THE URGE! Don't use technical terms. Pretend your intended audience
is your Mother. Would she really care (or understand) that a file was backwardly compatible or
simply can be opened by older programs? I have been creating multimedia for over 10 years.
Conceptually clear is more important than technically accurate. That's my less-than-10-minute
story, and I'm sticking to it. Tipster: Scott Newman
Flash-based interactivity can be plucked in the LMS independently as a full-fledged course, and
also can be integrated with some other course made up in some different authoring tool. As in the
first case, when one is thinking of independently integrating Flash on LMS, try to pluck Flash into
Flash (we can call it “Nested Flash”). This will ease the process of developing complicated courses
as well, like scenario-based or chain simulations or decision trees and so on. The ability of Flash in
Video and audio handling is amazing. There I will suggest the 3-D character-based animation
scenes or scenarios, since at many places we face challenges in getting real persons performing
those scenes. Tipster: Bhanwar Singh
Build content in small blocks, which can be easily edited and reused repeatedly to form larger
pieces of learning. Tipster: Hedley Hamilton
There are ways to use load time more creatively than an animated icon. In Plimoth Plantation's
Online Learning Center (http://plimoth.org/education/olc/index_js2.html), we displayed questions
239 Tips for Producing and Managing Flash-based e-Learning Content | 98
Kathy Schroeder, Director of Marketing, Mark Hemingway, Co-founder and CIO, Petra Jennings, Manager, Learning
Atomic Learning Sharp Media Content, Saba, Inc.
Kathy Zottmann, e-Learning Consultant, Mark Scher, Principal, Scher Progression, Phil Cross, Manager, Engineering,
WaMu LLC NexLearn
Kelly Peterson,Trainer, Renaissance Mark Simon, Sr.Training Specialist, Philip Roy, E-Learning Facilitator,
Learning Eliassen Group Massey University
Kevin O'Donnell, Senior Graphics Mark Temple, Multimedia Developer, Prakash Bebington, Learning Consultant,
Designer, JDA Software Group, Newmarket Internation Inc. Aptech Limited
Business Management Institute
Matt Perkins Raghavendra,Technical Writer, Oracle
Kevin Wilcoxon, Principal,
Maureen A. Barlow,Training & Ram Mohan,Team Leader,
The Instructional Web LLC
Development Specialist, e-Learning,Tufts Sterco Digitex Pvt. Limited
Kieran Richardson, Director of Product Health Plan
Red Resener, Director of Development,
Management, Flypaper Studio, Inc.
Michael Alcock, Managing Director, Automated Learning Solutions, Inc.
Krishna Prathab R V, Owner, Atlantic Link
Rich Garner,Web Developer, Amerigroup
www.lastashero.com
Michael Baker, Information Resource
RJ Jacquez, Senior Product Evangelist,
Laura Filla, Sr.Technical Writer, Coordinator, South Carolina Department
Adobe Systems, Inc.
TouchNet Information Systems, Inc. of Social Services
Rob Wiggins, Learning Technology & OD
Laura Jaffrey, Instructional Designer, Mike Dickinson, Director, e-Learning &
Specialist, St. Josephs Healthcare
Knowledgework Curriculum,The SCOOTER Store
Hamilton
Lawrence Yau, Scientist, NATO Mike Hobby,Training and Development
Robbe Addis, Programmer &
Manager, Oak Harbor Freight Lines, Inc.
Leif Nelson, Instructional Designer/ Instructional Developer, General
Technologist, University of Wisconsin – Milo Dodds, IT Analyst – e-Learning Dynamics Information Technology
Green Bay Development Lead, IT Learning Group –
Robert (Butch) Pfremmer, VP &
Cisco Systems Inc.
Leigh Anne McIntyre, Instructional e-Learning Practice Manager,Welocalize
Designer, Instructional Spice Mohammad Nouman, e-Lecturer, Virtual
Rodger Stuffel, Production Manager,
University of Pakistan
Leigh Margaret Roberts, e-Learning C2 Technologies
Programs Director, Career Builder Monika Sharma, Instructional Design
Roger Courville, Principal, 1080 Group, LLC
Institute Manager, Aptara, Inc.
Rosh, Developer, SONGS
Lisa Neal, Consultant, http://lisaneal.com Mrs. G. Mythili, Multimedia Developer,
Sify Technologies Limited Ryan Cameron, Director of Flash
Madhanaraj Kubenderan,Tech Skill Lead,
Technology, Jeffrey Gitomer's Train One,
e-Learning, Robert Engineering and Nick Floro, CEO,
Inc.
Business Solutions Sealworks Interactive Studios
S.R.Mithra, Senior Graphic Designer,
Marcia Papalas Nick Stanziani, Duane Morris, LLP
Sify Technologies
Marge Rutter, Instructional Designer, Paul Vandegriff,Training Consultant,
Sanatan Saraswati, e-Learning Designer,
Springhouse Education and Consulting Various
Axial
Maria Coelho, Customer Relations, Peggy Pang, Senior Manager,
Scott Gale, Sr. Instructional Designer
QuickLessons Learning Design, U21Global Pte, Ltd.
e-Learning, Graco, inc
Mario Gutiérrez Toledo, Multimedia Peter Ryce, Evangelist,
Scott Gaspar, e-Learning Developer,
Producer, Mystica Hipermedia, Adobe Systems, Inc.
Jobing.com
Santiago-Chile
239 Tips for Producing and Managing Flash-based e-Learning Content | 101
Scott Hersey, Developer, Unum Stuart Hornsey, Sales Director, Todd Irvin,Training Manager,
Any-3 Ltd. United Way of America
Scott Merrett, e-Learning Manager,
Research In Motion Suresh Jayaraman, Sr. Product Marketing Tom Kuhlmann, VP, Community,
Manager, Adobe Systems, Inc. Articulate
Scott Newman, Director of Training,
Dechert LLP Susan McDonald Osborn, Tonia Dousay, e-Learning Manager,
Owner, Laurus Design, LLC Texas Engineering Extension Service
Shaunda Paden, Instructional Designer,
DesignComm, Inc. Susan Steinfeldt, Lead Educator, Tracey Kogelmann, Multimedia Designer
Computer Based Training, and Developer, Newmarket International
Shilpi, PI Lead, Edutech
Carle Foundation Hospital
Uday Kranti, Senior Consultant, NIIT
Silke Fleischer, Sr. Product Marketing
Swan, Director,WSB
Manager, Adobe Systems, Inc. Vicki Krajewski, Instructional Designer,
Thomas Gnas, Manager of Learning and Pearson
Steve Hancock, President, Rapid Intake
Development, Eisai Medical Research
Wendy Phillips, Online Training Specialist,
Steve Johnson, Senior e-Learning
Tim Bobo, Owner, Left Brain Media Bigpond
Designer
Tim Kindberg, Lead Designer,Trivantis Wimong Ma, Student, Hebei University
Steve Jones,The Alignment Group
The eLearning Guild is a global membership organization like no other...
A singular focus on the art, science, technology, and
E x p e rie n c e
Everything Your Professional Community Has to Offer...
The eLearning Guild is a Community of Practice dedicated to
meeting the needs of those involved in the design, development,
and management of technology-delivered education and instruc-
tional content. It’s a member-driven online information center that
equips members with the resources needed to ensure that their
organization’s projects are successful, engages members in a
professional peer network, and focuses members on expanding
their own professional skills, knowledge, and expertise.
“Attending The eLearning Guild’s Annual
Gathering helped me realize the Guild’s honesty The Guild offers four levels of membership. Starting at the FREE
and commitment to what e-Learning is all about — Associate level, the benefits you can gain from each level of mem-
improving performance. Great conference, but bership will enhance your professional experience. At the higher
even more — great Community of Practice!” levels, you’ll discover The eLearning Guild can serve as the core
DAVID BRAUN, TRAINING & PERFORMANCE SUPPORT SUPERVISOR, SASKPOWER of your entire professional development program. Check it out!