Adobe Captivate 9 to iPad (through PhoneGap): Graphic Quality

What I post here is to share my experience on how to archive the crisp and clean graphic look for iPad with retina display (portrait 2048x1536). This post is not to show how to pack an Adobe Captivate (AC) project and 'convert' it into an iPad app through PhoneGap.

1. I designed 2 1536x2048 slides with all graphic pieces on it, exported them as separate .png files. Next, I created and up-scaled a blank AC project from 1280x720 to 1536x2048 and imported these .png files. Finally, I added motion effects to them and also added a 1536x512 video with .H264 codec. I published and tested the app on an iPad 4.
   Result:Loading time: 1 second. Motion effects: extremely choppy. Graphic quality: decent. Delay between slides: bad, white flash. Video quality and speed: excellent - Conclusion:Failed
2. This time I left the default blank project untouched and down-scaled all the .png files and video to fit the 1280x720 layout. The motion effects were still applied. Published and tested the app on an iPad 4.
   Result:Loading time: 1 second. Motion effects: really bad. Graphic quality: blurry/very pixelated. Delay between slides: bad, white flash. Video quality and speed: excellent - Conclusion: Failed
3. I designed 2 1280x720 slides, exported their graphic pieces as .png files and imported them to a blank 1280x720 AC project. I did this because I wanted to avoid re-scaling them in AC to see if the quality would be lost. Motion effects and the video were still there. Published and tested the app on an iPad 4.
   Result:Loading time: 1 second. Motion effects: really bad. Graphic quality: blurry/very pixelated. Delay between slides: bad, white flash. Video quality and speed: excellent - Conclusion: Failed
4. I still kept the 2 1280x720 slides as the way they were, but this time I exported the graphic (vector) pieces as SVG files, and the pictures were still exported as .png files. In order to keep good quality of the pictures, I make them twice larger. For example, instead of using a 50x100 size to fit the design, I used 100x200 instead so it would not look too pixelated after being scaled down in AC. I still published and tested this app on an Ipad 4
   Result:Loading time: 1 second. Motion effects: still terrible. Graphic quality: Wonderful. Delay between slides: bad, white flash. Video quality and speed: excellent - Conclusion: Failed
5. I kept everything as they were in 4, but this time I tested this app on an iPad Air (Ipad 5,3)
   Result: Loading time: no time at all. Motion effects: excellent. Graphic quality: gorgeous. Delay between slides: no. Video quality and speed: excellent - Conclusion: Succeeded. Thanks to SVG files, the 1280x720, especially (outlined) text, looks perfect on a retina display Ipad.

Adobe Captivate handles .H264 videos very well, and it's not a bad idea to use Firefox to play them for testing because I don't think AC takes all video sizes. If Firefox can play them, it's very likely that AC can too. Different from Firefox, Chrome just plays any of them. I spent days doing whatever I could to archive good graphic quality and motion effects but nothing helped until I used SVG and an iPad Air. Some said it was about the way iOS handled HTML5 and animation made by Javascript, but I think it's more hardware related because if I don't mistake motion effects in AC are handled by CSS.

By the way, here are some usefully tips related to iPad apps:

- How to make your project autoplay. Big thanks to Randall Fujimoto.

Re: Autoplay with HTML 5

- How to change loader icon or others: the graphic icons is located in htmlimages