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:
The Publish dialog box opens, as shown in the following screenshot:
The Publish dialog box is divided into four main areas:
We will now move on to the actual publication of the project in Flash Format.
When Captivate has finished publishing the movie, an information box appears on the screen asking if you want to view the output.
We will now use the Finder (Mac) or the Windows Explorer (Windows) to take a look at the files Captivate has generated.
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.
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.
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.
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:
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.
When Captivate has fnished publishing the movie, an information box appears on the screen asking if you want to view the output.
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 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.
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:
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.
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.
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:
This is the single most important setting of the entire procedure. Note that you can select both the SWF and the HTML5 options.
Captivate informs us that some features used in this project are not supported in 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.
We will now use the Windows Explorer (Windows) or the Finder (Mac) to take a closer look at the generated files.
You should find a bunch of files and folders in the publish/encoderDemo_800_ HTML5 folder, as follows:
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.
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.
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
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:
When the publishing process is complete, a message tells you that Acrobat 9 or higher is required to read the generated PDF file.
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.
In the next section, we will explore the third publishing option of Captivate: 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:
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.
When the publish process is complete, an information box will ask you if you want to see the generated output.
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.
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.
I remember deciding to pursue my first IT certification, the CompTIA A+. I had signed…
Key takeaways The transformer architecture has proved to be revolutionary in outperforming the classical RNN…
Once we learn how to deploy an Ubuntu server, how to manage users, and how…
Key-takeaways: Clean code isn’t just a nice thing to have or a luxury in software projects; it's a necessity. If we…
While developing a web application, or setting dynamic pages and meta tags we need to deal with…
Software architecture is one of the most discussed topics in the software industry today, and…