How to insert an HTML5 game template into a Captivate HTML course.

By on January 17, 2012

One question that we have had a lot lately is how to insert one of our custom games from our Interaction Builder into a Adobe Captivate HTML course. In this post I wanted to take you through step by step how you would get your game into a publish Captivate HTML project.

There really is no way within Captivate itself to insert the external HTML. You can link to it but it takes you out of your Captivate course completely with really no way to get back to the course unless you link back to it within your HTML. While that is an option it just never seemed like a really good option to me so I was determined to find a better way and stumbled upon an app that I didn’t even know I had until now.

This App is an Air app and comes packaged with your Captivate CS6 product. The app is called Adobe Captivate App Packager and it allows you to insert external HTML made from other tools such as Adobe Edge Animate or the eLearning Brothers Interaction Builder into a page rather than just link to an external website. In this tutorial I am going to show you how to use this app with one of the HTML 5 games built in the Interaction Builder.

Step 1: Create your project in Captivate and leave room for your external HTML

The first step might seem obvious but just want to make sure it is clear, especially since you need to leave room for external HTML within Captivate so you can easily place it within the App Packager. In this example I have created a sample 2 page Captivate course.

On the first page I just have some simple text but on the second page I am going to just insert a slide with nothing on it. Now I could have something here but keep in mind you need to know the size of your HTML file you are going to insert so you can make sure you have enough room for the file to play. The size of the HTML5 output from the Interaction Builder is 720×540. You could even place a square or something as a place holder.

Step 2: Publish the course has HTML

From Captivate you need to publish the course as an HTML course. You do this in the normal publish area or go to File > Publish. This will bring up the standard publish window for Captivate. Under the Output Format Options check the option for HTML5.

Step 3: Build publish from the Interaction Builder

If you are bringing a game from the Interaction Builder then you will need to build the game there first and then export it from the Interaction Builder as HTML5.

If you unzip and look inside the downloaded folder you will see 3 different items, 2 folders and 1 HTML file called the index.html. This file is key when you insert it inside the App Packager so keep that in mind as we go onto the next step.

Step 4: Launch the Captivate App Packager

The Captivate App Packager can be found in your start menu or Applications folder. You will need to launch this app and browse for your published HTML Captivate course.

You will notice a big Browse button right in the middle of the app when you launch it. Click on this button to find your published HTML Captivate course. It will launch a finder and just navigate to the Captivate course folder. You do not need to select a file just have the course folder selected.

Once the course is imported you will see the full interface of the App Packager. On the left will be your Captivate slides, in the middle is the view of the selected slide. On the top right is where you can insert your own HTML or Adobe Edge Animate interaction. Every imported file gets inserted inside of the library incase you need to use it in more than one location.

Step 5: Import your custom HTML

In this next step you will need to insert your customer HTML. For games downloaded from the Interaction Builder you will need to point to the folder that as downloaded it is the folder that has the index.html file in it. It then copies any other folders inside of your published course so you don’t need to worry about moving over any files.

The insert button then becomes active. You navigate to the page in your Captivate course that you left open and click insert on that page. It will place a black box on the stage that you can move and transform. You may still see a “loading” message on the screen. Keep in mind these games need to still be on a server to see a preview but at this point we are just placing where the game will be.

Change the timing to be the rest of the slide or else your game may disappear after a little while.

Step 6: Publish your course

That is it! Now all you do is select the Captivate logo down at the bottom and hit publish. To see where your course will be published click on the gear icons for the settings. You can leave it to its default or change the publish location. Hit publish and this will be your new course with your HTML in the package. You can now take the published course and upload it to your own server to test or to an LMS.

 Check out the video below: