Digital Publishing User Guide v8

Publishing for theADOBE® DIGITAL CONTENT VIEWER

Prerelease

Last updated 12/1/2010

Copyright© 2010 Adobe Systems Incorporated and its licensors. All rights reserved.

Publishing for the Adobe® Digital Content Viewer. Prerelease

This prerelease version of the Software may not contain trademark and copyright notices that will appear in the commercially available version of the Software.

This user guide is protected under copyright law, furnished for informational use only, is subject to change without notice, and should not be construed as a

commitment by Adobe Systems Incorporated. Adobe Systems Incorporated assumes no responsibility or liability for any errors or inaccuracies that may appear

in the informational content contained in this guide.

This user guide is licensed for use under the terms of the Creative Commons Attribution Non-Commercial 3.0 License. This License allows users to copy,

distribute, and transmit the user guide for noncommercial purposes only so long as (1) proper attribution to Adobe is given as the owner of the user guide; and

(2) any reuse or distribution of the user guide contains a notice that use of the user guide is governed by these terms. The best way to provide notice is to include

the following link. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/

Adobe, the Adobe logo, Adobe AIR, AIR, InDesign, and Flash are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States

and/or other countries.

Apple and Mac OS are trademarks of Apple, Inc., registered in the U.S. and other countries. Windows and Windows Vista are either registered trademarks

ortrademarks of Microsoft Corporation in the United States and/or other countries. All other trademarks are the property of their respective owners.

Updated Information/Additional Third Party Code Information available at http://www.adobe.com/go/thirdparty.

Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA.

Notice to U.S. Government End Users: The Software and Documentation are "Commercial Items," as that term is defined at 48 C.F.R. §2.101, consisting of

"Commercial Computer Software" and "Commercial Computer Software Documentation," as such terms are used in 48 C.F.R. §12.212 or 48 C.F.R. §227.7202,

as applicable. Consistent with 48 C.F.R. §12.212 or 48 C.F.R. §§227.7202-1 through 227.7202-4, as applicable, the Commercial Computer Software and

Commercial Computer Software Documentation are being licensed to U.S. Government end users (a) only as Commercial Items and (b) with only those rights

as are granted to all other end users pursuant to the terms and conditions herein. Unpublished-rights reserved under the copyright laws of the United States.

Adobe agrees to comply with all applicable equal opportunity laws including, if appropriate, the provisions of Executive Order 11246, as amended, Section 402

of the Vietnam Era Veterans Readjustment Assistance Act of 1974 (38 USC 4212), and Section 503 of the Rehabilitation Act of 1973, as amended, and the

regulations at 41 CFR Parts 60-1 through 60-60, 60-250, and 60-741. The affirmative action clause and regulations contained in the preceding sentence shall be

incorporated by reference.

Prerelease

http://creativecommons.org/licenses/by-nc-sa/3.0/

http://www.adobe.com/go/thirdparty

iii


Contents

Adobe Digital Magazine Suite

What’s new in drop 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Overview of publishing workflow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Installing digital publishing authoring tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

Tutorials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Creating InDesign files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Setting up the folder structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

Overlay Creator panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

Content Bundler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

Adobe Content Viewer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

Troubleshooting digital publishing tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

Prerelease

1



The Adobe Digital Magazine Suite lets iPad viewers engage with interactive content in a magazine format. Creative

designers who publish print magazines using Adobe® InDesign® CS5 can make that content available on mobile

devices. Publishers can supplement their designs with interactive content, allowing their audience to view media in an

entirely different way. Customers can use hand gestures to flip through a slideshow, pan images, rotate objects 360

degrees, and more.

The initial launch delivers a core set of features for the Apple iPad. Over time, Adobe will offer additional commercial

hosting services, and the workflow will be simplified and expanded to support other mobile devices.

What’s new in drop 8

New Overlay Creator panel The Overlay Creator panel (Window > Extensions > Overlay Creator) in InDesign CS5

replaces the AIR-based Interactive Overlay Creator application. This change means that you now create all interactive

overlays natively in InDesign. Use the Overlay Creator panel to create overlays and change overlay settings.

For some overlays (Hyperlinks, Slideshows, Audio, Video, and Pan and Zoom), create the interactive object in

InDesign, and then use the Overlay Creator panel to change settings. For other overlays (360 Viewer, Panorama, and

Web View), draw a placeholder rectangle, and then use the panel to specify the source. The size of the placeholder

rectangle changes to reflect the source images for 360 viewers and panoramas.

Content Viewer for Desktop An AIR-based version of the Content Viewer is now available for testing .issue files (now

called “.folio files”) that you create. The Desktop Viewer currently does not support all the features, so use it only as a

basic testing tool.

“Issue” -> “Folio” The new term for “issue” is “folio.” Folio better represents the file format by suggesting a series of

printed matter bound together. The Content Viewer can also read .issue files created using earlier tools.

No ID options Using the same overlay IDs in the horizontal and vertical layout is no longer required in most cases to

provide continuity when the iPad is rotated. The Content Bundler uses the source assets and settings to determine

related overlays. For slideshows, use the Object States panel to enter the same object name for the multi-state objects

in the two layouts.

Grid view in Viewer library The Content Viewer library now lets you display eight folios at a time in a grid view. You

can switch between grid view and single view.

Order option The Content Bundler includes a new “Order” column that makes it less likely for you to change the order

of stacks accidentally. Enter a number where you want the stack to appear in sequence, and it moves to that place. Note

that the stack order in the sidecar.xml file is used when you click New to bundle a file, but not afterwards.

Locked stacks while bundling The Content Bundler includes a new “Locked” column that lets you prevent stacks from

being updated when you bundle—especially useful when you just want to test the changes in one or two stacks.

Sign Out button in Viewer You no longer need to change your Adobe ID password to display the Sign In button.

Archive button The Delete button in the Content Viewer library was changed to Archive. This change emphasizes that

tapping the Archive button removes the .folio file from the iPad but is still available for download.

Subscription services in Viewer When creating custom Viewers, publishers can now set up their own subscription

model that allows customers to subscribe to a magazine and receive regular downloads of .folio files. Customers can

specify a range of .folio files that remain downloaded on the iPad—especially useful for news magazines.

Prerelease

2PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER



3G downloading You can now download .folio files to the iPad via a 3G connection.

Overview of publishing workflow

Adobe InDesign CS5 is the central component of the workflow. Using InDesign CS5, design teams create layouts and

add interactivity. With layouts in hand, production teams assemble the layouts, add metadata, and publish them into

a new “.folio” format (previously called “.issue”).

Each folio you publish consists of one or more articles, called stacks. A stack can be an ad or an article.

Getting your InDesign layout onto your iPad

Step 1: Organize folder structure

For the files to be bundled properly, they must appear in a specific folder structure with the required naming

conventions. Each publication folio consists of one or more stacks. A stack can be an ad or an article. Each stack

appears in its own folder inside a folio folder.

In the stack folders, horizontal InDesign documents must include an _h suffix (such as “article_h.indd”), and vertical

InDesign documents must include a _v suffix (such as “article_v.indd”).

For details, see “Setting up the folder structure” on page 20.

Step 2: Create layout in InDesign CS5

Create InDesign documents as the base layout for the digital content. You can create both a portrait (vertical) and

landscape (horizontal) layout in separate documents for each article or ad, or you can limit your design to a single

orientation. See “Creating InDesign files” on page 18.

In addition to using InDesign files for digital content, you can also create HTML files for ads and articles. See “HTML

stacks” on page 22.

Step 3: Add interactive objects

Use the Overlay Creator panel to create and edit interactive objects. See “Overlay Creator panel” on page 24.

Step 4: Use the Content Bundler to create folio

The Content Bundler exports a .folio file (previously called a .issue file) that can be loaded on the iPad or (later) to

another mobile device. See “Content Bundler” on page 37.

InDesign CS5 Adobe Viewer

.folio

OverlayCreator

ContentBundler

Prerelease




Step 5: Load folio on the iPad

Install the Adobe Content Viewer, and then add the .folio file you created to the Viewer by either sideloading it in

iTunes or downloading it from a fulfillment server. See “Adobe Content Viewer” on page 43.

You can also test the .folio file using the Desktop Viewer. See “Desktop Viewer” on page 47.

Step 6: Make your folios available to customers

If you make your .folio file available to other people, they can add that folio to their Viewer app on the iPad through a

process called “sideloading.”

Once you’ve tested your .folio file on the Viewer, you can request to make your content commercially available on the iPad.

For details, see the “iPad Publishing Process Overview.pdf” file in the Downloads section of the DMP prerelease site.

Installing digital publishing authoring tools

To create digital content, you need the following:

InDesign CS5 InDesign CS5 is required.

Adobe AIR 2.x Available at http://get.adobe.com/air/

Digital Publishing Plugin for Adobe InDesign (zxp) Launch Adobe Extension Manager CS5. Click Install, and then

browse to the InDesign plugin (.zxp) file you downloaded. Double-click the .zxp file and follow the prompts to install.

The Content Bundler requires this plugin to convert InDesign files to .folio files.

Overlay Creator (zxp) Launch Adobe Extension Manager CS5. Click Install, and then browse to the Overlay Creator

(.zxp) file you downloaded. Double-click the .zxp file and follow the prompts to install. The Overlay Panel lets you

create overlays and change their settings.

Content Bundler (AIR) Double-click to install. The Content Bundler converts InDesign files to .folio files that can be

read on the iPad.

Desktop Viewer (AIR) Double-click to install. The Desktop Viewer lets you preview .folio and .issue files without using

the iPad.

Adobe Content Viewer (iPad app) The Adobe Content Viewer is a generic version of the Viewer used for testing the

digital content you create (it was previously called the Preview Tool).

Before downloading the new Viewer, we recommend that you remove the previous version of the Viewer from your

iPad and from iTunes, and then sync your iPad. Then download the Adobe Content Viewer and sync again so that the

Viewer appears on both the iPad and iTunes.

The Viewer library includes a Sign In option. Signing in allows you to download content that you upload to an Adobe

server for testing purposes. Your iPad must be connected to the internet for you to sign in using the Viewer. If you

cannot sign in to the Viewer, open the Content Bundler, and try signing in. If you cannot sign in to the Content

Bundler, click the “Create an Adobe ID” link and follow the prompts.

Tutorial Assets (zip) Unzip this file. It contains source files for stepping through the tutorials, along with a few overlay

examples.

If you experience problems installing the tools, see “Installation troubleshooting” on page 48.

Prerelease

http://get.adobe.com/air/




Tutorials

These two tutorials walk you through the process of converting an InDesign CS5 layout to a digital format that can be

read on the iPad. The first tutorial teaches you how to create a simple magazine ad and view it on the iPad. The second

tutorial teaches you how to create and view a magazine article with interactive objects.

Install the tools and assets

To complete these tutorials, you need InDesign CS5, the Content Bundler and other DMP tools, and the Adobe

Content Viewer on your iPad. To install these tools, see “Installing digital publishing authoring tools” on page 3.

In addition, you need the TutorialAssets file. Unzip this file to obtain the source files for stepping through these

lessons.

Tutorial 1: Creating a simple static folio for the iPad

In some cases, you just want to take a simple magazine article and make it available on an iPad. In this tutorial, you

will see how easy it is to display an InDesign layout on a mobile device. At the end of this lesson, here’s what your

resulting one-page file should look like on the iPad.

Completed folio displayed on the iPadA. Landscape (horizontal) view B. Portrait (vertical) view

A

B

Prerelease




To use the sample files for this tutorial, download and unzip the TutorialAssets (.zip) file available on the prerelease

site or Adobe Labs.

View the InDesign documents

The item that gets uploaded to the iPad is called a .folio file (previously called a “.issue” file). Each .folio file consists of

one or more stacks. A stack can be an ad or an article. Each stack appears in its own folder inside a folio folder. A stack

folder requires either one or two InDesign documents, and it can also include a .png file used as the thumbnail in the

table of contents.

In this tutorial, you’ll open separate vertical and horizontal documents with _v and _h filename suffixes. That way,

users can rotate the iPad to view a different layout.

1 If you have not already done so, unzip the TutorialAssets (.zip) file, and browse to the Meridien_Folio folder.

2 In InDesign CS5, open the WiFi_h. indd and WiFi_v.indd files located in the WiFi_Stack folder. If prompted,

update the links.

Notice that there are two images in each document, and each image has a different size to fit within the layout

orientation.

3 Make sure that the files are organized in the appropriate structure.

We already created documents with _h and _v suffixes, and we placed these files in a stack folder inside a folio

folder.

We also created a 70x70-pixel file called tocPreview.png. This optional file appears as a thumbnail image in the

Viewer table of contents. If you don’t include a PNG file in a stack, the TOC image will be generated automatically

during the bundling process.

Valid folder structureA. Folio folder B. Stack folder C. Thumbnail .png file D. Horizontal and vertical .indd files with _h and _v suffixes

4 Close the files in InDesign.

Bundle the files

Now that the folio folder includes a stack folder with all the necessary files in place, you’re ready to use the Content

Bundler to create a folio file that can be added to the iPad.

1 If you have not already done so, install the Content Bundler and the InDesign plug-in.

Note: If you experience problems installing the InDesign plug-in, see “Installation troubleshooting” on page 48.

2 Launch the Content Bundler application.

3 Click New, browse to the Meridian_Folio folder, and click Select.

The Content Bundler launches InDesign and prepares the files for the iPad.

Note: If the Content Bundler stalls, there may be a problem with a background process called Switchboard. For details,

see “Bundler troubleshooting” on page 49.

A

D

B

C

Prerelease




4 Enter the folio data—Magazine Title, Folio Number, and Folio Description—at the bottom of the dialog box.

Ignore the stack metadata fields (Title, Kicker, and so on) for now—we’ll go over those options in the next tutorial.

Content Bundler

5 Click Export Folio.

6 In the Export Options dialog box, choose Single File from the Folio pop-up menu and use the default export settings

for Dimension (1024x768 is the size of the iPad screen). Click OK.

For the first tutorial, you’re going to create a single .folio file so that you can sideload it to the Viewer. For the next

tutorial, you’ll learn how to upload files to a test server.

7 Specify a known location of the file (such as the Meridien_Folio folder), type the name of the file, such as

MeridienTest.folio, and click Save.

A prompt lets you know if the file exported successfully. The digital magazine .folio file is created in the folder you

specified. Now you’re ready to add that file to your iPad.

View the bundled folio on the iPad

The Adobe Content Viewer is a generic version of the Viewer that displays .folio files on your iPad. When you publish

your content, you’ll have your own version of the Viewer with custom branding.

Adding content to the Viewer from your desktop is called sideloading (as opposed to downloading from a server).

Sideloading content is useful for testing .folio files on the iPad. In the next tutorial, you’ll learn how to upload the folio

to a server and then download it directly to your iPad.

1 If you have not already done so, install the Adobe Content Viewer from the App Store on your iPad or from the

iTunes store.

2 Connect your iPad to your computer, and sync the device to make sure that the Adobe Content Viewer app appears

both in iTunes and on your iPad.

The app appears on your iPad as “Adobe Viewer.”

3 In iTunes, select your iPad name in the Devices section, and then click the Apps tab.

Prerelease




4 In the Apps tab, scroll down to view the File Sharing section.

Sideloading the .folio file to the iPad

5 Click the Adobe Viewer icon under Apps, click the Add button, and browse to the .folio file you created. Click

Choose.

The .folio file is sideloaded to the Viewer.

Prerelease




6 On your iPad, tap the Adobe Viewer app.

The Viewer displays preview images of each folio in the library.

7 Tap Download to download the current folio. When it’s finished downloading, tap View.

8 Rotate the iPad so that you can see both the horizontal and vertical versions of the single-page folio.

Tutorial 2: Creating a folio with interactive elements

As you go through this tutorial, you’ll work with the CityGuide_Folio folder in the TutorialAssets folder. You’ll create

interactive objects directly in InDesign. At the end of this lesson, here’s what the first page of the main article should

look like on the iPad.

Completed folio displayed on the iPadA. Landscape (horizontal) view B. Portrait (vertical) view C. Hyperlinks D. Video overlays

Add an interactive hyperlink

Let’s create a hyperlink object for the “D. I. Y. Meet” logo. We’ll create an empty frame and apply a hyperlink to it.

1 In InDesign CS5, open Enjoy_v.indd. It’s located in the Enjoy_Stack folder in the CityGuide_Folio folder. If

prompted, update the links.

2 Select the Rectangle tool in the toolbar, and then drag a rectangle over the “D.I.Y. Meet” logo on the first page. Make

sure that the rectangle does not have a stroke or fill.

A

B

C D

Prerelease




3 Open the Hyperlinks panel (choose Window > Interactive > Hyperlinks), and then choose New Hyperlink from the

panel menu.

4 Select URL from the Link To menu, and type a URL address in the URL field (we used

http://www.bikeworks.org/). Deselect Shared Hyperlink Destination. Under Appearance, leave Invisible

Rectangle and None selected. Click OK.

Applying a hyperlink to a rectangle frame

5 Open the Enjoy_h.indd document, and then copy and paste the hyperlink object from the Enjoy_v.indd file to the

Enjoy_h.indd file. Move the object over the “D.I.Y. Meet” logo.

By default, hyperlinks open in an in-app Viewer, not in Safari. You can use the Overlay Creator panel to change

settings so that it opens a website in Safari. You’ll learn more about the Overlay Creator panel next.

Create a movie overlay

Movies you add to an InDesign document become interactive when you bundle the files. Let’s add the video and then

use the Overlay Creator panel to change the settings. We’ll add a cycling movie.

1 In the Enjoy_h.indd file, choose File > Place, browse to the CityGuide_Folio > Enjoy_Stack > Links folder, and

double-click cycling_432x234.mpg. Place the movie file in the upper right corner.

The designers created a video image with a movie icon to indicate that the object is interactive. Next, you’ll use that

image as the poster.

2 In the Media panel (Window > Interactive > Media), select Choose Image from the Poster pop-up menu, and

double-click cyclist.jpg in the CityGuide_Folio > Enjoy_Stack > Links folder.

The new poster image is displayed. Now let’s use the Overlay Creator panel to determine how the movie is played.

3 Choose Window > Extension > Overlay Creator to open the Overlay Creator panel.

4 With the movie object still selected, select Show Controller on Tap in the Overlay Creator panel.

Prerelease




Using the Overlay Creator to edit movie settings

5 Using the Selection tool, copy the image, switch to Enjoy_v.indd, and paste it. Move it to the empty area on the first

page, and align it to the surrounding objects.

Create a slideshow overlay

Now let’s create an interactive slideshow using the Object States panel. We’ve already added the images to the second

page of the vertical “Enjoy” file. You’ll arrange them in a stack, convert them to a multi-state object, and create buttons

that navigate through the slides.

1 Open Enjoy_v.indd in InDesign CS5, and turn to page 2.

2 Select the seven images between the red arrows, and then click the Align Horizontal Centers and Align Vertical

Centers buttons in the Control panel. Center the images between the arrows.

3 With the images still selected, choose Window > Interactive > Object States to display the Object States panel, and

then click the Convert Selection To Multi-State Object button.

Prerelease




Images combined into multi-state object

Each image appears as a separate state in the Object States panel.

4 In the Object States panel, change the Object Name to Sea Slugs.

When your multi-state objects in the horizontal and vertical documents have the same object name, the state is

remembered when you rotate the iPad. Now that you’ve created the multi-state object, you need to let users scroll

through them.

5 Choose Window > Interactive > Buttons to display the Buttons panel, and then select the red arrow on the left.

6 Click Convert Object To A Button, and then choose Go To Previous State from the plus icon next to Actions.

Prerelease




Create navigation buttons

Now let’s make the button’s appearance change slightly when the user taps it.

7 Click [Click] in the Buttons panel, and then click the Drop Shadow icon in the control panel.

8 Select the red arrow on the right, convert it to a button, apply the Go To Next State action, and give its [Click]

appearance a drop shadow.

The buttons let users tap to move from image to image. Let’s also allow them to swipe to advance through slides.

9 Select the multi-state object. In the Overlay Creator panel, select Swipe to Change State.

Prerelease




Turn on swiping for the slideshow

10 Copy and paste the arrows and multi-state object from the Enjoy_v.indd file to page 2 of the Enjoy_h.indd file.

Move the arrows below the multi-state object for a better fit.

Create a panorama overlay

Let’s create a panorama overlay. Panoramas require six images, with each image representing a side within a cube. We

already created the images for you.

1 Open Enjoy_v.indd and turn to page 3.

2 Select the Rectangle Frame tool in the toolbox, and drag to create a rectangle of any size.

3 In the Overlay Creator panel, select Panorama.

4 Click the Source folder, and select the CourtyardPano folder in the CityGuide_Folio > Enjoy_Stack > Links folder.

Click Open.

The placeholder rectangle assumed the shape of the panorama images, but we want the click area to be smaller.

5 Holding down Ctrl+Shift (Windows) or Command+Shift (Mac OS), drag a selection handle to resize the panorama

object so that it’s approximately 400 x 400 pixels.

Prerelease




Creating a panorama overlay

Let’s use the default settings for the panorama to provide full range of movement.

6 Copy and paste the panorama object from the Enjoy_v.indd file to page 3 of the Enjoy_h.indd file.

7 Save and close the InDesign files.

Organize the folder structure

The Content Bundler uses the folder structure to determine which stacks are included in the folio and what they look

like. You’ll now make sure that the folio folder includes the necessary files.

1 Open the CityGuide_Folio folder.

2 Copy the WiFi_Stack ad from the Meridien_Folio folder to the CityGuide_Folio folder.

3 Make sure that the folio folder includes four stack folders.

4 Make sure that each stack folder includes two InDesign documents, one with an _h suffix and one with an _v suffix.

Prerelease




Proper structure for filesA. Folio folder B. Stack folders

The OverlayDemo_Stack article includes examples of all the current overlay types.

Before you bundle the files, it’s a good idea to make sure that the InDesign documents do not have any missing links.

If a document does have missing links, a yellow warning icon appears in the Content Bundler next to the Sign In

button.

Bundle the files

Now that the folio folder includes stack folders with all the necessary files in place, you’re ready to use the Content

Bundler to create a set of folio files that can be uploaded to an Adobe server and subsequently downloaded to the iPad.

Currently, when you bundle stacks, images files—PNG, JPEG, or PDF—are created for each page of every stack. All

non-interactive content on each page is compressed into these image files, and all interactive overlays appear on top

of these image files.

1 Launch the Content Bundler.

2 In the Content Bundler, click Sign In. Specify your Adobe ID and password, and click Sign In.

The Manage tab is displayed. Let’s switch back to Bundle view so that we can bundle the files and upload them to

the server.

3 Click Bundle.

4 Click New, browse to the CityGuide_Folio folder, and click Select.

The Bundler launches InDesign and prepares the files for the iPad.

5 Make sure that Cover_Stack is at the top of the stack list.

When you bundle content for a server, the first page of the first stack is used as the cover. You can enter a number

in the Order column to change the stack order.

6 Enter the folio data for Magazine Title, Folio Title, and Folio Description at the bottom of the dialog box.

The folio metadata is displayed in the Viewer library and in the navigation bar.

7 Specify metadata for each of the stacks. The metadata text is displayed in Browse mode on the iPad.

B

A

Prerelease




The kicker is the section title of a magazine, such as “Reviews” or “Editorial.” If you click the cell of the Ads column,

you indicate that the stack is an ad. Ads don’t appear in the table of contents.

Content Bundler

8 To preview the articles, click the Switch To Thumbnail View button. Drag the slider to zoom in or out, and change

to Landscape. Click the Switch To List View button when you’re done.

Previewing the stacks


10 In the Export Options dialog box, choose Multiple Files from the Folio pop-up menu.

Prerelease




The Multiple Files option is required for folio files that are intended to be exported to a server. When you export

multiple files, each stack becomes a mini .folio file within a main .folio file, making it easy to update, add, and

remove individual stacks at a later time.

Export Options dialog box

11 Select Upload To Server After Exporting, make sure that Free, Private, and Include Cover are selected, and click OK.

The Product ID and Status options will become more significant when you make your .folio files commercially

available to the public.

12 Specify the location on your computer (such as the CityGuide_Folio folder) where the project files will be saved,

and click Select.

If you need to re-bundle the folio, you can click Open in Bundler, and select the project.bprj file. Then you don’t

have to re-enter the metadata. However, if you make any changes to the stack files, click New, and bundle again.

13 When the folio is uploaded, click the Manage tab in Bundler to view the uploaded folio.

View the folio on the iPad

In the first tutorial, you added content to the iPad directly from your desktop. In this tutorial, you’ll download the

content to the iPad directly from the server.

1 If you have not already done so, install the Adobe Content Viewer on your iPad.

Your iPad must be connected to the internet to download the folio.

2 On your iPad, start the Viewer. (If necessary, exit and restart.)

3 If you haven’t signed in yet, tap the Sign In button. If you cannot see the Sign In button, tap the folio and then tap

the Home button in the upper left corner to view the library. Sign in using the same Adobe ID information you used

to sign in to the Content Bundler.

Your iPad must be connected to the internet for you to sign in. If you have difficulties signing in, see “Viewer

troubleshooting” on page 51.

4 When prompted, download and view the .folio file.

• Rotate the iPad so that you can see both the horizontal and vertical versions of the file.

• Swipe left and right to view different articles. Swipe up and down to read an article.

Prerelease




• Browse to the Enjoy article. Make sure the interactive overlays work.

• Tap a non-interactive area to display the navigation bars, and tap the Home button to jump to the beginning of

the folio. Tap the Table of Contents button in the upper-left corner to view the table of contents and thumbnails.

Tap the Browse button in the upper-right corner for a bird’s eye view of the folio with the metadata descriptions

you added. Drag the Scrubber to scroll through article previews.

Adobe ViewerA. Home button B. Back Button C. Table of Contents button D. Browse button E. Scrubber

Creating InDesign files

Use InDesign CS5 to create layouts for the iPad. You can create both horizontal and vertical versions of the layout, or

you can create a single-orientation layout. At this time, the horizontal and vertical layouts must be in separate

documents, not in the same document. You cannot mix and match orientations within an issue. The entire issue must

be dual, portrait, or landscape.

Animation you add to InDesign documents are ignored when you bundle the documents for the iPad. However,

hyperlinks, buttons, multi-state objects, audio clips, videos, and scrollable frames become interactive on the iPad. Use

the Overlay Creator to create and edit interactive objects (see “Overlay Creator panel” on page 24).

Mobile device readers scroll vertically to the next page, and they scroll horizontally to move to different articles in the

folio. If you want one or more articles to be read horizontally, you can use the Bundler to “flatten” the stack, which

basically converts each page into a separate stack.

A B DC

E

Prerelease




Each document can have multiple pages and assets that differ in the horizontal and vertical orientation.

Best practices for creating documents

• Turn off facing pages.

• Use pixels for units of measurement. Using pixels is especially useful when snapping objects to grids. We

recommend choosing Web from the Intent pop-up menu when creating a new document.

• For non-interactive images you place in InDesign, you can use any format, including PSD, TIFF, AI, and JPEG, and

you can scale them down. When bundled, the non-interactive objects on each page are compressed and converted

into a single PNG, JPEG, or PDF file. However, you should use correctly sized JPEG or PNG images in overlays

because overlay resources are not downsampled and increase the size of the .folio file.

• To get the best color fidelity, use RGB color images instead of CMYK or LAB.

• Avoid running interactive objects into the bleed area. Snap objects to the edge of the document.

• When creating your issue, you can turn on Smooth Scolling for the horizontal or vertical layout, or both. Smooth

Scrolling is for long, single-page layouts. If Smooth Scrolling is turned on, create your design accordingly. For

example, you may want to create landscape and portrait documents that are 1024x4000 and 768x5000, respectively.

If there is too much blank space after you finish your design for smooth scrolling, turn on Layout Adjustment

(choose Layout > Layout Adjustment). Then choose File > Document Setup and change the Height value.

• Add background colors to a master page. If you want to use different colors for each page in the document, create

a rectangle shape the size of the page, apply a fill color, and arrange it to the back of the stack. To avoid selection

problems, lock the background object.

Create horizontal and vertical documents

If you’re basing a digital magazine article on an existing print article, creating a new document is usually the easiest

approach. To repurpose a document, you can change settings in the Document Setup dialog box to use a different page

size (such as 1024x768) and orientation (portrait or landscape).

Do not use facing pages in your document—use only one page per spread.

1 In InDesign CS5, choose File > New > Document.

2 For Intent, choose Web.

Choosing Web isn’t necessary, but it turns off Facing Pages and displays the measurements in pixels, making the

layout easier to work in for mobile devices. If you’ve already created a document with Intent set to Print, you cannot

change it to Web.

3 For Page Size, specify the dimensions of the device reader.

The iPad uses 1024 x 768. However, if you want to allow smooth scrolling, you can specify a custom page size (such

as 1024 x 3000) to allow more content to be added to the one-page document. You then use the Bundler to turn on

smooth scrolling for that article.

4 For Orientation, choose either Portrait or Landscape.

Prerelease




Creating a document for a device readerA. Set Intent to Web B. Specify Page Size C. Choose Portrait or Landscape

5 If desired, follow the same procedure to create a second document. When you save the files, make sure that you

include an _v suffix for the vertical (portrait) document and an _h suffix for the horizontal (landscape) document,

such as article_h.indd.

If you prefer, you can also use _p and _l suffixes instead of _v and _h.

6 Design your documents.

Package files

If you’re working as part of a production team, it’s a good idea to package your InDesign documents before you bundle

the assets.

When you package a file, InDesign exports the file itself, a Links folder, and a Document Fonts folder (if the file uses

fonts) into a folder. You can then place these packaged folders into a stack folder.

1 Save the document, and then choose File > Package.

2 Make sure there are no missing or modified links, and then click Package.

3 Click Continue to skip the printing instructions.

4 Specify the location of the packaged folder.

Setting up the folder structure

The Content Bundler uses the folder structure and filenaming conventions to determine what is included in a folio. It

is important to follow the structure rules to avoid bundling errors. When you bundle assets to be included in a .folio

file, you point to the main folio folder. The folio folder consists of one or more stack folders. Each stack represents an

ad or article consisting of one or more pages.

A

B

C

Prerelease




To be included in a folio, a stack must contain either one or two InDesign documents, depending on whether you’re

providing a single- or dual-orientation folio. If you’re providing a dual-orientation folio, each stack should include two

InDesign files, one with an _h suffix (such as “article1_h.indd”), and one with a _v suffix (such as “article1_v.indd”).

Each stack folder can also include a PNG file (such as “tocPreview.png”) for the table of contents thumbnail. If a stack

folder does not include a PNG file, the table of contents thumbnail is generated automatically based on the first page

of the stack.

The first page of the first stack is used as the cover of the folio. However, interactive elements are omitted from the

cover. See “Create a library preview cover” on page 46.

Overlay requirements

The previous releases required a specific folder structure for overlay files. The source files for each overlay had to be in

the OverlayResources folder, and the exported SWF overlay file from the Overlay Creator app had to be in the

document’s Links folder. While this approach is still valid, it isn’t necessary.

The Overlay Creator app is no longer used to export placeholder SWF files. Instead, you use the Overlay Creator panel

in InDesign to create and edit interactive objects. For interactive objects such as panoramas and 360 viewers that

require a set of files, make sure that the source assets for each overlay appear in a single folder. Do not delete this

folder—the Content Bundler requires it to build the .folio file. If you move an assets folder, specify it again in the

Overlay Creator panel.

Folder structure

When setting up the folder structure, you can various methods to organize your stack files. Files you link to in InDesign

do not have to be in the stack folder—they can be in any folder where InDesign can find them. In fact, you can link to

assets that appear in a different folio. However, we recommend that you keep your assets in the stack folder so that you

know where to find them.

For best results, keep filenames and folder names simple. Avoid using special characters.

1 Open the CityGuide_Folio folder.

2 Copy the WiFi_Stack ad from the Meridien_Folio folder to the CityGuide_Folio folder.

3 Make sure that the folio folder includes four stack folders.

4 Make sure that each stack folder includes two InDesign documents, one with an _h suffix and one with an _v suffix.

Prerelease




Sample structure for filesA. Folio folder B. Stack folders

Single-orientation folios

If each stack folder in your folio folder contains an InDesign file of only one orientaton—vertical or horizontal—the

exported folio file is locked into that orientation. For example, if you create stacks with only vertical (768x1024)

InDesign files, that orientation remains in place even if the user rotates the iPad. The InDesign files still require an _h

or _v extension in single-orientation folios.

You cannot mix single-orientation and dual-orientation stacks in a .folio file.

Folio with only vertical articles

HTML stacks

HTML-based stacks can be included in a folio and displayed in the Viewer. One advantage of HTML stacks is a much

smaller file size that is better suited for weekly publications and simple, text-intensive articles.

This user guide provides only minimal information about creating HTML stacks.

B

A

Prerelease




HTML stack requirements

You can create a single HTML file that works for both portrait and landscape orientations, or you can create separate

HTML files for the two orientations. If you’re creating a single-orientation folio, you need only one HTML file. If you

want separate HTML files for portrait and landscape, add the _v and _h suffixes to the end of the HTML file names,

such as index_h.html and index_v.html. Each stack folder must include at least one HTML file. The HTML filename

does not need to be index.html.

As is the case with InDesign stacks, each HTML stack can include a .png file for the table of contents. If a .png file is

not included in the stack, the table of contents icon is generated automatically.

Dynamic HTML (DHTML) files currently are not fully supported. If you include a DHTML file, the Bundler may

freeze while trying to generate thumbnails. To avoid this problem, create thumbnails manually.

For file structure, one method is to place all associated graphics and scripts for the HTML file in the individual stack

folders. Another option is to place associated graphics and scripts for the entire folio in an HTMLResources folder.

The HTMLResources folder must be at the same level as the HTML stack folders.

Folio with HTMLResources folder

Regardless of which file structure method you use, make sure that you use relative paths in your HTML code. For

example, if you’re linking to an image in the HTMLResources folder, use this approach:

<img src="../HTMLResources/GlobalImage.jpg"/>

For information on creating hyperlinks to and from HTML articles, see “Create navto hyperlinks for HTML stacks”

on page 27.

Creating scrubber thumbnails for HTML stacks

For InDesign stacks, the Viewer automatically generates the thumbnails that appear when you drag the scrubber.

However, generating thumbnails for HTML stacks takes more time, sometimes resulting in poorly rendered

thumbnails. To improve thumbnail performance in HTML stacks, you can allow the Bundler to generate thumbnail

images based on the first page of each HTML stack, or you can manually add image files to the HTML stack folders.

• To let Bundler generate thumbnails based on the first page of each HTML stack, select the “Include scrubbers for

HTML stacks” option in the Bundler.

• To provide your own thumbnail images, create png files that are named “scrubberthumbnail_h.png” and

"scrubberthumbnail_v.png” (you can also use _l and _p suffixes). There is no size restriction for these images, but

note that they are scaled down proportionally to a height of 166 pixels. As a point of reference, when thumbnails

are generated, landscape thumbnails are 221 x 166 pixels, and portrait thumbnails are 125 x 166 pixels.

Prerelease




Overlay Creator panel

Use the Overlay Creator panel (Window > Extensions > Overlay Creator) to create and edit interactive objects. There

are basically two ways to create interactive objects.

• For slideshows, hyperlinks, audio, video, image pans, and scrollable content, create or place the objects in the

InDesign documents, and use the Overlay Creator to edit settings.

• For 360 viewers, panoramas, and web views, draw a rectangle frame as a placeholder, and then select it and use the

Overlay Creator panel to specify the source and change settings. For 360 viewers and panoramas, the size of the

images changes the size of the placeholder frame. You can then scale the frame.

The Overlay Creator panel is still under construction during this prerelease drop. You cannot press Enter or Return

to enter a value, and you may need to click twice to select an option. If you specify a value that is out of range, the value

is changed to the nearest valid value without displaying an error message.

Unlike the Overlay Creator AIR app, the Overlay Creator panel does not include ID settings for each overlay. In

previous versions, using the same ID for the overlays in the horizontal and vertical layouts ensured that the interactive

object continued instead of restarted. The Bundler now recognizes when the source files and settings for overlays are

identical, so specifying the same ID for horizontal and vertical layouts is no longer necessary, with the exception of

slideshows. For slideshows, use the same Object Name in the Object States panel for the multi-state objects in the

horizontal and vertical layouts.

Interactive overlays appear on top of the InDesign layout in the bundled version. If you mask or cover interactive

overlays that you place in the document, the z-order will change in the bundled issue.

Using the Overlay Creator panel to change slideshow settings

For source files to experiment with, see the OverlayDemo_Stack folder in the Tutorial Assets (.zip) folder. This folder

is available on Adobe Labs and on the DMP prerelease site.

Best practices for creating overlays

• When working with overlays, choose Window > Workspace > Interactive to make interactive panels more

accessible.

• For panoramas, 360 viewers, audio skins, and local Web View overlays, create a separate folder for overlay files.

These source files are necessary for bundling.

Prerelease




• Do not move or delete the source folders for interactive overlays. If you move or delete an individual source file,

such as a video file, you’ll get a missing link warning. However, if you move or delete a source folder, a warning may

not appear.

Note: If you move or copy a stack folder to a different location, the Assets option in the Overlay Creator panel currently

appears to lose its connection to the source folder for panoramas, 360 viewers, and audio overlays. However, the

overlay should still bundle properly. If the overlay doesn’t bundle properly, specify the source folder again.

• For best results, create the source files for interactive overlays using the exact dimensions in pixels that they will

appear in on the iPad.

In Photoshop and Illustrator, the File > Save for Web & Devices command is especially useful for saving image files

with specific pixel dimensions, especially when repurposing large images from portrait to landscape and vice versa.

• The Bundler does not compress the source assets of interactive overlays. To minimize file size, it’s better to use

JPEG images with medium compression (50-80% range) for the source files rather than PNG. Compressing overlay

images can significantly reduce the size of the bundled issue.

• For large text in overlays, use a PNG or JPG image with medium-high compression. For small text or detailed icons,

use PNG images.

• When you place overlay files in InDesign, the frame size determines where you tap to activate the interactive

content. If you change the size of the overlay, use a Fitting option to fit content to frame.

• The iPad has physical memory limitations. Adjacent pages with rich interactive content can cause memory

problems that result in the gray screen appearing. The Viewer renders multiple adjacent pages simultaneously to

optimize navigation. Therefore, three adjacent stacks beyond 30MB will likely strain the available memory for the

Viewer. In such instances, limit interactive content where possible, and stagger rich-media content with flat

content.

Hyperlinks

You can create interactive buttons that navigate through articles, or you can create buttons that move to different slides

in a slideshow. In InDesign, use the Buttons panel to convert objects to buttons.

Create hyperlinks

In InDesign, use the Hyperlinks panel to add hyperlinks. Creating hyperlinks is especially useful for jumping to a

webpage, to a different article, and to a different page in the same article or a different one.

For additional details on creating hyperlinks, see Create hyperlinks in InDesign CS5 Help.

1 Select the frame or text that you want to use as a hyperlink.

2 Open the Hyperlinks panel (Window > Interactive > Hyperlinks).

3 In the Hyperlinks panel, choose New Hyperlink from the panel menu.

4 In the Link To menu, specify any of the following options, and then click OK:

URL Tapping a URL hyperlink displays a web page.

Example: http://www.adobe.com

Type the entire URL, including “http://.”

When linking to an iTunes URL, deselect View in Context in the Overlay Resources panel. Otherwise, a “Cannot

Open Page” error message appears when the hyperlink is tapped. Similarly, if you use an itms:// format to link to

an app in the App Store, turn off View in Context.

Prerelease

http://help.adobe.com/en_US/indesign/cs/using/WS2162F434-F475-4b73-950B-B23DA7744492.html




Email Tapping an Email hyperlink launches the Mail app with the To field filled in.

Example: mailto:[email protected]

File Tapping a File hyperlink jumps to a different article within the folio.

Page Tapping a Page hyperlink jumps to a different page within the article or to a page within a different article.

Jumping to a page in a different article

Navto Tapping a Navto hyperlink jumps to a different article, similar to the Page and File options.

The Navto hyperlink is especially useful for jumping to a text anchor in an HTML stack.

The Text Anchor hyperlink is not supported.

5 To change hyperlink settings, select the hyperlink objects, and then specify these settings in the Overlay Creator

panel (Window > Extensions > Overlay Creator):

Require Confirmation For External Links Determine whether a prompt appears if a user taps the hyperlink. This

option is disabled if View In Context is selected.

View In Context Determine whether the hyperlink is viewed in a web view within the Viewer or in Safari. If this

option is selected, the browser launches within the Viewer app. Deselect this option when linking to iTunes or

itms:// URLs.

Note: The Overlay Creator panel settings are not available for text hyperlinks. Currently, you cannot change settings

for text hyperlinks; they are set to View In Context by default.

Create interactive hyperlink buttons

1 In InDesign, create the object that will be used as the button.

For example, if you want the button to jump to a website, create a text frame or place an image that refers to the

website.

2 Open the Buttons panel (Window > Interactive > Buttons), select the object, and click the Convert Object To

Button icon.

3 For Event, choose On Release.

On Release is the only supported button event.

4 Click the plus sign next to Action and select a supported action.

Prerelease




Supported button actionsA. Supported actions for hyperlink buttons B. Supported actions for slideshow buttons

Supported hyperlink actions include Go To Destination, Go To First Page, Go To Last Page, Go To URL, and Go

To Page. Go To Next State, Go To Previous State, and Go To State actions are supported for slideshows.

The Go to Destination action is useful for jumping to an InDesign document in another stack.

If you create a hyperlink destination with a Page type (not Text Anchor), you can jump to that page.

All other actions—including Go To Next Page and Go To Previous Page—are currently not supported. Buttons can

have only one action.

Create navto hyperlinks for HTML stacks

When you create a URL-based hyperlink or button, you can use the “navto://” URL to jump to a different stack. Navto

is especially useful for jumping to HTML stacks. You cannot use navto hyperlinks in Web View overlays.

Jump to HTML article Type navto:// followed by the folder name that contains the HTML file.

Example: navto://newsarticle

Jump to anchor in HTML article You cannot jump to a specific page within an HTML article, but you can jump to an

anchor by typing navto://<foldername>#<anchor name>.

Example: navto://newsarticle#part4

Note: To define an anchor in an HTML file, open the HTML file in a text editor, navigate to the text that you want to act

as an anchor, and enclose the text with an anchor tag, such as “<a name="part4">This is Part 4 of the Article</a>.”

Jump to InDesign stack from HTML stack Use the navto format to create a hyperlink from an HTML stack to an

InDesign stack. Example:

<a href="navto://WiFi_Stack">See Meridien ad</a>

You can also navigate to pages within an InDesign stack by adding the page number after the document name. Note

that the first page of the document is page0, and then second page is page1, and so on. Example:

<a href="navto://Cycling_Stack#3">Go to Page 4 of the Cycling Article</a>

Jump from HTML to HTML Use the navto format to jump from one HTML stack to another by referring to the folder

name. Example:

A

B

A

A

Prerelease




<a href="navto://newsarticle">See the News Article</a>

Control the appearance of hyperlinks and slideshows in the Viewer

When users are browsing through a folio on the mobile device, the horizontal and vertical pages they see are actually

rasterized images of each page of the InDesign document. The page thumbnails that appear when the user taps the

Browse button or uses the scrubber at the bottom of the mobile device are also rasterized images. You can control the

appearance of the hyperlinks and slideshows in these rasterized images by creating a config text file and saving it in the

InDesign application folder.

This file, called NativeOverlays.config, lets you include or suppress native hyperlinks and slideshows.

1 Open a text editor.

2 Add one or more of the following lines.

SuppressOverlayTypesForAssets: <slideshow, hyperlink> SuppressOverlayTypesForThumbnails: <slideshow, hyperlink> SuppressOverlayTypesForScrubbers: <slideshow, hyperlink> ResetHyperlinksToTopState: <ThumbnailPass, ScrubberPass, AssetPass, All> ResetSlideshowsToTopState: < ThumbnailPass, ScrubberPass, AssetPass, All>

“Asset” refers to the main pages, “Thumbnails” refers to the Browse icon images, and “Scrubbers” refers to images

that appear when the user drags the scrubber.

ResetHyperlinksToTopState means that any button with a Go to URL action displays the [Normal] state instead of

the [Click] state.

ResetSlideshowsToTopState resets the multi-state object to the top state of the multi-state object in the InDesign

document. If you suppress overlays, reset settings do not apply.

If ResetHyperlinksToTopState and ResetSlideshowsToTopState are not specified, the default behavior is to reset to

top states for both slideshows and hyperlinks.

Example:

SuppressOverlayTypesForAssets: slideshow SuppressOverlayTypesForThumbnails: hyperlink SuppressOverlayTypesForScrubbers: slideshow, -hyperlink ResetHyperlinksToTopState: All ResetSlideshowsToTopState: ThumbnailPass, ScrubberPass

If you type a minus sign before the overlay type, that overlay type will not be suppressed.

3 Save the file with the name, NativeOverlays.config.

4 Move the NativeOverlays.config file to the InDesign application folder using one of these methods:

Windows Move the config file to the same level as the InDesign.exe file.

Mac OS Select the Adobe InDesign CS5 application icon, right click and go to Show Package Contents. Move the

config file to the Content > MacOS folder.

Slideshows

Use the Object States panel to create a set of images for a slideshow. Each state, or slide, can contain multiple objects.

For example, if you want a different text frame to appear with each image, combine the image and text frame on the

same state. Note that interactive objects on a state currently lose their interactivity when bundled.

Prerelease




Currently, you cannot make a slideshow play in full-screen mode.

1 In InDesign, use the Object States panel (Window > Interactive > Object States) to create a slideshow. (For details,

see “Create a multi-state object slide show” in InDesign CS5 Help.)

When you create a multi-state object, you insert images, align them in a stack, and convert the stack to a multi-state

object.

2 In the Object States panel, specify an Object Name.

When your multi-state objects in the horizontal and vertical documents have the same object name, the slideshow

maintains continuity when the iPad is rotated.

3 Create navigation buttons that browse through the states in the multi-state object.

You can use the Go To State action to refers to a specific slide, or you can use the Go To Next State and Go To

Previous State actions.

The Sample Buttons panel in InDesign includes a library of navigation buttons. If you use these sample buttons,

delete the existing action and replace with a Go To Next State or Go To Previous State action.

4 If you want the button appearance to change when it’s tapped, click [Click] under Appearance, and change its

appearance.

Changing the [Click] state corresponds to the “select” object when using the Overlay Creator to create slideshows.

For example, if the [Normal] state button has a black frame and the [Click] state has a red frame, a red frame

appears when the button is tapped on the iPad. (The [Rollover] state setting is ignored, because there is no such

thing as a rollover on a mobile device.)

5 To change slideshow settings, select the multi-state object, and specify the following settings in the Overlay Creator

panel (Window > Extensions > Overlay Creator):

Play On Page Load When selected, the slideshow begins playing when the page is turned to.

Delay If Play On Page Load is selected, you can set a delay value that specifies the amount of time between the page

being loaded and the slideshow starting. Specify a value from 0 to 60 seconds.

Advance Every If Play On Page Load or Tap To Play/Pause is selected, the Advance Every value determines the

amount of time each slide is displayed before the transition to the next slide.

Play _ Time If either Play On Page Load or Tap To Play/Pause is selected, you can specify the number of times the

slideshow plays. This option is dimmed if Loop is selected.

Loop If either Play On Page Load or Tap To Play/Pause is selected, you can select Loop to play the slideshow

continuously until the user double-taps the slideshow or turns the page.

Tap to Play/Pause When selected, this setting lets users tap to play and pause an auto-running slideshow. Double-

tapping resets the slideshow.

Stop at First/Last State You can determine whether the slideshow stops playing or continues when the last slide is

reached going forward or the first slide is reached going backwards. This option affects only swiping.

Swipe to Change State When enabled, this setting lets the user swipe to move from slide to slide.

Cross-fade When selected, this setting provides a fade transition when viewing the next slide. Specify the amount

of time it takes to transition from one slide to another. The value is 0.5 seconds by default. You can specify a value

between 0.125 seconds and 60 seconds. This value applies to both auto-running and manually advanced slideshows.

Hidden Until Triggered If selected, the slideshow remains hidden until the user taps a button to display a slide.

Reverse Image Order When enabled, the slideshow plays the images in reverse order.

Prerelease

http://help.adobe.com/en_US/indesign/cs/using/WS14840753-3931-4e67-AEE6-3F2C2016CB4C.html#WS67cb9e293e2f1f60-27b6480d1255231f6c3-8000




360 Viewer

The 360 Viewer lets users rotate an object 360 degrees on the mobile device. While the 360 Viewer is designed

primarily for rotating objects, you can use it as a way of progressing through any sequence of images.

The image files should be png or jpg, and they should have the same root name with ascending suffixes, such as

Tower001.jpg, Tower002.jpg, and so on. Make the size of the images the same size as they will appear on the iPad, such

as 500 x 400 pixels.

The number of images you should use for the overlay depends on what you’re trying to accomplish. If you use only 10

images to rotate an object 360 degrees, the rotation will not be smooth. For best results, use at least 25 images for a 360-

degree rotation. However, if you use too many images, you’ll increase the size of the folio unnecessarily.

To reduce file size, use JPEG images compressed in the 50-80% range.

You can use a number of different methods to create images of a 3D object. One method is to use Adobe Photoshop®

Extended to create images of a 3D object, with each image rotated by a few degrees. You can use Adobe Flash®

Professional to export frames from an animation. You can use Google SketchUp to draw a 3D model and export the

images. You can also use a 3D authoring application to generate images of a 3D model.

1 Create the source assets for the 360 Viewer object, and place them in a folder.

2 Using the Rectangle Tool or Rectangle Frame Tool, draw a placeholder rectangle object.

3 Select the placeholder object, open the Overlay Creator panel (Window > Extensions > Overlay Creator), and select

360 Viewer.

4 In the Overlay Creator panel, click the Assets folder icon, locate the folder containing the images, and click Open.

5 If necessary, scale the frame and its contents to fit in your layout.

6 Specify the following settings in the Overlay Creator panel:

Use First/Last Image As Initial View Selecting this option uses the first image as the poster. If Reverse Image Order

is selected, the last image is the poster.

Play On Page Load When selected, the 360 Viewer begins playing when the page is turned to.

Delay If Play On Page Load is selected, you can set a delay value that specifies the amount of time between the page

being loaded and the 360 Viewer starting. Specify a value from 0 to 60 seconds.

Speed Change the speed of the object’s progression in frames per second. The minimum number is 1 (1 frame per

second) and the maximum number is 30.

Play _ Time If either Play On Page Load or Tap To Play/Pause is selected, you can specify the number of times the

slideshow plays. This option is dimmed if Loop is selected.

Loop If either Play On Page Load or Tap To Play/Pause is selected, you can select Loop to play the image sequence

continuously until the user double-taps the slideshow or turns the page.

Tap to Play/Pause When selected, this setting lets users tap to play and pause the 360 Viewer. Double-tapping

resets the object.

Allow Swipe When enabled, this setting lets the user swipe to move forward or backward through the images.

If Allow Swipe is not selected, either Auto Start or Tap to Play/Pause must be selected.

Stop at First/Last Image You can determine whether the object stops playing or continues when the last image is

reached going forward or the first image is reached going backwards. This option affects only swiping.

Reverse Image Order When enabled, the 360 Viewer plays the images in reverse order.

Prerelease




Audio

The audio file must be an MP3 file.

1 Choose File > Place, and place the MP3 audio file in your document.

2 Select the placed object, open the Media panel, and specify a poster for the audio file.

(The Media panel is currently required to create a poster for an audio file. In the next release, the plan is to include

a “Use First Image as Initial View” setting that displays the first image in the assets folder you specify.)

3 With the audio frame selected, specify any of the following options in the Overlay Creator panel.

Assets Click the folder icon, and specify the folder containing the play and pause buttons. Here is an example of a

set of controller skin files.

If you want a controller skin with Play and Pause buttons to appear while the audio clip is playing, create a set of

.png files in a folder. These images each must have either a _pause, _play, or _proxy suffix to determine their

behavior. The _play and _pause buttons represent progressive states of a status bar.

AudioAsset001_proxy.png (proxy image) AudioAsset001_play.png AudioAsset002_play.png AudioAsset003_play.png AudioAsset004_play.png AudioAsset005_play.png AudioAsset001_pause.png AudioAsset002_pause.png AudioAsset003_pause.png AudioAsset004_pause.png AudioAsset005_pause.png

In this example, when your audio is played half way, the AudioAsset003_play.png button is displayed.

Play on Page Load Select this option to play the audio file when the page is loaded on the iPad. You can also specify

the number of seconds to delay.

When the user initiates the audio, it is played immediately while allowing the user to continue to read the content in

the current article. Navigating to another article stops and resets the audio. However, turning the page does not stop

the audio.

Panorama

The Panorama overlay provides the illusion of viewing an image from the inside out. For example, you can create a

Panorama effect that lets viewers see the inside of an airplane’s cockpit. They can rotate the view 360 degrees and zoom

in on the instrument panels.

The key to creating a panorama is getting the necessary images. To create a Panorama effect, the Overlay Creator

requires a set of six images, which represent the six inner sides of a cube. If you begin with a full panorama image

(sometimes called an equirectangular image or a 360 panorama), you need to convert it to six cube images based on

that image.

Prerelease




Creating a panoramaA. Original panorama image B. Panorama image converted to inner six sides of cube C. Panorama on iPad

If you begin with a horizontal cross image, you can use Photoshop or a screen capture utility to create the six required

images.

If you need to divide a panoramic cross image into separate images, follow this pattern.

A B

C

5

4 2 3

6

1

Prerelease




1 Create the source assets for the panorama, and place them in a folder.

For best results, use JPEG images. High-resolution images allow customers to zoom in but require a larger file size.

2 Using the Rectangle Tool or Rectangle Frame Tool, draw a placeholder rectangle object.

3 Select the placeholder object, open the Overlay Creator panel (Window > Extensions > Overlay Creator), and select

Panorama.

4 In the Overlay Creator panel, click the Assets folder icon, locate the folder containing the six images, and click Open.

5 If necessary, scale the frame and its contents to fit in your layout.

6 Specify the following settings in the Overlay Creator panel:

Use First Image As Initial View Selecting this option uses the first image as the poster.

Initial View For Zoom, specify a value between 1 and 100. For the x-axis (tilt), specify a value between -90 (tilted all

the way up) and 90 (tilted all the way down).

Limit Pinch to Zoom If you don’t want users to zoom in or out past a certain point, specify Min and Max values

between 1 and 100.

Limit Horizontal Pan If you want to allow panning only two-thirds towards the left and right, specify -120 for left

and 120 for right.

Limit Vertical Pan If you want to allow tilting only two-thirds towards the top, specify -60. Specify 60 to allow tilting

only two-thirds towards the bottom.

To experiment with panorama settings, use the panorama grid files in the OverlayDemo_Stack > Links folder.

Video

For best results, create a movie in the appropriate dimensions, such as 400 x 300 pixels, and create a separate poster

image using those same dimensions. Full screen movies should be set to 1024 pixels wide. Although you can specify a

poster image from one of the movie frames, we recommend that you create a poster image that indicates the object is

interactive.

Use a format that is compatible with Apple iTunes, such as an MP4 file with h.264 encoding.

Creating Panorama Assets Using Pano2VR

You can use a third-party tool called Pano2VR to convert an equirectangular panorama image into the six images

required by the Overlay Creator.

1. Install and start Pano2VR. You can download Pano2VR here:

http://gardengnomesoftware.com/pano2vr_download.php

2. Drag the panorama image image into the Input area of Pano2VR.

3. Click Convert Input, choose Cube Faces from the Type menu, choose PNG for format type, and specify a known

folder where the PNG files will be saved, such as a subfolder in the OverlayResources folder.

4. Click Convert to generate the six files.

Pano2VR is also useful for determining the upper and lower limit values for panorama images that include blank

spots at the top and bottom. After you drag in the image, click Modify under Viewing Parameters, select Show Limits

and select Ignore Limits In Preview, and look at the Tilt value as you drag the image. (For the negative Tilt value that

appears in Pano2VR when you scroll to the bottom of the image, use a positive value for Button in the Overlay

Creator.)

Prerelease

http://gardengnomesoftware.com/pano2vr_download.php




Currently, you cannot specify a URL to stream a video from the web using the Video overlay. However, you may be

able to stream video using a Web View overlay or an HTML stack.

1 Choose File > Place, and place the movie file in the document.

2 In the Media panel (Window > Interactive > Media), specify a poster image.

You can choose an image or specify a frame from the video. We recommend that you choose an image that indicates

the page item is interactive.

3 With the movie frame selected, specify any of the following options in the Overlay Creator panel.

Play Inline Select this option to play the video within its bounding area. If this option is not selected, the video plays

in full-screen mode.

Show Controller on Tap If this option is selected, tapping the video while it’s playing displays a controller bar with

pause and play controls. If this option is not selected, tapping the video pauses and restarts.

Play on Page Load Select this option to play the movie when the page is loaded on the iPad. You can also specify


Web View

The Web View overlay lets you display a web page within a view area. Users can see the web page content in the view

area without having to display a separate in-app browser, as is the case with URL-based hyperlink overlays. You can

specify a URL or a local HTML file.

If you specify a local HTML file, make sure that the .html file and associated folders appear in a subfolder. All files in

that subfolder, including images and scripts, can be included in the exported folio. In the .html file, create relative links

to the files in this subfolder.

Specifying a local HTML file can be useful for providing an alternate image in case the user’s iPad isn’t connected to

the web. The local HTML file can check for a connection and display a web page if there is a connection. If there isn’t

a connection, it can display a different image.

For best results, specify a mobile URL (such as http://mobile.twitter.com/).

1 Using the Rectangle tool or Rectangle Frame tool, drag to create the frame that will display the Web View contents.

2 With the frame selected, select Web View in the Overlay Creator panel.

3 Do one of the following:

• To specify a URL, type or paste the URL in the Assets field. Type the entire URL, including “http://.”

• To use local HTML files, click the folder icon and specify the local HTML file. The HTML file (such as

index.html) should appear in a folder that includes any images or scripts used in the HTML file.

4 Specify any of the following options:

Play on Page Load Select this option to load the web page when the page is loaded on the iPad. You can also specify


Use Transparent Background If this option is selected, the transparent background in a web page is preserved. If

this option is deselected, the web view background is used.

Allow User Interaction If this option is selected, users can interact with the web page. For example, they can tap a

hyperlink to jump to a different web page.

Scale Content to Fit If this option is selected, the web page is scaled to fit within the size specified in the overlay file.

If this option is not selected, the web page is displayed at the same size it would appear in the iPad Safari browser,

and the html page may be cropped.

Prerelease




Pan and Zoom

You can display a large image in a small area and allow the user to pan and zoom the image within that area. For

example, you can place the overlay over a window in an image of a room and let users pan (move) the image to see

outside the window and zoom in or out. Currently, the view area must be rectangular; it cannot be masked.

In previous releases, Pan and Zoom was called Image Pan.

For best results, use JPEG images. Make sure that the image has the exact dimensions you want to use. For example, if

want users to be able to pan an 1024-by-1024 pixel image within a 200-by-200 pixel view area, create a 1024-by-1024

image.

Note: For best results, avoid using an image larger than 1024-by-1024 pixels. Large images increase the file size, and in

some instances, create memory problems on the iPad. The maximum size is 2000 pixels for the height or width.

1 Place a JPG or PNG image to be used for the pan and zoom object.

2 Drag the image frame to crop frame without resizing the image. Make the frame the size of the view area. Position

the image within the frame to determine the initial view area.

Note: In some instances, the Viewer does not display the initial view area properly. This bug is being fixed.

3 Select the image frame, open the Overlay Creator panel, click the Pan and Zoom tab, and then click Pan and Zoom

or Pan Only option.

The Pan Only option is useful for creating a frame in which you can scroll the content vertically or horizontally. See

“Scrollable frames” on page 35, next.

Once you select Pan and Zoom or Pan Only, the object is converted to an overlay. You cannot convert the overlay back

to a regular image frame, not even through undo. Delete it, and place it again.

Scrollable frames

You can create a scrollable frame that lets users scroll to view more content. For example, you can create a cooking

page with a list of ingredients and a set of instructions. Rather than turning to the next page to see the full set of

ingredients or instructions, users can swipe to scroll.

The anchor point for scrollable frames is the upper left corner. Currently, you cannot change the anchor point.

1 In the Layers panel, create a layer called Scrollable Content.

The layer name is case-sensitive; make sure you type the layer name accurately.

2 Create two objects—a container frame and a content frame that contains the scrollable content.

For best results, make the width of the container frame and the content frame identical for vertical scrolling. The

content frame should not include overset text.

The content frame has a transparent background by default, so apply a fill to the content frame if you do not want

the page items behind it to show. For example, if your container frame includes a graphic, that graphic will appear

behind the scrollable content unless you apply a fill to the content frame.

Prerelease




Scrollable contentA. Content frame added to Scrollable Content layer B. Container frame with identical name on different layer C. Layers panel D. Scrollable frames on iPad

If you want to display objects in the scrollable frame—such as a text frame, an image, and a caption—arrange these

objects vertically and group them.

Note: To keep the scrollable content from interfering with your layout, you can place it on the pasteboard or on a

hidden layer. However, if the scrollable content is placed entirely on the pasteboard, packaging the files will omit any

linked objects. To include the linked files, make part of the frame touch the document page. You can change the size

of the pasteboard in InDesign preferences.

3 Move the content frame to the Scrollable Content layer.

Only content frames should appear on the Scrollable Content layer. The container frames—or any other object—

should not be on the Scrollable Content layer.

A B C

D

Prerelease




4 In the Layers panel, rename both the container frame and the content frame so that they have the same name, such

as “Ingredients.”

To rename an object in the Layers panel, click the arrow to the left of the layer to expand it. Click the object, pause,

and then click again. Type to replace the selection.

If the scrollable content is a group, rename the group. The group and an object in the group can have the same name.

When you copy and paste the objects from one document to another, make sure that Paste Remembers Layers is

selected in the Layers panel menu. That way, you don’t have to re-create the Scrollable Content layer.

Content Bundler

The Content Bundler converts the InDesign files and assets to a .folio file that can be uploaded for viewing on a mobile

device such as an iPad. This .folio file is a compressed file format that contains vertical and horizontal magazine

layouts, metadata, code to enable interactivity, and associated assets. Once the layouts have been packaged into the

.folio format, the file is then rendered and displayed on the Viewer.

The .folio format was previously called .issue.

Bundle files

1 If you have not already done so, install the Digital Publishing for InDesign Plug-in (.zxp).

The Bundler requires this plug-in.

2 Launch the Content Bundler.

3 Click New, browse to the folio folder that contains the stacks, and click Select.

The Content Bundler launches InDesign and prepares the files for the iPad. The stacks appear in the stack title list.

If the Bundler fails to load the files, see “Bundler troubleshooting” on page 49.

4 Drag the stacks to move them to the desired order.

Content Bundler

Prerelease




5 Specify options for each stack.

The items you add in the metadata fields determine what appears in Browse mode on the iPad.

Stack metadata displayed in Browse mode on iPadA. Description B. Tags C. Kicker D. Title E. Byline

Order To change the stack order, enter a different number for the stack row. You can also drag the stack titles in

thumbnail view to re-order them.

Locked Select Locked if you don’t want a stack to be re-bundled. You can lock a stack only if you bundled the folio

using the Multiple Files option, which creates a mini-folio file for each stack.

Kicker The kicker is the section title of a magazine, such as “Reviews,” “Features,” or “Editorial.”

Ads In the Ads column, click the cell to indicate which stacks are advertisements. Ads do not appear in the table of

contents.

Flatten When a stack is flattened, each page in the stack essentially becomes a separate stack, allowing users to

scroll horizontally to view the pages of an article. Only the first page of a flattened stack shows up in the TOC, but

all the pages appear in Browse mode and as scrubber thumbnails. You cannot flatten a stack that is set to Smooth

Scrolling.

C

A B

DE

Prerelease




Flatten stacksA. Unflattened stack B. Flattened stack

Smooth Scrolling In the Smooth Scrolling column, determine whether each stack scrolls by snapping to the page

or continuously. You can use different scrolling methods for portrait and landscape orientations.

If you frequently update and test your bundled folio, you can avoid typing the same metadata repeatedly by

creating a metadata file called sidecar.xml. See “Create a metadata sidecar file for the Bundler” on page 40.

6 Enter the folio metadata for Magazine Title, Folio Number, Publication Date, and Folio Description at the bottom

of the dialog box.

The folio metadata is displayed in the navigation bar and in the Viewer library.

Note: To preview a stack, click it and click the Switch To Thumbnail View button. You can view both the Portrait and

Landscape versions. Click the Switch To List View button to exit previewing.

7 Select “Include scrubbers for HTML stacks” to let the Bundler generate scrubber thumbnails for HTML stacks.

Deselect this option if you want to let the Viewer generate the scrubber thumbnails (not recommended) or if you

manually add thumbnail images. See “HTML stacks” on page 22.


9 Specify the settings in the Export Options dialog box, and click OK.

10 Specify a location of the folio file or files. For a single file, type the name of the file and click Save. For multiple files,

specify the folder where you want the project files to be saved and click Select.

Do not include a bullet character in the folio filename. A bug currently prevents the folio from being uploaded to

the fulfillment server if its name includes a bullet character.

Exporting the .folio file (or clicking Save) saves a project.bprj file in the folio folder. You can open this file later to

export the folio again. For example, you may want to change the order of stacks or edit the metadata. However, if you

need to edit the layout or add overlays, click New and bundle the files again.

A B

Prerelease




Export Options settings

The following settings appear in the Export Options dialog box.

Dimension Specify the dimension of the exported folio. For the iPad, choose 1024x768.

Folio Choose Single File or Multiple Files.

• Single File Choose Single File from the Issue pop-up menu if you want to create a single .folio file that you can

manually add (sideload) to the Viewer.

• Multiple Files Choose Multiple Files from the Issue pop-up menu if you want to upload the content to a test server.

This option creates individual .folio files for each stack as well as a parent .folio file. See “Upload content to a fulfillment

server” on page 42.

Image Format Choose Automatic if you want to let the Bundler determine whether to export the pages as JPEG, PNG,

or PDF. If you want to reduce file size at the possible expense of image fidelity and performance, choose JPEG or PDF.

JPEG Quality If Automatic, JPEG, or PDF is selected for Image Format, specify the JPEG Quality. Increased quality

increases the file size.

Use Smooth Scrolling to enable long pages

By default, scrolling through an article works on a page by page basis. However, if you create a long document, such

as 768x2000, you can turn on Smooth Scrolling in the Bundler to let users scroll through that long document. For

example, you may want users to scroll through a Credits page at the end of a magazine.

In InDesign , use the New Document or Document Setup dialog box to specify the page size. Using the Page tool to

change the page size is not currently supported.

In the Bundler, choose an option such as Vertical Only or Both Directions on the right side of the dialog box. When

Smooth Scrolling is enabled for an orientation of a stack, the InDesign document for that orientation is required to

have only a single page.

Note: If the article with Smooth Scrolling is the first stack in the folio, the folio cover will appear compressed when viewed

in the library. To avoid this problem, create a different cover for the folio. See “Create a library preview cover” on page 46.

Create a metadata sidecar file for the Bundler

The metadata sidecar file is an optional method for entering stack metadata and having it loaded into the Bundler. It’s

especially useful if you need to rebundle a large folio multiple times or use similar metadata for different folios. Use a

text editor or an XML editor to create a sidecar.xml file with metadata for each article or ad. Save the sidecar.xml file

in the root folio folder.

Note: In this release, the sidecar.xml file is used only when you click New in the Bundler to create a new folio. The

sidecar.xml file is not used when you edit a folio project or when you export a folio.

Prerelease




Sidecar.xml file with two articles

Valid <isAd> values are “true” and “false.” If the value is “true,” the ad does not appear in the table of contents.

Valid <smoothScrolling> values include “always,” “portrait,” “landscape,” and “never.” The default is “never,” which

means scrolling snaps to pages.

Author and Byline are redundant. Use the same entry.

The order of the <entry> sections determines the order of the articles in your project when you first create your project.

If an article’s folder name does not appear in the sidecar, it is moved below those that are listed.

Note: Instead of using a text editor, you can use Microsoft Windows Office Excel. However, make sure that you export

using the XML Data option rather than the XML Spreadsheet. The XML Data option is not available for the Mac OS

versions of Excel.

Prerelease




Upload content to a fulfillment server

Adobe set up a server for you to test uploading and downloading folios. For this release, the only way to download a

folio is to log in using the same Adobe ID as the person who uploaded the folio.

1 In Bundler, click Sign In. Specify your Adobe ID and password, and click Sign In.

The Manage tab is displayed. The Manage tab shows all the folios you’ve uploaded to the server.

If you cannot sign in using your Adobe ID, make sure that your Adobe ID is valid. See “Troubleshooting digital

publishing tools” on page 48.

2 Click Bundle, create or open a folio folder, and click Export Folio.

3 In the Export Options dialog box, choose Multiple Files from the Folio pop-up menu, select Upload To Server After

Exporting, and click OK.

The Multiple Files option is required for folio files that are intended to be exported to a server. When you export

multiple files, a main .folio file is created, and .folio files are created for each stack, making it easy to update and

manage the stacks.

You can copy and paste the following section into a text editor and edit it:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>

<sidecar>

<entry>

<folderName>Stack One</folderName>

<articleTitle>title</articleTitle>

<byline>byline</byline>

<author>author</author>

<kicker>kicker</kicker>

<description>description</description>

<tags>tag1, tag2</tags>

<isAd>false</isAd>

<smoothScrolling>never</smoothScrolling>

</entry>

<entry>

<folderName>Stack Two</folderName>

<articleTitle>article 2</articleTitle>

<byline>byline</byline>

<author>author</author>

<kicker>kicker</kicker>

<description>description</description>

<tags>tag1, tag2</tags>

<isAd>false</isAd>

<smoothScrolling>never</smoothScrolling>

</entry>

</sidecar>

Prerelease




If Include Cover is selected, the first page of the first stack is used as the cover.

The Product ID, Status, and Private options are significant when you make your folios commercially available to

the public. Instructions for using these options are provided in a separate user guide.

Note: Avoid setting the status to both Retail and Private. When you try to download with the Viewer, an "Error

During Download" message appears because there is no purchase receipt for this "Retail" .folio file.

4 Specify a destination folder on your computer for the .folio files to be saved, and click Select.

The .folio files and other support files are uploaded to the server and saved in the destination folder.

5 In Bundler, click the Manage tab to view the uploaded folio.

6 On your iPad, download and open the Viewer, sign in with your Adobe ID if prompted, and download and view

the folio.

Manage uploaded folios

❖ In the Manage tab of the Bundler, do any of the following:

Remove Select one or more uploaded folios and click Remove to delete the folio from the server. However, doing

this does not delete the folio from the iPad.

Upload Click Upload and specify the folio folder you want to upload. Upload works only if you have exported a

folio using the Multiple Files option but have not uploaded to the server. Click Upload, and then specify the folder

containing the exported (and not uploaded) .folio files.

Status Unless you’re submitting your folio for commercial release, leave the statuses set to Free and Private. When

the folio is ready for the commercial release, change the status from Free to Retail (if you’re charging money for the

folio) and from Private to Public, and click Update. To prevent problems in the Viewer, do not select both Retail

and Private.

Change Cover By default, the first page of the first stack is used as the cover of the uploaded folio. To specify a

different cover, click Change Cover, and specify a folder containing cover images. See “Create a library preview

cover” on page 46.

Adobe Content Viewer

The Viewer is an application that is installed on a mobile device such as an iPad. A generic version of the Viewer is

called the Adobe Content Viewer, which appears as “Adobe Viewer” on your iPad. If you sign in using your Adobe ID,

the Bundler lets you upload content to the fulfillment server, and the Adobe Viewer lets you download that content.

For commercial distribution, you can customize the Viewer to include your own icon, app name, publisher id, splash

screen, and other identifying information. You will be able to create a single-folio Viewer or a multiple-folio Viewer

that allows users to download folios as they become available. You can request to make content available to consumers

through the Apple Store. For details, see the “iPad Publishing Process Overview.pdf” file in the Downloads section of

the prerelease forum.

Prerelease




iPad areasA. Article displayed B. Table of contents C. Browse mode

Download the Adobe Content Viewer

1 On your iPad, download the Adobe Content Viewer from the App Store.

2 Start the Adobe Viewer app.

3 Sync your iPad so that the Adobe Viewer app is added to iTunes.

Download .folio files from the test server

1 Use the Content Bundler to upload content to the test server. See “Upload content to a fulfillment server” on

page 42.

2 On your iPad, start the Adobe Viewer app. Tap the Sign In button.

The Sign In button appears in the library if you are not already signed in. If you’re viewing an existing folio, tap the

Home button to view the library.

3 To sign in, make sure that your iPad is connected to the internet and log in using the same Adobe ID you used to

sign in to the Content Bundler.

If you cannot sign in, see “Viewer troubleshooting” on page 51.

4 When prompted, download the content you uploaded.

At this stage, you can download only the content that has been uploaded using your Adobe ID. To share content with

other users, create and sideload .folio files.

Sideload custom .folio files to the Viewer

The Adobe Content Viewer is a standalone iPad application that can display the folios you create. If you used the

Content Bundler to create a single .folio file, you can manually add it to the Viewer from your desktop through a

process called “sideloading”.

1 If you have not already done so, install the Adobe Content Viewer, and sync your iPad so that the Viewer appears

in both iTunes and on your iPad.

The Adobe Viewer application is added to the Apps section of the iTunes library. A placeholder folio is added to

the Viewer automatically. You can add more folios.

Prerelease




2 Select your iPad name in the Devices section of iTunes, and then click the Apps tab.

3 In the Apps tab, scroll down to the File Sharing section. Click Adobe Viewer under Apps.

Adding the .folio file to the iPad (scroll down to view the File Sharing section)

4 Click the Add button, and browse to the .folio file you created. Click Choose.

You can also drag .folio files into the Adobe Viewer Documents area to add folios.

If you’ve created library preview files, add those as well.

5 On your iPad, tap the Adobe Viewer app.

The Adobe Viewer app displays preview images of each folio in the library. (You may need to restart the Viewer

and tap the Home button to display the library.)

6 When prompted, tap Download to download the current folio. When it’s finished downloading, tap View.

Navigate in the Viewer

The following navigation techniques work whether you’re using the generic Viewer or a custom Viewer.

• Rotate the iPad to display either the horizontal or vertical version of the file.

• Swipe up and down to read an article. Swipe left and right to switch to a different article (or to switch to different

pages of a flattened article).

• Tap interactive areas to play movies, rotate 360 images, and activate other interactive items.

Prerelease




• Tap a non-interactive area to display the navigation bars. Tap the Home icon to jump to the beginning of the folio.

Tap the Back button to return to the previous view. Tap the Table of Contents icon in the upper-left corner to view

the table of contents. Tap the Browse icon in the upper-right corner for a bird’s eye view of the folio. Drag the

Scrubber to scroll through article thumbnail images.

Adobe ViewerA. Home button B. Back Button C. Table of Contents button D. Browse button E. Scrubber

Create a library preview cover

Each folio added to Viewer is represented by a preview image. When you upload content to the server, the first page

of the first stack can be used as the cover. However, any interactive objects that appear on the first page of the first stack

are omitted from the library preview cover.

Use can use two methods to change the cover:

• Use the Change Cover option on the Manage tab of the Bundler to select different covers.

• Replace the cover_h.png and cover_v.png files that appear in the project folder. To do this, export the folio file with

the Multiple Files option select, but don’t upload to the server. Export the files locally, and edit or replace the

cover_h.png and cover_v.png files. Then click the Upload button on the Manage tab of the Bundler and specify the

folder containing the .folio files. If you re-bundle the image, turn off Include Cover in the Export Options dialog

box so that the edited cover files don’t get overwritten.

In a single-orientation folio, both cover files are created, but one of the cover files may be blank. You may want to

replace that cover page.

A B DC

E

Prerelease




When you sideload content, the folio name is used as the cover. You can use .png files as preview images, one for

horizontal preview and one for vertical. Use this format to name the .png files:

[folio name]_proxy_h.png

[folio name]_proxy_v.png

The .png files should be 1024x768 and 768x1024.

Add these files to iTunes using the same method you use to sideload .folio files.

Remove .folio files from the Viewer

To remove a .folio file from your iPad, go to the iPad library and tap the Archive button next to the .folio file you want

to remove. The .folio file is still available for downloading.

Remove downloaded .folio files

1 In the Content Bundler, sign in, click the Manage tab, and remove the .folio file you uploaded.

2 On your iPad, tap the Archive button next to the .folio file.

3 Sign out, and then sign in again.

Remove sideloaded .folio files

Currently, you cannot delete individual .folio files that have been sideloaded to the Viewer. Use this method to remove

all sideloaded .folio files from your iPad and library.

1 Connect your iPad to your computer.

2 Select your iPad name in the Devices section of iTunes, and then click the Apps tab.

3 In the Apps tab, scroll down to the File Sharing section. Click Adobe Preview under Apps.

4 Select all the files in the Adobe Preview Documents area, and then press Backspace or Delete on your keyboard.

Click Delete to confirm.

Desktop Viewer

The Adobe Content Viewer for the Desktop is an AIR app that lets you preview folios without using a mobile device.

Note that the following features are currently not working or not working as planned: flattened stacks, HTML stacks

and certain Web View overlays, .folio files exported in PDF format, and single-orientation .folio files.

Previewing the portrait orientation is cropped on some computers. Currently, you cannot resize the Viewer window.

If possible, increase your monitor resolution to avoid cropping.

1 Double-click a .folio or a .issue file, or drag a .folio or .issue file onto the Desktop Viewer.

2 Click to simulate tapping. Drag to simulate swiping. Press R to rotate between portrait and landscape orientations.

Currently, there is no keyboard gesture for pinching to zoom, but certain trackpads allow pinching gestures.

Creating a custom Viewer to submit to Apple

When you are ready to make your issues commercially available on the iPad (and other devices in the future), you can

create either a single-issue Viewer or a multiple-issue Viewer that allows customers to download issues as they become

available. To submit content to the Apple Store, you will need to provide some content such as application icons and

provision certificates to Adobe and to Apple.

Prerelease




For information on making your issues commercially available, see the “iPad Publishing Process Overview.pdf” in the

Downloads section of the DMP prerelease forum.

In the future, you will be able to include Omniture Analytics Tracking components in the custom Viewer you create

for mobile devices. These components track usage data and report it to a SiteCatalyst Report Suite. You can customize

the analytics tracking services. You’ll be able enable or disable the tracking services and configure the opt-in

preferences and Adobe SiteCatalyst account information.

You will also be able to customize push notifications to determine how your customers will be prompted when new

content is available.

We can provide more details on these features when you request to make your content commercially available.

Troubleshooting digital publishing tools

If you experience other problems not listed here, please post a note on the user forum.

Installation troubleshooting

Error message while installing the InDesign plug-in in Windows 7

When installing Digital Publishing Plug-in for InDesign (.zxp) in Window 7, you may get an error message that says

you do not have the appropriate permissions to install. To allow the Extension Manager to install the plug-in, exit

Extension Manager and do the following:

1 In Windows Explorer, browse to C:\Program Files<(x86)>\Adobe\Adobe Extension Manager CS5.

2 Right-click Adobe Extension Manager CS5.exe and choose Properties.

3 Click the Compatibility tab, select “Run this program as an administrator” option, and click OK.

4 Double-click InDesign Plugin (.zxp) file again.

Cannot install the InDesign plug-in

If the installation process of the Digital Publishing plug-in for InDesign fails, you may be able to install the plug-ins

manually.

1 Change the file extension from “.zxp” to “.zip.”

2 Unzip the file using Winzip or another extraction tool.

3 Locate the plug-in file in the unzipped folder:

(Windows)

Plug-in: winartifact:release:plug-ins:graphics:DigitalPublishing.apln

Resources folder: winartifact:release:plug-ins:graphics:DigitalPublishing Resources

(Mac OS) macartifact:release:plug-ins:graphics:Digital Publishing.InDesignPlugin

4 Manually copy the respective plug-in file (and resources in Windows) to the following folders:

(Windows) C:\Program Files\Adobe\Adobe InDesign CS5\Plug-ins\Graphics

(Mac OS) Applications:Adobe InDesign CS5:Plug-ins:Graphics

Prerelease




Cannot install the Content Bundler or Overlay Creator

While installing the Bundler or Overlay Creator, the following error message may appear: “This application cannot be

installed because this installer has been mis-configured. Please contact the application author for assistance.”

This problem may be caused by an older prerelease version of the Content Bundler or Overlay Creator. Delete these

applications. (In Windows, use the Control Panel to uninstall. In Mac OS, drag the applications to the Trash.) Then

try installing again.

If you still cannot install the applications, it may be a problem with the AIR application. Uninstall AIR, and then

reinstall it. In Windows, use the Control Panel to uninstall AIR. In Mac OS, follow these steps:

1 In Mac OS, run the Adobe Air Uninstaller found in Applications > Utilities.

2 Delete the following folder: username > Library > Application Support > Adobe > AIR.

3 Empty the Trash and restart the computer.

4 Install AIR 2.x again. It’s available at http://get.adobe.com/air/.

Uninstall the digital publishing tools

Follow these steps if you need to completely remove all authoring tools from the system.

1 Delete the Content Bundler application from Windows Explorer or Mac OS Finder.

2 Delete the Overlay Creator application from Windows Explorer or Mac OS Finder.

3 To remove the Digital Publishing Plug-in, launch Adobe Extension Manager CS5, select InDesign, locate the entry

for the DigitalPublishing plug-in in the main window of the application, click Remove, and follow the prompts.

4 Delete the the plug-in file and resources in Windows or the plug-in file in Mac OS.

(Windows)

Plug-in: C:\Program Files\Adobe\Adobe InDesign CS5\Plug-ins\Graphics\DigitalPublishing.apln

Resource Folder: C:\Program Files\Adobe\Adobe InDesign CS5\Plug-ins\Graphics\(DigitalPublishing Resources)

Macintosh: macartifact:release:plug-ins:graphics:Digital Publishing.InDesignPlugin

Bundler troubleshooting

Invalid asset location

This error appears when source assets for overlays have been moved or deleted. Use the Overlay Creator panel to make

sure that all interactive objects point to the appropriate source file or source folder.

Bundler fails to load a new folio

If you click New in Bundler and specify a valid folio folder, the Bundler should open InDesign CS5 and display the

stacks in the folio folder. If the Bundler fails to load the folio (or if you receive an Error #3016 message), you may not

have the necessary applications installed, or there may be a problem with Switchboard, which is a background process

that lets Adobe applications communicate with each other.

1 Make sure that you have installed InDesign CS5 and AIR 2.x (available at

http://labs.adobe.com/technologies/air2/).

AIR 2.x is required for the Switchboard app to start automatically. Installing InDesign CS5 should install the

Switchboard app.

Prerelease

http://get.adobe.com/air/

http://labs.adobe.com/technologies/air2/




2 Make sure that the Switchboard app is installed. If you cannot locate the Switchboard app, reinstall InDesign CS5

(or the suite). To verify that Switchboard is installed, go to the following location and double-click it:

(Windows) Program Files\Common Files\Adobe\SwitchBoard\SwitchBoard.exe

(Mac OS) Library/Application Support/Adobe/SwitchBoard/SwitchBoard

3 Even if you’ve installed all the necessary applications, Switchboard may fail to launch in some instances. One

solution is to open the Switchboard manually and then try bundling again. You can also change the settings so that

Switchboard launches automatically. To do this, open the Switchboard. ini file in a text editor, and type

STARTUP=automatic at the end of the file. Save it, close it, and try bundling again. The Switchboard.ini file is

located here:

(Windows 7/Vista) Users\<username>\AppData\Roaming\Adobe\SwitchBoard\

(Windows XP) C:\Documents and Settings\<username>\Application Data\Adobe\SwitchBoard\

(Mac OS) /Users/<username>/Library/Preferences/Adobe/SwitchBoard/

Other possibilities:

• Your InDesign preferences need to be reset. See Restore all preferences and default settings in InDesign Help.

• Your Windows firewall is blocking Switchboard. See http://kb2.adobe.com/cps/830/cpsid_83045.html.

• There is a problem installing Switchboard while installing the suite. See

http://kb2.adobe.com/cps/853/cpsid_85311.html.

Bundler error message: “Warning: no valid article directories could be found”

This error message occurs when the Content Bundler cannot find any valid stack folder in your folio folder. It may be

caused by any of the following issues:

• When specifying the folder in the Bundler, you selected a stack folder rather than the folio folder.

• The InDesign documents do not have _h and _v suffixes (such as “article_v.indd”).

See “Setting up the folder structure” on page 20.

“Unable to log in with the provided credentials” error message

This message appears if you have created an Adobe ID, but have not verified it. To verify your Adobe ID, open the

email message that Adobe sent to you when you created the Adobe ID, and click the link to verify. Then try signing in

again.

"app.rasterizeDocumentPage" error message

By default, the zero point is at the top left corner of the page. If you change the zero point in your document, the

Bundler may display this error message. Open the document (or documents) in which you have changed the zero

point, and double-click the zero point icon where the horizontal and vertical rulers meet.

If you still get this error message, re-install the InDesign plug-in (.zxp) file, and reset preferences when starting

InDesign. See Restore all preferences and default settings in InDesign Help.

Invalid URL error message

You likely specified a URL such as “www.adobe.com” instead of “http://www.adobe.com.” Use the full URL.

Error #3003

This error sometimes appears if extended characters are used in filenames. If possible, avoid using umlauts and other

extended characters in filenames.

Prerelease

http://help.adobe.com/en_US/indesign/cs/using/WSa285fff53dea4f8617383751001ea8cb3f-6d21a.html#WSa285fff53dea4f8617383751001ea8cb3f-6d1ba

http://kb2.adobe.com/cps/830/cpsid_83045.html

http://kb2.adobe.com/cps/853/cpsid_85311.html

http://help.adobe.com/en_US/indesign/cs/using/WSa285fff53dea4f8617383751001ea8cb3f-6d21a.html#WSa285fff53dea4f8617383751001ea8cb3f-6d1ba




Viewer troubleshooting

The Viewer doesn’t accept Adobe ID

If the Adobe Content Viewer does not accept your Adobe ID, make sure that your iPad is connected to the internet

and that you use an Adobe ID in the form of an email address. Try the following suggestions:

• Sign in to the Content Bundler before signing in to the Viewer. If you cannot sign in to the Content Bundler, click

the “Create an Adobe ID” link and sign in using your existing Adobe ID or create a new one.

• If you can sign in to the Content Bundler but not the Viewer, make sure that your iPad is connected to the internet.

• Your Adobe ID may not be in the form of an email address, or it may not be verified. If you’re using a legacy Adobe

ID that’s not in an email format, change your Adobe ID. Click the “Create an Adobe ID” link in Bundler, or click

the following link to create or edit your Adobe ID. (If prompted, accept the terms of use, open the follow-up email

message from Adobe, and click the link to verify the Adobe ID.)

www.adobe.com/cfusion/membership/index.cfm

"Authentication failed" error message

You may receive an “Authentication failed” error message in the Adobe Content Viewer when attempting to Sign In.

If this occurs, first make sure that you have signed in to the Content Bundler app using a valid Adobe ID. If you cannot

sign in to the Bundler, click the “Create an Adobe ID” link and follow the prompts. If you can sign in to the Bundler

but not the Viewer, make sure that your iPad is connected to the internet. If the error message still appears when you

try to sign in, there may be a problem with the server. Check the digital publishing user forum for announcements.

Videos do not play in Viewer

If videos that used to play properly in the Viewer stop playing, restart the iPad. If that doesn’t work, remove the Viewer

from both iTunes and the iPad, resync, and install the Viewer again. Restarting the iPad can also clear memory

problems.

Folio appears as blank gray page in Viewer

If your bundled folio appears in the Viewer as a single gray page, it may indicates a problem with the Viewer

installation or a low-memory state.

Restart your iPad. If the gray page still appears, delete the Adobe Viewer app from both the iTunes App section and

from the iPad. Then add the Adobe Content Viewer again to the iTunes library and sync the iPad.

The iPad has physical memory limitations. Adjacent pages with rich interactive content can cause memory problems

that result in the gray screen appearing. The Viewer renders multiple adjacent pages simultaneously to optimize

navigation. Therefore, three adjacent stacks beyond 30MB will likely strain the available memory for the app. In such

instances, limit interactive content where possible, and stagger rich-media content with flat content. Please use the

forums to let Adobe know about problematic content that causes the gray page problem.

Prerelease

https://www.adobe.com/cfusion/membership/index.cfm

http://forums.adobe.com/community/labs/digitalpublishing/

Digital Publishing User Guide v8

Documents

Transcript of Digital Publishing User Guide v8