Jump into Adobe DPS Interactivity to Create an App

Brian Wood

Yahoo! Center Community Room

2500 Broadway St.

Santa Monica, CA

March 20, 2014

7:00-10:00 p.m.

Event Details

Yes, the event details, but first...

Meeting Topic: Jump into Adobe DPS Interactivity to Create an App

With Adobe Digital Publishing Suite, you can publish dynamic, interactive content in the form of an app. This allows you to create, develop, and deliver content like brochures, portfolios, publications or annual reports in the form of an iPad app without writing code. In this meeting, Brian Wood will walk you through the DPS workflow, teaching you from the ground up how to leverage your InDesign skills to create apps. You’ll learn how to build and structure the files, add interactivity (including some great resources), and get a look at the process for how to create iPad apps from that content.

Location and Free Underground Parking

Location: The Yahoo! Center Community Room

The Yahoo! Center is a series of office and commercial buildings between Broadway on the north, Colorado on the south, 26th Ave. on the east, and Cloverfield on the west. It is across Cloverfield from the Santa Monica office of the DMV.

Coming from the 10 Santa Monica Freeway, use the Cloverfield exit.

Free Parking: ...which is the most important thing, right? More important than even the topic or the presenter. (Just kidding.) (No, I wasn't.) (Well, maybe I was.)

The underground parking garage can be entered via the visit entrance/exits on Broadway or Colorado. After 6:30 p.m. the only exit is on Colorado. Park on level P-1 (top) between the 2501 and 2525 Colorado elevator lobbies. Do not park in reserved spaces. There is an open stairway from the parking area to the ground level. If you can't take the stairs, there is an elevator. Once on the plaza, go towards the north, away from the parking openings. There are a number of maps of the complex set up on markers on the grounds itself. On each map, the Community Room is designated in 2500 Broadway. A turn-in is provided off of Broadway next to the Community Room for drop-offs.

Agenda

7:00 p.m. - Meet and Greet

7:15 p.m. - Presentation and Tour (with mid-presentation break)

9:30 p.m. - Raffles

10:00 p.m. - Goodbyes

Meeting Notes

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.

Farthest Attendee

The person who travels the farthest to attend the meeting will receive a one-year subscription to InDesign Magazine. This prize has a $69 value. If everyone is kinda sorta in the area, then this prize will go the person who just had or is about to have a birthday.

Silent Auction

REGISTRATION: TYPO Conference. April 10-11, 2014 in San Francisco, California. Value $600.00

Raffle Prizes

6-MONTH SUBSCRIPTION: eDocker CREATE! Value $774.00

SOFTWARE: Blacklining for InDesign. Value $760.00

1-YEAR PREMIUM SUBSCRIPTION: lynda.com. Full access to the entire lynda.com library for an entire year. Value $375.00

3-MONTH SUBSCRIPTION: Fotolia. 50 high resolution photos or vector images per month for three months. (two raffles). Value $349.00

3-MONTH SUBSCRIPTION: Stock Layouts. Full access to the entire Stock Layout template library for three months. Value $299.00

SOFTWARE: in5 from Ajar Productions. Value $219.00

1-YEAR SUBSCRIPTION: FlightCheck Version 7 for Mac from Markzware. Value $199.00

SOFTWARE: Font Agent Pro 6 for Mac from Insider Software. Value $99.95

SOFTWARE: TypeDNA. Value $49.00

SOFTWARE: Rasterino for Illustrator CS4 to CC from Astute Graphics. Value $46.24

BOOK: "Digital Publishing with Adobe InDesign CS6: Moving Documents from Print to Digital" by Sandee Cohen and Diane Burns from Adobe Press. Value $44.99

E-BOOK: "Adobe Muse: Create Graphically Rich Websites Without Writing Code" by Brian Wood from Peachpit/Adobe Press. Value $39.99

SOFTWARE: iDML iPad App for iPad from DTP Tools. Value $19.00

SOFTWARE: ColliderScribe for Illustrator CS4 to CC from Astute Graphics. Value $15.00

TICKETS: LA Web Professionals Meeting. Value $7.99 (four raffles)

Raffle Prize Winners

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

About the Presenter

Brian Wood

Brian Wood is a mellow, friendly but kinda quiet guy who loves to learn all things tech — and so, 15 years ago, when he made his first stab at creating web sites, soaking his brain in what was then the newest, most cutting edge version of HTML — he was hooked.

Once he got into this world, things kind of just kept coming to him, so he became an Adobe Certified Instructor, and has spent years training designers, marketing pros, business owners, front end developers, and all those who want to create professional print design, web sites, and content. He has spoken many at many of the industry’s top events — like Adobe MAX, the How Interactive Design Conference, the Web Design Conference, and the InDesign Conference. Most significantly, he was the speaker at the Los Angeles InDesign User Group’s reboot on July 8, 2010 following a three year hiatus.

Brian works with design and production teams at advertising agencies, design firms, the likes of which include Adobe, Nordstrom, REI, Costco, Starbucks, HP, McGrawHill. In addition he’s authored five books, and dozens of articles.

brianwoodtraining.com