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 still is 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, we will publish our movie in Flash format using the default options:

1. Return to the Chapter06/encoderDemo_800.cptx file.
2. Click on the Publish icon situated right next to the Preview icon. Alternatively, you can also use the File | Publish menu.

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

   

    

   The Publish dialog box is divided into four main areas:

   • The Publish Format area (1) – This is where we choose the format in which we want to publish our movies. Basically, we can choose between three options: SWF/HTML5, Media, and Print. The other options (E-mail, FTP, and so on) 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 us back to the various project preferences boxes.
   • The Advanced Options area (4) – This area provides some additional advanced publishing options.

   We will now move on to the actual publication of the project in Flash Format.
3. In the Publish Format area, make sure the chosen format is SWF/HTML5.
4. In the Flash(.swf) Options 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 Chapter06/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 if you want to view the output.

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

We 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 (Window) to browse to the Chapter06/Publish folder of your exercises.

Because we selected the Publish to Folder checkbox in the Publish dialog, Captivate has automatically created the encoderDemo_800_flash subfolder in the Chapter06/ Publish folder.

11. Open the encoderDemo_800_flash subfolder to inspect its content.
    • 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 embed the Flash file
    • standard.js – is a JavaScript file used to make the Flash player work well within the HTML page
    • demo_en.flv – is the video file used on slide 2 of the movie
    • captivate.css – provides the necessary style rules to ensure the proper formatting of the HTML page

    If we 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 CS6 is the HTML editor of the Creative Suite 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 our 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 on the HTML page. That’s it!

    We will now test the movie in a web browser. This is an important test as it recreates the conditions in which our students will experience our movie once in production.

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

Now that we have experienced the workfow of publishing our project to Flash with the default options, we will add some changes into the mix and create a scalable version of our project.

Scalable HTML content

One of the solutions about choosing the right size for our project is to use the new Scalable HTML content option of Captivate 6. Thanks to this new option, our eLearning content will be 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 Chapter06/encoderDemo_800.cptx file.
2. Click on the Publish icon situated right next to the Preview icon. Alternatively, you can also use the File | Publish menu.
3. In the Publish Format area, make sure the chosen format is Flash(.swf) Options area.
4. In the Flash(.swf) Options area, 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 still is the Chapter06/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.

A message informs you that object refection is not supported in scalable content. We used object refection on slide 3 to enhance the AMELogo image.

9. Click on Yes to discard the message and start the publishing process.

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

10. 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 our movie is also resized in order to ft the browser window. Also notice that the refection effect we used on the AMELogo image has been discarded.

Publishing to HTML5

Publishing to HTML5 is the killer new feature of Captivate 6.

One of the main goals of HTML5 is to provide a plugin free paradigm. It means that the interactivity and strong visual experience brought to the Internet by the plugins should now be supported natively by the browsers and their underlying technologies (mainly HTML, CSS, and JavaScript) without the need for an extra third-party plugin. Because a plugin is no longer necessary to deliver rich interactive content, any modern browser should be capable of rendering our interactive eLearning courses. And that 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 us, the Captivate users and eLearning developers. Thanks to HTML5, our students will be able to enjoy our 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-in-elearning-training-education.html by 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

At the time of this writing (June 2012), HTML5 is still under development. Some parts of the HTML5 specification are already final and well implemented in the 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, we will use the HTML5 tracker to better understand what features of our Encoder Demonstration are supported in HTML5:

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

The HTML5 Tracker informs us that some features that we used in this project are not (yet) supported in HTML5, as shown in the following screenshot:



On slide 1 and slide 22, the Text Animations are not supported in HTML5. Same thing for the three orange arrow animations we inserted on slide 5.

3. Close the HTML5 Tracker panel.

A comprehensive list of all the objects and features that are not yet supported in the HTML5 output is available in the offcial Captivate Help at http://help.adobe.com/en_US/captivate/cp/using/WS16484b78be4e1542-74219321367c91074e-8000.html. Make sure you read that page before publishing your projects in HTML5.

In the next exercise, we will publish a second version of our Encoder Demonstration using the new HTML5 publishing option.

Publishing the project in HTML5

The process of publishing the project to 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 use the File | Publish menu item to open the Publish dialog box.
3. In the left-most 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 Chapter06/publish folder of the exercises as the publish location.
6. Make sure the Publish to Folder checkbox is selected.
7. In the Output Format Option section, select the HTML5 checkbox. Once done, uncheck the SWF checkbox.

This is the single most important setting of the entire procedure. Note that you can select both the SWF and the 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 settings and click on the Publish button.

Captivate informs us that some features used in this project are not supported in HTML5.

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 in slide 2 and the Full Motion Recording of slide 13 to the .mp4 format.

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

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

We 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 Chapter06/publish/encoderDemo_800_HTML5 folder of the exercises.

    You should find a bunch of files and folders in the publish/encoderDemo_800_ HTML5 folder, as follows:

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

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

    Supported browsers and OS for HTML5 On the desktop, the HTML5 version of our eLearning project requires Internet Explorer 9 or later versions, Safari 5.1 or later versions, or Google Chrome 17 or later versions. For mobile devices, HTML5 is supported on iPads with iOS 5 or later versions. Make sure you use one of the browsers mentioned for the testing phase of this exercise.

13. Open the .index.html. file in one of the supported browsers.

When testing the HTML5 version of the project in a web browser, notice that the unsupported Text Animations of slide 1 and 22 have been replaced by a standard Text Caption with a Fade In effect.

• On slide 3, the effect we added on the AMELogo image is not reproduced in the HTML5 output. Surprisingly, this was not mentioned in the HTML5 tracker panel.
• On slide 5, the unsupported orange arrows Animations have been replaced by static images.
• On slide 16, the zooming animation is supported, but Text Captions that should be invisible are showing in the Zoom Destination area.

Apart from the few problems mentioned in the previous list, Captivate 6 does a pretty good job in converting our 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 specifcation will be finalized and new techniques, tools, and framework will emerge. We will then be able to better implement HTML5 across devices, both in Captivate and throughout the entire Internet

Publishing to PDF

Another publishing option available in Captivate is to publish our project as an Adobe PDF document. This process is very close to the Flash publishing process we covered previously. When converting to PDF, Captivate first converts the project to Flash and then embeds the resulting .swf file in a PDF document. To read the Flash file embedded in the PDF document, the free Adobe Acrobat Reader simply contains a copy of the Flash player.

Publishing the Captivate project to PDF is a great way to make the eLearning course available offline. The students can, for example, download the PDF file from a website and take the course in a train or in an airplane where no Internet connection is available. On the other hand, as the Captivate movie can be viewed offline, any Captivate feature that requires an Internet connection (such as reporting the scores to an LMS (Learning Management System)) will not work!

In the following exercise, we will publish the Encoder Demonstration to PDF:

1. Return to the Chapter06/encoderDemo_800.cptx file.
2. Click on the Publish icon situated right next to the Preview icon. Alternatively, you can use the File | Publish menu item.
3. In the Publish Format area, make sure the chosen format is SWF/HTML5. If needed, deselect the HTML5 checkbox and make sure the .SWF checkbox is the only one selected.
4. In the Flash(.swf) Options area, change the Project Title to encoderDemo_800_pdf.
5. Make sure the publish Folder still is the Chapter06/Publish folder of the exercises.
6. Make sure the Publish to Folder checkbox is still selected.
7. At the end of the Output Format Options area, select the Export PDF checkbox.
8. Click on the Publish button situated in the lower-right corner of the Publish dialog.

When the publishing process is complete, a message tells you that Acrobat 9 or higher is required to read the generated PDF file.

9. Click on OK to acknowledge the message. A second information box opens.
10. Click on No to discard the second message and close the Publish dialog.
11. Use the Finder (Mac) or the Windows Explorer (Windows) to browse to the Chapter06/publish/encoderDemo_800_pdf folder.

There should be six additional files in the Chapter06/publish/encoderDemo_800_ pdf folder. Actually, publishing to PDF is an extra option of the standard publishing to Flash feature.

12. Delete all but the PDF file from the Chapter06/publish/encoderDemo_800_ pdf folder.
13. Double-click on the encoderDemo_800_pdf.pdf file to open it in Adobe Acrobat.
14. Notice that the file plays normally in Adobe Acrobat. This proves that all the necessary files and assets have been correctly embedded into the PDF file.

In the next section, we will explore the third publishing option of Captivate: publishing as a standalone application.

Publishing as a standalone application

When publishing as a standalone application, Captivate generates an .exe file for playback on Windows or an .app file for playback on Macintosh. The .exe (Windows) or .app (Mac) file contains the compiled .swf file plus the Flash player.

The advantages and disadvantages of a standalone application are similar to those of a PDF file. That is, the file can be viewed offline in a train, in an airplane, or elsewhere, but the features requiring an Internet connection will not work.

In the following exercise, we will publish the Captivate file as a standalone application using the following steps:

1. If needed, return to the Chapter06/encoderDemo_800.cptx file.
2. Click on the Publish icon situated right next to the Preview icon. Alternatively, you can use the File | Publish menu item.
3. Click on the Media icon situated on the left-most column of the Publish dialog box. The middle area is updated.
4. Open the Select Type drop-down list. If you are on a Windows PC, choose Windows Executable (*.exe) and if you are using a Mac, choose MAC Executable (*.app).
5. If needed, change the Project Title to encoderDemo_800.
6. In the Folder field, make sure that the Chapter06/Publish folder still is the chosen value.

Take some time to inspect the other options of the Publish dialog. One of them allows us to choose a custom icon for the generated .exe (Win) or .app (Mac) file.

7. Leave the other options at their current value and click on the Publish button.

When the publish process is complete, an information box will ask you if you want to see the generated output.

8. Click on No to clear the information message and to close the Publish dialog.

Now that the standalone application has been generated, we will use the Finder (Mac) or the Windows Explorer (Win) to take a look at the Chapter06/Publish folder.

9. Use the Finder (Mac) or the Windows Explorer (Windows) to browse to the Chapter06/Publish folder of the exercises.
10. Double-click on the encoderDemo_800.exe (Win) or on the encoderDemo_800.app (Mac) to open the generated application.

Our Captivate movie opens as a standalone application in its own window. Notice that no browser is necessary to play the movie.

This publish format is particularly useful when we want to burn the movie on a CD-ROM. When generating a Windows executable (.exe), Captivate can even generate an autorun.ini file so that the movie automatically plays when the CD-ROM is inserted in the computer.