This is a short tutorial to help get you up and going with Oomph. By the end of this tutorial, you will have created your first app! For this example we are creating a magazine so we will create a front cover, contents page and inside pages that will have articles and photos. This guide will show you how to include some stylish but simple interactivity such as slide shows.
Step 1 - Setting Up
Start by creating folders for each section you want to have within your app (i.e. story/article). Each folder starts with a number orders the sections on your iPad i.e lower numbered sections appear first. When the reader swipes their finger from right to left they progress to the next section (folder) on their iPad. In this example you can see that the front cover it it's own folder, the contents page is its own folder and each of the articles are in separate folders.
Step 2 - New Document
Start by opening one of the templates we have supplied or create your own in InDesign or similar software. You InDesign page/s should be made to the dimensions of the iPad screen, which is 768px wide by 1024px high.
Step 3 - Create your Content
Design your layout, adding images and text as you would normally when creating such a document for say, a printed document, but also consider elements you want to make interactive. For this example of a magazine we need to create a front cover, a contents page and some inside pages that will have content (articles and photos) and a slideshow.
For this exercise you should be using low resolution files 132dpi, as this is the maximum resolution of the iPad. Using files with greater dpi will only add to your final file size, and potentially compromise the user experience. For a better understanding of image resolution and output see our Best Practices guide.
Step 4 - Adding Interactive Elements
Oomph allows you to introduce interactive elements to your content by creating what we call hotspots. You create a hotspot by drawing a transparent shape on your document in InDesign, and then add a hyperlink to that shape. Each Oomph Features has its own unique shorthand name. For a full list of what these features are and the shorthand names Oomph uses for them, see our Features forum.
In this example, we're going to create a Full Page Slideshow. Draw a transparent rectangle on your page (this is where the iPad user would tap to reveal the full screen images). The name we give to a Full Screen Slideshow is S1, so name this hotspot S1 in the hyperlinks tab in InDesign.
On your computer, create a folder for the images you want featured in your Full Page Slideshow to go into. This will need to sit within the Article One folder (30-Article One) and be called “S1”. Your images can be: JPG, PNG, PDF, MP4 or HTML.
Step 5 - Adding Page Links
Now let's create a page link. These will allow a user to go from the contents section straight to an article. When linking to a page in your app content, all you need to remember is to link to the folder name (e.g. 30-Article One) of the page you want to go to.
P[SECTION NAME]-[PAGE NUMBER]
For example, if we want to link to 30-Article One, we simply need to create a hotspot on the contents page and name it P30-Article One
*****REPLACE THIS URL WITH P30-Arcticle One****
Step 6 - Exporting your Magazine
You need to save all your pages as PDF's. Export your pages to each of the 4 folders you created when setting up your app. If you use InDesign then use these PDF Export Settings. The PDFs in each individual folder should be named P1-1 (P is for Portrait, 1 is the page number and 1 is the layer number).
which is a page that will be shown in both portrait and landscape. Ensure you’re exporting out
using these PDF Export Settings. For more information on the different orientations and how to
set them up, read our Pages and Layers article.
Step 7 - Loading it onto your iPad
You are now ready to view your app on the iPad. There are two easy ways to do this. Mac users can use Oomph Editor, which is great if you don't have an iPad and it also speeds up the testing process. PC users can package your files and Sideload them onto your iPad.
Step 8 - You're done!
Open Oomph Viewer on your iPad and your app should install and open. Swipe to the left to move through the pages and tap to see the slideshow. Congratulations on making your first app for iPad! When you are ready, take a closer look at all the features Oomph has to offer and get creating or check out our video tutorials on our YouTube channel here!