Finishing Touches and Publishing

Exclusive offer: get 50% off this eBook here
Mastering Adobe Captivate 7

Mastering Adobe Captivate 7 — Save 50%

Create interactive SCORM-compliant demonstrations, simulations, and quizzes with Captivate 7 with this book and ebook

$35.99    $18.00
by Damien Bruyndonckx | February 2014 | Open Source

This article by Damien Bruyndonckx, the author of the book Mastering Adobe Captivate 7, concentrates on publishing a movie. It is the process by which you make your Captivate projects available to the outside world. Most of the time, you'll publish your movies in the Adobe Flash format or the HTML5 format so that any student can enjoy the content of your online course across devices.

(For more resources related to this topic, see here.)

Publishing a Video Demo project

Due to its very nature, a Video Demo project can only be published as an .mp4 video file. In the following exercise, you will return to the encoderVideo.cpvc project and explore the available publishing options:

  1. Open the encoderVideo.cpvc file under Chapter08.
  2. Make sure the file opens in Edit mode.
  3. If you are not in Edit mode, click on the Edit button at the lower-right corner of the screen. (If the Edit button is not displayed on the screen, it simply means that you already are in Edit mode.)

    When the file is open in Edit mode, take a look at the main toolbar at the top of the interface.

  4. Click on the Publish icon or navigate to File | Publish.

    The Publish Video Demo dialog opens.

  5. In the Publish Video Demo dialog, make sure the Name of the project is encoderVideo.
  6. Click on the button and choose the publish folder of your exercises as the destination of the published video file.
  7. Open the Preset dropdown. Take some time to inspect the available presets. When done, choose the Video - Apple iPad preset.
  8. Make sure the Publish Video Demo dialog looks similar to what is shown in the following screenshot and click on the Publish button:

    Publishing a Video Demo project can be quite a lengthy process, so be patient. When the process is complete, a message asks you what to do next. Notice that one of the options enables you to upload your newly created video to YouTube directly.

  9. Click on the Close button to discard the message.
  10. Use Windows Explorer (Windows) or the Finder (Mac) to go to the publish folder of your exercises.
  11. Double-click on the encoderDemo.mp4 file to open the video in the default video player of your system.

Remember that a Video Demo project can only be published as a video file. Also remember that the published .mp4 video file can only be experienced in a linear fashion and does not support any kind of interactivity.

Publishing to Flash

In the history of Captivate, publishing to Flash has always been the primary publishing option. Even though HTML5 publishing is a game changer, publishing to Flash is still an important capability of Captivate. Remember that this publishing format is currently the only one that supports every single feature, animation, and object of Captivate.

In the following exercise, you will publish the Encoder Demonstration project in Flash using the default options:

  1. Return to the encoderDemo_800.cptx file under Chapter08.
  2. Click on the Publish icon situated right next to the Preview icon. Alternatively, you can also navigate to File | Publish.

    The Publish dialog box opens as shown in the following screenshot:

    Notice that the Publish dialog of a regular Captivate project contains far more options than its Publish Video Demo counterpart in .cpvc files. The Publish dialog box is divided into four main areas:

    • The Publish Format area (1): This is where you choose the format in which you want to publish your projects. Basically, there are three options to choose from: SWF/HTML5, Media, and Print. The other options (E-Mail, FTP, and Adobe Connect) are actually suboptions of the SWF/HTML5, Media, and Print formats.
    • The Output Format Options area (2): The content of this area depends on the format chosen in the Publish Format (1) area.
    • The Project Information area (3): This area is a summary of the main project preferences and metadata. Clicking on the links of this area will bring you back to the corresponding preferences dialog boxes.
    • The Advanced Options area (4): This area provides some additional advanced publishing options.

    You will now move on to the actual publication of the project in the Flash format.

  3. In the leftmost column of the Publish dialog, make sure the chosen format is SWF/HTML5.
  4. In the central area, change the Project Title to encoderDemo_800_flash.
  5. Click on the Browse… button situated just below the Folder field and choose to publish your movie in the publish folder of your exercises folder.
  6. Make sure the Publish to Folder checkbox is selected.
  7. Take a quick look at the remaining options, but leave them all at their current settings.
  8. Click on the Publish button at the bottom-right corner of the Publish dialog box.

    When Captivate has finished publishing the movie, an information box appears on the screen asking whether you want to view the output.

  9. Click on No to discard the information box and return to Captivate.

    You will now use the Finder (Mac) or the Windows Explorer (Windows) to take a look at the files Captivate has generated.

  10. Use the Finder (Mac) or the Windows Explorer (Windows) to browse to the publish folder of your exercises.

    Because you selected the Publish to Folder checkbox in the Publish dialog, Captivate has automatically created the encoderDemo_800_flash subfolder in the publish folder.

  11. Open the encoderDemo_800_flash subfolder to inspect its content.There should be five files stored in this location:
    • encoderDemo_800_flash.swf: This is the main Flash file containing the compiled version of the .cptx project
    • encoderDemo_800_flash.html: This file is an HTML page used to wrap the Flash file
    • standard.js: This is a JavaScript file used to make the Flash player work well within the HTML page
    • demo_en.flv: This is the video file used on slide 2 of the movie
    • captivate.css: This file provides the necessary style rules to ensure there is proper formatting of the HTML page

    If you want to embed the compiled Captivate movie in an existing HTML page, only the .swf file (plus, in this case, the .flv video) is needed. The HTML editor (such as Adobe Dreamweaver) will recreate the necessary HTML, JavaScript, and CSS files.

    Captivate and Dreamweaver
    Adobe Dreamweaver CC is the HTML editor of the Creative Cloud and the industry-leading solution for authoring professional web pages. Inserting a Captivate file in a Dreamweaver page is dead easy! First, move or copy the main Flash file (.swf) as well as the needed support files (in this case, the .flv video file), if any, somewhere in the root folder of the Dreamweaver site. When done, use the Files panel of Dreamweaver to drag and drop the main .swf file onto the HTML page. That's it! More information on Dreamweaver can be found at http://www.adobe.com/products/dreamweaver.html.

    You will now test the compiled project in a web browser. This is an important test as it closely recreates the conditions in which the students will experience the movie once uploaded on a web server.

  12. Double-click on the encoderDemo_800_flash.html file to open it in a web browser.
  13. Enjoy the final version of the demonstration you have created!

Now that you have experienced the workflow of publishing the project to Flash with the default options, you will explore some additional publishing options.

Using the Scalable HTML content option

Thanks to Scalable HTML content option of Captivate, the eLearning content is automatically resized to fit the screen on which it is viewed. Let's experiment with this option hands on using the following steps:

  1. If needed, return to the encoderDemo_800.cptx file under Chapter08.
  2. Click on the Publish icon situated right next to the Preview icon. Alternatively, you can also navigate to File | Publish.
  3. In the leftmost column, make sure the chosen format is SWF/HTML5.
  4. In the central column, change the Project Title to encoderDemo_800_flashScalable.
  5. Click on the Browse… button situated just below the Folder field and ensure that the publish folder is still the publish folder of your exercises.
  6. Make sure the Publish to Folder checkbox is selected.
  7. In the Advanced Options section (lower-right corner of the Publish dialog), select the Scalable HTML content checkbox.
  8. Leave the remaining options at their current value and click on the Publish button at the bottom-right corner of the Publish dialog box.

    When Captivate has finished publishing the movie, an information box appears on the screen asking whether you want to view the output.

  9. Click on Yes to discard the information box and open the published movie in the default web browser.

During the playback, use your mouse to resize your browser window and notice how the movie is resized and always fits the available space without being distorted.

The Scalable HTML content option also works when the project is published in HTML5.

Mastering Adobe Captivate 7 Create interactive SCORM-compliant demonstrations, simulations, and quizzes with Captivate 7 with this book and ebook
Published: February 2014
eBook Price: $35.99
Book Price: $59.99
See more
Select your format and quantity:

Publishing to HTML5

Publishing to HTML5 was the killer new feature of Captivate 6 when it was released in June 2012. One of the main goals of HTML5 is to provide a plugin-free paradigm. This means that the interactivity and strong visual experience brought to the Internet by plugins should be supported natively by browsers and their underlying technologies (mainly HTML, CSS, and JavaScript) without the need for an extra third-party plugin.

Because no more plugins are necessary to deliver rich interactive content, any modern browser should be capable of rendering the interactive eLearning courses created by Captivate. This includes the browsers installed on mobile devices such as tablets and smartphones.

This is an enormous change not only for the industry, but also for Captivate users and eLearning developers. Thanks to HTML5, your students will be able to enjoy your eLearning content across all their devices. The door is open for the next revolution of our industry: the mLearning (for Mobile Learning) revolution.

Blog posts
To get a better idea of what's at stake with HTML5 in eLearning and mLearning, I recommend these two blog posts available at http://blogs.adobe.com/captivate/2011/11/the-how-why-of-ipads-html5-mobile-devices-inelearning-training-education.htmlby Allen Partridge on the official Adobe Captivate blog and http://rjacquez.com/the-m-in-mlearning-means-more/ by RJ Jacquez.

Using the HTML5 Tracker panel

At the time of writing (January 2014), HTML5 is still under development. Some parts of the HTML5 specification are already final and well implemented in most browsers, while other parts of the specification are still under discussion. Consequently, some features of Captivate that are supported in Flash are not yet supported in HTML5.

In the following exercise, you will use the HTML5 Tracker to better understand what features of the Encoder Demonstration are (un)supported in HTML5:

  1. If needed, return to the encoderDemo_800.cptx file.
  2. Navigate to Window | HTML5 Tracker to open the HTML5 Tracker floating panel.

    The HTML5 Tracker floating panel informs you that some of the features used in this project are not supported in HTML5, as shown in the following screenshot:

    On slide 1 and slide 24, Text Animations are not supported in HTML5. This does not prevent the project from being published in HTML5; just be aware that the objects listed in the HTML5 Tracker floating panel will not function as expected.

  3. Close the HTML5 Tracker panel.

A comprehensive list of all the objects and features that are not supported in the HTML5 output is available in the official Captivate Help pages at http://help.adobe.com/. Make sure you read that page before publishing your projects in HTML5.

In the next exercise, you will publish a version of the Encoder Demonstration in the HTML5 publishing format.

Publishing the project in HTML5

The process of publishing the project in HTML5 is very similar to the process of publishing the project to Flash. Perform the following steps to publish the project in HTML5:

  1. If needed, return to the encoderDemo_800.cptx file.
  2. Click on the Publish icon or navigate to File | Publish to open the Publish dialog box.
  3. In the leftmost column of the Publish dialog, make sure you are using the SWF/HTML5 option.
  4. Change the Project Title to encoderDemo_800_HTML5.
  5. Click on the Browse… button and choose the publish folder of the exercises as the location where the file will be published.
  6. Make sure the Publish to Folder checkbox is selected.
  7. In the Output Format Option section, select the HTML5 checkbox. Once done, deselect the SWF checkbox.

    This is the single most important setting of the entire procedure. Note that you can select both the SWF and HTML5 options.

  8. In the Advanced Options area of the Publish dialog, deselect the Scalable HTML content checkbox.
  9. Leave the other options at their current value and click on the Publish button.

    Captivate informs you that some features used in this project are not supported in HTML5. This is something you already anticipated while looking at the HTML5 Tracker panel.

  10. Click on Yes to discard the message and start the publication to HTML5.

    The process of publishing to HTML5 is much longer than the publication to Flash. One of the reasons is that Captivate needs to open the Adobe Media Encoder to convert the .flv video used on slide 2 and the Full Motion Recordings of slide 17 and 22 to the .mp4 format.

    When the publish process is complete, a second message appears asking whether you want to view the output.

  11. Click on No to discard the message and return to the standard Captivate interface.

    You will now use the Windows Explorer (Windows) or the Finder (Mac) to take a closer look at the generated files.

  12. Use the Windows Explorer (Windows) or the Finder (Mac) to go to the encoderDemo_800_HTML5 folder under the publish folder of the exercises.

    You should find a bunch of files and folders in the encoderDemo_800_HTML5 folder, under publish, as follows:

    • index.html: This file is the main HTML file. This is the file to load in the web browser to play the course.
    • /ar: This folder contains the needed audio assets in .mp3 format.
    • /dr: This folder contains the needed images. Notice that the mouse pointers, the slide backgrounds, as well as all the Text Captions are exported as .png images.
    • /vr: This folder contains the needed video files in .mp4 format.
    • /assets: This folder contains the needed CSS and JavaScript files.

    You will now test this version of the project in a web browser.

  13. Double-click on the index.html file to open it in the default web browser.

    When testing the HTML5 version of the project in a web browser, notice that standard Text Captions have been used to replace the unsupported Text Animations of slide 1 and 24. On slide 10, the Animations have been replaced by static images.

    Apart from the few problems mentioned in the HTML5 Tracker, Captivate does a pretty good job of converting the demonstration to HTML5.

That being said, HTML5 publishing is still an emerging technology. The room for improvement is enormous. In the coming years, more parts of the HTML5 specification will be finalized and new techniques, tools, and frameworks will emerge. You will then be able to better implement HTML5 across devices, both in Captivate and throughout the Internet.

Adobe Captivate 7 for Mobile Learning
Adobe Captivate 7 for Mobile Learning is a Packt Publishing title that covers the HTML5 publishing process of Captivate 7 in great detail. To get more information about this title, just visit the Packt Publishing website at http://www.packtpub.com/adobe-captivate-7-for-mobile-learning/book.

Summary

At the end of this article, you can proudly turn off the lights and leave the postproduction studio.

Publishing to Flash is the main publishing option of Captivate. The Flash format supports every single feature of Captivate. When published in HTML5, the project can be played back on any device equipped with a modern web browser. This includes a vast majority of mobile devices such as iOS and Android smartphones and tablets. HTML5 publishing opens the doors for mLearning, which is the next revolution of our industry.

Resources for Article:


Further resources on this subject:


Mastering Adobe Captivate 7 Create interactive SCORM-compliant demonstrations, simulations, and quizzes with Captivate 7 with this book and ebook
Published: February 2014
eBook Price: $35.99
Book Price: $59.99
See more
Select your format and quantity:

About the Author :


Damien Bruyndonckx

Damien Bruyndonckx  is a trained elementary school teacher and began his career teaching French as a foreign language in two elementary public schools of Louisiana, USA. In 2001, he returned to his home country, Belgium, and began working as an IT trainer. He soon acquired the title of Adobe Certified Instructor on Dreamweaver, Coldfusion, Acrobat, and Captivate, which allowed him to work for various Adobe-authorized training centers in Europe and participate in many web- and eLearning-related projects for countless customers. In 2009, he went back to teaching in a school. He now works at IHECS, a higher education school of communications, based in Brussels, where he teaches Multimedia and serves as the eLearning Coordinator of the school. Thanks to his work at IHECS, Damien became an Adobe Education Leader in November 2011. Damien also owns a company that provides Adobe Training and eLearning consultancy. He authored Mastering Adobe Captivate 6 and Adobe Captivate 7 for Mobile learning , published in August 2012 and August 2013, respectively, by Packt Publishing. He lives in Thuin (Belgium) with his fiancée and his two children. Damien is a big music lover and occasionally works as a sound and light technician in the entertainment industry. You can follow him on Twitter at @damienbkx  and contact him by visiting his website at http://www.dbr-training.eu.

Books From Packt


Adobe Captivate 7 for Mobile Learning
Adobe Captivate 7 for Mobile Learning

Mastering Adobe Premiere Pro CS6 Hotshot
Mastering Adobe Premiere Pro CS6 Hotshot

Mastering Adobe Captivate 6
Mastering Adobe Captivate 6

Instant Adobe Story Starter
Instant Adobe Story Starter

Adobe Edge Quickstart Guide
Adobe Edge Quickstart Guide

Learning Adobe Muse
Learning Adobe Muse

Instant Adobe Edge Inspect Starter
Instant Adobe Edge Inspect Starter

 Learning Adobe Edge Animate
Learning Adobe Edge Animate


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software