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.

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.

Import articles

In the previous lesson, you created an article by opening the source document and choosing Add Article. Another 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.

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.
Navigate to article view, and choose Import Article from the Folio Builder panel menu.
Select Import Multiple Articles.
Click the Location folder icon, and navigate to the TutorialAssets > CityGuide_Folio. Click Open.

Select the CityGuide_Folio folder, not a subfolder.
Click OK to import the articles in the CityGuide_Folio folder and upload them to the server.
Drag and drop the WiFi Ad article to the end of the list.

Folio Builder panel after importing articles

Change folio properties

In the Folio Builder panel, click the arrow icon to return to folio view. Select the City Guide folio, and choose Folio Properties from the Folio Builder panel.
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 is used for internal purposes, such as linking and setting up renditions.
If you have not already done so, 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.

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.

In the Folio Builder panel, navigate to the layout view of the Enjoy_Article, and double-click Portrait Layout to open Enjoy_v.indd.
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.
Open the Hyperlinks panel (choose Window > Interactive > Hyperlinks), and then choose New Hyperlink from the panel menu.
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.

View full size graphic
Applying a hyperlink to a rectangle frame
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.
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.

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.

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.
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.
Choose Window > Extension > Overlay Creator to open the Overlay Creator panel.
With the movie object still selected, select Tap to View Controller in the Overlay Creator panel.

View full size graphic
Using the Overlay Creator to edit movie settings
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.
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.

Open Enjoy_v.indd in InDesign, and turn to page 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.
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.

View full size graphic
Images combined into multi-state object
Each image appears as a separate state in the Object States panel.
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.
Choose Window > Interactive > Buttons to display the Buttons panel, and then select the red arrow on the left.
Click Convert Object To A Button, and then choose Go To Previous State from the plus icon next to Actions.

View full size graphic
Create navigation buttons
Now let’s make the button’s appearance change slightly when the user taps it.
Click [Click] in the Buttons panel, and then click the Drop Shadow icon in the control panel.
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.
Select the multi-state object. In the Overlay Creator panel, select Swipe to Change State.

View full size graphic
Turn on swiping for the slideshow
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.
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.

Open Enjoy_v.indd and turn to page 3.
Select the Rectangle Frame tool in the toolbox, and drag to create a rectangle of any size.
In the Overlay Creator panel, select Panorama.
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.
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.

View full size graphic
Creating a panorama overlay
Let’s use the default settings for the panorama to provide full range of movement.
Copy and paste the panorama object from the Enjoy_v.indd file to page 3 of the Enjoy_h.indd file.
Save and close the InDesign files.

Preview the folio on your iPad (Mac OS only)

Next, you’ll use the Preview on Device feature to preview your folio. If you’re running a Windows computer, skip to the next section to learn how to preview by uploading and downloading files.

If you have not already done so, install the Adobe Content Viewer from the App Store on your iPad. In App Store, search for “Content Viewer.”
Connect the iPad to your Mac OS computer, and launch the Adobe Content Viewer app.
In the Folio Builder panel, navigate to the City Guide folio you just created.
At the bottom of the panel, choose Preview > Preview on [iPad device name].
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 Viewer
A.

Home button
B.

Back Button
C.

Table of Contents button
D.

Browse button
E.

Scrubber

Upload and preview the files

You can also preview folios on your iPad by signing in to the Folio Builder panel, uploading the folio, and then downloading the folio.

In the Folio Builder panel, choose Sign In from the panel menu. Then sign in using an Adobe ID that has been verified to work with DPS.

If you have a Creative Cloud membership, use your Creative Cloud credentials. If you don’t have a Creative Cloud membership, sign in to http://digitalpublishing.acrobat.com and follow the prompts to verify your account.
After you sign in, select the City Guide folio in the panel, and then choose Upload to Folio Producer from the panel menu.

The folio assets are uploaded to the acrobat.com server.
If you have not already done so, install the Adobe Content Viewer from the App Store on your iPad.

Note: If you have a different mobile device such as an Android tablet or a Kindle Fire, you can download the Adobe Content Viewer from Google Play or Amazon Appstore.
On your iPad, start the Adobe Content Viewer.
If you haven’t signed in yet, tap the Sign In button. Sign in using the same Adobe ID you used to sign in to the Folio Builder panel.

Your iPad must be connected to the Internet for you to sign in.
When prompted, download and view the City Guide Magazine folio.

If you edit any of the InDesign source documents, select the article and choose Update from the panel menu to update the articles. In the Adobe Content Viewer on the iPad, you’ll be prompted to download the updated folio.

Where to go from here

You’ve learned the basics of creating articles and folios and adding interactive overlays. To learn more about overlays and other DPS features, do any of the following:

Open the source documents in the Overlay_Examples_Folio, and experiment with the different overlay assets. You can edit the existing overlays in the documents or build your own overlays.
Download the free DPS Tips app. Search for “DPS Tips” in the App Store of your iPad or iPhone, or do a search in the Google Play Store for Android devices or Amazon Appstore for the Kindle Fire.
Do you want to publish an app to the Apple App Store? If you’re a subscriber to the Adobe Creative Cloud, you can create and submit an unlimited number of single-folios apps for the iPad. Or, you can purchase a Single Edition license to create a single-folio app. When you’re ready to create your app, select the folio in the Folio Builder panel, and then choose Create App from the panel menu. You’ll be prompted to download the Step-by-Step Publishing Guide. Follow the instructions in that guide to build your first app.
If you want to create multi-folio apps, you can obtain a Professional or Enterprise subscription to the Digital Publishing Suite.