Indesign eBook creation using Adobe Captivate 6 & HTML5

I’ve been working on a project with the aim of developing some interactive eBooks which I would love to sell via Apples App store in the future. For those of you reading this who have never used Adobe Captivate 6 before (part of the Adobe eLearning suite), its a great piece of software which allows you in the simplest form to do screen recordings with narration, but once you delve deeper into the software it allows you to create all sorts of interactive tutorials, presentations, quizzes, etc.

My aim is to export an interactive tutorial and embed it into an iPad eBook created in InDesign CS6. I couldn’t find very much information regarding this so thought I might share my findings here to help anyone else trying to do the same thing. The main problem in previous versions of Captivate was that everything had to be exported as Flash files – as most people know, Apple doesn’t support .swf files for lots of good reasons. In the CS6 version you can export your work as HTML5 (iPad likes this!) for pretty much the same results (minus one or two features not supported by HTML5.

Anyway, heres a quick step-by-step guide to embedding a Captivate 6 tutorial in a InDesign book to work on the iPad, iPhone and pretty much every other device which supports HTML.

Captivate Export

Adobe Captivate CS6 – using the HTML5 tracker on your project to check for any unsupported interactivity in HTML5

1. The first thing you need to do is create your Adobe Captivate project – i’m not going into detail on this, their’s lots of information out there on how to do this on the internet. The most important thing to remember when creating you project is to use the HTML5 tracker feature which is under the Window menu. This will flag up any errors in your projects which HTML5 will not support. Once your happy with the work it’s time to Publish. You may also want to resize your project to the iPad screen size in the resize project menu item.

2. Open up the Publish menu which is under File > Publish. Click on the SWF/HTML5 export options, untick the .swf and .zip tick box. Make sure that Scalable HTML content is not selected. You will not need to resize the window in the iPad. Choose a folder to export to and click Publish.

Captivate Publish

The settings used to publish HTML5 in InDesign CS6

3. Once you have exported your project it will create a folder with all the required files. Click on the index.html file and open in your favourite HTML or text editor.

Export Edit

4. This part looks harder than it is in practice. You need to remove a few lines of code from each exported project. This does a browser check and flags up an error on the iPad if it is not removed. So highlight the HTML from <script> to </script> and remove the following lines of code.

DreamWeaver Edit

Delete the text highlighted to remove the browser check.

5. Save the index.html file and open InDesign and create your project. Again, I wont go through this section in detail, but create a new project for the iPad and insert and box. Select the Folio Overlays menu and select the Web Content overlay. Choose your index.html file (make sure you leave all the files in the folders as exported) and click ok.

Indesign Overlay

Web overlays in InDesign CS6

6. Once you have added all your content you need export your project for preview. As I speak, do not use the Adobe Content Viewer on the Mac for this as it repeatedly crashes and doesnt preview the work properly, I could not find any satisfactory response from Adobe on this matter, so I will assume it is a bug which they will fix in the future. Click on Folio builder, sign in (you will need a Adobe Digital Publishing Suite account – free I think, and the latest version of Adobe DPS), create your portfolio adding any additional documents as required.

Indesign Folio

7. Download the Adobe Content Viewer app for your iPad and Log In. When you log in if everything is successful you should see your published document. Click on it to load, and if you have followed these instructions, hopefully it will open and your content will work!

Demo Splash screen

IMG_0084

Heres a couple of screenshots of some Apple Logic Demo training I have created for the iPad. At the moment it is a proof-of-concept more than anything else as this was a major hurdle I wanted to overcome before delving too deep into the project creation. I hope this is of some help, to someone, if you have any questions as always drop a comment below! Hopefully my app will be finished in the near future.

Advertisements

3 responses to “Indesign eBook creation using Adobe Captivate 6 & HTML5

  1. this is what i was looking for.. thank u so much for your explanation and testing indesign and captivate connections. I got really frustrated when i saw publishing swf then convert it to html5 and play buttons like a video. I think this is the whole thing what we imagine. cant wait to start.. can we see your project? thank you…

  2. Hi! Can you tell me how this ebook can be shared with other people? Can they just download the ebook file and an appropriate ebook reader software?

  3. Hi. I see that this blog was posted back in Mar 2013. I’m wondering, how are you doing this now with the new DPS 2015? I’m big on DPS and new to e-learning so Captivate is something I’d like to integrate into a DPS project.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s