How to Make an iPad App With InDesign CS5

If you have Adobe InDesign CS5, you can create your own iPad apps and make them available on the Internet. Known as Web apps, you can make these for free without having to learn software programming. Users can access your app using Safari, the iPad's Web browser, and can save it to their home screen to use the app offline. If you want to include animation in your app, Adobe has a free program that will convert any FLA animation created in InDesign to an HTML file.

Instructions

1. Creating a Web App

   • 1
     Launch Illustrator and create a new document by pressing “Ctrl" and "N” on the keyboard. Select “Web” in the Intent menu. Click the “Portrait” icon and then type “1024” in the Height field and “768” in the Width field.
     
   • 2
     Create the home page of your app in InDesign, including any pictures, text or buttons.
     
   • 3
     Create a new folder for your iPad app. Select “Export For” from the File menu and then select “Dreamweaver.” This saves the file in HTML format. Additional sub-folders with support files, such as images, will be saved in your iPad app folder.
     
   • 4
     Create a additional pages for the app as desired. Include links in each page to allow users to navigate from one page to another. Links can be added to text, images or buttons using the Hyperlinks panel.
     

   Convert Animation to HTML5

   • 5
     Go to labs.adobe.com and click “Downloads.” Select the Wallaby Adobe Flash to HTML application. Download and install it to your computer as directed by the on-screen instructions.
     
   • 6
     Open your animation project created in Adobe Illustrator. Select “Export” from the File menu. Click the “Format” menu, select “Flash CS5 Professional (FLA)” and click “Save.”
     
   • 7
     Launch the Wallaby application, navigate to the FLA file and click “Convert.” Select the iPad app folder and give the animation file a unique name, such as “animation.html.” This process will create multiple files based on the same name with different extensions, such as “animation.css,” “animation.js,” etc. Click “Save.”
     
   • 8
     Open the CSS file in a text editor or Web design program like Dreamweaver. Search for the word “infinite” and replace all occurrences with the number “1” to have the animation play only once instead of looping continuously.
     
   • 9
     Open a page in InDesign that will use the animation. Drag the “Rectangle Frame Tool” over the page. Click the “Overlay Creator” panel, select “Web Contact” and then select the animation HTML file you created in Step 3. Use the available options in the Overlay Creator panel to set a playback delay, transparent background or user interaction as desired.
     
   • 10
     Download and install the Safari Web browser from apple.com/safari. This is the native Web browser on the iPad. It can be configured to behave as an iPad browser.
     
   • 11
     Launch Safari. Click the “File” menu, select “Preferences” and then click “Advanced.” Select the “Show Develop Menu in Menu Bar” option.
     
   • 12
     Click the “Develop” menu, select “User Agent” and click “Other.” A dialog box opens. Replace the contents of the dialog box with “Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10” to simulate an iPad browser.
     
   • 13
     Open each of your HTML pages with Safari. When you are satisfied with the results, upload the iPad app folder to a Web server. Test the web app using an iPad.