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.
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.
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.
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.
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.
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.
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!
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.