&

Adobe Captivate 7 and Creative CloudAdobe Learning Summit / DevLearn 2013

October 21, 2013Kirsten Rourke

About This HandoutThis 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.

Using Adobe BridgeBridge 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.

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.

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.

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

Browse in Bridge from Captivate

Place in Captivate from Bridge

Working with SoundAdobe 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

you make much more sophisticated sound mixes and edits than ever before.

System Audio issues

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.

Adobe Captivate lets you capture or record system audio while recording simulations or video demos.

You can use Video Capture to record an interview....

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

Adobe Captivate does not support recording of system audio on Windows XP.

System Audio on a Mac

On Mac, you have to install and configure a free Mac OS extension named “Soundflower” to record system audio for Adobe Captivate projects.

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.

Here are some helpful links to look at.

http://apple.stackexchange.com/questions/50904/if-we-use-soundflower-to-record-the-systems-audio-output-then-we-cant-hear-it

http://code.google.com/p/soundflower/issues/detail?id=172

Edit Audio with AuditionYou 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.

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.

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)

3. Close Audition

Editing multiple audio files

1. In the Captivate library, select the audio files that you want to edit

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

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/visual-editing-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]

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.

3. With the paint brush, “paint” over a sample of the sound to remove

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

On the left of the image above is the Spectral Frequency View button and on the right is the Paintbrush.

Spectral Frequency showing the Tree Frog sounds

PhotoshopCaptivate 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

-OR-

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

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

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.

1. In the slide or PSD folder in the library, right-click (Windows) or Control-click (Mac OS) the PSD file

2. then select Edit PSD Source File

3. In Photoshop make the changes you want to the file and Save

The changes will be reflected in Captivate.

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

(Mac OS) menu choose Update from Source

-OR-

Click Update in the Property Inspector (Window > Properties)

-OR-

Click the status icon in the library

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!

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.

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. Click OK to finish

Adobe Edge AnimationsI 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!

The Lessons Panel shows you a series of introductions to the application. When you click on a lesson...

You will see a step-by-step walk-through of the procedure. That’s all you need - just follow along!

Saving Edge files for Captivate

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. Check the box for Animate Deployment Package

3. Browse to the target directory

4. Click Save

Add Edge to CaptivateEdge 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.

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.

To create an HTML project with HTML5 animations:

1. Create your captivate project with the base content

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.

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

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.

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.

NOTE: Adobe Captivate App Packager is installed along with Adobe Captivate.

To merge HTML5 animations into a Captivate HTML project:

1. Open the application

2. A box will open that only has a browse button (see below)

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

5. Browse and select the Edge Animation .oem file, and click Insert. You can see a preview of the animation on the Stage.

6. Drag the bounding box to place the animation at the required location on the slide

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

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.

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.

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

Kr

Kirsten Rourke - RourkeTrainingrourke.training@gmail.com

@rourketraining