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.
That’s an excellent demo video Dustin. Thanks!
Dustin: your video was excellent to me. Once I watched it I inmediately started to do it but I got a surprise: when I started cp-HTML5 converter this message pop up: HTML expired. Contact Adobe support for further assistance. I contact support and they explained because this is a beta version etc… Do you have any other suggestion? Any other similar program (would Sothink converter do that?)?
Thanks,
Yeah, everyone is getting that message. I saw it yesterday when trying to demo a couple things to a co-working. I guess the tool was set to expire on 1/31/12. Typically Adobe updates the technologies on their Labs site before the expiration hits (so you download the updated version). I’m not sure why they haven’t yet (and what they are doing to fix this). There’s a thread that started yesterday in their forum: http://forums.adobe.com/thread/957096
My guess is that we’ll see an update soon (hopefully today or tomorrow). They are probably scrambling a bit since this just came up yesterday.
Looks like a new HTML5 converter will be uploaded today to Adobe Labs: https://twitter.com/#!/poojajaisingh/status/165320196238741504
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)?
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.
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)…
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.
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!
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.
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.
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.
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.
Thanks for the video, it was very informative.
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!
Thank you for the excellent video!
I’m trying to replicate this for my project, however, I am unable to publish my project into a SWF file. In the publish option, Export to HTML is pre-selected and greyed out. My captivate version is 5.5
Any idea why this is so?
Hi Siew – On the left side of the publish window, do you have “SWF” selected (it’s the TOP option). Once that is selected, all the other options should be available.
Hello Dustin,
Great video!
I trying to do something similar, however i need my final native app to be able report scores of a quiz taker to my remote mysql database from the mobile device through its internet connect… the HTML5 converter continually fails to render out my “internal server” setting and the ‘post results’ button from the captivate flash file.. i’m thinking i can code this back into the exported HTML5 files before using phonegap to create the native app but i’m clueless on how to do this…any ideas please?
Hey Silas – Yeah, reporting is still tricky with native apps. The problem is the traditional code added into the HTML assumes the file is running on the server. In order for this to work correctly with an LMS, the user would have to enter their username/password in the app. The app would log them in to the server and pass the data back and forth. Lots of coding involved there. If you are just tracking some generic input (i.e. it’s a form they are filling out), it’s a bit easier, but you’d still need to write some code to capture that input and send it to your server. And yes, you would need to write this before the phone gap step.
By the way, I’ll be uploading another video shortly showing a slightly different process of building and app that might help.
Hello Dustin,
Thanks for the intel! And your new video on offline HTML5 app dev makes good sense, great job!
However, I really need to get my app as a native app for the Ipad,Andriod & BB platforms (or is there a way to secure the source code of your offline HTML5 app?) that has the ability to send quiz results back to my server.. so, i guess there is no option but to code the reporting function into my HTML5 before ‘phonegaping’ it right? … would be so kind as to point my in the direction of where i can get any tutorial or clue that will help me with this reporting coding please?…
Dustin – excellent tutorial and thanks for the time saving shortcuts. Question – I’ve got it all onto my iPad no problem. However, it seems the ‘controls’, forward, back, play are interfering with some native iPad controls. Seems to only happen in portrait mode. My project was based on about 13 .pptx slides. It worked fine as the .swf file in google chrome. Can’t figure this one out.
Thanks in advance, Craig
whoops, I meant in landscape mode.
Hey Craig – yes, this is sort of a known issue. You don’t have a lot of customization with the controls (or placement) right now. I’m sure that will be very customizable once this feature is finalized. One tip is to make the height of your Captivate project 748 instead of 768. The status bar at the top of the iPad is 20px and it causes your content to get pushed down.
I’ve been following the instructions on your video for converting Captivate files to IPad apps, but the PhoneGap stage always gives me a “File too large” error. What is the max file size for conversion to an app?
Currently the maximum file size for your ZIP file is 10MB with PhoneGap Build. Once they are out of “beta”, I would expect this limit to increase. You can always try the regular PhoneGap tool which can be downloaded from http://phonegap.com/ (upper right corner). Keep in mind that you need to be on a Mac to publish iOS.
Thank you for the information. Just want to clarify: I need to be on a Mac for the step in PhoneGap, or from the publishing in Captivate?
You need to be on a Mac for the PhoneGap step if you want to make an iOS app. PhoneGap Build (the online version) lets you produce all the mobile apps in the cloud, but currently has the 10MB limit.
Quick question DUSTIN. It seems like the iPAD apps wouldn’t be accepted by Apple if published, and you have a developer account, eventhough they work. They don’t meet Apple’s HIG (human interface guidelines). I created a basic quiz off of a template, but doubt they’d except it for the following reasons.
1) There’s no way to close the application. I’m sure code could do this but it’s not supported in the converter.
The app is a good POS at the moment, but I’m looking for a VIABLE elearning solution now using captivate preferably. I have a developer account already.
T – Have you tried submitting your app? If you already have the developer account, it might be worth a try. Obviously the converter is pretty limited right now, and truthfully, publishing it to a native iOS app is REALLY pushing it to it’s limits because it was originally meant for publishing content to an LMS. Hopefully Captivate 6 will give us some additional support, but for now, the only option is to crack open the HTML files and write a little JavaScript to do what you need it to do.