Publish Captivate 5 to the iPhone/iPad

UPDATE: Adobe has just posted an “experimental technology” that allows Captivate 5.5 content to be exported to HTML5.  This would allow iPhone and iPad users to view Captivate content natively in a web browser: http://labs.adobe.com/technologies/captivate_html5/

UPDATE 2: Adobe has just posted a MUCH better way to do this: http://bit.ly/sIroGS

Captivate 5 shipped with an extra option in the publish settings: Enable SWF for conversion to iPhone application.

However, there isn’t a a lot of documentation to support this feature.  If you check this box, you still end up with and SWF…not an iPhone/iPad app.  I just posted a video demonstrating what this feature is all about and how to actually create an iPad application (Sorry, YouTube sort of wrecked the quality upon upload…watch it in HD for a little better quality).  In the video I used a pre-existing Captivate project just to demonstrate that it will work with any project.  This post accompanies the video by supplying a few additional resources.  Also, there are a few nastly lines of text that must be typed in to the command line.  You can copy/paste them below.

Please note: This process is VERY primitive right now.  Hopefully, future versions of Captivate 5 will have better publish settings to make this process easier.  My goal is to show what’s currently possible.

So watch the video for the full details.  The resources below are some additional tips and time savers.

The Process

  • iOS Developer Account- This isn’t shown in the video, but you can get more information here. You also need to buy a developer certificate.  Once that’s done, you can download a mobileprovisioning file and create a p12 key.  Follow the above link for details.
  • Create a 1024×768 Captivate project and publish the project with Enable SWF for conversion to iPhone application checked.
  • Add Descriptor file – Download this zip file and copy the XML file inside it to the same directory as your SWF file. Fill out the id, name, and filename.  I also added some icons you can edit for the application icon (i left that part out of the video).
  • Download the Packager for iPhone – If you already have Flash CS5,  you can skip this part.  Once you’ve downloaded it you need to open a command/terminal prompt in the PFI/bin directory.  See the video for details. UPDATE: If you are using Flash CS5.5, you won’t find a PFI\bin directory.  You need to use the AIR2.6\bin\adt.bat file.  Open your command promt in the AIR2.6\bin directory and use the command line I added below for Flash CS5.5.
  • Run the following command in your command/terminal window.  Replace the ALL_CAPS text with your specific information.  See the legend below.

Flash CS5 users:

pfi -package -target ipa-app-store -provisioning-profile PATH_TO_MOBILE_PROVISIONING_FILE -storetype pkcs12 -keystore PATH_TO_P12_FILE -storepass PASSWORD PATH_TO_IPA_FILE PATH_TO_DESCRIPTOR_XML_FILE -C PATH_TO_SWF_DIRECTORY SWF_FILE Default.png Icon_48.png Icon_72.png
  • PATH_TO_MOBILE_PROVISIONING_FILE: Full path to the .mobileprovisining file from you iOS Developer account.
  • PATH_TO_P12_FILE: Full path to the .p12 file your created during your iOS developer setup.
  • PASSWORD: Password for your p12 file
  • PATH_TO_IPA_FILE: This is the location and name you want to save the IPA file when it’s created.
  • PATH_TO_DESCRIPTOR_XML_FILE: Full path to the XML descriptor file downloaded above
  • PATH_TO_SWF_DIRECTORY: This is the path to the folder that has your SWF and icon files
  • SWF_FILE: The name of the SWF file (i.e. Demo.SWF)

Flash CS5.5 users:

adt -package -target ipa-app-store -storetype pkcs12 -keystore PATH_TO_P12_FILE -storepass PASSWORD -provisioning-profile PATH_TO_MOBILE_PROVISIONING_FILE PATH_TO_IPA_FILE PATH_TO_DESCRIPTOR_XML_FILE -C PATH_TO_SWF_DIRECTORY SWF_FILE Default.png Icon_48.png Icon_72.png
  • PATH_TO_MOBILE_PROVISIONING_FILE: Full path to the .mobileprovisining file from you iOS Developer account.
  • PATH_TO_P12_FILE: Full path to the .p12 file your created during your iOS developer setup.
  • PASSWORD: Password for your p12 file
  • PATH_TO_IPA_FILE: This is the location and name you want to save the IPA file when it’s created.
  • PATH_TO_DESCRIPTOR_XML_FILE: Full path to the XML descriptor file downloaded above
  • PATH_TO_SWF_DIRECTORY: This is the path to the folder that has your SWF and icon files
  • SWF_FILE: The name of the SWF file (i.e. Demo.SWF)

 

Once, you’ve run the command, all you need to do is drag the IPA file into iTunes to sync it to your device.  Again, watch the video for details.  Hopefully Captivate will add some better tools to make this process easier, but for now, I hope this gets you started.

 

 

54 Responses to Publish Captivate 5 to the iPhone/iPad

  1. Very cool Dustin. If you had a video clip on one of your Captivate slides, would it package the video clip along with it in the iPad app? Or could the app link to a video on a server and stream it into the Captivate app? Just trying to see what the possibilities are. Thanks!

    • Yes, video is possible too. It get’s a little tricky with the packaging because you have to make sure the FLV is included in the bundle. Additional files are added after the icon in the command line statement. It could also stream a video in from a server.

  2. Many thanks for sharing these steps, I am one very grateful person. Thanks!

  3. I’m having a bit of trouble packaging the captivate swf with a quiz section. I get an error “Invalid input swf. Error executing : /Applications/Adobe Flash CS5/PFI/lib/aot/bin/llvm-ld”, when I don’t have the quiz it packages fine, any idea?

    • Hey Mark – The quiz I used in my demo was just simple multiple choice/true false questions. I haven’t tested it with any other types of questions. What types of questions did you have? Since this is basically a hack, I wouldn’t be surprised if there was some flaky errors.

  4. Thanks for your sharing. When I was trying to package the Cativate file, I canot find the PFI folder in the Flash directory. I’m now using the trial version of Flash CS5.5. Do you know how can I locate that pfi.bat file. Or can you email me that file?

    • Yes, it’s a bit different with CS5.5 since the Packager for iPhone is fully integrated. I updated the blog post with the steps for CS5.5. Let me know if you still have problems.

  5. Great post, Dustin.
    I found that on a Mac, you needed to add the PATH variable to allow the OS to find ADT. Users may need to create or modify the existing .profile file that lives in the user’s home directory. It’s invisible in the Finder, so you’ll need to use a text editor like TextMate or edit it from the Command line. Add the following PATH command:
    export PATH=$PATH:”/Applications/Adobe Flash CS5.5/AIR2.6/bin”
    This assumes that your AIR 2.6 directory is in Applications/Adobe Flash CS5.5/
    Also, add a space between PATH_TO_IPA_FILE and PATH_TO_DESCRIPTOR_XML_FILE in the post. While folks should be able to read your key, it might be a source of frustration if they just double click to cut and paste. Not that I had that experience, no, nosiree. ;-)
    I’ve been trying to do this with Flash Builder 4.5 by placing the SWF onto the stage, but the compiler keeps throwing errors about missing libraries in the SWF. Have you tried that path? Its interface takes care of making the XML app descriptor, which is why I started there.

    • Thanks James for catching the error in my command line statement. I updated the post. Good suggestion on the PATH variable. I normally tell people to change directories to the bin directory and run it from there. Saves them from having to edit .profile files. As for Flash Builder, I haven’t tried it that way. I normally use Flash CS5.5 to make my XML descriptor file. I just create a fake Flash file and save it in the same directory as my Captivate SWF. Then I use the Flash tooling to create the XML file and the command line to compile. This way you don’t have to worry about the MXMLC compile doing the building.

  6. Hi Dustin, great post! I’m just having a bit of trouble with the java bit. I only have flash cs4 so I downloaded the Adobe AIR SDK. I located the adt.bat file and followed your steps in the video (the same steps you used for the pfi.bat file). However having run the command instructions for Flash CS5.5 the following error was reported:
    ‘Unrecognized option: -xms256m
    Could not create Java virtual machine’

    I noticed that when opening up the pfi.bat file in the video the line ‘@java -xms256m -xmx1024m -jar “%~dp0\..\lib\adt.jar” %*’ is already there. However for the adt.bat file the line is only ‘@java -jar “%~dp0\..\lib\adt.jar” %*’.

    Therefore I removed the’-xms256m -xmx1024′ line from your suggestion so that it reads ‘@”C:\Program Files (x86)\Java\jre6\bin\java” -jar “%~dp0\..\lib\adt.jar” %*’. After running the command for Flash CS5.5 users again the error this time reads ‘ADT does not support 64bit java for IPA targets’

    Do you have any suggestions that would help me? Thanks in advance

    • Update: I’ve recognised my error! I couldn’t see from the video but the line for the adt.bat file needs to have capitalized X’s – so ‘@”C:\Program Files (x86)\Java\jre6\bin\java” -Xms256m -Xmx1024m -jar “%~dp0\..\lib\adt.jar” %*’. I still needed to uninstall Java SE (64 bit) and reinstall Java SE (32 bit) though.

      I’ve managed to generate the .ipa file now and sync it to my iPad. My only problem now is the actual application. Only my master slide backgrounds are showing up (no buttons/text captions/images etc.) and they are just playing through each slide without pausing (which I guess they wouldn’t do if there were no buttons gving a pause command!)

      Hmmmm…

  7. Thanks for providing these instructions. I’m running into the following error…

    storetype required

    I do have “-storetype pkcs12″ in my parameters. I’m not quite sure where to go with this error. I recently installed eLearning Suite 5.5, so perhaps I should try the Flash 5.5 instructions (I still have Flash 5 installed).

    Any direction would be much appreciated.
    Thanks!
    –Garry

    • Garry – Haven’t seen that issue before. I’d try using the CS5.5 instructions and see if you get a better result. Let me know if you get a similar error.

      • Okay, I was able to get the IPA built. I had to remove spaces from all full path names and make sure the Filename in the XML file matched the filename parameter in the command line.

        Now, when I attempt to sync it to my iPad, I receive the message, “The app “MY APP” was not installed on the iPad “MY IPAD” because the entitlement’s are not valid.”

        Any ideas?
        –Garry

        • I had this happen with a Mobile application I was building with Flash. I didn’t have my application ID typed correctly. It has to match what you put in your Apple developer account (i.e. com.yourdomain.yourapp)

          • Yeah, that’s what I starting to think was causing the problem. I used a wildcard when I created the ID. I’m wondering if that is throwing it off. I’m going to create a new ID with a specific app name and try that. I’ll let you know how it works out.

            Thanks for all your help!

  8. Hi Dustin,
    I did receive the same error using the CS5.5 instructions. However, I’ve gotten closer. One thing I found is that I needed to remove spaces from the full path for the parameters. Now, I’m getting the error, “Unable to Write Output File”. I think it may be that the settings in my XML file no longer match the changes I made in paths and file names. I’m going to go through that and make sure everything matches. I’ll let you know what happens.
    –Garry

  9. @Garry – I too used a wild card when creating my dev certificate from app (it’s MUCH simpler than registering a new app every time you do a demo!). So something like “com.mydomain.mobile.demo.*”. You can’t have a wild card in your XML descriptor file, though. You need to put something on the end: “com.mydomain.mobile.demo.yourapp”.

  10. The vedio is not available now. Could your fixed the link or re-post it? Thanks

  11. Hi, I generate the app using your method, but it only shows the first slide. The rest slides are blank. Do you know why?Thanks.

    • Sounds like a slide is throwing and error or maybe has some incompatible content. Do you have any widgets or interactive content on the other slides? What version of Captivate do you have?

      • I have captivate 5, and effects like motion path, click boxes and gif animations in slides. is it the problem?

  12. I+use+captivate+5.+I+have+some+effects+like+motion+path+in+my+slides,+and+click+boxes,+and+gif+animations

  13. Hi Dustin,
    I am using the AIR SDK with Windows 7 64-bit. I copied the adt.bat file in the AIR\bin directory to adt2.bat and substituted the line for 64 bit java. I am receiving the following error when I run from the command line: “The file name, directory name, or volume label syntax is incorrect.”
    Any ideas on what might be going wrong?

    Thx,
    Kevin

    • Hey Kevin – Were you editing the adt.bat file or the atd2.bat? You want to be using the adt.bat.

  14. Hi Dustin,

    I tried it with adt.bat. I changed the contents of adt.bat to
    @”C:\Program Files (x86)\Java\jre6\bin\java” -Xms256m -Xmx1024m -jar “%~dp0\..\lib\adt.jar” %*
    because I am using a 64 bit version of Windows 7. When I created my certificate, I also used the 64 bit version of OpenSSL. Is this correct?

    Thx,
    Kevin

    • Sounds like you’re doing everything correctly. I’m going to experiment with it a bit on my end and see if I can get it to create that error.

      • Hi Dustin!
        First: Thank you for sharing these steps :)

        Did you find a solution for this issue? I’m getting the same error: “The file name, directory name, or volume label syntax is incorrect.” after modifying adt.bat to read @”C:\Program Files (x86)\Java\jre6\bin\java” -Xms256m -Xmx1024m -jar “%~dp0\..\lib\adt.jar” %*

        Windows 7 x64, Java 32 bit, OpenSSL 64 bit.

        Thanks :)

  15. Thanks Dustin. Please let me know if there is any more information about my configuration or the process I’ve followed that I can send you. I really appreciate your help. It would be great to be able covert our captivate projects into an iPad app.

  16. Hi Dustin

    I just wanted to say a very big thank you for producing both this blog post and the video with the instructions on how to convert Captivate projects onto the iPad2. At my first attempt I didn’t get it to work and then a few days later (today) I thought I’d have another go with a new set of files. I’m very happy to say that I got it to work and have successfully converted my Captivate project into an app and it’s now viewable as content on my iPad2.

    I’m doing a demonstration of content at a show and we don’t have access to computers only the iPad2 and I’ve been really struggling with how I was going to deliver good looking and interactive elearning content without resorting to Keynote and just going showing slides and screenshots.

    Seriously, you have made my day (and my boss) very happy.

    So thank you and have a great weekend, all the best, Sheila

    If anyone has been struggling my setup is:
    * Windows 7
    * Elearning Suite 5.5

    • So happy you got it working! The process of getting Captivate content onto iOS device will get much easier shortly. Adobe is building in an HTML5 export option. This way your Captivate content can work in a browser and you don’t need to resort to native applications: http://blogs.adobe.com/captivate/2011/09/html5-coming-soon.html

      • Thank you for the reply and information. I did indeed get a copy of this via the Facebook Captivate page.

        Regarding the HTML5 export option I wondered what your thoughts were on the following scenario:

        I won’t have internet access so would need to show the HTML5 wrapper and content locally on the iPad, hence I searched and found your app solution.

        Am I right in thinking you’d need to download this via internet/wireless access – we won’t have a web server there either.

        I was just struggling how I’d use this new export feature showing content to clients.

        • Not much has been release by Adobe about the HTML5 export feature yet so it’s hard to say if it will be a option for you given your scenario. At this point, I’d say they HTML5 content would have to be hosted on a web server and not be accessible offline. I guess there’s a chance you could possible “side load” the HTML5 content on the device which would be a possible solution too. Hopefully Adobe will also build in some tooling so you can export an IPA file directly from Captivate instead of using my [hacked] method.

          • I had a feeling I wouldn’t be able to load a web page from the iPad itself, I tried to figure out different options.

            Your [hacked] method is a fantastic bridge till Adobe do the necessary.

            Thanks again and have a great weekend :)

  17. I have been trying to use this and keep getting “An unrecoverable stack overflow has occurred”. This happens after about 3 minutes when the java ram usage is just over 600mb. I checked and there is still almost 2gb available for it to use. The last time i tired it i got a bit more error details though, it says “Problematic frame: C [ntdll.dll+0x2defe]“.

    The swf is fairly large, what is the biggest file you have tried converting? Has anyone else seen this error?

    • The “problematic frame” error leads me to think something in the CP file is not compatible with the conversion. It’s definitely a known issue since this whole process is a bit of a hack. If you check out http://labs.adobe.com/ you’ll see Adobe just posted a preview version of the Captivate-to-HTML5 tool. This might be a better option…

  18. If i set the project to have SCORM enabled for quiz tracking, would that still work on the ipad using the method you posted above?

    • In my initial test, no, it doesn’t work. I didn’t do a lot of testing, but I’m pretty sure there isn’t really any way to have it send out the data. Another thing to try, is to download the Captivate HTML5 Converter from http://labs.adobe.com. This will convert your Captivate project to HTML/CSS/JavaScript. Then you can host the course on your LMS and have it report the data. I’m not certain if the SCORM stuff works with the converter yet, but I’m sure it will when it’s “officially” released.

  19. I had a question, once you package up your captivate 5.5 course as described. Is it mandatory to publish to the app store for corporate ipad2 owners to be able to install it? Or is there some other way to avoid publicly publishing internal training material?

    • Yes with any iOS application you can do a “ad hoc” distribution. You have to know the devices you want to put the application on (their ID’s are actually bundled in the provisioning profile of your application). Owners of these devices can drag your app into their iTunes and sync it no problem.

  20. Does ActionScript 3 work with this process? I’m able to run AS2 animations without interaction, but all the AS3 swf objects are not displayed on the iPad.

    • That’s interesting. Actually ActionScript 3 would be the only code that will work. That said, I’m guessing AS2 animations are working because they are more “forgiving”. If the SWF throws an error, the animation can probably keep going. With AS3, runtime errors can freeze the SWF.

      • It seems that old fashioned AS2 interactions will play just fine on the iPad, but since Captivate 5.5 only allows AS3 any interactivity in the AS2 swf file is lost (click to jump to different frame etc). If I publish the same flash project using AS3 it works like a charm in Captivate 5.5 when publishing to web or exe. The iPad however seems to have major issues with AS3 – if i enter a slide that has AS3 swf files on them all I get is a blank area where the swf should be. After that all other swf’s (including AS2 swf’s) are blank, and the buttons in the presentation starts to flash (kind of like mouse over).

        Anybody experiencing the same thing? I had to modify the adt.bat to make it all work, but I might have messed something up in the process?. My adt2.bat now looks like this:
        @C:\Java\jre6\bin\java -Xms256m -Xmx1024m -jar adt.jar %*

        I had to copy it into the Air2.6/lib folder to make this work. C:\Java is my java 32bit installation folder.

        • Sorry – first sentence should say “It seems that old fashioned AS2 SWF FILES will play just fine on the iPad….”

  21. I was wondering if anyone has successfully published their app to the iTunes app store.

    I have got a new mac running Lion, successfully complied an IPA file on my PC (as per the instructions above), got a publishing provision certificate and now trying to use Xcode on the Mac to publish to the iTunes store and now stuck! I understand that you do it via Archives, but unsure of the steps to get it into archive OR possibly an Xcode project. I understand that via Xcode you can also compile the IPA file, but I don’t think it likes you importing the SWF file generated from Captivate.

    Thanking you in advance if anyone has managed to do this and can share!

  22. For anyone still following this thread, I’ve added another post/video showing a MUCH easier process: http://bit.ly/sIroGS

  23. I+have+Captivate+5.+So+i+am+following+old+process.+When+i+try+to+package+by+creating+pfi2+file+i+get+following+message:

    The+filename,+directory+name,+or+volume+label+syntax+is+incorrect.+I+looked+at+filename,+directory+name+and+they+all+looks+fine.+

    Any+ides+why+i+am+getting+this.

    Thanks!

    • I’d take a look at this video: http://bit.ly/sIroGS. As for your error, it sounds like you aren’t using the right path in the command prompt.

  24. This is what i have been using.

    I don’t have adobe captivate 5.5. So i don’t think converter will work for me. However PhoneGap is very useful tool. Thank you for posting that.

    This is the code i have been using.

    pfi2 -package -target ipa-app-store -provisioning C:\Certs\MynameProvision.mobileprovision -storetype pkcs12 -keystore C:\Certs\iphone_dev.p12 -storepass password C:\Certs\iphone_dev.ipa C:\CaptivateExample\Mynametest-app.xml -C C:\CaptivateExample Mynametest.swf

    Also in the xml file do i need to use same App ID that i have in provisioning portal?

    Again thanks for your help.

    • I’m not sure if it will work with CP5 or not either, but it might be worth the try. As for your command line, everything looks good, but there might be a problem with the “pfi2″ command. Can you type in “pfi2″ at the command promt by itself?

  25. Yes i can. I will give it a try using html5 converter.

  26. I followed your post; however the web based program from iphone gap doesn’t allow files larger than 10mb to be uploaded to create a package. Could you help me understand how I would go about putting together the package? Would be using xcode?

    • Yes, PhoneGap Build (the web-based version) is currently in Beta so they have some restrictions. Once it’s officially released, I’m sure the size limits will go up. For now, you have two alternatives:

      1) If you’re on a MAC, you can download the desktop version of PhoneGap. Yes, you’ll need XCODE. Directions are here: http://phonegap.com/start
      2) Upload your project to a GIT repository and “link” it. When you create a new PhoneGap Build App, one of the options is to link it to a GIT or SVN. I’m not sure if there are limits, but there’s more info here: https://build.phonegap.com/docs/start