Publishing the project for mobile

Exclusive offer: get 50% off this eBook here
Adobe Captivate 7 for Mobile Learning

Adobe Captivate 7 for Mobile Learning — Save 50%

Create mobile-friendly and interactive m-learning content with Adobe Captivate 7

$20.99    $10.50
by Damien Bruyndonckx | August 2013 |

In this article by Damien Bruyndonckx, author of Adobe Captivate 7 for Mobile Learning, we will cover the publishing step, which is the third and last step of the typical Captivate production workflow.

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

Standard HTML5 publishing

You will first publish your project using the standard HTML5 publishing options:

  1. Open the HDSB_publish.cptx file.
  2. Click on the publish icon situated right next to the preview icon in the main toolbar. Alternatively, you can also go to the File | Publish menu item.

    The Publish dialog contains all of the publishing options of Captivate 7, as shown in the following screenshot. In the left column of the dialog, of six icons marked as 1, represent the main publishing formats supported by Captivate. The area in the center, marked as 2, displays the options pertaining to the selected format.

  3. Take some time to click on each of the six icons of the left column one-by-one. While doing so, take a close look at the right area of the dialog to see how the set of available options changes based on the selected format.
  4. When done, return to the SWF/HTML5 format, which is the first icon at the top of the left column.
  5. Type hdStreet_standard in the Project Title field.
  6. Click on the Browse button associated with the Folder field and choose the /published folder of your exercises as the publish location.
  7. In the Output Format Options section, make sure that the HTML5 checkbox is the only the one selected.

    If necessary, adjust the other options so that the Publish dialog looks like the previous screenshot.

  8. When ready, click on the Publish button at the bottom-right corner of the dialog box to trigger the actual publishing process.

    This process can take some time depending on the size of the project to publish, and on the overall performances of your computer system. When done, Captivate displays a message, acknowledging the successful completion of the publishing process and asking you if you want to view the output.

  9. Click on No to close both the message and the Publish dialog.
  10. Make sure you save the file before proceeding.

    Publishing your project to HTML5 is that easy! We will also use Windows Explorer (Windows) or Finder (Mac) to take a closer look at the generated files.

Examining the HTML5 output

By publishing the project to HTML 5, Captivate has generated a whole bunch of HTML, CSS, and JavaScript files:

  1. Use Windows Explorer (Windows) or Finder (Mac) to go to the /published/hdStreet_standard folder of your exercises.

    Note that Captivate has created a subfolder in the /published folder we specified as the publish destination. Also notice that the name of that subfolder is what we typed in the Project Title field of the Publish dialog.

    The /published/hdstreet_standard folder should contain the index.html file and five subfolders, as illustrated by the following screenshot:

    • The index.html file is the main HTML file. It is the file to open in a modern web browser in order to view the e-learning content.
    • The /ar folder contains the audio assets of the project. These assets include the voice over narrations and the mouse-click sound in .mp3 format.
    • Every single HTML5 Captivate project includes the same /assets folder. It contains the standard images, CSS, and JavaScript files used to power the objects and features that can be included in a project. The web developers reading these lines will probably recognize some of these files. For example, the jQuery library is included in the /assets/js folder.
    • The /dr folder contains the images that are specific to this project. These images include the slide backgrounds in .png format, the mouse pointers, and the various states of the buttons used in this project.
    • Finally, the /vr folder contains the video assets. These include the video we inserted on slide 2, as well as all of the full motion recording slides of the project.

    All of these files and folders are necessary for your HTML5 project to work as expected. In other words, you need to upload all of these files and folders to the web server (or to the LMS) to make the project available to your students. Never try to delete, rename, or move any of these files!

  2. Double-click on the index.html file to open the project in the default web browser.
  3. Make sure everything works as expected. When done, close the web browser and return to Captivate.

    This concludes our overview of the standard HTML5 publishing feature of Captivate 7.

Testing the HTML5 content

Producing content for mobile devices raises the issue of testing the content in a situation as close as possible to reality. Most of the time, you'll test the HTML5 output of Captivate only on the mobile device you own, or even worse, in the desktop version of an HTML5 web browser. If you are a Mac user, I've written a blog post on how to test the Captivate HTML5 content on iOS devices, without even owning such a device at http://www.dbr-training.eu/index.cfm/blog/test-your-html5-elearning-on-an-ios-device-without-an-ios-device/.

Summary

You learned about the publishing step of the typical Captivate production work flow. You learned how to publish your project using the standard HTML5 publishing options. We also used Windows Explorer (Windows) or Finder (Mac) to take a closer look at the generated files. By publishing the project to HTML 5, Captivate has generated a whole bunch of HTML, CSS, and JavaScript files.

Resources for Article:


Further resources on this subject:


Adobe Captivate 7 for Mobile Learning Create mobile-friendly and interactive m-learning content with Adobe Captivate 7
Published: August 2013
eBook Price: $20.99
Book Price: $34.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


Mastering Adobe Captivate 6
Mastering Adobe Captivate 6

Adobe Flash 11 Stage3D (Molehill) Game Programming Beginner’s Guide
Adobe Flash 11 Stage3D (Molehill) Game Programming Beginner’s Guide

Learning Adobe Edge Animate
Learning Adobe Edge Animate

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

Learning Adobe Connect 9
Learning Adobe Connect 9

Adobe Edge Quickstart Guide
Adobe Edge Quickstart Guide

Learning Adobe Muse
Learning Adobe Muse

Instant Adobe Edge Inspect Starter [Instant]
Instant Adobe Edge Inspect Starter [Instant]


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
e
M
h
h
F
n
Enter the code without spaces and pay attention to upper/lower case.
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