You are on page 1of 23

ADOBE DIGITAL PUBLISHING SUITE Tutorials

Legal notices

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

Last updated 9/1/2011

iii

Contents
Authoring Tutorials Tutorial setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Tutorial 1: Quick tutorial for experienced DPS users Tutorial 2: Creating a simple folio Tutorial 3: Adding interactive elements ..................................................................... 1 ...................................................................................... 6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Last updated 9/1/2011

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 youre familiar with the Adobe digital publishing tools, go through the first lesson. If youre 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. 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 theyre 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.

Last updated 9/1/2011

DIGITAL 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 isnt 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

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

Last updated 9/1/2011

DIGITAL PUBLISHING SUITE TUTORIALS


Authoring Tutorials

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.

Last updated 9/1/2011

DIGITAL PUBLISHING SUITE TUTORIALS


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. 3 Click the Location folder icon, and navigate to the TutorialAssets > Meridien_Folio > WiFi_Ad folder. Click Open.

Last updated 9/1/2011

DIGITAL PUBLISHING SUITE TUTORIALS


Authoring Tutorials

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.

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.

Last updated 9/1/2011

DIGITAL PUBLISHING SUITE TUTORIALS


Authoring Tutorials

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, heres what your resulting one-page file should look like on the iPad.

Completed folio displayed on the iPad A. 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, youll 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.

Last updated 9/1/2011

DIGITAL PUBLISHING SUITE TUTORIALS


Authoring Tutorials

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

If you dont have an Adobe ID, you can create one at www.adobe.com/cfusion/membership.
3 Click New to create a new folio. For Folio Name, type City Guide and click OK.

Creating a folio

Next, youll 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. These two documents are the source files for the horizontal and vertical layouts of an article youll 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.

Last updated 9/1/2011

DIGITAL PUBLISHING SUITE TUTORIALS


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.

Last updated 9/1/2011

DIGITAL PUBLISHING SUITE TUTORIALS


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.

Last updated 9/1/2011

DIGITAL PUBLISHING SUITE TUTORIALS


Authoring Tutorials

10

Article Properties dialog box

3 For Title, type Meridien Ad, select the Advertisement option, specify other metadata, and click OK.

When you select Advertisement, the article does not appear in the viewers 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.

Article displayed on Desktop Viewer

Last updated 9/1/2011

DIGITAL PUBLISHING SUITE TUTORIALS


Authoring Tutorials

11

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. Youll do that in the next lesson.

Tutorial 3: Adding interactive elements


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

Completed folio displayed on the iPad A. 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.

Last updated 9/1/2011

DIGITAL PUBLISHING SUITE TUTORIALS


Authoring Tutorials

12

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.

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.

Last updated 9/1/2011

DIGITAL PUBLISHING SUITE TUTORIALS


Authoring Tutorials

13

Folio Properties dialog box

Add an interactive hyperlink Now you will edit the Enjoy documents to include interactive objects. 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.

Last updated 9/1/2011

DIGITAL PUBLISHING SUITE TUTORIALS


Authoring Tutorials

14

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. Youll learn more about the Overlay Creator panel next. Create a movie overlay Movies you add to an InDesign document become interactive when you bundle the files. Youll add the video and then use the Overlay Creator panel to change the settings. Well 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, youll 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 lets 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.

Last updated 9/1/2011

DIGITAL PUBLISHING SUITE TUTORIALS


Authoring Tutorials

15

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 lets create an interactive slideshow using the Object States panel. Weve already added the images to the second page of the vertical Enjoy file. Youll arrange them in a stack, convert them to a multi-state object, and create buttons that navigate through the slides.
1 Open Enjoy_v.indd in InDesign, and turn to page 2. 2 Select the seven images between the red arrows, and then click the Align Horizontal Centers and Align Vertical

Centers buttons in the Control panel. Center the images between the arrows.
3 With the images still selected, choose Window > Interactive > Object States to display the Object States panel. Click

the Convert Selection To Multi-State Object button.

Last updated 9/1/2011

DIGITAL PUBLISHING SUITE TUTORIALS


Authoring Tutorials

16

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 youve 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.

Last updated 9/1/2011

DIGITAL PUBLISHING SUITE TUTORIALS


Authoring Tutorials

17

Create navigation buttons

Now lets make the buttons 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. Lets 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.

Last updated 9/1/2011

DIGITAL PUBLISHING SUITE TUTORIALS


Authoring Tutorials

18

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 its approximately 400 x 400 pixels.

Last updated 9/1/2011

DIGITAL PUBLISHING SUITE TUTORIALS


Authoring Tutorials

19

Creating a panorama overlay

Lets 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, youre 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.

Last updated 9/1/2011

DIGITAL PUBLISHING SUITE TUTORIALS


Authoring Tutorials

20

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 havent 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 birds eye view of the folio with the metadata descriptions you added. Drag the Scrubber to scroll through article previews.
A B C D

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

Last updated 9/1/2011

You might also like