Posted By oomphhq on November 6th, 2013

How digital publishing is easier since Oomph was created

Oomph Header

Also referred as electronic publishing, the process of producing and distributing digital content has increased its market by millions since the introduction of tablet reading devices like the iPad.

Traditionally digital publishing required specialised programming knowledge with huge budgets to match. Since the introduction of a range of innovative new software, creating content for tablets is easier than ever. From publishing simple books using Apple’s iBooks Author to designing rich interactive apps using the Oomph platform, including a range of multimedia like PDF, video, audio, html and image file formats digital publishing is now much more accessible without needing to have any programming knowledge.

Oomph enables designers to create and deliver engaging content to tablets. Using existing software designers already know, including InDesign and QuarkXPpress, Oomph provides the platform that can transform content into rich multimedia tablet apps.

They key to design a tablet app still lies on the desktop publishing software application, using its native export to HTML or PDF that supports hyperlinks, buttons, videos, animations, forms, etc. is that Oomph is able to convert content into fully interactive tablet apps using unique features that cannot be found in other platforms.

How does it work?

What is required?

In addition to a free Oomph account and a desktop publishing software, e.g. InDesign, QuarkXPpress, etc. Oomph offers complimentary access to:

  • Oomph Viewer: a free application available in the App Store that can be downloaded onto an iPad and use to sample content before the app goes live in the App Store.
  • Oomph Editor: a desktop tool for working with the content, allowing designers to edit sections and assets. It is a free to use MAC OSX application.

editor-n-viewer
Where to start?

There are tons of resources and essentials in the Oomph website; nonetheless here is a quick getting started guide to creating an iPad app using Oomph. This is a quick step-by-step guide to get you up and running, the following steps will show you how to include some stylish but simple interactivity such as slideshows.

Oomph uses the concept of layers when creating a page. Layers can be a combination of: PDF for legibility and interactivity, MP4/MOV for video content, PNG/JPG/SVG for imagery and HTML5 for web content and interactivity.

A unique and very powerful concept Oomph use is the folder structure, first start your app by creating folders on your mac for each section of the app (for instance each article or story). Each folder starts with a number, which is used to order the sections on your iPad (lower numbered sections will appear first).

Folders

The home screen or cover will have its own folder and its content will be in it, each other folder is a different section in the app and will have its own content. This is what the folders represent and you will see in the app as you swipe.

slides

Now let’s design the app, first step is to choose which orientation you would like the app to be viewed in. Design the pages with the following measurements and export them as PDF.

Landscape-portrait

Portrait           (w.768px x h1024px), Retina = w1536 x h2048)
Landscape      (w.1024px x h768px), Retina = w2048 x h1536)

Now save the PDF’s into the relevant folders. The pages in your app can move from left to right and also up and down.

slide

The file naming convention is also important, in the content for each section, PDF’s starting with P are the portrait pages and L are the landscape pages; 1,2, 3, etc. refer to the pages swiped vertically within the folder and 1,2,3, etc. after the hyphen refers to the layers that compose each page.

layers

Other concept to learn is “hotspot” in essence this is how you call from your page an interactive feature that will be used in the app. In this case we will use it for the slideshow. Simply create an invisible rectangle in InDesign, to draw an invisible rectangle, from toolbox select the Rectangle Frame tool . Drag in the document window to create the frame. You can hold down Shift to constrain the width and height of the frame.

Now that you know what a hotspot is, let’s add the interactivity. The name we give to an In Page Slideshow is IPS1 so name this hotspot (invisible rectangle) IPS1 in the hyperlinks tab in InDesign.

IPS1b

Now create a folder for your slideshow images to go into, this folder will sit in the “20-Article One” folder and be called “IPS1”.  In this folder it’s where the slideshow images will go. These images are news pages in indesign the same size as the invisible rectangle. The slide files can be a JPEG, PNG, PDF or even an MP4. The main page (PDF) with the invisible rectangle called “P1-1” should go to the folder “20-Article One”.

Now that you know how to add a basic interactivity it is time to preview it.

preview

The Oomph Editor or the Oomph Viewer iPad app are the tools you will need for this, you can download the editor when registering for free with Oomph or the viewer from Apple App Store.

There are two methods to preview the app, you can do it on the simulator or you can do it in the iPad connected to your mac. Start by dropping the folder with all the content you have onto the Oomph Editor icon, now simply press the play button available on the menu bar in the Oomph Editor; you can preview the whole bundle or just a selection.

editor

Where do you register to use Oomph?

Just head to the getting started for free website where you can sign up to get access to the Oomph tools, including Oomph Editor and the Getting started Bundle.

register_button