digitalpubsuite tutorials

TutorialsADOBE® DIGITAL PUBLISHING SUITE

Last updated 5/16/2012

Legal notices

Legal noticesFor legal notices, see http://help.adobe.com/en_US/legalnotices/index.html.

http://help.adobe.com/en_US/legalnotices/index.html

iii


Contents

Authoring Tutorials

Tutorial setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Tutorial 1: Quick tutorial for experienced DPS users . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Tutorial 2: Creating a simple folio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Tutorial 3: Adding interactive elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

1


Authoring Tutorials

Tutorial setup

These tutorials show how to convert InDesign documents to a digital format that can be read on mobile devices such

as the iPad. If you’re familiar with the Adobe digital publishing tools, go through the first lesson. If you’re new to the

digital publishing process, skip the first tutorial.

To step through these tutorials, you need InDesign CS5 or InDesign CS5.5 with updated versions of the Folio Producer

tools. When a DPS tutorial for InDesign CS6 is available, we’ll provide a link.

Click the following link to download the tutorial source assets:

Download TutorialAssets.zip

Tutorial 1: Quick tutorial for experienced DPS users

If you have created folios using the DPS prerelease tools, go through this tutorial. If you have limited experience with

the DPS tools, skip to the next tutorial to learn the basics.

Create a folio and article

With the previous set of tools, you created a folio folder containing “stack” subfolders. Using the right folder structure

and filenaming conventions was required to create a folio. With the new workflow, folder structure is significant only

for importing folios. You can now add articles to a folio if they’re stored in different locations or even on different

computers. Folios and articles are uploaded to a workspace on the web.

1 Install the Folio Producer tools for either InDesign CS5 or InDesign CS5.5.

2 In InDesign, choose Window > Extensions > Folio Builder.

The Folio Builder panel replaces the Content Bundler.

3 Click Sign In, and then use a verified Adobe ID to sign in.

The account you use to sign in determines which features are available. If you do not have a professional or

enterprise account, you can create only one folio. (If you delete the folio, you can create a new one.) You can also

access any folio that a publisher shares with you.

4 Click New to create a new folio. Specify a folio name such as “Tutorial” and click OK.

http://help.adobe.com/en_US/digitalpubsuite/tutorials/TutorialAssets.zip

2DIGITAL PUBLISHING SUITE TUTORIALS

Authoring Tutorials


Create a new folio

Next, create a new document and add it as an article.

5 Create a new 1024x768 landscape document, and save it as “test wide.indd.” Add text or graphics.

It isn’t necessary to save documents with _h and _v suffixes unless you want to import them.

6 In the Folio Builder panel, click New to create an article. Specify the article name, such as “test,” and click OK.

The article is uploaded to the folio workspace on the web.

7 Double-click the “test” article.

Notice that only the landscape layout appears.

Landscape view of the Folio Builder panel


Authoring Tutorials


8 Create a new 1024x768 portrait document, and save it as “test tall.indd.” Add text or graphics.

9 In the Folio Builder panel, make sure that you are in layout view, and click New to add the portrait layout.

Layout view should now include both landscape and portrait layouts.

Change folio and article properties

The Folio Builder panel includes three views: folio view, article view, and layout view.

1 Experiment with navigating through the three panel views.

Click the items below the Folio Builder tab to navigate. In layout view, click the arrow to return to folio view, or

click the folio name to return to article view.

Double-click folio and article names to drill down.

2 Click the arrow to return to folio view. Select the folio, and choose Properties from the Folio Builder panel.

3 Specify a Publication Name, such as “Sample Folio.”

The Publication Name is different from the Folio Name. The Publication Name is what appears in the viewer. The

Folio Name is what appears in the Folio Builder panel and in the Folio Producer.

Folio Properties dialog box.

4 Specify images for the Cover Preview, and the click OK.

The cover preview appears in the viewer library. With the previous set of tools, the Content Bundler generated the

cover based on the first page of the first stack. In the new workflow, you specify the cover images. Cover previews

are required to publish the app.

5 In the Folio Builder panel, double-click the folio. Select the test article and choose Properties from the Folio Builder

panel menu.

Notice that the Articles Properties dialog box includes a Title field. The article title appears in the viewer. The article

name appears in the Folio Builder panel and in the Folio Producer. When you create links to other articles, use the

article name, not the article title.


Authoring Tutorials


Article Properties dialog box

6 Specify the article properties, and click OK.

Preview an article

You can preview articles and folios using either the Desktop Viewer or the Adobe Content Viewer on a mobile device.

1 Select the test article, and then click Preview.

The Desktop Viewer displays the article. You can press Ctrl/Command+R to rotate.

2 Exit the Desktop Viewer.

3 To preview the folio on a mobile device such as an iPad, install the Adobe Content Viewer on your device, and sign

in using the same Adobe ID you used to sign in to the Folio Builder panel. Make sure that your mobile device is

connected to the internet.

Import articles

You just created an article by opening the source document and clicking New. A better method is to import articles.

You can import a single article or multiple articles if you use the required folder structure and filenaming conventions.

For importing, each article folder should have InDesign documents with _v or _h suffixes to indicate whether they are

vertical or horizontal.

When you import an article, point to an article folder. When you import multiple articles, point to the folio folder.

Note: Before you import articles, open the source documents in the TutorialAssets folder to make sure that all the links

are updated and the files are saved. See “Tutorial setup” on page 1.

1 In article view, choose Import from the Folio Builder panel menu.

2 For Article Name, type Meridien Ad.


Authoring Tutorials


3 Click the Location folder icon, and navigate to the TutorialAssets > Meridien_Folio > WiFi_Ad folder. Click Open.

Importing a single article

4 Click OK to import and upload the article.

Next, import an entire folio. When you import an entire folio, each subfolder in the folio folder is imported as a

separate article.

5 In article view, choose Import from the Folio Builder panel menu.

6 Select Import Multiple Articles.

7 Click the Location folder icon, and navigate to the TutorialAssets > CityGuide_Folio. Click Open.

8 Click OK to import the articles in the folio folder.


Authoring Tutorials


Folio Builder panel after importing articles

The articles are imported. If your folio folder includes a sidecar.xml file, the article properties are populated.

9 Navigate to folio view, select the tutorial folio, and click Preview.

If you edit the source document of any article, the changes are not reflected in the preview until you update the article.

Select the article, and choose Update from the Folio Builder panel.

To edit folios, sign in to the web client at http://digitalpublishing.acrobat.com. If you have a DPS subscription, you can

use the Folio Producer to publish folios, and you can use the Viewer Builder to create custom viewer apps.

To delete the folio and all its articles, select the folio in the Folio Builder panel and click the Trash button.

Tutorial 2: Creating a simple folio

In this tutorial, you will create a folio and an article, preview it on desktop, and then preview it on an iPad. At the end

of this lesson, here’s what your resulting one-page file should look like on the iPad.

http://digitalpublishing.acrobat.com


Authoring Tutorials


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

Create a folio and an article

A folio is a collection of digital publishing articles. When you create a folio, a workspace on the web is created.

In this tutorial, you’ll open separate documents designed for vertical and horizontal layouts. Creating two layouts for

each article lets users rotate the iPad to view similar content in a different orientation.

1 Choose Window > Extensions > Folio Builder.

2 Click Sign In, and then use a verified Adobe ID to sign in.

For more information about using Adobe IDs, see Using Adobe IDs for digital publishing.

3 Click New to create a new folio. For Folio Name, type City Guide and click OK.

A

B


Authoring Tutorials


Creating a folio

Next, you’ll create an article based on an open InDesign document.

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

“Tutorial setup” on page 1.

5 In InDesign, open the WiFi_h. indd and WiFi_v.indd files located in the WiFi_Article folder. If prompted, update

the links and save the files in the appropriate folder.

These two documents are the source files for the horizontal and vertical layouts of an article you’ll create.

6 In the Folio Builder panel, click New to create a new article. For Article Name, type WiFi Ad and click OK.

Adding an article to a folio

The article name appears in the Folio Builder panel. The article information is uploaded to the folio workspace on

the web.

7 In the Folio Builder panel, double-click the WiFi Ad article.

Notice that only one layout appears in the layout view. You need to add the second layout.


Authoring Tutorials


8 Make the other WiFi document active, and then click New in layout view to add the second layout.

Both horizontal and vertical documents added as layouts

9 Close the WiFi files in InDesign.

Change article properties

The Folio Builder panel includes three views: folio view, article view, and layout view.


Authoring Tutorials


Folio view (left), Article view (center), and Layout view (right)

1 In the Folio Builder panel, experiment with navigating through the three panel views.

Click the items below the Folio Builder tab to navigate. In layout view, click the arrow to return to folio view, or

click the folio name to return to article view.

Double-click folio and article names to drill down.

2 In the Folio Builder panel, double-click the City Guide folio. Select the WiFi Ad article, and choose Properties from

the Folio Builder panel menu.

By changing the article properties, you determine the appearance of the article in the viewer.

Notice that the Articles Properties dialog box includes a Title field. The article title appears in the viewer. The article

name appears in the Folio Builder panel and in the Folio Producer. When you create links to other articles, use the

article name, not the article title.


Authoring Tutorials


Article Properties dialog box

3 For Title, type Meridien Ad, select the Advertisement and Hide From TOC options, specify other metadata, and

click OK.

When you select Hide From TOC, the article does not appear in the viewer’s table of contents.

Preview the article using the Desktop Viewer

You can preview articles and folios using the Adobe Content Viewer for the Desktop (also called the “Desktop

Viewer”) or the Adobe Content Viewer on a mobile device.

1 Select the test article, and then click Preview.

2 Press Ctrl/Command+R to rotate the orientation.


Authoring Tutorials


Article displayed on Desktop Viewer

3 Exit the Adobe Content Viewer.

You can also preview the folio on a mobile device such as an iPad by signing in to the Adobe Content Viewer using the

same Adobe ID you used to sign in to the Folio Builder panel. You’ll do that in the next lesson.

Tutorial 3: Adding interactive elements

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

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

look like on the iPad.


Authoring Tutorials


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

If you have not already done so, download the tutorial assets. See “Tutorial setup” on page 1.

Import articles

In the previous lesson, you created an article by opening the source document and clicking New. A better method is

to import articles. If you use the proper folder structure and filenaming conventions, you can import a single article or

multiple articles.

When you import an article, point to an article folder. When you import multiple articles, point to the folio folder.

1 Before you import articles, open the source InDesign documents in the TutorialAssets > CityGuide_Folio folder to

make sure that all the links are updated and the files are saved.

2 Navigate to article view, and choose Import from the Folio Builder panel menu.

3 Select Import Multiple Articles.

4 Click the Location folder icon, and navigate to the TutorialAssets > CityGuide_Folio. Click Open.

Select the CityGuide_Folio folder, not a subfolder.

5 Click OK to import the articles in the CityGuide_Folio folder and upload them to the server.

A

B

C D


Authoring Tutorials


Folio Builder panel after importing articles

Change folio properties

1 In the Folio Builder panel, click the arrow icon to return to folio view. Select the City Guide folio, and choose

Properties from the Folio Builder panel.

2 For Publication Name, type City Guide Monthly.

The Publication Name is different from the Folio Name. The Publication Name appears in the viewer. The Folio

Name appears in the Folio Builder panel and in the Folio Producer web client.

3 For the Cover Preview images, specify Cover_v.jpg for Vertical and Cover_h.jpg for Horizontal, and click OK.

These cover images appear in the CityGuide_Folio folder.

The cover preview appears in the viewer library. Cover previews are required to publish the app.

Folio Properties dialog box

Add an interactive hyperlink

Now you will edit the Enjoy documents to include interactive objects.


Authoring Tutorials


InDesign includes many interactivity features. However, only some of these features work with the digital publishing

tools. In addition to the supported native features, the Overlay Creator panel includes interactive overlays that work

only with the digital publishing tools.

First, create a hyperlink object for the “D. I. Y. Meet” logo.

1 In the Folio Builder panel, navigate to the layout view of the Enjoy_Article, and double-click Portrait Layout to

open Enjoy_v.indd.

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

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

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

panel menu.

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

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

Rectangle and None selected. Click OK.

Applying a hyperlink to a rectangle frame

5 In the Folio Builder panel, double-click Landscape Layout to open the Enjoy_h.indd document. Copy and paste the

hyperlink object from the Enjoy_v.indd file to the Enjoy_h.indd file. Move the object over the “D.I.Y. Meet” logo.

6 To preview the document quickly, save the document and choose File > Folio Preview. Click the hyperlink. Then

exit Adobe Content Viewer.

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

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


Authoring Tutorials


Create a movie overlay

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

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

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

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

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

image as the poster.

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

click cyclist.jpg in the CityGuide_Folio > Enjoy_Article > Links folder.

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

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

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

Using the Overlay Creator to edit movie settings

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

page, and align it to the surrounding objects.

6 To preview the movie, save the document and choose File > Folio Preview. Click the movie to play it. Then exit

Adobe Content Viewer.

Create a slideshow overlay

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

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

that navigate through the slides.

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


Authoring Tutorials


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

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

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

the Convert Selection To Multi-State Object button.

Images combined into multi-state object

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

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

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

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

through them.

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

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


Authoring Tutorials


Create navigation buttons

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

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

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

appearance a drop shadow.

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

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


Authoring Tutorials


Turn on swiping for the slideshow

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

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

11 To preview the slideshow, save the document and choose File > Folio Preview. Click the navigation buttons to move

through slides. Then exit Adobe Content Viewer.

Create a panorama overlay

Panoramas require six images, with each image representing a side within a cube.

1 Open Enjoy_v.indd and turn to page 3.

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

3 In the Overlay Creator panel, select Panorama.

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

Click Open.

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

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

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


Authoring Tutorials


Creating a panorama overlay

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

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

7 Save and close the InDesign files.

Update and preview the files

Now that you added interactive overlays to the source InDesign documents, you’re ready to preview the files on a

mobile device. Before you preview the files on your iPad, upload the articles.

1 In Folio Builder, navigate to Articles view and select Enjoy_Article. Choose Update from the Folio Builder panel

menu.

The assets of interactive objects are uploaded to the server.

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

iTunes store.

Note: If you have a different mobile device such as an Android tablet or a BlackBerry PlayBook, you can download

the Adobe Content Viewer from Android Market or App World.

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

both in iTunes and on your iPad.


Authoring Tutorials


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

4 On your iPad, start the Viewer.

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

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

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

to sign in to the Content Bundler.

Your iPad must be connected to the Internet for you to sign in.

6 When prompted, download and view the City Guide Magazine folio.

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

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

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

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

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

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

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

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

A B DC

E

digitalpubsuite tutorials

Documents