Your SlideShare is downloading. ×
Captivate and Creative Cloud Handout
Captivate and Creative Cloud Handout
Captivate and Creative Cloud Handout
Captivate and Creative Cloud Handout
Captivate and Creative Cloud Handout
Captivate and Creative Cloud Handout
Captivate and Creative Cloud Handout
Captivate and Creative Cloud Handout
Captivate and Creative Cloud Handout
Captivate and Creative Cloud Handout
Captivate and Creative Cloud Handout
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Captivate and Creative Cloud Handout

1,984

Published on

This is the handout to go with the Captivate and Creative Cloud slidedeck. …

This is the handout to go with the Captivate and Creative Cloud slidedeck.
These were from the Adobe Learning Summit/DevLearn 2013 Conference

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,984
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  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

×