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
Last updated 10/20/2010

1

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
Last updated 10/20/2010

PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER
Adobe Digital Magazine Solution

2

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
Last updated 10/20/2010

To download the Preview Tool directly to your iPad. you just want to take a simple magazine article and make it available on an iPad. To install these tools. the Content Bundler. you need InDesign CS5. and download the free app. see “Installing digital publishing authoring tools” on page 2. Tutorial 1: Creating a simple static issue for the iPad In some cases. Digital Content Bundler (AIR) Double-click to install. If you cannot sign in to the Bundler. Tutorial Assets (zip) Unzip this file for stepping through the tutorials. Install the tools and assets To complete these tutorials. and try signing in. open the Content Bundler. In addition. you need the Tutorial Assets folder. You can also download the Preview Tool in the iTunes Store and then sync your iPad. and the Preview Tool (the Viewer). Signing in allows you to upload and download content on an Adobe server for testing purposes. At the end of this lesson. If you cannot sign in to the Preview Tool. In this tutorial. open App Store. Your iPad must be connected to the internet for you to sign in using the Preview Tool. search for the application. Prelease Last updated 10/20/2010 . here’s what your resulting one-page file should look like on the iPad. you will see how easy it is to display an InDesign layout on a mobile device. The Preview Tool prompts you to sign in. See Tutorials for Digital Publishing. The second tutorial teaches you how to create and view a magazine article with interactive objects. the Overlay Creator. Unzip this file to obtain the source files for stepping through these lessons.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 3 Interactive Overlay Creator (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. click the “Create an Adobe ID” link and following the prompts. 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.

In our tutorial.zip) file available on Adobe Labs. Each stack appears in its own folder inside an issue folder. and each image has a different size to fit within the layout orientation.zip) file from Adobe Labs. 1 If you have not already done so. indd and WiFi_v.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 4 A B Completed issue displayed on the iPad A. We already created _h and _v versions of the stack and packaged them (File > Package). we’ll create separate vertical and horizontal documents with _v and _h filename suffixes. Portrait (vertical) view To use the sample files for this tutorial. 3 Make sure that the files are organized in the appropriate structure. 2 In InDesign CS5. Prelease Last updated 10/20/2010 . and browse to the Meridien_Issue folder. unzip the TutorialAssets (.png file used as the thumbnail in the table of contents. open the WiFi_h. users can rotate the iPad to view a different layout. download and unzip the TutorialAssets (. Notice that there are two images in each document. A stack can be an ad or an article. Landscape (horizontal) view B. That way. A stack folder requires one or two InDesign documents and a . We’ll discuss folder structure more in the next tutorial.indd files located in the WiFi_Stack folder. Create the InDesign layout The item that gets uploaded to the iPad is called an issue. Each issue consists of one or more stacks.

Horizontal and vertical . Ignore the metadata fields (Title. Kicker. see “Troubleshooting digital publishing tools” on page 43. you’re ready to use the Content Bundler to create an issue file that can be uploaded to the iPad. Stack folder C.png file D. Thumbnail . This file appears as a thumbnail image in the Viewer table of contents. Issue folder B. Prelease Last updated 10/20/2010 . 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. 4 Enter the issue data such as Magazine Title and Issue Title at the bottom of the dialog box.zxp file you downloaded from Adobe Labs and following the prompts. and click Select. 2 Launch the Content Bundler application. Note: If you experience problems installing the InDesign plug-in.indd files with _h and _v suffixes 4 Close the files in InDesign. see “Troubleshooting digital publishing tools” on page 43. install the InDesign plug-in by double-clicking the InDesign Plugin . and so on) for now—we’ll go over those options in the next tutorial. A B C D Valid folder structure A.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 5 We also created a 70x70-pixel file called tocPreview. Bundle the files Now that the issue includes a stack folder with all the necessary files in place. browse to the Meridian_Issue folder.png. For details. 3 Click New. 1 If you have not already done so.

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

issue file is added to the Viewer. When it’s finished downloading. and then click the Apps tab. At the end of this lesson. Tutorial 2: Creating an issue with interactive elements As you go through this tutorial.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 7 4 Select your iPad name in the Devices section of iTunes. Adding the .issue file you created. here’s what the first page of the main article should look like on the iPad. You’ll create interactive objects directly in InDesign as well as using the Overlay Creator. 8 Tap Download to download the current issue. 9 Rotate the iPad so that you can see both the horizontal and vertical versions of the file. Click Choose. click the Add button. Prelease Last updated 10/20/2010 . and browse to the . tap the Adobe Preview app. you’ll work with the CityGuide_Issue folder in the TutorialAssets folder. 7 On your iPad. 5 In the Apps tab. The Preview Tool displays preview images of each issue in the library.issue file to the iPad (scroll down to view this section) 6 Click the Adobe Preview icon under Apps. tap View. scroll down to view the File Sharing section. The .

and type a URL address in the URL field (we used http://www. Y. 4 Select URL from the Link To menu.org/). and then drag a rectangle over the “D.bikeworks. Prelease Last updated 10/20/2010 . 2 Select the Rectangle tool in the toolbar. open Enjoy_v. Hyperlinks D. Portrait (vertical) view C. Meet” logo.indd. Landscape (horizontal) view B. Make sure that the rectangle does not have a stroke or fill. Meet” logo. We’ll create an empty frame and apply a hyperlink to it. Under Appearance. It’s located in the Enjoy_Stack folder in the CityGuide_Issue folder.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 8 A C D B Completed issue displayed on the iPad A.I. I. Click OK.Y. and then choose New Hyperlink from the panel menu. 3 Open the Hyperlinks panel (choose Window > Interactive > Hyperlinks). 1 In InDesign CS5. leave Invisible Rectangle and None selected. Video overlays Add an interactive hyperlink Let’s create a hyperlink object for the “D.

5 Type Cycling for the ID field. Note: We already set up the OverlayResources folder in the CityGuide_Issue folder.indd file. 6 Specify 432 for Width and 234 for Height to determine the default size of the overlay object.indd document. Prelease Last updated 10/20/2010 .PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 9 Applying a hyperlink to a rectangle frame 5 Open the Enjoy_h. 360° views. The CyclingMovie folder is in the OverlayResources folder in the Enjoy_Stack folder. When you’re creating your own overlays such as videos.jpg file in the Enjoy_Stack folder.Y. Meet” logo. Using the same ID for the horizontal and vertical versions allows the movie to continue playing even if the iPad is rotated. You can create different overlays based on the same movie file as long as they have different IDs. 1 Launch the Overlay Creator. make sure that you store the assets of each interactive overlay in a different subfolder of the OverlayResources folder. Move the object over the “D. 3 Click Browse next to URL and double-click the cycling_432x234.indd file to the Enjoy_h. 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 let’s use the Overlay Creator to create an overlay file that will become interactive when bundled.mp4 file in the CyclingMovie folder. The overlay IDs for the horizontal and vertical versions of the InDesign layout should be the same.I. The FPO Content Image acts as the poster for the video. Why specify an ID? Each interactive overlay you create in an issue must have a unique ID. We’ll add a cycling movie. even if they have different assets and settings. 4 Click Browse next to FPO Content Image and double-click the Cyclist. This image includes a movie icon to indicate that it’s interactive. 2 Select Video on the left side of the dialog box. and panoramas. and then copy and paste the hyperlink object from the Enjoy_v.

open the Media panel (choose Window > Interactive > Media). and choose From Current Frame from the Poster menu. such as cyclistmovie_overlay. 10 To replace the Flash logo. Prelease Last updated 10/20/2010 .PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 10 Using the Overlay Creator to create a movie 7 Click Export. Click Save. and specify the filename.swf. 8 Open Enjoy_v. and double-click the cyclistmovie_overlay. choose File > Place.swf file you created. Now let’s add the video swf file to the InDesign files. select the placed swf file. browse to the Enjoy_Stack folder.indd in InDesign CS5. click in the blank area on the page to place the overlay. 9 With the loaded cursor. and align the image frame to the surrounding objects.

We’ve already added the images to the second page of the vertical “Enjoy” file. and turn to page 2. 1 Open Enjoy_v.indd file. You’ll arrange them in a stack.indd file to the Enjoy_h. 2 Select the seven images between the red arrows. 3 With the images still selected.indd in InDesign CS5. and then click the Align Horizontal Centers and Align Vertical Centers buttons in the Control panel. choose Window > Interactive > Object States to display the Object States panel. convert them to a multi-state object. Create a native slideshow Now let’s create an interactive slideshow using the Object States panel. and create buttons that navigate through the slides.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 11 Using the Media panel to select the FPO Content Image specified in the Overlay Creator The Cyclist. and then click the Convert Selection To Multi-State Object button. Center the images between the arrows. Prelease Last updated 10/20/2010 . 11 Copy and paste the placed swf overlay object from the Enjoy_v.jpg image that you specified in the Overlay Creator should be displayed.

Now that you’ve created the multi-state object. 4 Choose Window > Interactive > Buttons to display the Buttons panel. 5 Click Convert Object To A Button. you need to let users scroll through them.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 12 Images combined into multi-state object Each image appears as a separate state in the Object States panel. Prelease Last updated 10/20/2010 . and then choose Go To Previous State from the plus icon next to Actions. and then select the red arrow on the left.

apply the Go To Next State action. convert it to a button. Choose Object > Effects > Drop Shadow. 7 Select the red arrow on the right. and give it a drop shadow. You can create new pages and place the files you create using the Overlay Creator.indd file to page 2 of the Enjoy_h. For more information on working with other types of overlays. Also see “Use native interactive elements” on page 28. and then click OK. 8 Copy and paste the arrows and multi-state object from the Enjoy_v. 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. 6 Click [Click] in the Buttons panel. This file is used for the thumbnail image in the table of contents. Note: If you want to learn about more interactive objects.png file. we included additional asset files in the OverlayResources folder to experiment with. the stack folder must include a 70x70-pixel . Each stack contains the following files: PNG file Currently. Prelease Last updated 10/20/2010 .indd file.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 13 Create navigation buttons Now let’s make the button’s appearance change slightly when the user taps it. see “Overlay Creator” on page 21. Move the arrows below the multi-state object for a better fit. 9 Save the InDesign files.

or they can be in the stack folder and share the Links and Document Fonts folders. the OverlayDemo article includes examples of all the current overlay types. OverlayResources The OverlayResources folder is where the source files for interactive content such as videos and 360° view images must appear. An easy way to create a Links folder is to package an InDesign file containing linked content.” In that folder.indd. create a folder called “Enjoy_New. Stack folder Prelease Last updated 10/20/2010 . we’ll create separate folders. 5 Save the Enjoy_v. In this tutorial. • Copy the OverlayResources folder from the the Enjoy_Stack folder to the Enjoy_New folder. Overlay Resources folder D. tocCity. Including multiple stacks in the issue will allow you to see how the table of contents works. Click OK to dismiss a prompt about document fonts. Although it isn’t necessary to package the files before creating the issue. Let’s build a new issue folder from scratch. and copy the OverlayDemo_Stack and Cover_Stack folders from the TutorialAssets folder. Click Package to save the Enjoy_h Folder in the Enjoy_New folder. create a new folder called “Tutorial_Issue. and browse to the Enjoy_New folder you just created. The Links folder is where you must include the placeholder overlay files that you create using the Overlay Creator.png file from the Enjoy_Stack folder to the Enjoy_New folder. and follow the same procedure to create a packaged Enjoy_v Folder in the Enjoy_New folder. each with their own Links folder. Document Fonts The stack folder may also include a Document Fonts folder.” 2 Open the Enjoy_h.indd and Enjoy_v. copy the WiFi_Stack folder from the Meridien_Issue folder into the Tutorial_Issue folder. • To add additional stacks to the issue. You’ll now package the InDesign files and organize the folders and files properly. 4 Click Package. Links folder The Links folder contains linked content for both the horizontal and vertical InDesign files.indd files in InDesign CS5. 3 Save the Enjoy_h. Folders containing InDesign files and their packaged contents C. click Continue. it’s 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.indd file and choose File > Package. If a document contains missing links. These files can be in separate subfolders. Plus.png file E.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 14 Portrait and landscape InDesign files The stack folder must include _v. 6 Copy the following files: • Copy the tocCity. the stack will not be added to the issue. A B C D E Proper structure for files A. 1 On your desktop or in another known location.indd and _h.indd files (unless you’re creating a single-orientation issue). Issue folder B.

you indicate that the stack is an ad. you’re 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. Ads don’t appear in the table of contents. The metadata text is displayed in Browse mode on the iPad. Currently. The Bundler launches InDesign and prepares the files for the iPad. All non-interactive content on each page is compressed into these image files. 6 Enter the issue data such as Magazine Title and Issue Title at the bottom of the dialog box. choose Multiple Files from the Issue pop-up menu. such as “Reviews” or “Editorial. The Manage tab is displayed. Specify your Adobe ID and password. The kicker is the section title of a magazine.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 15 Bundle assets Now that the issue includes stack folders with all the necessary files in place. 4 Click New. browse to the Tutorial_Issue folder. Prelease Last updated 10/20/2010 .” If you click the cell of the Ads column. the first page of the first stack is used as the cover. 7 Specify metadata for each of the stacks. and click Sign In. and all interactive overlays appear on top of these files. 2 In the Content Bundler. You can drag a stack to change its order. 9 In the Export Options dialog box. click Sign In. When you bundle content for a server. when you bundle an issue. 5 Make sure that Cover_Stack is at the top of the stack list. Content Bundler 8 Click Export Issue. images files—either PNG or JPEG—are created for each page of every stack. and click Select. 3 Click Bundle. This metadata is displayed in the Viewer library and in the navigation bar. 1 Launch the Content Bundler. Let’s switch back to Bundle view so that we can bundle the files and upload them to the server.

start the Preview Tool. each stack becomes an issue file within a main issue file. install the Digital Content Preview Tool on your iPad. Play the movie and tap the hyperlink to make sure the interactive overlays work. you added content to the iPad directly from your desktop. and select the project. click the Manage tab in Bundler to view the uploaded issue. Make sure that you are signed in using your Adobe ID. 3 When prompted. make sure that Free. 12 When the issue is uploaded. Drag the Scrubber to scroll through article previews. Your iPad must be connected to the internet to download the issue. View the issue on the iPad In the first tutorial. add. The Product ID and Status options will become more significant when you can make your issues commercially available to the public. making it easy to update. In this tutorial. you can click Open in Bundler. When you export multiple files. Then you don’t have to re-enter the metadata. 2 On your iPad. and Use Cover are selected. Export Options dialog box 10 Select Upload To Server After Exporting. Private. • Swipe left and right to view different articles. you’ll download the content to the iPad directly from the server. • Browse to the Enjoy article. Tap the Table of Contents button in the upper-left corner to view the table of contents and thumbnails. and click OK. 11 Specify the location on your computer (such as the Tutorial_Issue folder) where the project files will be saved. and click Select. Tap the Browse button in the upper-right corner for a bird’s eye view of the issue with the metadata descriptions you added. 1 If you have not already done so.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 16 The Multiple Files option is required for issue files that are intended to be exported to a server.bprj file. If you need to re-bundle the issue. Prelease Last updated 10/20/2010 . and tap the Home button to jump to the beginning of the issue. Swipe up and down to read an article. • Tap a non-interactive area to display the navigation bars. • Rotate the iPad so that you can see both the horizontal and vertical versions of the file. download and view the issue. and remove individual stacks at a later time.

Create horizontal and vertical documents Creating new InDesign documents for the iPad is usually the easiest approach. Browse button E. you can change settings in the Document Setup dialog box to use a different page size (such as 1024x768) and orientation (portrait or landscape). You can use the Overlay Creator to add interactive elements such as 360 views. If you’ve already created a document that you want to repurpose for the web. image pans. Table of Contents button D. The horizontal and vertical layouts must be in separate documents. Scrubber Creating InDesign files Use InDesign CS5 to create layouts for the iPad. If the InDesign files include multiple pages. and movies you add to InDesign documents are ignored when you bundle the documents for the iPad.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 17 A B C D E Adobe Viewer A. Prelease Last updated 10/20/2010 . not in the same document. users scroll vertically to the next page using the mobile device. or you can create a single-orientation layout. However. and scrollable frames can become interactive on the iPad (see “Use native interactive elements” on page 28). buttons. sounds. Users scroll horizontally to move to different articles in the issue. Animations. hyperlinks. and panoramas (see “Overlay Creator” on page 21). You can create both horizontal and vertical versions of the layout. Back Button C. multi-state objects. movies and sounds. Home button B.

Package files It’s a good idea to package your InDesign documents before you bundle the assets. However. Set Intent to Web B.indd. you may want to package the files just before using the Content Bundler. choose File > New > Document. but it turns off Facing Pages and displays the measurements in pixels. follow the same procedure to create a second document. 1 In InDesign CS5. you cannot change it to Web. The iPad uses 1024 x 768. Choose Portrait or Landscape 5 If desired. You then use the Bundler to turn on smooth scrolling for that article. choose Web. When you save the files. you may want to package files early in the process and make sure that the interactive overlay files appear in the Links folder. Choosing Web isn’t necessary. Or. 2 For Intent. For more information. Depending on your workflow and preferences. see “Best Practices for Digital Publishing” on page 47. If you prefer. you can also use _p and _l suffixes instead of _v and _h. making the layout easier to work in for mobile devices.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 18 Do not use facing pages in your document—use only one page per spread. you can specify a custom page size (such as 1024 x 3000) to allow more content to be added to the one-page document. if you want to allow smooth scrolling. If you’ve already created a document with Intent set to Print. 4 For Orientation. choose either Portrait or Landscape. 6 Design your documents. make sure that you include an _v suffix for the vertical (portrait) document and an _h suffix for the horizontal (landscape) document. Specify Page Size C. A B C Creating a document for a device reader A. Prelease Last updated 10/20/2010 . such as article_h. specify the dimensions of the device reader. 3 For Page Size. 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.

If necessary. 2 Make sure there are no missing or modified links. depending on whether you’re providing a single. If you’re providing a dual-orientation issue. and then combine the packaged files into the appropriate folder structure.indd”). It is important to following the structure rules to avoid bundling errors.png”) for the table of contents thumbnail and either one or two InDesign documents.or dualorientation issue. and then click Package. When you bundle assets to be included in an issue. 4 Specify the location of the packaged folder. The issue folder consists of one or more stack folders. you point to the main issue folder.indd”) and an InDesign file with a _v suffix (such as “article1_v. However. Prelease Last updated 10/20/2010 . The first page of the first stack is used as the cover of the issue. 1 Save the document. and then choose File > Package. The OverlayResources is a structural sibling to stack folders. a Links folder. 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. each stack contains the two InDesign files. Setting up the folder structure The Content Bundler uses the folder structure and filenaming conventions to determine what is included in an issue. each stack should include both an InDesign file with an _h suffix (such as “article1_h. Each stack represents an ad or article consisting of one or more pages.png file. and contains the source overlay assets for all the stacks in the issue. a stack must contain a PNG file (such as “tocPreview. Using this method. and the Links and Document Fonts folders. the . package both versions of the InDesign document. See “Create a library preview cover” on page 42. 3 Click Continue to skip the printing instructions. and a Document Fonts folder (if the file uses fonts) into a folder.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 19 When you package a file. To be included in an issue. Methods for setting up folder structure When setting up the folder structure. interactive elements are omitted from the cover. InDesign exports the file itself.

create separate OverlayResources folders for every stack. With this method.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 20 A A B C Shared Links folder method A. the Links folder. Stack folder B. This approach make it easy to use the folders that result from packaging a file (see “Package files” on page 18). and the Document Fonts folder. InDesign files and Links folders in separate folders Prelease Last updated 10/20/2010 . with each folder containing an InDesign file. 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. Overlay files placed in InDesign C.

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 example. For source files to experiment with. Add multi-state objects for slideshows. if you are creating a movie for an article on kayaking. You can also use the Interactive Overlay Creator to create interactive elements such as 360° views. These objects automatically become interactive when bundled (see “Use native interactive elements” on page 28). or duplicate the overlay files in the two different Links folders and then place them separately.mp4 file to a KayakMovie subfolder in the OverlayResources folder. you either need to package the files again. image pans. move the assets to be used for any interactive overlay into their own subfolder of the OverlayResources folder. After you add your assets to the OverlayResources subfolder. see the OverlayDemo_Stack folder in the Tutorial Assets (. that orientation remains in place even if the user rotates the iPad. depending on which method you use to structure your files. OverlayResources folder For interactive overlays to work in the Viewer. One drawback to this method is that if you create overlays after packaging the files.zip) folder. the source files for the overlays must be included in a subfolder in the OverlayResources folder. and web views. panoramas. add all the statue files (statue001. 1 If you haven’t already done so. You cannot mix single-orientation and dual-orientation stacks in an issue. For example. audio.jpg. You then place the SWF files in InDesign. statue002. Prelease Last updated 10/20/2010 . This folder is available on Adobe Labs and the DMP prerelease site. if you create stacks with only vertical (768x1024) InDesign files. add the kayak.jpg. URL-based hyperlinks and buttons. and so on) to a Statue360 subfolder. and scrollable frames directly in the InDesign documents. video. The OverlayResources folder is either a sibling of the stack folders or a child of each stack folder. The InDesign files still require an _h or _v extension in single-orientation issues.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 21 One advantage to the second method is that you don’t have to move and delete files after packaging. Overlay Creator You can add interactive content to an issue using two methods. 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 orientaton—vertical or horizontal—the exported issue file is locked into that orientation. If you’re creating an statue that can be rotated 360 degrees. you use the Overlay Creator to create SWF files that refer to these assets.

The IDs for overlays for the horizontal and vertical versions of the InDesign documents should be the same. and choose None or From Current Frame from the Poster menu. open the Media panel (choose Window > Interactive > Media). Assets or URL Specify the URL destination or the asset files used as the source files for the interactive overlay object.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 22 Sample OverlayResources folder 2 Launch the Overlay Creator application. or 360 viewer object when the page is loaded. video. If you’re playing a video. Prelease Last updated 10/20/2010 . ID Specify any ID name that is different from the IDs of other interactive overlays used in the issue. Some options appear for each interactive element. the SWF overlay file will include a Flash icon. 4 Click Export. use the File > Place command to place the exported . the FPO Content Image does not appear automatically. Click Save. That way. 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. and specify the appropriate options. select From Current Frame from the Poster menu to display the image. only one of the overlays will be interactive.swf).”) For example. Auto Start Begin playing the audio. Only one object will play. By default. rotating the iPad will continue playing the video if the IDs are the same. and type a name for the file (such as slideshow_overlay. if you rotate the iPad. Background Color If you want the overlay object you place in InDesign to include a background color. To remove this icon. Width/Height Specify the size (in pixels) of the overlay object that you will later place in InDesign. 5 In InDesign. Avoid auto starting multiple objects of the same type (such as two audio files). Click the Preview button to display the overlay content. Specify a location of the file (such as the Links folder in the stack folder). 3 Select the type of interactive element on the left side of the dialog box. even if they have different assets and settings. Specify a Delay value to delay auto start by the specified amount after the page is loaded. and select the color. In the Media panel. If you use the same ID for two or more overlays in the document. (FPO stands for “for placement only. web view. the interactive object maintains the same state.swf file in the InDesign documents. When you place the exported SWF file in InDesign. FPO Content Image Click Browse and specify a file to provide the image used to indicate that the area is interactive. select Fill With Background Color.

The image files should have the same root name with ascending suffixes. Place the source images in a subfolder in the OverlayResources folder. One method is to use Adobe Photoshop® Extended to create images of a 3D object. Tower002. with each image rotated by a few degrees. You can use a number of different methods to create images of a 3D object. You can use Google SketchUp to draw a 3D model and export the images. and the source assets should remain in the OverlayResources folder. While the 360 Viewer is designed primarily for rotating objects.jpg. You can use Adobe Flash® Professional to export frames from an animation. Creating a 360-degree view of an object Prelease Last updated 10/20/2010 . 360 Viewer The 360 Viewer lets users rotate an object 360 degrees on the mobile device. You can also use a 3D authoring application to generate images of a 3D model. click Browse.jpg. In the Overlay Creator. such as Tower001. and so on. the overlay SWF files should appear in the Links folders. and click Select. you can use it as a way of progressing through any sequence of images. locate the folder containing the images.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 23 When you bundle the issue.

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

Prelease Last updated 10/20/2010 . when your audio is played half way. you need to convert it to six cube images based on that cross image.png AudioAsset005_pause. the AudioAsset003_play. Panorama The Panorama overlay provides the illusion of viewing an image from the inside out. avoid using an image larger than 1024-by-1024 pixels. Specify the Viewport Offset values to define the initial view area. AudioAsset001_proxy. Large images increase the file size.png files in the same folder as the MP3 file. The image you want to use should appear in a subfolder in the OverlayResources folder. You can also select Auto Start to begin playing the audio when the page is loaded (or after the specified delay).png AudioAsset003_pause. For example. it cannot be masked. These images each must have either a _pause. Note: For best results.png AudioAsset004_play. Click the Browse button next to Assets to select the folder containing the audio files. The _play and _pause buttons represent progressive states of a status bar.png AudioAsset003_play. the Overlay Creator requires a set of six images. Here is an example of a set of controller skin files. the view area must be rectangular. create memory problems. 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.png (proxy image) AudioAsset001_play.png AudioAsset005_play.png AudioAsset004_pause. click Browse to select the folder containing the image you want to use. Make sure that the original image has the exact dimensions you want to use. If you begin with a full panorama image (sometimes called an equirectangular image or a 360 panorama). Navigating to another article stops and resets the audio. When the user initiates the audio. Currently.png In this example. you may want users to be able to pan an 1024-by-1024 pixel image within a 200-by-200 pixel view area. The key to creating a panorama is getting the necessary images. place the .png button is displayed. which represent the six inner sides of a cube. To create a Panorama effect.png AudioAsset002_play. and in some instances during this beta release. or _proxy suffix to determine their behavior. In the Overlay Creator.png AudioAsset002_pause. Specify the Width and Height values to define the size of the view area. For example. it is played immediately while allowing the user to continue to read the content in the current article. See “Create scrollable frames” on page 32. They can rotate the view 360 degrees and zoom in on the instrument panels.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 25 If you want a controller skin with Play and Pause buttons to appear while the audio clip is playing. 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.png AudioAsset001_pause. For example. you can create a Panorama effect that lets viewers see the inside of an airplane’s cockpit. _play. You can also create a frame in which you can scroll the content vertically or horizontally.

you can use Photoshop or a screen capture utility to create the six required images. 5 4 1 2 3 6 If you need to divide a panoramic cross image into separate images. Original panorama image B. follow this pattern.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 26 A B C Creating a panorama A. Panorama on iPad If you begin with a horizontal cross image. Prelease Last updated 10/20/2010 . Panorama image converted to inner six sides of cube C.

it can display a different image. Top and Bottom values have a range of 0 to 90. If you want to rotate the image two-thirds towards the back in both directions. and specify this folder using the Overlay Creator. create relative links to the files in this subfolder. can be included in the exported issue.com/pano2vr_download.html file. compatible with Apple iTunes. All files in that subfolder. specify values of 60.) Once you obtain the six files you need for your panorama. The local HTML file can check for a connection and display a web page if there is a connection. Prelease Last updated 10/20/2010 . After you drag in the image. Web View The Web View overlay lets you display a web page within a view area. You can download Pano2VR here: http://gardengnomesoftware. Specifying a local HTML file can be useful for providing an alternate image in case the user’s iPad isn’t connected to the web. Click Convert Input. Click Convert to generate the six files. You can change Panorama settings in the Overlay Creator to limit the range of view and the zoom capabilities. 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. In the . and specify a known folder where the PNG files will be saved. If there isn’t a connection. use a positive value for Button in the Overlay Creator. such as a subfolder in the OverlayResources folder. 1. Left and Right values have a range of 0 to 180. Users can see the web page content in the view area without having to display a separate in-app browser. Full screen movies should be set to 1024 pixels wide. Rotation X determines the initial tilt (up and down) view. 4. Currently. while Rotation Y determines the initial rotation (left and right).PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 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. choose PNG for format type. You can also specify settings in the Initial View area to determine the starting view of the object.264 encoding. 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. If you specify a local HTML file.php 2. as is the case with URL-based hyperlink overlays. make sure that the . For example. you cannot specify a URL to stream a video from the web. You can specify a URL or a local HTML file. Drag the panorama image image into the Input area of Pano2VR. choose Cube Faces from the Type menu.html file and associated folders appear in a subfolder in the OverlayResources folder. Install and start Pano2VR. and look at the Tilt value as you drag the image. You can select Auto Start to begin playing the video when the page is loaded (or after the specified delay). move them to a subfolder in the OverlayResources folder. The video must be an MP4 file with h. If you want to tilt the image two-thirds towards the top and bottom. Video Place the video file you want to play in a subfolder in the OverlayResources folder. including images and scripts. if you’re showing the inside of a cockpit. click Modify under Viewing Parameters. specify values of 120. select Show Limits and select Ignore Limits In Preview. 3. (For the negative Tilt value that appears in Pano2VR when you scroll to the bottom of the image. Pano2VR is also useful for determining the upper and lower limit values for panorama images that include blank spots at the top and bottom.

4 In the Link To menu. and scrollable frames that you add to your document and make them interactive. Use Transparent Background If this option is selected. You can use the Script Label panel to customize these interactive elements. use the Hyperlinks panel to add hyperlinks.twitter.adobe. they can tap a hyperlink to jump to a different web page. multi-state objects. Use native interactive elements The Content Bundler can detect hyperlinks. Scale Content to Fit If this option is selected. the web page is scaled to fit within the size specified in the overlay file. 3 In the Hyperlinks panel. Example: http://www. 1 Select the frame or text that you want to use as a hyperlink. the web page is displayed at the same size it would appear in the iPad Safari browser.com Email Tapping an Email hyperlink launches the Mail app with the To field filled in. Creating hyperlinks is especially useful for jumping to a webpage. the web view background is used. see Create hyperlinks in InDesign CS5 Help. and then click OK: URL Tapping a URL hyperlink displays a web page. and the html page may be cropped. 2 Open the Hyperlinks panel (Window > Interactive > Hyperlinks). choose New Hyperlink from the panel menu. Example: mailto:username@mail. Auto Start Select Auto Start to load the web page when the page is loaded on the iPad. users can interact with the web page. buttons. For example. Allow User Interaction If this option is selected. or to a different page in the same article or a different one. specify a mobile URL (such as http://mobile. If this option is deselected. Jumping to a page in a different article Prelease Last updated 10/20/2010 . If this option is not selected.com/). specify any of the following options. Create interactive hyperlinks In InDesign. For additional details on creating hyperlinks. to a different article. the transparent background in a web page is preserved.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 28 For best results. Page Tapping a Page hyperlink jumps to a different page within the article or to a page within a different article.com File Tapping a File hyperlink jumps to a different article within the issue.

1 In InDesign. you can use the Script Label panel to change settings similar to the Hyperlink settings in the Overlay Creator. and Go To Page. if you want the button to jump to a website. choose On Release. If you’re creating a button that jumps to a different slides. On Release is the only supported button event. create the object that will be used as the button. 3 For Event. The Go to Destination action is useful for jumping to an InDesign document in another stack. and change its appearance. Buttons can have only one action. create a text frame or place an image that refers to the website. For example. In InDesign. Supported multi-state object actions Go to Next State. Currently. If you create a hyperlink destination with a Page type (not Text Anchor). Supported hyperlinks actions Go To Destination. make sure the [Click] state is the same size as the [Normal] state. and then type lines in the Script Label panel. The [Click] state is used as the down state when the user taps the button. Note: The Script Label panel is not available for text hyperlinks. This option is enabled by default (the browser launches within the Viewer app). add left and right arrow images. you cannot change settings for text hyperlinks. Go To First Page. Example: HL_reqNavConfirm=yes View in context Determine whether the hyperlink is viewed in a web view within the Viewer or in Safari. you can jump to that page. The Text Anchor hyperlink is not supported. 1 In InDesign. This option is disabled by default. Require confirmation for external links Determine whether a prompt appears if a user taps the hyperlink. (There is no reason to support the [Rollover] state on a mobile device. use the Buttons panel to convert objects to buttons. Example: HL_openInApp=yes Prelease Last updated 10/20/2010 . Create interactive buttons You can create interactive buttons that navigate through articles.) Change hyperlink and button settings If you don’t want to use the default settings for hyperlinks and buttons. and click the Convert Object To Button icon. click [Click] under Appearance. These actions are useful for moving to different images in a slideshow. 2 Choose Window > Utilities > Script Label to open the Script Label panel. Go To Last Page. or you can create buttons that move to different slides in a slideshow. 5 If you want the button appearance to change when it’s tapped.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 29 Navto Tapping a Navto hyperlink jumps to a different article. Go To URL. All other actions are currently not supported. Go to Previous State. 2 Open the Buttons panel (Window > Interactive > Buttons). similar to the Page and File options. However. and Go to State. For best results. there is currently no interface for changing settings. select the object. select the hyperlink or button object. 4 Click the plus sign next to Action and select a supported action.

you insert images. (The [Rollover] state setting is ignored. align them in a stack. by adding lines to the Script Label panel. For example. Auto Start When Auto Start is enabled. however. use the Object States panel (Window > Interactive > Object States) to create a slideshow. 1 Select the multi-state object. if the [Normal] state button has a black frame and the [Click] state has a red frame.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 30 Note: These values are case-sensitive. Changing the [Click] state corresponds to the “select” object when using the Overlay Creator to create slideshows. but interactive objects on a state currently lose their interactivity when bundled.) Change slideshow settings There is currently no interface for changing the settings of a slideshow. Each state can have multiple objects.) When you create a multi-state object.” Use the Script Label panel to change hyperlink settings 3 Click outside the object. and convert the stack to a multi-state object. When you click the object again. Create interactive slideshows Each state. because there is no such thing as a rollover on a mobile device. You can use the Go to State action to refers to a specific slide. and you can allow the user to swipe to turn from slide to slide. the slideshow begins playing when the page is turned to. see “Create a multi-state object slide show” in InDesign CS5 Help. SS_autoStart=yes Prelease Last updated 10/20/2010 . 2 Choose Window > Utilities > Script Label to open the Script Label panel. and then type lines in the Script Label panel. interactive objects on a state are not supported. a red frame appears when the button is selected. 2 Create navigation buttons that browse through the states in the multi-state object. or you can use the Go to Next State and Go to Previous State actions. or slide. 3 If you want the button appearance to change when it’s tapped. you can change the slideshow’s default settings. For example. (For details. click [Click] under Appearance. the lines should appear. you can cause the slideshow to start automatically when the page is turned to. 1 In InDesign. can contain multiple objects. You can use “yes” or “true” and “no” or “false. and change its appearance. However. Auto Start is disabled by default.

the slideshow auto-plays continuously. SS_tapEnabled=yes Allow Swipe When enabled. SS_crossFadeImages=yes Crossfade Duration If Crossfade Images is enabled. you’ll still be on slide 3. If Default Selected is enabled. SS_defaultSelected=yes Draw Highlight Create a highlight color for the selected button (this option currently has no effect). SS_autoTransitionDuration=5 Crossfade Images Provide a fade transition when viewing the next button. If the value equals 0.5 seconds by default. Specify a value from 0 to 60 seconds. the slideshow auto-plays the specified number of additional loops. This option is enabled 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. the top state appears when the page is loaded. That way. The default value is 0. a loop value of 3 auto-plays 4 times. This option is disabled by default. SS_autoStartDelay=5 Slide Duration If Auto Start is enabled. If auto-play is greater than 0. This option is disabled by default. The value is 0. Double-tap to Restart When enabled. if you’re on slide 3 when you rotate the iPad. In other words. Prelease Last updated 10/20/2010 . Slide Duration is 2 seconds by default. SS_drawHighlight=yes Highlight Color Specify the highlight color of the selected button (this option currently has no effect). the slide duration determines the amount of time each slide is displayed before the transition to the next slide. This option is disabled by default.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 31 Auto Start Delay If Auto Start is enabled. This value applies to both auto-running and manually advanced slideshows. SS_selectedHighlight=#000000 where the number requires a hex number for a color. Double-tapping restarts the slideshow. the slideshow auto-plays only once. this setting lets users tap to play and pause an auto- running slideshow. such as #FF0000 (Red) and #009900 (Green) Matching ID By adding this line. this setting lets the user swipe to move from slide to slide. 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.125 seconds and 60 seconds. you can set a delay value that specifies the amount of time between the page being loaded and the slideshow starting. Crossfade is enabled by default. SS_circularViewEnabled=yes Loop If either Auto Start or Tap to Play is enabled. you can ensure that the slideshow has the same ID for both vertical and horizontal. you can enable Loop to play the slideshow continuously. specify the amount of time it takes to transition from one slide to another. the slideshow plays the images in reverse order. SS_loopCount=-1 Reverse Image Order When enabled. If the value is less than 0. SS_crossFadeImagesDelay=2 Tap to Play/Pause. You can specify a value between 0.

SS_autoStartDelay=0. Prelease Last updated 10/20/2010 . SS_defaultSelected=yes. SS_tapEnabled=yes. 2 Create two objects—a scrollable container frame and a content frame that contains the scrollable content. SS_swipeEnabled=yes. 1 In the Layers panel. SS_autoTransitionDuration=2. users can swipe to scroll. make the width of the container frame and the content frame identical. SS_crossFadeImages=yes. Rather than turning to the next page to see the full set of ingredients or instructions. SS_loopCount=-1. SS_drawHighlight=no. SS_reverseImageOrder=no. For best results. SS_selectedHighlight=#000000. SS_circularViewEnabled=yes. make sure you type the layer name accurately. SS_crossFadeImagesDelay=0.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 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.5. SS_autoStart=yes. create a layer called Scrollable Content. The layer name is case-sensitive. Create scrollable frames You can create a scrollable frame that lets users scroll down to view more content. you can create a cooking page with a list of ingredients and a set of instructions. The content frame should not include overset text. For example.

You can change the size of the pasteboard in InDesign preferences. rename both the container frame and the content frame so that they have the same name. Note: To keep the scrollable content from interfering with your layout. 3 Move the scrollable content frame to the Scrollable Content layer. you can place it on the pasteboard or on a hidden layer.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 33 A B C D Scrollable content A. Only scrollable content frames should appear on the Scrollable Content layer. To include the linked files. packaging the files will omit any linked objects. and a caption—arrange these objects vertically and group them. Layers panel D. such as “Ingredients. However. Scrollable content frame B. if the scrollable content is placed entirely on the pasteboard. The container frames—or any other object—should not be on the Scrollable Content layer.” Prelease Last updated 10/20/2010 . an image. Container frame C. make part of the frame touch the document page. Scrollable content on iPad If you want to display use objects in the scrollable frame—such as a text frame. 4 In the Layers panel.

ScrubberPass If you type a minus sign before the overlay type. 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 don’t have to re-create the Scrollable Content layer. The group and an object in the group can have the same name.config file to the InDesign application folder using one of these methods: Windows Move the config file to the same level as the InDesign. and the content (such as an image that is longer than the frame) is the scrollable content frame. If ResetHyperlinksToTopState and ResetSlideshowsToTopState are not specified. make sure that Paste Remembers Layers is selected in the Layers panel menu.config. 4 Move the NativeOverlays. Example: SuppressOverlayTypesForAssets: slideshow SuppressOverlayTypesForThumbnails: hyperlink SuppressOverlayTypesForScrubbers: slideshow. hyperlink> SuppressOverlayTypesForThumbnails: <slideshow. SuppressOverlayTypesForAssets: <slideshow. that overlay type will not be suppressed. ScrubberPass. 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. click the arrow to the left of the layer to expand it. This file. 1 Open a text editor. NativeOverlays. hyperlink> ResetHyperlinksToTopState: <ThumbnailPass. AssetPass. All> ResetSlideshowsToTopState: < ThumbnailPass. called NativeOverlays. If the scrollable content is a group. The graphics frame is the container frame. reset settings do not apply. “Thumbnails” refers to the Browse icon images.exe file. ResetHyperlinksToTopState means that any button with a Go to URL action displays the [Normal] state instead of the [Click] state. AssetPass. All> “Asset” refers to the main pages. and “Scrubbers” refers to images that appear when the user drags the scrubber.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 34 To rename an object in the Layers panel. 3 Save the file with the name. ScrubberPass. pause.config. 2 Add one or more of the following lines. 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. Control the appearance of hyperlinks and slideshows in the Viewer When users are browsing through an issue on the mobile device. Prelease Last updated 10/20/2010 . Click the object. If you suppress overlays. -hyperlink ResetHyperlinksToTopState: All ResetSlideshowsToTopState: ThumbnailPass. Type to replace the selection. lets you include or suppress native hyperlinks and slideshows. and then click again. the horizontal and vertical pages they see are actually rasterized images of each page of the InDesign document. When you copy and paste the objects from one document to another. the default behavior is to reset to top states for both slideshows and hyperlinks. The graphics frame and the image should have the same width. rename the group. That way. hyperlink> SuppressOverlayTypesForScrubbers: <slideshow. ResetSlideshowsToTopState resets the multi-state object to the top state of the multi-state object in the InDesign document.

The stacks appear in the stack title list. Bundle an issue 1 If you have not already done so. install the Digital Publishing for InDesign Plug-in (.issue file is a compressed file format that contains vertical and horizontal magazine layouts. The items you add in the metadata fields determine what appears in Browse mode on the iPad.zxp). browse to the issue folder that contains the stacks. 4 Drag the stacks to move them to the desired order. and click Select. code to enable interactivity. 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. for example. metadata. 3 Click New. is the first instance of a publisher-branded Viewer. This . Prelease Last updated 10/20/2010 . right click and go to Show Package Contents. Content Bundler 5 Specify metadata for each stack. The WIRED Reader. Once the layouts have been packaged into the . The Content Bundler launches InDesign and prepares the files for the iPad. the file is then rendered and displayed to the end-user using a publisher-branded Viewer. 2 Launch the Content Bundler.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 35 Mac OS Select the Adobe InDesign CS5 application icon. and associated assets.issue format will be renamed .issue format.folio in the shipping version. Move the config file to the Content > MacOS folder. The . The Bundler requires this plug-in.

If you frequently update and test your bundled issue. Issue Title. Title E. You can use different scrolling methods for portrait and landscape orientations. specify the folder where you want the project files to be saved and click Select.issue file that you can manually add (sideload) to the Preview Tool. such as “Reviews. For multiple files. See “Create a metadata sidecar file for the Bundler” on page 37. However. Kicker D. type the name of the file and click Save. You can open this file later to export the issue again. Prelease Last updated 10/20/2010 .PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 36 A B C D E Browse mode on iPad A. and Issue Description at the bottom of the dialog box. click it and click the Switch To Thumbnail View button. Issue Choose Single File or Multiple Files. you’ll need to bundle the files again. Click the Switch To List View button to exit previewing. you may want to change the order of stacks or edit the metadata. Export Options settings The following settings appear in the Export Options dialog box. In the Smooth Scrolling column. Issue Number. (Issue Number has no purpose in the Viewer.xml. you can avoid typing the same metadata repeatedly by creating a metadata file called sidecar.bprj file in the issue folder.) Note: To preview a stack. Ads do not appear in the table of contents.” In the Ads column. For a single file. For the iPad. determine whether each stack scrolls by snapping to the page or continuously. Tags C. For example. 8 Specify the settings in the Export Options dialog box. and click OK. 9 Specify a location of the issue file or files. • Single File Choose Single File from the Issue pop-up menu if you want to create a single . Description B. 7 Click Export Issue. Byline The kicker is the section title of a magazine. Publication Date. Dimension Specify the dimension of the exported issue. Exporting the issue file (or clicking Save) saves a project. 6 Enter the issue metadata for Magazine Title. if you need to edit the layout or add overlays.” “Features. You can view both the Portrait and Landscape versions. click the cell to indicate which stacks are advertisements. The issue metadata is displayed in the navigation bar and in the Viewer library. choose 1024x768.” or “Editorial.

issue files for each stack as well as a parent . choose JPEG. such as 768x2000. This option creates individual . Increased quality increases the file size. Use a text editor or an XML editor to create a sidecar.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 37 • Multiple Files Choose Multiple Files from the Issue pop-up menu if you want to upload the content to a test server. In the Bundler. if you create a long document. In InDesign . use the New Document or Document Setup dialog box to specify the page size. the issue cover will appear compressed when viewed in the library. scrolling through an article works on a page by page basis. See “Upload content to an Adobe server” on page 39. When Smooth Scrolling is enabled for an orientation of a stack. choose an option such as Vertical Only or Both Directions on the right side of the dialog box. Note: If the article with Smooth Scrolling is the first stack in the issue. Image Format Choose Automatic if you want to let the Bundler determine whether to export the pages as JPEG or PNG. JPEG Quality If Automatic or JPEG is selected for Image Format. create a different cover for the issue. It’s especially useful if you need to rebundle a large issue multiple times or use similar metadata for different issues. Save the sidecar. the InDesign document for that orientation is required to have only a single page. you can turn on Smooth Scrolling in the Bundler to let users scroll through that long document. Sidecar. you may want users to scroll through a Credits page at the end of a magazine. specify the JPEG Quality. To avoid this problem. If you want to reduce file size at the possible expense of image fidelity. For example. Use Smooth Scrolling to enable long pages By default.xml file with two articles Prelease Last updated 10/20/2010 . However. 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.issue file.xml file in the root issue folder. Using the Page tool to change the page size is not currently supported.xml file with metadata for each article or ad. See “Create a library preview cover” on page 42.

However. If an article’s folder name does not appear in the sidecar. You can copy and paste the following section into a text editor and edit it: <?xml version="1.” the ad does not appear in the table of contents. The order of the <entry> sections determines the order of the articles in your project when you first create your project. 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.” If the value is “true.” and “never. tag2</tags> <isAd>false</isAd> <smoothScrolling>never</smoothScrolling> </entry> </sidecar> Prelease Last updated 10/20/2010 . Author and Byline are redundant. The XML Data option is not available for the Mac OS versions of Excel.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.” “landscape.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 38 Valid <isAd> values are “true” and “false. make sure that you export using the XML Data option rather than the XML Spreadsheet. Valid <smoothScrolling> values include “always. you can use Microsoft Windows Office Excel.” which means scrolling snaps to pages. Note: Instead of using a text editor. it is moved below those that are listed.” “portrait. Use the same entry.” The default is “never.

If Use Cover is selected. Change Cover By default. and click Update. sign in with your Adobe ID if prompted. Prelease Last updated 10/20/2010 . 2 Click Bundle. For this release. download and open the Preview Tool. and click OK. The issues and other support files are uploaded to the server and saved in the destination folder. 5 In Bundler. However. Although you can change the status from Free to Retail or Private to Public. making it easy to update and manage the stacks. click Change Cover. The Product ID. and then specify the folder containing the exported (and not uploaded) . and click Sign In. and click Export Issue. do any of the following: Remove Select one or more uploaded issues and click Remove to delete the issue from the server. select Upload To Server After Exporting. doing this does not delete the issue from the iPad. Note: Avoid setting the status to both Retail and Private. and Private options are significant when you make your issues commercially available to the public. 6 On your iPad. make sure that your Adobe ID is valid. click the Manage tab to view the uploaded issue.issue files. the first page of the first stack is used as the cover. Instructions for using these options are provided in a separate user guide. change the status from Free to Retail (if you’re charging money for the issue) and from Private to Public. When you export multiple files. 4 Specify a destination folder on your computer for the issue files to be saved.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 39 Upload content to an Adobe server Adobe set up a server for you to test uploading and downloading issues. If you cannot sign in using your Adobe ID. Status. To prevent problems in the Preview Tool. Click Upload. Upload Click Upload and specify the issue folder you want to upload. the first page of the first stack is used as the cover of the uploaded issue. Status Unless you’re submitting your issue for commercial release. these settings have little or no effect. the only way to download an issue is to log in using the same Adobe ID as the person who uploaded the issue. See “Troubleshooting digital publishing tools” on page 43. and download and view the issue. choose Multiple Files from the Issue pop-up menu. 3 In the Export Options dialog box. an "Error During Download" message appears because there is no purchase receipt for this "Retail" issue. and specify a folder containing cover images. click Sign In. 1 In Bundler. ❖ In the Manage tab of the Bundler. The Multiple Files option is required for issue files that are intended to be exported to a server. create or open an issue folder. To specify a different cover. the ability to manage issues is limited. each stack is an issue within a main issue. leave the statuses set to Free and Private. Manage uploaded issues During this initial Labs release. All issues are essentially free and private—you can only download issues to your iPad that have been uploaded using your Adobe ID. The Manage tab shows all the issues you’ve uploaded to the server. Upload works only if you have exported an issue using the Multiple Files option but have not uploaded to the server. and click Select. See “Create a library preview cover” on page 42. When the issue is ready for the commercial release. Specify your Adobe ID and password. The Manage tab is displayed. When you try to download with the Preview Tool. do not select both Retail and Private.

Article displayed B. See “Upload content to an Adobe server” on page 39. 2 On your iPad. splash screen. Members of the DMP prerelease site can request to make content available to consumers through the Apple Store. Browse mode Download the Digital Content Preview Tool 1 On your iPad. iPad areas A. Download issues from the test server 1 Use the Bundler to upload content to the test server.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 40 Adobe Content Viewer The Adobe Content Viewer is an application that is installed on a mobile device such as an iPad. which appears as “Adobe Preview” on your iPad. you will be able to customize the Viewer to include your own icon. To share content with other users. At this stage. Table of contents C. the Bundler lets you upload content to the fulfillment server. make sure that your iPad is connected to the internet and log in using an Adobe ID. app name. download the content you uploaded. and the Preview Tool lets you download that content. download the Digital Content Preview Tool from the App Store. create and sideload . 3 Sync your iPad so that the Preview Tool app is added to iTunes. If you cannot sign in. 3 To sign in. 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. see “Viewer troubleshooting” on page 46. 2 Start the Adobe Preview app. Prelease Last updated 10/20/2010 . If you sign in using your Adobe ID. 4 When prompted. you can download only the content that has been uploaded using your Adobe ID.issue files. start the Adobe Preview app. A generic version of the Viewer is called the Adobe Digital Content Preview Tool. and sign in using a verified Adobe ID. For commercial distribution. publisher id. and other identifying information.

tap the Adobe Preview app. The Preview Tool displays preview images of each issue in the library.issue file you created. A placeholder issue is added to the Preview Tool automatically. Prelease Last updated 10/20/2010 .) 6 When prompted. If you used the Content Bundler to create a single . If you’ve created library preview files. 3 In the Apps tab. Adding the . You can add more issues. 1 If you have not already done so. scroll down to the File Sharing section.issue files into the Adobe Preview Documents area to add issues. 2 Select your iPad name in the Devices section of iTunes.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 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. tap Download to download the current issue. add those as well. tap View. The Preview Tool application is added to the Apps section of the iTunes library.issue file to the iPad (scroll down to view this section) 4 Click the Add button. you can manually add it to the Preview Tool from your desktop through a process called “sideloading”.issue file. install the Digital Content Preview Tool in iTunes and on your iPad. and browse to the . and then click the Apps tab. When it’s finished downloading. Click Choose. Click Adobe Preview under Apps. You can also drag . 5 On your iPad. (You may need to restart the Preview Tool and tap the Home button to display the library.

Browse button E. any interactive objects that appear on the first page of the first stack are omitted from the library preview cover. Back Button C. Tap the Table of Contents icon in the upper-left corner to view the table of contents. • Tap a non-interactive area to display the navigation bars. Tap the Home icon to jump to the beginning of the issue. However. rotate 360 images. the first page of the first stack can be used as the cover. and activate other interactive items. Table of Contents button D. Scrubber Create a library preview cover Each issue added to Viewer is represented by a preview image. 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. When you upload content to the server. Tap the Browse icon in the upper-right corner for a bird’s eye view of the issue. Tap the Back button to return to the previous view. Swipe left and right to switch to a different article. Drag the Scrubber to scroll through article previews. • Tap interactive areas to play movies. • Swipe up and down to read an article. Home button B. A B C D E Adobe Viewer A. Prelease Last updated 10/20/2010 .PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 42 Navigate in the Viewer • Rotate the iPad to display either the horizontal or vertical version of the file.

png files that appear in the project folder.png [issue name]_proxy_v. 3 Click the Compatibility tab. you may get an error message that says you do not have the appropriate permissions to install.png files. export the issue file with the Multiple Files option select.png and cover_v. but don’t upload to the server. exit Extension Manager and do the following: 1 In Windows Explorer. You can use . Please contact the application author for assistance. Export the files locally. Remove issues from the Preview Tool If you cannot delete individual issues from the Preview Tool on the iPad. Troubleshooting digital publishing tools If you experience other problems not listed here. In a single-orientation issue. the issue name is used as the cover. 4 Select all the files in the Adobe Preview Documents area.issue files. To allow the Extension Manager to install the plug-in. 3 In the Apps tab. To do this.exe and choose Properties. please post a note on the user forum. use this method to remove all issues. one for horizontal preview and one for vertical. Use this format to name the . Click Adobe Preview under Apps.issue files.png The . select “Run this program as an administrator” option. but one of the cover files may be blank.” Prelease Last updated 10/20/2010 . You may want to replace that cover page. Installation troubleshooting Error message while installing the InDesign plug-in in Windows 7 When installing Digital Publishing Plug-in for InDesign (. Then click the Upload button on the Manage tab of the Bundler and specify the folder containing the .png files: [issue name]_proxy_h. turn off Use Cover in the Export Options dialog box so that the edited cover files don’t get overwritten.png files should be 1024x768 and 768x1024. Add these files to iTunes using the same method you use to sideload . 2 Select your iPad name in the Devices section of iTunes. and then press Backspace or Delete. If you re-bundle the image. 2 Right-click Adobe Extension Manager CS5. Click Delete to confirm. and click OK.png and cover_v. browse to C:\Program Files<(x86)>\Adobe\Adobe Extension Manager CS5. the following error message may appear: “This application cannot be installed because this installer has been mis-configured. scroll down to the File Sharing section. and then click the Apps tab.png files as preview images. and edit or replace the cover_h.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 43 • Replace the cover_h.zxp) in Window 7.zxp) file again. both cover files are created. When you sideload content. Cannot install the Content Bundler or Overlay Creator While installing the Bundler or Overlay Creator. 4 Double-click InDesign Plugin (. 1 Connect your iPad to your computer.

launch Adobe Extension Manager CS5.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. In Mac OS.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 44 This problem may be caused by an older prerelease version of the Content Bundler or Overlay Creator. follow these steps: 1 In Mac OS. and follow the prompts. 1 Change the file extension from “. drag the applications to the Trash. and then reinstall it again. you may be able to install the plug-ins manually. 3 To remove the Digital Publishing Plug-in. click Remove. 1 Delete the Content Bundler application from Windows Explorer or Mac OS Finder.InDesignPlugin Prelease Last updated 10/20/2010 . In Mac OS. If you still cannot install the applications.apln Resources folder: winartifact:release:plug-ins:graphics:DigitalPublishing Resources (Mac OS) macartifact:release:plug-ins:graphics:Digital Publishing. 2 Delete the following folder: username > Library > Application Support > Adobe > AIR. (In Windows.adobe.com/air/. 3 Empty the Trash and restart the computer.zip. use the Control Panel to uninstall AIR.zxp” to “. Cannot install the InDesign plug-in If the installation process of the Digital Publishing plug-in for InDesign fails. 3 Locate the plug-in file in the unzipped folder: (Windows) Plug-in: winartifact:release: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. locate the entry for the DigitalPublishing plug-in in the main window of the application. 4 Install AIR 2.” 2 Unzip the file using Winzip or another extraction tool. run the Adobe Air Uninstaller found in Applications > Utilities. It’s available at http://get. Delete these applications.) Then try installing again. 2 Delete the Overlay Creator application from Windows Explorer or Mac OS Finder. In Windows. 4 Delete the the plug-in file and resources in Windows or the plug-in file in Mac OS. use the Control Panel to uninstall.x again. it may be a problem with the AIR application. Uninstall AIR. select InDesign. (Windows) Plug-in: C:\Program Files\Adobe\Adobe InDesign CS5\Plug-ins\Graphics\DigitalPublishing.

com/cps/853/cpsid_85311. click the “Create an Adobe ID” link and follow the prompts. type STARTUP=automatic at the end of the file.adobe.) Even if you’ve installed all the necessary applications. open the Switchboard. or there may be a problem with Switchboard.x is required for the Switchboard app to start automatically. "Authentication failed" error message You may receive an “Authentication failed” error message in the Adobe Content Viewer when attempting to Sign In. first make sure that you have signed in to the Content Bundler app using a valid Adobe ID. 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 can configure the Switchboard. Check the digital publishing user forum for announcements. there may be a problem with the server. please post a message to the user forum. First. To do so. which is a background process that lets Adobe applications communicate with each other. you may not have the necessary applications installed.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 45 Bundler troubleshooting Invalid asset location This error appears when the source assets for an overlay are not in the proper location—a subfolder in the stack’s OverlayResources folder.exe (Mac OS) Library/Application Support/Adobe/SwitchBoard/SwitchBoard To change the settings so that Switchboard launches automatically. make sure that you have InDesign CS5 and AIR 2.com/technologies/air2/). and close it. The Switchboard app is located here: (Windows) Program Files\Common Files\Adobe\SwitchBoard\SwitchBoard. If the Bundler fails to load the issue.html. If you can sign in to the Bundler but not the Viewer. If problems persist. save it. (If Switchboard is not installed.adobe. Switchboard may fail to launch in some instances. • The stack folders do not include PNG files for the table of contents icons. If the error message still appears when you try to sign in. Then try bundling again. If this occurs. One solution is to open the Switchboard manually and then try bundling again.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. Bundler fails to load a new issue If you click New in Bundler and specify a valid issue folder. make sure that your iPad is connected to the internet.ini file.x (available at http://labs. • The InDesign documents do not have _h and _v suffixes (such as “article_v. Note: Adobe is currently working on a solution that uses a different communication method than Switchboard.indd”). AIR 2. the Bundler should open InDesign CS5 and display the stacks in the issue folder. Installing InDesign CS5 should install the Switchboard app.ini file. you selected a stack folder rather than the issue folder. go to http://kb2. Prelease Last updated 10/20/2010 . If you cannot sign in to the Bundler. See “Setting up the folder structure” on page 19.

Delete the Preview Tool from both the iTunes App section and from the iPad. and sign in using your new Adobe ID. To display the Sign In button again. make sure that your iPad is connected to the internet. change your Adobe ID. If you’re using a legacy Adobe ID that’s not in an email format. Another way to display the Sign In button is to change your Adobe ID password. Then connect the iPad to the internet again. Prelease Last updated 10/20/2010 . open the follow-up email message from Adobe. click the “Create an Adobe ID” link and sign in using your existing Adobe ID or create a new one. Then add the Preview Tool again to the iTunes library and sync the iPad. If you cannot sign in to the Content Bundler. Try the following suggestions: • Sign in to the Content Bundler before signing in to the Viewer. Issue appears as blank gray page in Viewer If your bundled issue appears in the Preview Tool as a single gray page.adobe. which means that you remain signed in as long as your iPad is connected to the internet. start the Viewer. (If prompted.cfm Need to sign in to Preview Tool using different Adobe ID The Preview Tool does not offer a Sign Out button. which you can do by clicking the link in the previous section. accept the terms of use. and click the link to verify the Adobe ID. or it may not be verified. or click the following link to create or edit your Adobe ID. Click the “Create an Adobe ID” link in Bundler.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Adobe Digital Magazine Solution 46 Viewer troubleshooting The Preview Tool doesn’t accept Adobe ID If the Digital Content Preview Tool does not accept your Adobe ID.) www. turn off the internet connection on your iPad. it usually indicates a problem with the Preview Tool installation.com/cfusion/membership/index. • Your Adobe ID may not be in the form of an email address. make sure that your iPad is connected to the internet and that you use an Adobe ID in the form of an email address. • If you can sign in to the Content Bundler but not the Viewer.

• Each document can have multiple pages and assets that differ in the horizontal and vertical orientation. single-page layouts. create your design accordingly. and a portrait document with a page size of 768x1024. you should use correctly sized images in overlays because overlay resources are not downsampled and may increase the size of the . Prelease Last updated 10/20/2010 . Choose Portrait or Landscape • Turn off facing pages. Turning off Smooth Scrolling causes pages to snap when flipped to.issue file. The entire issue must be dual. • When creating your issue. • To get the best color fidelity. Smooth Scrolling is for long. • For each dual-orientation article or ad. However. create two files—a landscape document with a page size of 1024x768.47 Chapter 2: Best Practices for Digital Publishing Here are some best practices for designing files. or landscape. Creating your page layout • Decide whether you want to use only one orientation—portrait or landscape—or if you want users to be able to view a different design when they rotate their iPads. • Use pixels for units of measurement. you may want to create landscape and portrait documents that are 1024x4000 and 768x5000. portrait. • Avoid running objects into the bleed area. you can turn on Smooth Scolling for the horizontal or vertical layout. Specify Page Size C. We recommend choosing Web from the Intent pop-up menu when creating a new document. You cannot mix and match orientations within an issue. Snap objects to the edge of the document. A B C Creating a document for a device reader A. or both. Set Intent to Web B. • You can scale down large images. use RGB color images instead of CMYK or LAB. respectively. Using pixels is especially useful when snapping objects to grids. they will be downsampled when bundled. If Smooth Scrolling is turned on. For example. See “Creating InDesign files” on page 17.

create the source files for interactive overlays using the exact dimensions in pixels that they will appear in on the iPad. including PSD. whether it’s a single video file or multiple 360-degree view files. other articles. it’s better to use JPEG images with medium compression (50-80% range) rather than PNG for the source files. especially when repurposing large images from portrait to landscape and vice versa. and arrange it to the back of the stack. lock the background object. • Add background colors to a master page. the z-order will change in the bundled issue. See “Create interactive slideshows” on page 30. In Photoshop and Illustrator. Creating assets for 360 view images • You can create 360 images using a variety of methods. 360 view images. the dimensions of the source file are used when you place the image—you cannot change the Width and Height values in the Overlay Creator. • In your InDesign layout. apply a fill color. you can specify Width and Height values that differ from the source files. Then choose File > Document Setup and change the Height value. If you change the size of the overlay. the frame size determines where you tap to activate or trigger the interactive content. • When you place overlay files in InDesign. Compressing overlay images can significantly reduce the size of the bundled issue. Or you can use a 3D imaging application to generate a set of images from a 3D file. To minimize file size. You can use an application such as QuickTime Pro to export a movie into a set of images. Create navigation buttons that jump to the next or previous slide. If you want to use different colors for each page in the document. • Even if an overlay requires different images for the horizontal and vertical versions of the files. For slideshows and image pans. when you rotate the iPad. use PNG images. The exported SWF files must be placed in the Links folder (or folders). For large text in overlays. use the same ID for both overlays. or create thumbnail buttons that jump to a specific slide. use a PNG or JPG image with medium-high compression. the first slide will be selected when you rotate the iPad. the authoring tools do not compress images. and panoramas. such as enabling swiping and wraparound. • For best results. You can use Photoshop Extended to rotate a 3D object or change the camera view. if you’re on the second slide when you rotate the iPad. create slideshows using multi-state objects and hyperlinks and buttons that jump to web pages.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Best Practices for Digital Publishing 48 If there is too much blank space after you finish your design for smooth scrolling. and JPEG. create a rectangle shape the size of the page. That way. turn on Layout Adjustment (choose Layout > Layout Adjustment). To avoid selection problems. even after you export the overlay file. For interactive overlays. If the overlays have different IDs. For example. Use the Script Label panel to change other settings. Creating slideshows Create multi-state objects that will become slideshows in the bundled issue. • Interactive overlays appear on top of the InDesign layout in the bundled version. For movies. create a separate folder in the OverlayResources folder. Creating assets for overlays • For each overlay. you can use any format. these objects are compressed and converted into a PNG or JPEG file for each page. See “Use native interactive elements” on page 28. TIFF. Image file types For non-interactive images you place in InDesign. and even specific pages in other articles. change the Fitting option to fit content to frame. Prelease Last updated 10/20/2010 . the state of the overlay is preserved. the File > Save for Web & Devices command is especially useful for saving image files with specific pixel dimensions. AI. These source files are necessary for bundling. If you mask or cover interactive overlays that you place in the document. the second slide will still be selected. When bundled. For small text or detailed icons.

use JPEG images compressed in the 50-80% range. • To reduce file size. 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.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Best Practices for Digital Publishing 49 Creating a 360-degree view of an object • For 360 images. each file represents a slightly different rotation angle. Prelease Last updated 10/20/2010 . the Overlay Creator requires a set of six images. which represent the six inner sides of a cube. Creating assets for panoramas • To create a Panorama effect.

use JPEG images. Creating assets for image pans • For image pans. compatible with Apple iTunes. • If you can find a horizontal cross image. Prelease Last updated 10/20/2010 . While it’s easy to change the view area size. use JPEG images. you don’t need a third party tool to generate the images. • For best results. you’ll need to use a third-party tool such as Pano2VR to create six cubic images.264 encoding. You can use Photoshop or a screen capture utility to create the six required images. • For best results. Panorama image converted to inner six sides of cube C. maintain consistency by using the same image size. Original panorama image B. • Edit the image size to the proper dimensions in pixels before you create overlay file. it’s much more difficult to change the size of the pan image. High-resolution images allow customers to zoom in but require a larger file size. such as 1024 by 1024. You can specify different view areas in the two documents (but use the same ID for the two assets). Creating assets for video and audio files • Source video files must be in MP4/M4V format with h. for both horizontal and vertical documents.PUBLISHING FOR THE ADOBE DIGITAL CONTENT VIEWER Best Practices for Digital Publishing 50 A B C Creating a panorama A. Panorama on iPad • If you start with an equirectangular image. The “Panorama” on page 25 topic provides details on obtaining and using Pano2VR.

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

you will be able to include Omniture Analytics Tracking components in the custom Viewer you create for mobile devices. members of the Digital Magazine Publishing prerelease site can request to make their content commercially available on the iPad. To submit content to the Apple Store. you can create either a single-issue Viewer or a multi-issue Viewer that allows customers to download issues as they become available. 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. You can customize the analytics tracking services. These components track usage data and report it to a SiteCatalyst Report Suite. However. you will need to provide some content such as application icons and provision certificates to Adobe and to Apple. you can upload and download content using an Adobe server. You’ll be able enable or disable the tracking services and configure the opt-in preferences and Adobe SiteCatalyst account information. We’ll provide more details on these features when you request to make your content commercially available. In the future. Prelease Last updated 10/20/2010 . When you are ready to make your issues commercially available on the iPad (and other devices in the future). You will also be able to customize push notifications to determine how your customers will be prompted when new content is available.52 Chapter 3: Hosting Services For this release.

Sign up to vote on this title
UsefulNot useful