This document provides an overview of using Adobe Captivate 7 in conjunction with Adobe Creative Cloud, focusing on features like asset management through Adobe Bridge, audio editing with Adobe Audition, and the integration of Photoshop files. It explains how to effectively add, edit, and manage audio and graphics within Captivate, as well as how to embed HTML5 animations created with Adobe Edge Animate. Additionally, it covers the capabilities of the Adobe Captivate App Packager for creating cross-platform applications.

1. &
Adobe Captivate 7 and Creative Cloud
Adobe Learning Summit / DevLearn 2013
October 21, 2013
Kirsten Rourke

2. About This Handout
This handout covers the quick overview presented
at the Adobe Learning Summit 2013 in Vegas. This
is NOT all you can do with these products - not
even close.
3.
If you will be using Bridge often, just minimize
the app, if not close or quit the application
and you’ll see your asset has been placed in
Captivate.
Note: You can also drag images from Bridge into the
Captivate window
Using Adobe Bridge
Bridge is the file manager/organizer for assets
associated with various Adobe products, like
Photoshop, Illustrator, or InDesign.
With Bridge you can see images before you place
them, tag items for filtering, and search based on
keywords.
Browse in Bridge from Captivate
Adobe Captivate 7 now connects to Adobe Bridge.
This means you can add your assets (media,
Photoshop files, other images...) from Bridge into
any Captivate slide.
Place in Captivate from Bridge
Working with Sound
The Bridge Interface
Add Assets from Bridge
To launch Bridge from within Captivate, choose
1.
File > Browse in Bridge.
2.
In Bridge you can use either File > Place >
In Captivate OR right-click on an image and
choose Place > In Captivate from the context
menu.
Adobe Captivate lets you add narration, music,
step-by-step instructions, or almost any sound to
your projects. You can record your own audio files
or import existing WAV or MP3 files.
If you want to remove a sound by cutting the file
down or replacing the noise with silence, Captivate
has the tools to do that easily.
If you have a more complex sound issue however,
you’ll find that you will want to use a sound editing
program, like Adobe Audition.
Audition will round-trip edits with Captivate letting

3. you make much more sophisticated sound mixes
and edits than ever before.
System Audio on a Mac
System Audio issues
On Mac, you have to install and configure a free
Mac OS extension named “Soundflower” to record
system audio for Adobe Captivate projects.
System audio refers to the audio from your
computer’s speakers. For example, audio associated
with YouTube videos or the sound you hear when
error messages pop-up in some applications.
BUT – the current version is does not work well with
Mac 10.8 – you need to use Soundflower 1.6.5 or
1.6.6.
Adobe Captivate lets you capture or record system
audio while recording simulations or video demos.
You can use Video Capture to record an interview....
Here are some helpful links to look at.
http://apple.stackexchange.com/questions/50904/ifwe-use-soundflower-to-record-the-systems-audiooutput-then-we-cant-hear-it
http://code.google.com/p/soundflower/issues/
detail?id=172
.. but System Audio needs to be available. As you
can see from the image below, system audio doesn’t
work on a Mac without some help.
Edit Audio with Audition
You can use Adobe Audition to edit audio when
you want to go beyond the audio editing options
available in Adobe Captivate.
For example, to apply filters or remove complex
noise, you need an advanced audio editor such as
Adobe Audition.
Adobe Captivate does not support recording of
system audio on Windows XP.
The best way to edit with Adobe Audition is to
open sound files into Audition using the Library
panel. As of this writing the “Adobe Audition” button
in the edit sound box does NOT work.

4. Ok, So what do I do?
1.
Right-Click (Ctrl-Click) on the file in the library
and choose Open With > Adobe Audition (you
may have to browse the first time)
2.
Make the edits you want, and save the file
(Audition will update Captivate)
2.
In Audition I switched to the Spectral
Frequency view to see the issues with the file
The demo file has overlapping sounds. In the
spectral frequency view, it shows sounds of crickets
and tree frogs as separate color areas, which gives us
the ability to remove just the tree frog sounds.
2.
Effects Menu > Noise Reduction... >Learn
Sound Model
5.
Click OK on the pop-up. Now Audition has
“learned” the sound
6.
Ctrl/Cmd D to deselect the painted section
7.
Effects Menu > Noise Reduction... > Sound
Remover
8.
Make adjustments as needed, play to test, click
“Apply” and “Close” to use your changes
Close Audition
Editing multiple audio files
1.
With the paint brush, “paint” over a sample of
the sound to remove
4.
3.
3.
In the Captivate library, select the audio files
that you want to edit
Right-click (Windows) or Control-click (Mac
OS), and then click on Edit With> Adobe
Audition
3.
Adobe Audition launches. The files you
selected are imported and are available for
editing. (If this option is not available, select
Edit With and choose Audition)
4.
Edit the files in Audition.
5.
Select Save All
6.
Close Audition
Edit in Spectral Frequency View
On the left of the image above is the Spectral
Frequency View button and on the right is the
Paintbrush.
Sometimes you need to edit sounds that you can’t
“see” properly in the normal waveform view. I used
the Spectral Frequency view to select a specific
sound and used the Audition CC Sound Remover
feature to take it out.
Below is a link to a good introduction to what the
Spectral Frequency editor is.
http://blogs.adobe.com/audition/2011/10/visualediting-in-the-spectral-frequency-display.html#.
UmR-bCTDCz4
The steps I used in the demo were:
1.
Right-click (ctl-click) on the sound file in the
Captivate Library [Audition opens]
Spectral Frequency showing the Tree Frog sounds

5. Photoshop
Captivate 6 and 7 and Photoshop C6 and CC have
round-trip editing capabilities. The Photoshop
(PSD) files that you import to Adobe Captivate are
linked to the source.
Import or Place Photoshop files
You can import a PSD file into your Adobe Captivate
project, while preserving the basic Photoshop
features.
1.
File > Import > Photoshop File
2.
Select the file you want
3.
Click OK
Each imported layer is treated as a separate image
within the Adobe Captivate project. In the library,
a folder with the PSD name is created and each
imported layer is stored as a PNG..
-OR1.
In Bridge place the file into Captivate using one
of the following methods:
a. File > Place > In Captivate
b. Right-click/Ctrl-click on the file and choose
Place > In Captivate
c. Drag the file from Bridge into Captivate
After either Import or Place, the selected file is now
in Captivate and the import box shows the layers of
the files.
You can select and import separate layers of the PSD
file, you can merge some layers together, or you can
flatten layers and import them as a single image.
Editing graphics with Photoshop
You can start Adobe Photoshop (to edit the files)
from within Adobe Captivate.
If you update the source PSD file, Adobe Captivate
lets you update the files in the library and the
changes reflect in the slide - IF the original import
was not hiding that layer.

6. 1.
2.
In the slide or PSD folder in the library, rightclick (Windows) or Control-click (Mac OS) the
PSD file
then select Edit PSD Source File
(Mac OS) menu choose Update from Source
-ORClick Update in the Property Inspector (Window >
Properties)
-ORClick the status icon in the library
3.
In Photoshop make the changes you want to
the file and Save
The changes will be reflected in Captivate.
Broken PSD Links
If you remove or relocate the PSD, then a question
mark icon appears in the status column. Click the
icon to relink, then browse to the new file location.
Layer Comps Rule!
Update PSD files
If the files in the Adobe Captivate library and the
original files are not in sync, the status column in the
library changes from green to red.
To update and bring the resource on slide in sync
with the source:
From the right-click (Windows) or Control-click
One of the best ways to make a design for an
eLearning project from Photoshop is to use Layer
Comps. A layer comp is a Photoshop feature that
allows you to create, manage, and view multiple
versions of a layout in a single Photoshop file.
When importing a PSD file, you can choose to
select and import layer comps instead of Photoshop
Layers.

7. To bring Layer Comps into Captivate:
1.
Import or Place a Photoshop file
2.
In the Import dialog box, click Multiple
3.
Select the layer comp from the drop-down
list. The layers in the selected layer comps
appear
4.
Select the check boxes corresponding to the
layer comps you want to import
5.
If needed, select Scale According To Stage Size
to automatically resize the image to the size of
your Adobe Captivate project
6.
The Lessons Panel shows you a series of
introductions to the application. When you click on
a lesson...
Click OK to finish
You will see a step-by-step walk-through of the
procedure. That’s all you need - just follow along!
Adobe Edge Animations
I did not go into using Edge Animate in any detail
during my demo, but I can help you learn more
about it and how to use it.
One of the wonderful things about Edge Animate is
that they have a great way to learn how to use the
program built into the program!

8. Saving Edge files for Captivate
To create an HTML project with HTML5 animations:
1.
Edge Animate files need to be saved in a specific
way to merge their animations into Captivate using
the Adobe Captivate App Packager.
To make the correct file type ( an .oam file):
1.
Choose File > Publish Settings
2.
Choose Window > HTML5 Tracker
Before you publish as HTML check that you have
no interactions that will not work in HTML5 - like
rollovers and slide transitions.
Browse to the target directory
4.
2.
Check the box for Animate Deployment
Package
3.
Create your captivate project with the base
content
Click Save
NOTE: The HTML5 Checker in Captivate is not going
to catch everything. You will want to test your content
to be sure that everything works before distribution.
3.
Add Edge to Captivate
Edge Animate is Adobe’s application for making
HTML5 animations. It’s interface allows you to use
panels, and a timeline to create the complex code
needed to make modern browsers create and play
animations.
Remove/replace any items that conflict with
HTML5
4.
When you are ready to publish your project
choose File > Publish
5.
In the publish box, check off HTML5, Browse
to your save location, and choose Publish
Making content that shows in a browser is
not difficult, but If you want to have animated,
interactive content on an iOS device, Edge Animate
is a good choice to make that content.
Captivate is able to make animations, but not nearly
as complex or sophisticated as what Edge Animate
can do.
Fortunately, with Captivate 7 and the Adobe
Captivate App Packager, you can merge HTML5
animations into a Captivate HTML project file.
NOTE: In the demo, I used the sample file “Floral
Match Maker” available here - http://html.adobe.
com/edge/animate/showcase.html.
Adobe Captivate App Packager
Adobe Captivate App Packager is a cross-platform
application that helps you embed animations
created in Adobe Edge Animate or any other
HTML5 authoring tool.

9. It also helps you package the courses as native apps
for multiple devices and platforms (iOS and Android
aps) using the new Adobe Phone Gap Service.
5.
Browse and select the Edge Animation .oem
file, and click Insert. You can see a preview of
the animation on the Stage.
NOTE: Adobe Captivate App Packager is installed
along with Adobe Captivate.
6.
Drag the bounding box to place the animation
at the required location on the slide
To merge HTML5 animations into a Captivate HTML
project:
The HTML5 icon appears at the bottom right corner
of the slide thumbnail on the left indicating that the
slide contains an imported HTML5 animation
1.
Open the application
2.
A box will open that only has a browse button
(see below)
7.
Make any needed adjustments
Preview the project
Click one of the following options in the panel at the
bottom:
Preview In Place: Preview window appears within
the app. Audio and video is not available in this
preview mode.
Preview In Browser: Preview appears in the default
web browser.
3.
Click Browse to select the Adobe Captivate
HTML5 output folder
All the slides in the project are displayed on the left
side of the user interface.
4.
From the Import Animation panel on the
right side, click the green Edge Icon to import
HTML5 Edge Animations. Click the HTML5
Icon to import HTML5 animations created
using other HTML5 authoring tools
Merge with Captivate HTML5
Finally, it’s time to finish the Edge into Captivate
process...
At the bottom of the publish box you’ll see four
icons.
8.
Click the Publish Settings button on the left to
specify the location for the published output
9.
To create the new HTML5 Captivate file, check
the Captivate icon and then Publish
The other two buttons are for publishing native
apps. In the presentation I only go up to the point
of opening PhoneGap (the next topic) because the
subject gets more complicated from there.

10. Publish iOS or Android Apps
10. Check next to the icon for the device or
platform you want to publish to
11. When you click publish a small box appears
allowing you to log in with your PhoneGap
credentials
PhoneGap allows you to use standard web
technologies such as HTML5, CSS3, and JavaScript
for cross-platform development, avoiding each
mobile platforms’ native development language
Each platform has it’s own rules and language for
development. PhoneGap makes it easier to develop
by acting as a go-between.
Testing
On a final note...
Don’t forget to check your work if you are planning
on delivering to multiple devices or to a broad
population.
http://quirktools.com/screenfly/
http://www.usertesting.com/mobile

11. Kirsten Rourke - RourkeTraining
rourke.training@gmail.com
@rourketraining
Kr