Digital Publishing Userguide

Publishing for the ADOBE DIGITAL CONTENT VIEWER
Prerelease
2010 Adobe Systems Incorporated and its licensors. All rights reserved.
Copyright
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.
Prelease
Last updated 10/20/2010
iii
Contents
Chapter 1: Adobe Digital Magazine Solution Overview of publishing workflow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Installing digital publishing authoring tools Tutorials Creating InDesign files Overlay Creator Content Bundler ............................................................................ 2 .............................................................................................................. 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Setting up the folder structure Use native interactive elements Adobe Content Viewer
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Troubleshooting digital publishing tools
Chapter 2: Best Practices for Digital Publishing Chapter 3: Hosting Services
Prelease
Chapter 1: Adobe Digital Magazine Solution

The Adobe Digital Magazine Solution 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. At this time, you can bundle issues and test them on the iPad. However, only members of the Digital Magazine Publishing prerelease site can make them commercially available. Over time, Adobe will offer additional commercial hosting services, and the workflow will be simplified and expanded to support other mobile devices.
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 package the assets using the Content Bundler utility that allows publishers to import vertical and horizontal InDesign CS5 documents, add metadata, and export them into a new .issue format (to be called .folio in shipping version). Each issue you publish consists of one or more articles, called stacks. A stack can be an ad or an article.
InDesign CS5 Content Bundler
Adobe Viewer
Overlay Creator
Getting your InDesign layout onto your iPad
.issue
Step 1: 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 documentd for each article or ad, or you can limit your design to a single orientation. See Creating InDesign files on page 17.
Prelease
PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER

Adobe Digital Magazine Solution
Step 2: Create interactive objects You can use two methods to create interactive objects.
Create interactive content in InDesign. Interactive elements you can create natively in InDesign include hyperlinks,
buttons, multi-state objects for slideshows, and scrollable frames. See Use native interactive elements on page 28.
Use the Overlay Creator to create video, audio, 360-degree views, image pans, panoramas, and web views. You
export these interactive overlays as placeholder SWF files, and then you place those SWF files in your InDesign documents. See Overlay Creator on page 21. Step 3: Organize folders and files For the files to be bundled properly, they must appear in a specific folder structure with the required naming conventions:
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).
Each stack folder must include a PNG file for the table of contents. Source files for overlays referenced in the Overlay Creator must appear in a subfolder in an OverlayResources
folder. The exported SWF files must appear in the documents Links folders. For details, see Setting up the folder structure on page 19. Step 4: Use the Content Bundler to create issue The Content Bundler exports a .issue file that can be loaded on the iPad or (later) to another mobile device. See Content Bundler on page 35. Step 5: Load issue on the iPad Install the Digital Content Preview Tool, and then add the .issue file you created to the Preview Tool. The Preview Tool is a version of the Adobe Viewer used for testing. See Adobe Content Viewer on page 40. Step 6: Make your issues available to customers If you make your .issue file available to other people, they can add that issue to their Preview Tool app on the iPad through a process called sideloading. If you sign in using a valid Adobe ID, you can also upload and download content using an Adobe server for testing purposes. (The .issue format will be renamed .folio in the shipping version.) The current beta version of the Digital Magazine Solution does not provide a public solution to distribute or sell branded content through Apple iTunes. However, members of the Digital Magazine Publishing prerelease site can request to make their content commercially available.
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 from Adobe Labs. Double-click the .zxp file and follow the prompts to install. If you experience problems installing the Digital Publishing Plug-in, see Installation troubleshooting on page 43.
Prelease

Interactive Overlay Creator (AIR) Double-click to install. Digital Content Bundler (AIR) Double-click to install. Digital Content Preview Tool (iPad app) The Adobe Content Preview Tool is a generic version of the Viewer used for
testing the digital content you create. To download the Preview Tool directly to your iPad, open App Store, search for the application, and download the free app. You can also download the Preview Tool in the iTunes Store and then sync your iPad. The Preview Tool prompts you to sign in. Signing in allows you to upload and download content on an Adobe server for testing purposes. Your iPad must be connected to the internet for you to sign in using the Preview Tool. If you cannot sign in to the Preview Tool, open the Content Bundler, and try signing in. If you cannot sign in to the Bundler, click the Create an Adobe ID link and following the prompts.
Tutorial Assets (zip) Unzip this file for stepping through the tutorials. See Tutorials for Digital Publishing.
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 Overlay Creator, the Content Bundler, and the Preview Tool (the Viewer). To install these tools, see Installing digital publishing authoring tools on page 2. In addition, you need the Tutorial Assets folder. Unzip this file to obtain the source files for stepping through these lessons.
Tutorial 1: Creating a simple static issue 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, heres what your resulting one-page file should look like on the iPad.
Prelease

Completed issue displayed on the iPad A. Landscape (horizontal) view B. Portrait (vertical) view
To use the sample files for this tutorial, download and unzip the TutorialAssets (.zip) file available on Adobe Labs. Create the InDesign layout The item that gets uploaded to the iPad is called an issue. Each issue consists of one or more stacks. A stack can be an ad or an article. Each stack appears in its own folder inside an issue folder. A stack folder requires one or two InDesign documents and a .png file used as the thumbnail in the table of contents. In our tutorial, well create 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 from Adobe Labs, and browse to the
Meridien_Issue folder.
2 In InDesign CS5, open the WiFi_h. indd and WiFi_v.indd files located in the WiFi_Stack folder.
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 _h and _v versions of the stack and packaged them (File > Package). Well discuss folder structure more in the next tutorial.
Prelease

We also created a 70x70-pixel file called tocPreview.png. This file appears as a thumbnail image in the Viewer table of contents.
A B C
Valid folder structure A. Issue 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 issue includes a stack folder with all the necessary files in place, youre ready to use the Content Bundler to create an issue file that can be uploaded to the iPad.
1 If you have not already done so, install the InDesign plug-in by double-clicking the InDesign Plugin .zxp file you
downloaded from Adobe Labs and following the prompts. Note: If you experience problems installing the InDesign plug-in, see Troubleshooting digital publishing tools on page 43.
2 Launch the Content Bundler application. 3 Click New, browse to the Meridian_Issue 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 Troubleshooting digital publishing tools on page 43.
4 Enter the issue data such as Magazine Title and Issue Title at the bottom of the dialog box.
Ignore the metadata fields (Title, Kicker, and so on) for nowwell go over those options in the next tutorial.
Prelease

Content Bundler
5 Click Export Issue. 6 In the Export Options dialog box, choose Single File from the Issue pop-up menu and use the default export settings
for Dimension (1024x768). Click OK. The Export Options dialog box is where you can upload your magazine issue to a server. For the first tutorial, youre going to create a single issue file and manually add it to the Preview Tool. For the next tutorial, youll learn how to upload files to a test server Adobe has provided.
7 Specify a known location of the file (such as the Meridien_Issue folder), type the name of the file, such as
MeridienTest.issue, and click Save. A prompt lets you know if the file exported successfully. The digital magazine issue is created in the folder you specified. Now youre ready to add the issue you just created to your iPad. View the bundled issue on the iPad The Preview Tool is a generic version of the Viewer that displays .issue files on your iPad. When you publish your content, youll have your own version of the Viewer with custom branding. Adding content to the Preview Tool from your desktop is called sideloading (as opposed to downloading from a server). Sideloading content is useful for testing content on the iPad. In the next tutorial, youll learn how to upload the magazine issue to a server and then download it directly from your iPad.
1 If you have not already done so, install the Digital Content Preview Tool from the App Store on your iPad or from
the iTunes store. The app appears on your iPad as Adobe Preview.
2 On your iPad, start the Preview Tool. When prompted, sign in using a verified Adobe ID.
Your iPad must be connected to the internet for you to sign in. If you have difficulties signing in, see Viewer troubleshooting on page 46.
3 Connect your iPad to your computer, and sync the device to make sure that the Adobe Preview app is added to
iTunes.
Prelease

4 Select your iPad name in the Devices section of iTunes, and then click the Apps tab. 5 In the Apps tab, scroll down to view the File Sharing section.
Adding the .issue file to the iPad (scroll down to view this section)
6 Click the Adobe Preview icon under Apps, click the Add button, and browse to the .issue file you created. Click
Choose. The .issue file is added to the Viewer.

7 On your iPad, tap the Adobe Preview app.
The Preview Tool displays preview images of each issue in the library.
8 Tap Download to download the current issue. When its finished downloading, tap View. 9 Rotate the iPad so that you can see both the horizontal and vertical versions of the file.
Tutorial 2: Creating an issue with interactive elements

As you go through this tutorial, youll work with the CityGuide_Issue folder in the TutorialAssets folder. Youll create interactive objects directly in InDesign as well as using the Overlay Creator. At the end of this lesson, heres what the first page of the main article should look like on the iPad.
Prelease

Completed issue displayed on the iPad A. Landscape (horizontal) view B. Portrait (vertical) view C. Hyperlinks D. Video overlays
Add an interactive hyperlink Lets create a hyperlink object for the D. I. Y. Meet logo. Well create an empty frame and apply a hyperlink to it.
1 In InDesign CS5, open Enjoy_v.indd. Its located in the Enjoy_Stack folder in the CityGuide_Issue folder. 2 Select the Rectangle tool in the toolbar, and then drag a rectangle over the D.I.Y. Meet logo. Make sure that the
rectangle does not have a stroke or fill.

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/). Under Appearance, leave Invisible Rectangle and None selected. Click OK.
Prelease

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. Create a movie overlay using the Overlay Creator Movies you add to an InDesign document currently do not become interactive when you bundle the issue. So lets use the Overlay Creator to create an overlay file that will become interactive when bundled. Well add a cycling movie. Note: We already set up the OverlayResources folder in the CityGuide_Issue folder. When youre creating your own overlays such as videos, 360 views, and panoramas, make sure that you store the assets of each interactive overlay in a different subfolder of the OverlayResources folder.
1 Launch the Overlay Creator. 2 Select Video on the left side of the dialog box. 3 Click Browse next to URL and double-click the cycling_432x234.mp4 file in the CyclingMovie folder.
The CyclingMovie folder is in the OverlayResources folder in the Enjoy_Stack folder.

4 Click Browse next to FPO Content Image and double-click the Cyclist.jpg file in the Enjoy_Stack folder.
The FPO Content Image acts as the poster for the video. This image includes a movie icon to indicate that its interactive.
5 Type Cycling for the ID field.
Why specify an ID? Each interactive overlay you create in an issue must have a unique ID. You can create different overlays based on the same movie file as long as they have different IDs. The overlay IDs for the horizontal and vertical versions of the InDesign layout should be the same, even if they have different assets and settings. Using the same ID for the horizontal and vertical versions allows the movie to continue playing even if the iPad is rotated.
6 Specify 432 for Width and 234 for Height to determine the default size of the overlay object.
Prelease

10
Using the Overlay Creator to create a movie
7 Click Export, browse to the Enjoy_Stack folder, and specify the filename, such as cyclistmovie_overlay.swf. Click Save.
Now lets add the video swf file to the InDesign files.
8 Open Enjoy_v.indd in InDesign CS5, choose File > Place, and double-click the cyclistmovie_overlay.swf file you
created.
9 With the loaded cursor, click in the blank area on the page to place the overlay, and align the image frame to the
surrounding objects.
10 To replace the Flash logo, select the placed swf file, open the Media panel (choose Window > Interactive > Media),
and choose From Current Frame from the Poster menu.
Prelease

11
Using the Media panel to select the FPO Content Image specified in the Overlay Creator
The Cyclist.jpg image that you specified in the Overlay Creator should be displayed.
11 Copy and paste the placed swf overlay object from the Enjoy_v.indd file to the Enjoy_h.indd file.
Create a native slideshow Now lets create an interactive slideshow using the Object States panel. Weve already added the images to the second page of the vertical Enjoy file. Youll 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.
Prelease

12
Images combined into multi-state object
Each image appears as a separate state in the Object States panel. Now that youve created the multi-state object, you need to let users scroll through them.
4 Choose Window > Interactive > Buttons to display the Buttons panel, and then select the red arrow on the left. 5 Click Convert Object To A Button, and then choose Go To Previous State from the plus icon next to Actions.
Prelease

13
Create navigation buttons
Now lets make the buttons appearance change slightly when the user taps it.
6 Click [Click] in the Buttons panel. Choose Object > Effects > Drop Shadow, and then click OK. 7 Select the red arrow on the right, convert it to a button, apply the Go To Next State action, and give it a drop shadow. 8 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.
9 Save the InDesign files.
Note: If you want to learn about more interactive objects, we included additional asset files in the OverlayResources folder to experiment with. You can create new pages and place the files you create using the Overlay Creator. For more information on working with other types of overlays, see Overlay Creator on page 21. Also see Use native interactive elements on page 28. Organize file and folder structure The Bundler uses the folder structure to determine which stacks are included in the issue and what they look like. Each stack contains the following files:
PNG file Currently, the stack folder must include a 70x70-pixel .png file. This file is used for the thumbnail image in
the table of contents.
Prelease

14
Portrait and landscape InDesign files The stack folder must include _v.indd and _h.indd files (unless youre creating a single-orientation issue). These files can be in separate subfolders, each with their own Links folder, or they can be in the stack folder and share the Links and Document Fonts folders. In this tutorial, well create separate folders. Links folder The Links folder contains linked content for both the horizontal and vertical InDesign files. An easy way
to create a Links folder is to package an InDesign file containing linked content. The Links folder is where you must include the placeholder overlay files that you create using the Overlay Creator.
Document Fonts The stack folder may also include a Document Fonts folder. OverlayResources The OverlayResources folder is where the source files for interactive content such as videos and 360 view images must appear.
Youll now package the InDesign files and organize the folders and files properly. Lets build a new issue folder from scratch.
1 On your desktop or in another known location, create a new folder called Tutorial_Issue. In that folder, create a
folder called Enjoy_New.

2 Open the Enjoy_h.indd and Enjoy_v.indd files in InDesign CS5. 3 Save the Enjoy_h.indd file and choose File > Package. 4 Click Package, click Continue, and browse to the Enjoy_New folder you just created. Click Package to save the
Enjoy_h Folder in the Enjoy_New folder. Click OK to dismiss a prompt about document fonts.
5 Save the Enjoy_v.indd, and follow the same procedure to create a packaged Enjoy_v Folder in the Enjoy_New
folder. Although it isnt necessary to package the files before creating the issue, its a good idea to make sure that all assets used in the files appear in the Links folder and are linked to from the InDesign files. If a document contains missing links, the stack will not be added to the issue.
6 Copy the following files:
Copy the tocCity.png file from the Enjoy_Stack folder to the Enjoy_New folder. Copy the OverlayResources folder from the the Enjoy_Stack folder to the Enjoy_New folder. To add additional stacks to the issue, copy the WiFi_Stack folder from the Meridien_Issue folder into the
Tutorial_Issue folder, and copy the OverlayDemo_Stack and Cover_Stack folders from the TutorialAssets folder. Including multiple stacks in the issue will allow you to see how the table of contents works. Plus, the OverlayDemo article includes examples of all the current overlay types.
A
B C D E
Proper structure for files A. Issue folder B. Folders containing InDesign files and their packaged contents C. Overlay Resources folder D. tocCity.png file E. Stack folder
Prelease

15
Bundle assets Now that the issue includes stack folders with all the necessary files in place, youre ready to use the Content Bundler to create a set of issue files that can be uploaded to an Adobe server and subsequently downloaded to the iPad. Currently, when you bundle an issue, images fileseither PNG or JPEGare 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 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. Lets 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 Tutorial_Issue 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 drag a stack to change its order.
6 Enter the issue data such as Magazine Title and Issue Title at the bottom of the dialog box.
This 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.
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 dont appear in the table of contents.
Content Bundler
8 Click Export Issue. 9 In the Export Options dialog box, choose Multiple Files from the Issue pop-up menu.
Prelease

16
The Multiple Files option is required for issue files that are intended to be exported to a server. When you export multiple files, each stack becomes an issue file within a main issue file, making it easy to update, add, and remove individual stacks at a later time.
Export Options dialog box
10 Select Upload To Server After Exporting, make sure that Free, Private, and Use Cover are selected, and click OK.
The Product ID and Status options will become more significant when you can make your issues commercially available to the public.
11 Specify the location on your computer (such as the Tutorial_Issue folder) where the project files will be saved, and
click Select. If you need to re-bundle the issue, you can click Open in Bundler, and select the project.bprj file. Then you dont have to re-enter the metadata.
12 When the issue is uploaded, click the Manage tab in Bundler to view the uploaded issue.
View the issue on the iPad In the first tutorial, you added content to the iPad directly from your desktop. In this tutorial, youll download the content to the iPad directly from the server.
1 If you have not already done so, install the Digital Content Preview Tool on your iPad.
Your iPad must be connected to the internet to download the issue.

2 On your iPad, start the Preview Tool. Make sure that you are signed in using your Adobe ID. 3 When prompted, download and view the issue.
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. Browse to the Enjoy article. Play the movie and tap the hyperlink to 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 issue. 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 birds eye view of the issue with the metadata descriptions you added. Drag the Scrubber to scroll through article previews.
Prelease

17
Adobe Viewer A. 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. The horizontal and vertical layouts must be in separate documents, not in the same document. Animations, sounds, and movies you add to InDesign documents are ignored when you bundle the documents for the iPad. However, hyperlinks, buttons, multi-state objects, and scrollable frames can become interactive on the iPad (see Use native interactive elements on page 28). You can use the Overlay Creator to add interactive elements such as 360 views, movies and sounds, image pans, and panoramas (see Overlay Creator on page 21). If the InDesign files include multiple pages, users scroll vertically to the next page using the mobile device. Users scroll horizontally to move to different articles in the issue.
Create horizontal and vertical documents

Creating new InDesign documents for the iPad is usually the easiest approach. If youve already created a document that you want to repurpose for the web, you can change settings in the Document Setup dialog box to use a different page size (such as 1024x768) and orientation (portrait or landscape).
Prelease

18
Do not use facing pages in your documentuse only one page per spread.
1 In InDesign CS5, choose File > New > Document. 2 For Intent, choose Web.
Choosing Web isnt necessary, but it turns off Facing Pages and displays the measurements in pixels, making the layout easier to work in for mobile devices. If youve 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.
Creating a document for a device reader A. 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.
For more information, see Best Practices for Digital Publishing on page 47.
Package files
Its a good idea to package your InDesign documents before you bundle the assets. Packaging files is an easy way to make sure that all your placed overlay files appear in a Links subfolder where the Content Bundler can locate them. Depending on your workflow and preferences, you may want to package files early in the process and make sure that the interactive overlay files appear in the Links folder. Or, you may want to package the files just before using the Content Bundler.
Prelease

19
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.
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.
If necessary, package both versions of the InDesign document, and then combine the packaged files into the appropriate folder structure.
Setting up the folder structure

The Content Bundler uses the folder structure and filenaming conventions to determine what is included in an issue. It is important to following the structure rules to avoid bundling errors. When you bundle assets to be included in an issue, you point to the main issue folder. The issue folder consists of one or more stack folders. Each stack represents an ad or article consisting of one or more pages. To be included in an issue, a stack must contain a PNG file (such as tocPreview.png) for the table of contents thumbnail and either one or two InDesign documents, depending on whether youre providing a single- or dualorientation issue. If youre providing a dual-orientation issue, each stack should include both an InDesign file with an _h suffix (such as article1_h.indd) and an InDesign file with a _v suffix (such as article1_v.indd). The first page of the first stack is used as the cover of the issue. However, interactive elements are omitted from the cover. See Create a library preview cover on page 42. Methods for setting up folder structure When setting up the folder structure, you have two main choices:
Method 1: Combined Links folder Some people prefer keeping the assets for the two InDesign files in the same Links folder. Using this method, each stack contains the two InDesign files, the .png file, and the Links and Document Fonts folders. The OverlayResources is a structural sibling to stack folders, and contains the source overlay assets for all the stacks in the issue.
Prelease

20
Shared Links folder method A. Stack folder B. Overlay files placed in InDesign C. Source files for all overlays in issue
Method 2: Separate Links folders The other approach is to create separate folders for the two InDesign documents,
with each folder containing an InDesign file, the Links folder, and the Document Fonts folder. This approach make it easy to use the folders that result from packaging a file (see Package files on page 18). With this method, create separate OverlayResources folders for every stack.
InDesign files and Links folders in separate folders
Prelease

21
One advantage to the second method is that you dont have to move and delete files after packaging. One drawback to this method is that if you create overlays after packaging the files, you either need to package the files again, or duplicate the overlay files in the two different Links folders and then place them separately. OverlayResources folder For interactive overlays to work in the Viewer, the source files for the overlays must be included in a subfolder in the OverlayResources folder. The OverlayResources folder is either a sibling of the stack folders or a child of each stack folder, depending on which method you use to structure your files. After you add your assets to the OverlayResources subfolder, you use the Overlay Creator to create SWF files that refer to these assets. You then place the SWF files in InDesign. The overlay SWF files must appear in the Links folder of the documents in which they are placed.
Single-orientation issues
If each stack folder in your issue folder contains an InDesign file of only one orientatonvertical or horizontalthe exported issue 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 issues. You cannot mix single-orientation and dual-orientation stacks in an issue.
Overlay Creator
You can add interactive content to an issue using two methods. Add multi-state objects for slideshows, URL-based hyperlinks and buttons, and scrollable frames directly in the InDesign documents. These objects automatically become interactive when bundled (see Use native interactive elements on page 28). You can also use the Interactive Overlay Creator to create interactive elements such as 360 views, panoramas, image pans, audio, video, and web views. The Overlay Creator creates special overlay files that can be placed in the InDesign layout and then bundled for the iPad as interactive content. 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 the DMP prerelease site.
1 If you havent already done so, move the assets to be used for any interactive overlay into their own subfolder of the
OverlayResources folder. For example, if you are creating a movie for an article on kayaking, add the kayak.mp4 file to a KayakMovie subfolder in the OverlayResources folder. If youre creating an statue that can be rotated 360 degrees, add all the statue files (statue001.jpg, statue002.jpg, and so on) to a Statue360 subfolder.
Prelease

22
Sample OverlayResources folder
2 Launch the Overlay Creator application. 3 Select the type of interactive element on the left side of the dialog box, and specify the appropriate options. Some
options appear for each interactive element.

Assets or URL Specify the URL destination or the asset files used as the source files for the interactive overlay object. FPO Content Image Click Browse and specify a file to provide the image used to indicate that the area is interactive.
(FPO stands for for placement only.) For example, you can specify an image from a movie that has a play button. The FPO image you specify does not need to be in the OverlayResources folder. When you place the exported SWF file in InDesign, the FPO Content Image does not appear automatically. In the Media panel, select From Current Frame from the Poster menu to display the image.
ID Specify any ID name that is different from the IDs of other interactive overlays used in the issue. If you use the
same ID for two or more overlays in the document, only one of the overlays will be interactive. The IDs for overlays for the horizontal and vertical versions of the InDesign documents should be the same, even if they have different assets and settings. That way, if you rotate the iPad, the interactive object maintains the same state. If youre playing a video, rotating the iPad will continue playing the video if the IDs are the same.
Width/Height Specify the size (in pixels) of the overlay object that you will later place in InDesign. Background Color If you want the overlay object you place in InDesign to include a background color, select Fill With Background Color, and select the color. Auto Start Begin playing the audio, video, web view, or 360 viewer object when the page is loaded. Specify a Delay value to delay auto start by the specified amount after the page is loaded.
Avoid auto starting multiple objects of the same type (such as two audio files). Only one object will play. Click the Preview button to display the overlay content.
4 Click Export. Specify a location of the file (such as the Links folder in the stack folder), and type a name for the file
(such as slideshow_overlay.swf). Click Save.

5 In InDesign, use the File > Place command to place the exported .swf file in the InDesign documents.
By default, the SWF overlay file will include a Flash icon. To remove this icon, open the Media panel (choose Window > Interactive > Media), and choose None or From Current Frame from the Poster menu.
Prelease

23
When you bundle the issue, the overlay SWF files should appear in the Links folders, and the source assets should remain in the OverlayResources folder.
360 Viewer
The 360 Viewer lets users rotate an object 360 degrees on the mobile device. The image files should have the same root name with ascending suffixes, such as Tower001.jpg, Tower002.jpg, and so on. Place the source images in a subfolder in the OverlayResources folder. While the 360 Viewer is designed primarily for rotating objects, you can use it as a way of progressing through any sequence of images. 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. In the Overlay Creator, click Browse, locate the folder containing the images, and click Select.
Creating a 360-degree view of an object
Prelease

24
You can change the following settings:

Auto Start Play the object when the page is loaded (or after the specified delay amount). Tap to Play/Pause, Double-tap to Restart Allow tap gestures to play and pause the object and double-tap gestures to
reset the object. If this option is not selected, the object can be activated only by Auto Start or swiping.
Allow Swipe Allow the user to swipe the object to move through the sequence of images.
If Allow Swipe is not selected, either Auto Start or Tap to Play/Pause must be selected.
Loop Play the object continuously. Stop at First/Last Image When this option is selected, the object stops at the last image when scrolling forward or the
first image when scrolling backwards. When deselected, Stop at First/Last Image allows the 360 view to cycle continously, without any concept of a starting or stopping point. If you select Stop at First/Last Image, you may want the first and last images to be identical.
Reverse Image Order Select this option to reverse the Auto Play/Tap spin direction of the object. Speed Change the speed of the objects rotation in frames per second. The minimum number is 1 (1 frame per second)
and the maximum number is 30.
Audio
Place the audio file you want to play in a subfolder in the OverlayResources folder. The audio file must be an MP3 file. If you dont have audio assets other than the MP3 file, click the Browse button next to URL and specify the MP3 file.
Creating an audio overlay A. Controller skins B. Proxy image for audio object C. MP3 file
Prelease

25
If you want a controller skin with Play and Pause buttons to appear while the audio clip is playing, place the .png files in the same folder as the MP3 file. Click the Browse button next to Assets to select the folder containing the audio files. 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. Here is an example of a set of controller skin files.
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. 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. You can also select Auto Start to begin playing the audio when the page is loaded (or after the specified delay).
Image Pan
Use the Image Pan overlay to 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 Image Pan 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. The image you want to use should appear in a subfolder in the OverlayResources folder. Make sure that the original image has the exact dimensions you want to use. For example, you may want users to be able to pan an 1024-by-1024 pixel image within a 200-by-200 pixel view area. In the Overlay Creator, click Browse to select the folder containing the image you want to use. Specify the Width and Height values to define the size of the view area. Specify the Viewport Offset values to define the initial view area. You can also create a frame in which you can scroll the content vertically or horizontally. See Create scrollable frames on page 32. Note: For best results, avoid using an image larger than 1024-by-1024 pixels. Large images increase the file size, and in some instances during this beta release, create memory problems.
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 airplanes 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 cross image.
Prelease

26
Creating a panorama A. 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.
Prelease

27
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.)
Once you obtain the six files you need for your panorama, move them to a subfolder in the OverlayResources folder, and specify this folder using the Overlay Creator. You can change Panorama settings in the Overlay Creator to limit the range of view and the zoom capabilities. For example, if youre showing the inside of a cockpit, you may want to allow a full rotation of the X axis but limit the Y axis (tilt) so that the top of bottom of the cockpit cannot be seen. Left and Right values have a range of 0 to 180. If you want to rotate the image two-thirds towards the back in both directions, specify values of 120. Top and Bottom values have a range of 0 to 90. If you want to tilt the image two-thirds towards the top and bottom, specify values of 60. You can also specify settings in the Initial View area to determine the starting view of the object. Rotation X determines the initial tilt (up and down) view, while Rotation Y determines the initial rotation (left and right).
Video
Place the video file you want to play in a subfolder in the OverlayResources folder. The video must be an MP4 file with h.264 encoding, compatible with Apple iTunes. Use the Play Full Screen setting to determine whether the video is played within its bounding area on the page or in full-screen mode. Full screen movies should be set to 1024 pixels wide. You can select Auto Start to begin playing the video when the page is loaded (or after the specified delay). Currently, you cannot specify a URL to stream a video from the web.
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 in the OverlayResources folder. All files in that subfolder, including images and scripts, can be included in the exported issue. 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 users iPad isnt 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 isnt a connection, it can display a different image.
Prelease

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

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.
Auto Start Select Auto Start to load the web page when the page is loaded on the iPad.
Use native interactive elements

The Content Bundler can detect hyperlinks, buttons, multi-state objects, and scrollable frames that you add to your document and make them interactive. You can use the Script Label panel to customize these interactive elements.
Create interactive hyperlinks

In InDesign, use the Hyperlinks panel to add hyperlinks. Creating hyperlinks is especially useful for jumping to a webpage, to a different article, or 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
Email Tapping an Email hyperlink launches the Mail app with the To field filled in.
Example: mailto:username@mail.com
File Tapping a File hyperlink jumps to a different article within the issue. 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
Prelease

29
Navto Tapping a Navto hyperlink jumps to a different article, similar to the Page and File options.
The Text Anchor hyperlink is not supported.
Create interactive buttons

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.
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. If youre creating a button that jumps to a different slides, add left and right arrow images.
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.
Supported hyperlinks actions Go To Destination, Go To First Page, Go To Last Page, Go To URL, and Go To Page.
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.
Supported multi-state object actions Go to Next State, Go to Previous State, and Go to State. These actions are useful for moving to different images in a slideshow.
All other actions are currently not supported. Buttons can have only one action.
5 If you want the button appearance to change when its tapped, click [Click] under Appearance, and change its
appearance. The [Click] state is used as the down state when the user taps the button. For best results, make sure the [Click] state is the same size as the [Normal] state. (There is no reason to support the [Rollover] state on a mobile device.)
Change hyperlink and button settings

If you dont want to use the default settings for hyperlinks and buttons, there is currently no interface for changing settings. However, you can use the Script Label panel to change settings similar to the Hyperlink settings in the Overlay Creator. Note: The Script Label panel is not available for text hyperlinks. Currently, you cannot change settings for text hyperlinks.
1 In InDesign, select the hyperlink or button object. 2 Choose Window > Utilities > Script Label to open the Script Label panel, and then type lines in the Script Label
panel.
Require confirmation for external links Determine whether a prompt appears if a user taps the hyperlink. This
option is disabled by default. Example:

HL_reqNavConfirm=yes
View in context Determine whether the hyperlink is viewed in a web view within the Viewer or in Safari. This
option is enabled by default (the browser launches within the Viewer app). Example:
HL_openInApp=yes
Prelease

30
Note: These values are case-sensitive. You can use yes or true and no or false.
Use the Script Label panel to change hyperlink settings
3 Click outside the object.
When you click the object again, the lines should appear.
Create interactive slideshows

Each state, or slide, can contain multiple objects, but interactive objects on a state currently lose their interactivity when bundled.
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. Each state can have multiple objects; however, interactive objects on a state are not supported.
2 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.
3 If you want the button appearance to change when its 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 selected. (The [Rollover] state setting is ignored, because there is no such thing as a rollover on a mobile device.)
Change slideshow settings

There is currently no interface for changing the settings of a slideshow. However, by adding lines to the Script Label panel, you can change the slideshows default settings. For example, you can cause the slideshow to start automatically when the page is turned to, and you can allow the user to swipe to turn from slide to slide.
1 Select the multi-state object. 2 Choose Window > Utilities > Script Label to open the Script Label panel, and then type lines in the Script Label
panel.
Auto Start When Auto Start is enabled, the slideshow begins playing when the page is turned to. Auto Start is disabled by default.
SS_autoStart=yes
Prelease

31
Auto Start Delay If Auto Start is enabled, 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. The default value is 0.
SS_autoStartDelay=5
Slide Duration If Auto Start is enabled, the slide duration determines the amount of time each slide is displayed before the transition to the next slide. Slide Duration is 2 seconds by default.
SS_autoTransitionDuration=5
Crossfade Images Provide a fade transition when viewing the next button. Crossfade is enabled by default.
SS_crossFadeImages=yes
Crossfade Duration If Crossfade Images is enabled, 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.
SS_crossFadeImagesDelay=2
Tap to Play/Pause; Double-tap to Restart When enabled, this setting lets users tap to play and pause an auto-
running slideshow. Double-tapping restarts the slideshow. This option is disabled by default.
SS_tapEnabled=yes
Allow Swipe When enabled, this setting lets the user swipe to move from slide to slide. This option is disabled by
default.
SS_swipeEnabled=yes
Stop at First/Last Image 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 is disabled by default.
SS_circularViewEnabled=yes
Loop If either Auto Start or Tap to Play is enabled, you can enable Loop to play the slideshow continuously. If the value is less than 0, the slideshow auto-plays continuously. If the value equals 0, the slideshow auto-plays only once. If auto-play is greater than 0, the slideshow auto-plays the specified number of additional loops. In other words, a loop value of 3 auto-plays 4 times.
SS_loopCount=-1
Reverse Image Order When enabled, the slideshow plays the images in reverse order. This option is disabled by
default.
SS_reverseImageOrder=no
Default Selected Determine whether the top state of the multi-state object appears when the page is loaded. If
Default Selected is enabled, the top state appears when the page is loaded. This option is enabled by default.
SS_defaultSelected=yes
Draw Highlight Create a highlight color for the selected button (this option currently has no effect).
SS_drawHighlight=yes
Highlight Color Specify the highlight color of the selected button (this option currently has no effect).
SS_selectedHighlight=#000000 where the number requires a hex number for a color, such as #FF0000 (Red)
and #009900 (Green)

Matching ID By adding this line, you can ensure that the slideshow has the same ID for both vertical and horizontal.
That way, if youre on slide 3 when you rotate the iPad, youll still be on slide 3.
Prelease

32
SS_slideshowOverlayID=ID (where ID is an ID name such as slideshow1)

You can copy and paste the following section into the Script Label panel and edit it: SS_slideshowOverlayID=mySlideshow, SS_defaultSelected=yes, SS_autoStart=yes, SS_autoStartDelay=0, SS_autoTransitionDuration=2, SS_loopCount=-1, SS_crossFadeImages=yes, SS_crossFadeImagesDelay=0.5, SS_drawHighlight=no, SS_selectedHighlight=#000000, SS_reverseImageOrder=no, SS_tapEnabled=yes, SS_swipeEnabled=yes, SS_circularViewEnabled=yes,
Create scrollable frames

You can create a scrollable frame that lets users scroll down 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.
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 objectsa scrollable 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. The content frame should not include overset text.
Prelease

33
Scrollable content A. Scrollable content frame B. Container frame C. Layers panel D. Scrollable content on iPad
If you want to display use objects in the scrollable framesuch as a text frame, an image, and a captionarrange 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 scrollable content frame to the Scrollable Content layer.
Only scrollable content frames should appear on the Scrollable Content layer. The container framesor any other objectshould not be on the Scrollable Content layer.
4 In the Layers panel, rename both the container frame and the content frame so that they have the same name, such
as Ingredients.
Prelease

34
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 dont have to re-create the Scrollable Content layer. Note: Another way to create a scrollable frame is to select a graphics frame that contains an image and apply this line to the Script Label panel: SS_WebViewOverlayContainer=yes. The graphics frame is the container frame, and the content (such as an image that is longer than the frame) is the scrollable content frame. The graphics frame and the image should have the same width.
Control the appearance of hyperlinks and slideshows in the Viewer

When users are browsing through an issue 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.
Prelease

35
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.
Content Bundler
The Digital Content Bundler converts the InDesign files and assets to an issue file that can be uploaded for viewing on a mobile device such as an iPad. This .issue 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 .issue format, the file is then rendered and displayed to the end-user using a publisher-branded Viewer. The WIRED Reader, for example, is the first instance of a publisher-branded Viewer. The .issue format will be renamed .folio in the shipping version.
Bundle an issue
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 issue 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.
4 Drag the stacks to move them to the desired order.
Content Bundler
5 Specify metadata for each stack.
The items you add in the metadata fields determine what appears in Browse mode on the iPad.
Prelease

36
C D E
Browse mode on iPad A. Description B. Tags C. Kicker D. Title E. Byline
The kicker is the section title of a magazine, such as Reviews, Features, or Editorial. In the Ads column, click the cell to indicate which stacks are advertisements. Ads do not appear in the table of contents. 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 issue, 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 37.
6 Enter the issue metadata for Magazine Title, Issue Title, Issue Number, Publication Date, and Issue Description at
the bottom of the dialog box. The issue metadata is displayed in the navigation bar and in the Viewer library. (Issue Number has no purpose in the Viewer.) 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 Click Export Issue. 8 Specify the settings in the Export Options dialog box, and click OK. 9 Specify a location of the issue 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. Exporting the issue file (or clicking Save) saves a project.bprj file in the issue folder. You can open this file later to export the issue 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, youll need to bundle the files again.
Export Options settings

The following settings appear in the Export Options dialog box.
Dimension Specify the dimension of the exported issue. For the iPad, choose 1024x768. Issue Choose Single File or Multiple Files.
Single File Choose Single File from the Issue pop-up menu if you want to create a single .issue file that you can
manually add (sideload) to the Preview Tool.
Prelease

37
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 .issue files for each stack as well as a parent .issue file. See Upload content to an Adobe server on page 39.
Image Format Choose Automatic if you want to let the Bundler determine whether to export the pages as JPEG or PNG. If you want to reduce file size at the possible expense of image fidelity, choose JPEG. JPEG Quality If Automatic or JPEG 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 issue, the issue cover will appear compressed when viewed in the library. To avoid this problem, create a different cover for the issue. See Create a library preview cover on page 42.
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. Its especially useful if you need to rebundle a large issue multiple times or use similar metadata for different issues. 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 issue folder.
Sidecar.xml file with two articles
Prelease

38
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 articles 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.
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>
Prelease

39
Upload content to an Adobe server

Adobe set up a server for you to test uploading and downloading issues. For this release, the only way to download an issue is to log in using the same Adobe ID as the person who uploaded the issue.
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 issues youve 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 43.
2 Click Bundle, create or open an issue folder, and click Export Issue. 3 In the Export Options dialog box, choose Multiple Files from the Issue pop-up menu, select Upload To Server After
Exporting, and click OK. The Multiple Files option is required for issue files that are intended to be exported to a server. When you export multiple files, each stack is an issue within a main issue, making it easy to update and manage the stacks. If Use 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 issues 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 Preview Tool, an "Error During Download" message appears because there is no purchase receipt for this "Retail" issue.
4 Specify a destination folder on your computer for the issue files to be saved, and click Select.
The issues 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 issue. 6 On your iPad, download and open the Preview Tool, sign in with your Adobe ID if prompted, and download and
view the issue.
Manage uploaded issues

During this initial Labs release, the ability to manage issues is limited. Although you can change the status from Free to Retail or Private to Public, these settings have little or no effect. All issues are essentially free and privateyou can only download issues to your iPad that have been uploaded using your Adobe ID.
In the Manage tab of the Bundler, do any of the following: Remove Select one or more uploaded issues and click Remove to delete the issue from the server. However, doing
this does not delete the issue from the iPad.

Upload Click Upload and specify the issue folder you want to upload. Upload works only if you have exported an
issue 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) .issue files.
Status Unless youre submitting your issue for commercial release, leave the statuses set to Free and Private. When
the issue is ready for the commercial release, change the status from Free to Retail (if youre charging money for the issue) and from Private to Public, and click Update. To prevent problems in the Preview Tool, 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 issue. To specify a different cover, click Change Cover, and specify a folder containing cover images. See Create a library preview cover on page 42.
Prelease

40
Adobe Content Viewer

The Adobe Content 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 Digital Content Preview Tool, which appears as Adobe Preview on your iPad. If you sign in using your Adobe ID, the Bundler lets you upload content to the fulfillment server, and the Preview Tool lets you download that content. For commercial distribution, you will be able to 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-issue Viewer or a multiple-issue Viewer that allows users to download issues as they become available. Members of the DMP prerelease site can request to make content available to consumers through the Apple Store.
iPad areas A. Article displayed B. Table of contents C. Browse mode
Download the Digital Content Preview Tool

1 On your iPad, download the Digital Content Preview Tool from the App Store. 2 Start the Adobe Preview app, and sign in using a verified Adobe ID. 3 Sync your iPad so that the Preview Tool app is added to iTunes.
Download issues from the test server

1 Use the Bundler to upload content to the test server. See Upload content to an Adobe server on page 39. 2 On your iPad, start the Adobe Preview app. 3 To sign in, make sure that your iPad is connected to the internet and log in using an Adobe ID.
If you cannot sign in, see Viewer troubleshooting on page 46.

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 .issue files.
Prelease

41
Add (sideload) custom issues to the Preview Tool manually

The Preview Tool is a standalone iPad application that can display the issues you create. If you used the Content Bundler to create a single .issue file, you can manually add it to the Preview Tool from your desktop through a process called sideloading.
1 If you have not already done so, install the Digital Content Preview Tool in iTunes and on your iPad.
The Preview Tool application is added to the Apps section of the iTunes library. A placeholder issue is added to the Preview Tool automatically. You can add more issues.
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.
Adding the .issue file to the iPad (scroll down to view this section)
4 Click the Add button, and browse to the .issue file you created. Click Choose.
You can also drag .issue files into the Adobe Preview Documents area to add issues. If youve created library preview files, add those as well.
5 On your iPad, tap the Adobe Preview app.
The Preview Tool displays preview images of each issue in the library. (You may need to restart the Preview Tool and tap the Home button to display the library.)
6 When prompted, tap Download to download the current issue. When its finished downloading, tap View.
Prelease

42
Navigate in the 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. Tap interactive areas to play movies, rotate 360 images, and activate other interactive items. Tap a non-interactive area to display the navigation bars. Tap the Home icon to jump to the beginning of the issue.
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 birds eye view of the issue. Drag the Scrubber to scroll through article previews.
A B C D
Adobe Viewer A. Home button B. Back Button C. Table of Contents button D. Browse button E. Scrubber
Create a library preview cover

Each issue 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.
Prelease

43
Replace the cover_h.png and cover_v.png files that appear in the project folder. To do this, export the issue file with
the Multiple Files option select, but dont 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 .issue files. If you re-bundle the image, turn off Use Cover in the Export Options dialog box so that the edited cover files dont get overwritten. In a single-orientation issue, both cover files are created, but one of the cover files may be blank. You may want to replace that cover page. When you sideload content, the issue 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:
[issue name]_proxy_h.png [issue 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 .issue files.
Remove issues from the Preview Tool

If you cannot delete individual issues from the Preview Tool on the iPad, use this method to remove all issues.
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. Click Delete to
confirm.
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 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.
Prelease

44
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 again. 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. Its available at http://get.adobe.com/air/.
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 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
Prelease

45
Bundler troubleshooting
Invalid asset location This error appears when the source assets for an overlay are not in the proper locationa subfolder in the stacks OverlayResources folder. Bundler fails to load a new issue If you click New in Bundler and specify a valid issue folder, the Bundler should open InDesign CS5 and display the stacks in the issue folder. If the Bundler fails to load the issue, 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. First, make sure that you have 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. (If Switchboard is not installed, go to http://kb2.adobe.com/cps/853/cpsid_85311.html.) Even if youve 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. The Switchboard app is located here: (Windows) Program Files\Common Files\Adobe\SwitchBoard\SwitchBoard.exe (Mac OS) Library/Application Support/Adobe/SwitchBoard/SwitchBoard To change the settings so that Switchboard launches automatically, you can configure the Switchboard.ini file. To do so, open the Switchboard.ini file in a text editor: (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/ In the switchboard.ini file, type STARTUP=automatic at the end of the file, save it, and close it. Then try bundling again. If problems persist, please post a message to the user forum. Note: Adobe is currently working on a solution that uses a different communication method than Switchboard. 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 issue 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 issue folder. The InDesign documents do not have _h and _v suffixes (such as article_v.indd). The stack folders do not include PNG files for the table of contents icons.
See Setting up the folder structure on page 19. "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.
Prelease

46
Viewer troubleshooting
The Preview Tool doesnt accept Adobe ID If the Digital Content Preview Tool 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 youre using a legacy Adobe
ID thats 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 Need to sign in to Preview Tool using different Adobe ID The Preview Tool does not offer a Sign Out button, which means that you remain signed in as long as your iPad is connected to the internet. To display the Sign In button again, turn off the internet connection on your iPad, start the Viewer, and sign in using your new Adobe ID. Then connect the iPad to the internet again. Another way to display the Sign In button is to change your Adobe ID password, which you can do by clicking the link in the previous section. Issue appears as blank gray page in Viewer If your bundled issue appears in the Preview Tool as a single gray page, it usually indicates a problem with the Preview Tool installation. Delete the Preview Tool from both the iTunes App section and from the iPad. Then add the Preview Tool again to the iTunes library and sync the iPad.
Prelease
47
Chapter 2: Best Practices for Digital Publishing

Here are some best practices for designing files. Creating your page layout Decide whether you want to use only one orientationportrait or landscapeor if you want users to be able to view a different design when they rotate their iPads. You cannot mix and match orientations within an issue. The entire issue must be dual, portrait, or landscape.
For each dual-orientation article or ad, create two filesa landscape document with a page size of 1024x768, and a
portrait document with a page size of 768x1024. See Creating InDesign files on page 17.
Creating a document for a device reader A. Set Intent to Web B. Specify Page Size C. Choose Portrait or Landscape
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.
Each document can have multiple pages and assets that differ in the horizontal and vertical orientation. You can scale down large images; they will be downsampled when bundled. However, you should use correctly
sized images in overlays because overlay resources are not downsampled and may increase the size of the .issue file.
To get the best color fidelity, use RGB color images instead of CMYK or LAB. Avoid running 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. Turning off Smooth Scrolling causes pages to snap when flipped to. 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.
Prelease

Best Practices for Digital Publishing
48
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.
In your InDesign layout, create slideshows using multi-state objects and hyperlinks and buttons that jump to web
pages, other articles, and even specific pages in other articles. See Use native interactive elements on page 28. Image file types For non-interactive images you place in InDesign, you can use any format, including PSD, TIFF, AI, and JPEG. When bundled, these objects are compressed and converted into a PNG or JPEG file for each page. For interactive overlays, the authoring tools do not compress images. To minimize file size, its better to use JPEG images with medium compression (50-80% range) rather than PNG for the source files. 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. Creating assets for overlays For each overlay, create a separate folder in the OverlayResources folder, whether its a single video file or multiple 360-degree view files. These source files are necessary for bundling, even after you export the overlay file. The exported SWF files must be placed in the Links folder (or folders).
For best results, create the source files for interactive overlays using the exact dimensions in pixels that they will
appear in on the iPad. For slideshows and image pans, the dimensions of the source file are used when you place the imageyou cannot change the Width and Height values in the Overlay Creator. For movies, 360 view images, and panoramas, you can specify Width and Height values that differ from the source files. 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.
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.
Even if an overlay requires different images for the horizontal and vertical versions of the files, use the same ID for
both overlays. That way, when you rotate the iPad, the state of the overlay is preserved. For example, if youre on the second slide when you rotate the iPad, the second slide will still be selected. If the overlays have different IDs, the first slide will be selected when you rotate the iPad.
When you place overlay files in InDesign, the frame size determines where you tap to activate or trigger the
interactive content. If you change the size of the overlay, change the Fitting option to fit content to frame. Creating slideshows Create multi-state objects that will become slideshows in the bundled issue. Create navigation buttons that jump to the next or previous slide, or create thumbnail buttons that jump to a specific slide. Use the Script Label panel to change other settings, such as enabling swiping and wraparound. See Create interactive slideshows on page 30. Creating assets for 360 view images You can create 360 images using a variety of methods. You can use Photoshop Extended to rotate a 3D object or change the camera view. You can use an application such as QuickTime Pro to export a movie into a set of images. Or you can use a 3D imaging application to generate a set of images from a 3D file.
Prelease

49
Creating a 360-degree view of an object
For 360 images, each file represents a slightly different rotation angle. To reduce file size, use JPEG images compressed in the 50-80% range.
Creating assets for panoramas 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 a horizontal cross image, and then you need to create six cube images based on that cross image.
Prelease

50
Creating a panorama A. Original panorama image B. Panorama image converted to inner six sides of cube C. Panorama on iPad
If you start with an equirectangular image, youll need to use a third-party tool such as Pano2VR to create six cubic
images. The Panorama on page 25 topic provides details on obtaining and using Pano2VR.
If you can find a horizontal cross image, you dont need a third party tool to generate the images. You can use
Photoshop or a screen capture utility to create the six required images.
For best results, use JPEG images. High-resolution images allow customers to zoom in but require a larger file size.
Creating assets for image pans For image pans, maintain consistency by using the same image size, such as 1024 by 1024, for both horizontal and vertical documents. You can specify different view areas in the two documents (but use the same ID for the two assets).
Edit the image size to the proper dimensions in pixels before you create overlay file. While its easy to change the
view area size, its much more difficult to change the size of the pan image.
For best results, use JPEG images.

Creating assets for video and audio files Source video files must be in MP4/M4V format with h.264 encoding, compatible with Apple iTunes.
Prelease

51
Source audio files must be in MP3 format. You can create a controller status bar for audio clips by creating a set of
_play and _pause images. See Audio on page 24. Creating assets for web view 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 in the OverlayResources folder.
Specifying a local HTML file can be useful for providing an alternate image in case the users iPad isnt connected
to the web. The local HTML file can check for a connection and display a web page if there is one. If there isnt a connection, you can display a different image. Organizing your file structure Understand the folder and filename conventions, and stick to those conventions to avoid unexpected results when bundling the issue. Place the stack folders within an issue folder. In each stack folder, include a .png file, an OverlayResources folder, and a folder for the horizontal and vertical InDesign files and their contents.
A
B C D E
Proper structure for files A. Issue folder B. Folders containing InDesign files and their Links folders C. Overlay Resources folder containing source files for overlays D. .png file for toc E. Stack folder
If you decide to edit your files after bundling, you dont need to package your files again if you simply edit the text
or base layout. However, if you add new overlays, its a good idea to package the files again and then replace the old package folders with the new ones.
Remember to create a thumbnail .png file for each stack, including ads that do not appear in the table of contents.
The Bundler requires a thumbnail .png file to include the folder in the issue. Thumbnail images appear in the table of contents as a square 70x70-pixel object, unless you select the Ad category for the stack. You can resize an image in InDesign, but the drawback is that you cannot export a selected InDesign object as a .png file. Instead, you can export as .jpg and then save the file as .png, or you can use a screen capture program, Photoshop, or Illustrator.
The first page of the first stack is used as the cover of the issue. You can add interactive overlays to the cover.
Bundling best practices Make sure that you add the Digital Publishing InDesign Plug-in to the Plug-ins folder in the InDesign application folder. The Bundler requires this plug-in.
To avoid typing the same metadata information each time you bundle, customize the sidecar.xml file. See Create
a metadata sidecar file for the Bundler on page 37.
When exporting the issue, use the Single File option to create a single .issue file that can be sideloaded to the Preview
Tool. Use the Multiple Files option to upload content to a fulfillment server. (You must first sign in using a verified Adobe ID.) Using the Preview Tool, you can sign in using the same Adobe ID and download the content you uploaded.
If youre experiencing problems while bundling, see Troubleshooting digital publishing tools on page 43.
Prelease
52
Chapter 3: Hosting Services

For this release, you can upload and download content using an Adobe server. The Labs version of the Digital Magazine Solution does not provide the necessary Viewer technology required to distribute or sell branded content through Apple iTunes. However, members of the Digital Magazine Publishing prerelease site can request to make their content commercially available on the iPad. 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 multi-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. 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. Youll 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. Well provide more details on these features when you request to make your content commercially available.
Prelease

Digital Publishing Userguide

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Digital Publishing Userguide

Uploaded by

Copyright:

Available Formats

Publishing for the ADOBE DIGITAL CONTENT VIEWER

Troubleshooting digital publishing tools

Chapter 2: Best Practices for Digital Publishing Chapter 3: Hosting Services

Chapter 1: Adobe Digital Magazine Solution

Overview of publishing workflow

InDesign CS5 Content Bundler

PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER

Installing digital publishing authoring tools

PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER

Install the tools and assets

Tutorial 1: Creating a simple static issue for the iPad

PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER

PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER

4 Close the files in InDesign.

PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER

PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER

Choose. The .issue file is added to the Viewer.

Tutorial 2: Creating an issue with interactive elements

PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER

rectangle does not have a stroke or fill.

PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER

Applying a hyperlink to a rectangle frame

The CyclingMovie folder is in the OverlayResources folder in the Enjoy_Stack folder.

PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER

Using the Overlay Creator to create a movie

and choose From Current Frame from the Poster menu.

PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER

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

PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER

Images combined into multi-state object

PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER

Create navigation buttons

the table of contents.

PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER

folder called Enjoy_New.

PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER

PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER

Export Options dialog box

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

PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER

Creating InDesign files

Create horizontal and vertical documents

PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER

PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER

Setting up the folder structure

PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER

InDesign files and Links folders in separate folders

PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER

PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER

Sample OverlayResources folder

options appear for each interactive element.

(such as slideshow_overlay.swf). Click Save.

PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER

Creating a 360-degree view of an object

PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER

You can change the following settings:

and the maximum number is 30.

PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER

PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER

PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER

PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER

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

option is deselected, the web view background is used.