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.

Creating a Web App

  • 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.

  • Create the home page of your app in InDesign, including any pictures, text or buttons.

  • 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.

  • 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

  • Go to 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.

  • 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.”

  • 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.”

  • 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.

  • 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.

  • Download and install the Safari Web browser from This is the native Web browser on the iPad. It can be configured to behave as an iPad browser.

  • Launch Safari. Click the “File” menu, select “Preferences” and then click “Advanced.” Select the “Show Develop Menu in Menu Bar” option.

  • 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.

  • 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.


Promoted By Zergnet



You May Also Like

  • How to Build HTML5 iPad Apps

    Using HTML5, you can create your own Web app for the Apple iPad. ... Although you can use sophisticated Web design programs...

  • How to Get HTML5 on an iPad

    How to Get HTML5 on an iPad. The iPad's operating system automatically supports HTML5, ... How to Make an iPad App With...

  • How to Create an Animated PDF

    Acrobat's built-in options for creating animation in PDFs are quite limited. Acrobat Pro can only create animated page transitions, such as "Wipe"...

  • How to Make a Magazine iPad App

    How to Make an iPad App With InDesign CS5; How to Create Magazine iPad Apps; Print this article; Things You'll Need. iOS...

  • How to Make Dreamweaver CS5 Compatible With the iPad

    How to Make Dreamweaver CS5 Compatible With the iPad. ... Keep in mind that Dreamweaver is designed for creating Web pages for...

  • How to View Flash on an iPad

    How to View Flash on an iPad. ... Browse the iPad App Store for a remote desktop app that is compatible with...

  • How to Open Epub

    An .epub is a popular extension that is used for electronic publications. ... Open the folder that... How to Convert a PDF...

Read Article

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!