Table of contents
29 October 2012
Basic understanding of creating interactive Digital Publishing Suite (DPS) assets such as slideshows, buttons, etc.
User level: All
By downloading software from the Adobe Web site you agree to the terms of our license agreement. Please read it before downloading.
Creating interactive Adobe Digital Publishing Suite (DPS) elements requires several steps and a time investment in learning Adobe InDesign interactive tools.
In this tutorial I show you how to build a basic slideshow and to use a library to store the complete overlay so that other designers may quickly add the interactivity to their own DPS publications. The library item serves as a pre-constructed interactive element that other designers can alter quickly to present a different set of assets.
An InDesign library (hereinafter referred to as library or libraries) offers users a method to store and reuse content in various projects. Library items can contain multiple InDesign elements, including interactive objects. For example, you could select all of the elements of an interactive slide show or sliding panel and create a reusable interactive element.
To create a new library, select File > New > Library. To open an existing Library, simply select File > Open. Once you create or open a library, InDesign creates a new Library panel and saves the library with the INDL extension.
To add objects to the library, simply select them and drag them to the Library panel. When you add objects that contain links to images and other assets, to the Library panel, InDesign retains the link.
Figure 1. A sample DPS library
The InDesign online help offers additional information about using libraries in the online help section, InDesign: Reusing graphics and text.
If you’ve ever created a slideshow in DPS, you know that several steps are required, such as placing images, creating thumbnails and other navigation elements, creating multi-state objects and linking to buttons. That can be a lot to take in for a novice user. Using libraries, you can pre-build the entire slideshow and simply instruct the user to re-link to new images.
To make the steps easy, create placeholder images that contain descriptive text with the dimensions of the slideshow. Here’s an example:
Figure 2. Sample image placeholder
You can create placeholder images in Adobe Illustrator, Adobe Photoshop, or Adobe InDesign. I like to use InDesign to create the placeholder images. The general steps for creating placeholder images in InDesign are as follows:
- Create a new InDesign document with the required slideshow dimensions.
- Edit the Master Page to include instructional text.
- Add a Slide Number on the Master Page. To do so select Type> Insert Special Character> Markers> Current Page Number.
- Insert as many document pages as needed based on the Master layout.
- Select File > Export. Select JPEG and in the Export Window select All.
Figure 3. Selecting Export options
- Rename the images descriptively and increasing the slide number.
For example: 01_slideshow_6img.jpg, 02_slideshow_6img.jpg, and so forth.
Tip: Use the Batch Renaming option in Adobe Bridge.
When complete, you’ll have a folder of placeholder images:
Figure 4. Renamed placeholder images
The sample file archive provided in the Requirements section includes a sample InDesign file called sample_placholder.indd so that you can see how you can use InDesign to create placeholder images.
Now, you will use the placeholders you created to build the slideshow or other interactive DPS asset. A few tips for building interactive elements are as follows:
- Use the placeholder image for the slide image and the thumbnail.
- For Slide and Thumbnail, use the AutoFit option. (Do so by selecting Object > Fitting > Frame Fitting Options). Using the AutoFit option proportionally fits content into the slide frame and the thumbnail image.
- Avoid using spaces or other special characters when naming Multi-State Objects (MSOs), states and buttons.
- Name MSOs, buttons, and states descriptively to make it easier for novice users. For example, you might name a thumbnail button that shows Slide 3 as btn_to_slide_3.
- Be consistent in naming conventions and communicate the etymology to users.
- Don’t forget to set the properties for the slideshow from the Overlay Creator panel.
Do you need to learn how to create interactive DPS assets? My favorite resource is the iPad application: Digital Publishing Suite Tips.
Figure 5: Interactive slideshow built with InDesign
Now that you have built your interactive asset, it’s time to add it to a library. Use the following steps to do so:
- Open an existing library or create a new one. Go to File > New > Library.
- With the Selection Tool, select all of the items in the interactive object and group them.
- Drag the newly created group into the library.
Figure 6. Adding an asset to a library
Note: To avoid breaking links, keep the library and the placeholder images in the same file structure.
Figure 7. The file structure
Note: The library included in this sample contains local links to content.
Test each interactive item using both Local Preview and on your targeted device.
Unfortunately, object libraries cannot be accessed by more than one user simultaneously. To prevent edits to the library, set the library to read-only access prior to deploying it to your users, using the following steps:
- On Mac: Select the Library (INDL file) in the Finder. Right-click the file and select Get Info. Select the Locked option. Click OK.
- On Windows: Select the Library (INDL file). Right-click the file and select Properties. Select the Read-only option. Click OK.
If you expect a group of individuals in your organization to use the library, you might wish to keep placeholder images in a network folder. In this case, create the library items with placeholders stored on your network.
Once you have deployed your libraries, an InDesign user in your organization can start working with them.
With your library item(s) created, it is simple to drag and drop them onto the page, as follows:
- Open a library or its panel (if it is already open).
- Drag the item onto the page.
Note: You may experience a slight delay if the Library item contains a large number of elements.
The Links Panel in InDesign CS6 is handy and manages multiple instances of the same placed image. To your benefit, it is easy to replace the slide and thumbnail image in one operation. Use the following steps:
- Open the Links panel.
- Select the first image link associated with the interactive object.
Note: Do not expand the link name. Select the highest level for the link.
- Click the Relink button option and locate a replacement image.
Repeat these steps for all images.
Figure 8. Relinking assets manually
If you instruct your users to create assets and name them to exactly match the original placeholder images, you can replace all the images and thumbnails in a single operation.
- Select all of the Placeholder images in the Links panel.
- From the flyout menu of the Links panel, select the Relink to Folder option.
Locate the folder containing your identically-named replacement images.
Figure 9. Relinking images automatically using a folder
I’ve included a folder of sample images you can use to try this. The results are as follows:
Figure 10. Sample with relinked images
The workflow discussed here has some limtations. If you place the same library item more than once, InDesign creates multiple linked instances to the placeholder image. This results in InDesign referencing the same image in more than one interactive asset. The solution: Instruct users to link to new images before placing the next library item.
Using the basic practices above, you can successfully create library items for slide shows, hot spot images, tab sliders and many other DPS interactive assets. Some training and documentation may be necessary for new users, but overall, the library method discussed in this article helps novice DPS users to add interactive elements quickly and easily. Other areas to explore are the creation of templates, Content Conveyor/Placer Tools, and Snippet files.
- Adobe InDesign help: Reusing graphics and text
This Adobe help page explains how to use libraries to reuse page elements.
- Adobe DPS help: Creating slideshow overlays
This help page explains how to create interactive slideshows.
- iPad application: Digital Publishing Suite Tips
This is a free application. iPad offers a number of folios that cover creation of interactive assets for DPS.
- Adobe DPS help: Nesting interactive overlays
This help page explains how to create nested interactive overlays, allowing you to combine more than one kind of interactivity.