Creating an iPad application with Captivate

UPDATE: Now that Adobe Captivate 6 is released, you do not need the “HTML5 Converter for Captivate”.  Simply use the HTML5 Publishing feature to publish the HTML/CSS/JavaScript to add into PhoneGap.

I’ve created a couple posts and videos about how to make an iPad application with Adobe Captivate.  This one is a winner though.  No command line hacks.  No complicated setup.  You can watch the video here.

In the video, I’m combining a few different technologies to make it happen:

  • Adobe Captivate: I made a simple Captivate project (1024×768) and published out an SWF (Flash) file. Download a free trial here
  • HTML5 Converter for Captivate: Free experimental tool you can download from Adobe Labs that converts a Captivate SWF file to HTML/CSS/JavaScript. Click here do download it.
  • PhoneGap Build: PhoneGap packages HTML/CSS/JavaScript as native mobile applications for lots of different platforms.  For more information, click here

Couple notes:

  • Hopefully, a tool like the HTML5 Converter for Captivate would be integrated as a publish setting in Captivate.  Nothing official has been announced about this, but you would think it would be an obvious move.
  • On the Adobe Labs website, the page you download the converter has some documentation about what works and what doesn’t.  Not all features in Captivate are supported yet.
  • You don’t have to use PhoneGap to produce content for the iPad.  After converting your SWF file, you could create a SCORM bundle from the output and add that into your LMS or any other website.  It’s just HTML at that point.
  • I’m using TestFlightApp.com do put the app on our iPad.  You can also sync the app in iTunes.

 

 

15 Responses to Creating an iPad application with Captivate

  1. That’s an excellent demo video Dustin. Thanks!

  2. I just a comment/question at your video on youtube. I’ll repeat it here:

    This is for a SCORM course. I got this to work for a very simple captivate project. The project contains no audio or video. It is simple slides and a quiz. It seems right now the only issue/bug I’m experiencing is a sizing issue. The first slide shows up ok although its a bit big and I lose about an inch off the bottom. The other slides get cut off and only show a small portion with the remaining screen real estate being blank. Any suggestions? A quick search on google shows no solutions.

    • I responded on the YouTube Channel, but I’ll put it here too: Did you setup your Captivate project to be 1024×768 (width and height)?

  3. Yes, I started the project over and chose the ipad preset from the start. I’m still getting errors. I’m not sure the captivate converter will work for use in SCORM because unlike an app, it has to be viewed in the Safari browser for the ipad and I’m having all sorts of errors and sizing issues.

    The project is only simply for slides and quiz questions. There is no video, audio or flash widgets so I’m keeping it pretty basic.

    My conclusion at this point is that it simply does not work for use in the iPad for SCORM. I’d be happy to send my project to anyone for review or send them a SCORM invite so they can run the project via iPad.

  4. Actually, can you zip up your Captivate project and post it on a server (your source file). I’ll like to look at the source and see if it’s a document setting (or if the same thing happens to me)…

  5. Here you go.
    http://www.swankhealth.com/courses/ardent/iPadNew.zip

    The only thing different I think I’m doing from your video is creating an app. My project is going to scorm and needs to run on an ipad.

  6. Any thoughts on this? Just got back in from the holiday break. Unless you can figure something out I am doing wrong, I guess it will be safe to conclude that Captivate cannot render out HTML5 for use in SCORM on an iPad.

    • I played with this a bit this morning. Firstly, I assume you are NOT using PhoneGap to make a native application if you are trying to get SCORM to work. SCORM won’t work if you are making a native app since it doesn’t know where the server is. SCORM will only work if you uploaded the zipped course to your LMS and browse to it with your iPad’s browser.

      Next, when in your quiz preferences, you’ll want to change them to “Report to LMS as: Score” and “Reporting Level: Interactions and score”. Yours weren’t set to this and, in the release notes, it mentions those are the only supported options.

      When you publish out your course from Captivate, make sure you select “ZIP Files”. This will bundle the SWF with all the SCORM stuff. You then select this ZIP file with the HTML5 Converter. It will convert everything in to a folder (i.e. iPadNew_AppleiPad). You zip up this folder and put it in your LMS.

      Speaking of the LMS, the release notes mention only Moodle and cloud.scorm.com were tested. It *should* work with others, but for now, those are the proven LMS’s

      Finally, I misspoke about the size. 1024×768 is the resolution if you are making a NATIVE applications. However, since you need this to run in the LMS (and in the browser), you loose screen real estate. For example, if you are using Moodle, you can’t have your course’s height be more than 300 (since the iPad’s height is only 768 and the browser/moodle add graphics that eat up space). If the course could display “full screen”, your size would work, but that’s not possible right now.

      Hope this helps!

  7. Thanks. The guys over at Adobe suggested I try 980×660 instead as people have had good results with that. I’m still getting the bottom chopped off but I will try to export like you suggested and see if that helps. I can’t wait for this to move out of BETA. There is a lot of demand out there for this.

  8. I followed your procedure concerning the zip files and I think that worked much better as well as your other notes. I found the release notes as well. However the slides are still being cut off so that I can’t see slide content or the controls to the quiz questions.

    ALSO, As I select the correct quiz answers, the results say that I failed the test and answered incorrectly. AGH!

    I’d be happy to send you an invite to http://cloud.scorm.com so you can see the course run for yourself. You will need to send me your email address.

  9. Thanks for the blog post and video – very informative. Perhaps I missed this though, you said that you would make the .xml description file required available for download on this blog post. Is it somewhere hidden? Thanks for any responses!

    • @Rich – In the PhoneGap video, I don’t think I was using an XML file. If you are referring to the video I did a while back (using the command line to build an iPad app), I got that XML file from Flash CS5.5. I made a blank AIR for iOS project and Flash generated that file for me.

  10. Thanks so much for putting this together, I’d planned to research and test all this for my afternoon. You answered 90% of my questions in 15 mins while I ate my lunch. I’ve saved half a day or more. Mental note to self: when I figure out cool stuff – share. It’s always appreciated.

  11. Thanks for the video, it was very informative.

  12. Excellent video Dustin – thanks so much for taking the time to share your knowledge. I’ll be testing this soon (via TestFlight) as well as via SCORM (for Moodle) and adjusting the settings for resolution per your comments above. Bravo!