Los Angeles InDesign User Group

Jump into Adobe DPS Interactivity to Create an App

Thursday, March 20, 2014

Yahoo! Center Community Room, 2500 Broadway St., Santa Monica, California

 

 

By Alvin Takamori

 

On March 20th the Los Angeles InDesign User Group met at the Yahoo! Center Community Room. It occupies a tiny corner of a sprawling complex, so it was a challenge to find, even for someone who had been there before. Those who were able to navigate their way to the meeting were able to enjoy some St. Patrick’s Day cupcakes and cookies while receiving a good introduction to the process of using Adobe InDesign and Digital Publishing Suite (DPS) to create an app. Our presenter for the evening, Brian Wood is an Adobe Certified Instructor and his skill at teaching landed him at big events like Adobe MAX, and the Web Design Conference. To begin, he conceded that there was more to the process of using DPS for app creation than could be covered in a couple of hours. However, there are many online sites to learn from, including Adobe’s, and books. Brian provided a list of educational resources which can be downloaded below.

 

DPS Creates Apps for Mobile Devices

 

Adobe DPS is a way to create and distribute content for mobile devices. That content is delivered in a package called an app and the content itself can be created in Adobe InDesign. For instance, if you are creating a digital magazine, each article of the magazine would be a separate InDesign file and to keep things organized, it’s a good idea to keep all those files in one folder. This way it’s easier to keep track of the files because, you can’t move the files once the app is done. Otherwise, it breaks the link and the app cannot find them.

 

If you subscribe to Adobe Creative Cloud, you can create an unlimited number of iPad apps for distribution through the Apple App Store. To be a distributor, first you need to enroll in the Apple iOS Developer Program which costs $99 annually. Then any app that is going to be distributed through Apple has to be submitted for approval. One basis for rejection is a lack of interactive features. If an app is so simple it could be a PDF file, it may not be approved. One advantage of going through Apple and making your apps available to iPads is that it reaches a broad audience at a relatively affordable price. Distribution to Androids and Google is prohibitively expensive, unless you are a corporation. However, if you only want a few people to access your app you can do so directly. More on that later.

 

An App Begins as a Folio

 

Next, Brian guided us through the process of creating content for an app by using InDesign. InDesign’s term for an app is a Folio. Folio Producer and Folio Builder come inside InDesign CS6 and later versions. If you have CS5 you can have DPS tools installed.

 

Starting with a New Document you have the option to select Digital Publishing for Intent. In CS5 your only digital option is an iPad, but later versions offer size options for other mobile devices. CS5 also requires separate InDesign files for horizontal and vertical layouts, if you want viewers to be able to interact with your content in either orientation. In CS6 or later there is an Alternate Layout option that can be used to generate different layouts based on an original file. The new layout will probably still require some readjustment, but it quickly replicates all the elements from the original in the new file, and if you ever change one of those elements in the original file, the alternate can be easily updated. Some publishers avoid the question of horizontal and vertical layouts by locking in one orientation.

 

Brian pointed out a couple of things to keep in mind, if you are converting an existing print publication into an app. An app has no bleeds and no facing pages, but style sheets work. Also, Folio overlays interactivity, like videos, in a layer that is always on top of other content.

 

In the New Folio panel, there is a choice of devices to output to called the Target. Typically you’ll select iPad and mini. If you output to iPhones or Kindles you’d have to pay about $5000. The layout orientation you select, one or dual, is a permanent selection that you can’t change later. The Cover Preview is the image that appears to viewers if your app is in the Apple Store. This is something you can add later.

 

Laying Out Your Pages

 

Brian also discussed Multi-State Objects (MSO). For people like myself, who are unfamiliar with the term, it’s an object that can change like a slideshow. For example, in the Object States Panel you can select a group of photos and put them together as an MSO. In your layout you have a box where your MSO is placed and the different photos show one at a time in that location. Each photo represents a different state of that MSO object. Just make sure your MSO doesn’t hang outside of the page. I don’t know what happens, but Brian said it’s bad.

 

It’s logical, but easy to forget, if you are creating Alternate Layouts, the InDesign file that you are using to create the alternate has to actually be open when you select Add Open InDesign File. As mentioned earlier, the alternate layout is linked to the original. You can change and rearrange items in the alternate without affecting the original, but a change to the original file can be updated in the alternate with the click of a button.

 

To add some measure of control over where elements in your layout move as the size or orientation of the viewing device changes, under Layout, you can apply Liquid Layout Rules. There you can set rules about where you want objects to be relative to a changing page size or controlling certain dimensions. For example, you might want to lock an element to one side of a layout or set focal points you want locked down as the page size changes. You can preview what happens by dragging the page size up and down.

 

In the Folio Overlay Panel there are various options for how the different states of an MSO object shift. You can choose Auto Play, or Swipe (with your finger) to change from one state to another. You can also choose transitions like Cross Fade. Video can also be an MSO. Brian created an example using a thumbnail image as a button to initiate a video. In the buttons panel you can select a thumbnail, name the button, and choose an action like Tap to start the video.

 

A video can also be placed into an InDesign file like a photograph. In the Media Panel there are various options for how a video will play. You can set the video to play on Page Load and Stop on Last Frame. You can choose a Poster, which is the picture that shows initially in the space where the video plays. One option is to select a frame of the video from Current Frame that is Showing.

 

Another common interactive element that Brian brought to our attention is a tap on the title of an article in the Table of Contents to jump to the article. One thing to keep in mind is that page numbering begins with page 0. So a hyperlink called navto://article_name#3 would take a viewer to an article on page 4.

 

One advantage of interactive text over printed text is the ability to save space by confining the area the text occupies. If the text overflows, you can have viewers scroll through it. The Folio Overlays panel provides options for scrolling. You can also set features like Panorama to take a 360º view of a scene. When an app is created, it will go through some type of compression. You can choose Raster, which breaks an image into pixels. It’s better for photos, but takes more memory. Otherwise, you can select Vector which uses math and geometry to interpret an image. This is better for text.

 

You can Preview your result on your desktop, but it’s always best to test your app on the actual device you want to output to. You can get Adobe Content Viewer for free and load it onto the device you want to test apps on. The Folio Builder Panel allows you to preview everything in a Folio. If you want to, you can share your Folio. The person you want to share with needs an Adobe ID and an iPad, or whichever device the app is intended for, that has Content Viewer on it.

 

Turning a Folio into an App

 

After showing all these possibilities for creating content in the Folio, Brian quickly ran through the process of turning that content into an app. As an Adobe Creative Cloud member you can sign in to Adobe Digital Publishing Suite’s App Builder. Adobe provides an extensive PDF on how to build an app. The PDF has a lot of details that you can follow step-by-step, but Brian outlined the basic steps. As mentioned in the beginning, to place your app in the Apple App Store, you need to be enrolled in Apple’s iOS Developer Program. You also need to download and install Xcode on your computer. As part of the Apple approval process you are required to generate various certificates for each app. The Adobe PDF explains how to do this. The app and the certificates are then submitted to the Apple App Store. Brian mentioned the process may seem complex at first, but once you’ve done it a few times, it’s not too bad. As someone who has never made an app in their life, Brian Wood’s presentation was a good overview. At least the process of creating an app doesn’t seem so mysterious.

 

 

Prizes

 

As always, there was business aside from the presentation to attend to. As the only bidder, Traci Larson was able to set her price for entry to the TYPO Conference, about all things typographic, in San Francisco. Then there is the list of people who had good luck or bought lots of raffle tickets. Here are the winners:

 

Beverlin Hill

Ticket to next meeting of LA Web Professionals

Brian Sheridan

Ticket to next meeting of LA Web Professionals

Lea Frechette

Ticket to next meeting of LA Web Professionals

Angel Ortiz

One year subscription to InDesign Magazine

Glenda Smith

“Adobe Muse: Create Graphically Rich Websites Without Writing Code” by Brian Wood

Michael Gonzales

Collider Scribe for Illustrator from Astute Graphics

Monette Velasco

in5 from Ajar Productions

Laura Milton

eDocker Create!

Azenith Gueco

3 month subscription to Stock Layouts

iDML iPAD App for iPAD from DTP Tools

Jennie Zhu-Mai

One year subscription to Lynda.com

Flightcheck 7 by Markzware

Armondo Villa

“Digital Publishing with Adobe InDesign 6: Moving Documents from Print to Digital” by Sandee Cohen and Diane Burns

Barbara Fier

3 month subscription to Fotolia

Blacklining for InDesign

Font Agent Pro 6 for Mac from Insider Software

Joanne Abensour

Ticket to next meeting of LA Web Professionals

3 month subscription to Fotolia

Rasterino for Illustrator from Astute Graphics

Type DNA

 

 

 

 

Copyright © 2016 Los Angeles InDesign User Group. All rights reserved.