Digital Publishing Suite: Interactive Map Using Multi-State Objects & Toggle Buttons


Digital Publishing Suite Software:

Adobe Indesign CS5.5–CC
Digital Publishing Suite Tools + Panels

Source Files

Introduction:

Using a traditional slideshow overlay is a great way to add engaging content for your reader within your digital publishing suite publications. In this tutorial, I will be going beyond the traditional way of utilizing object states as slideshows– in the digital publishing suite –to create a fun, interactive map using multi-state objects (MSO’s). I’ll also be adding toggle buttons for the user to view information about various locations on the map.

1.
Create a new document and set up a portrait digital publishing suite document in InDesign. The size should be 768px by 1024px. Once your document is set up, we can now begin to layout the images, text and buttons to look like the page below.

digital publishing suite workspace

2.
Place the googlemap.jpg that you downloaded into your layout. Go to: FILE > PLACE menu. Once your image is loaded, click once on the page to place the image. You can scale and align the image to your page by selecting your selection tool and positioning the image to the center of your page.

3.
Place the mappin_black.png into your document and position it over one of the black circular markers on the map. You can copy the mappin_black.png by holding down the OPTION key while dragging the image with your selection tool. Create three copies of the mappin_black.png images and place them over the remaining markers on the map.

4.
Place the humber.jpg image into your document and place it in the bottom left corner of the page. You can scale and adjust the positioning of your map and mappin_black.png’s until the images fit properly on the page.

5.
We can now write some copy for our layout by selecting the type tool in the toolbox. Take the type tool and click+drag out a text frame. Enter the heading, “Graphic Design Schools In Toronto”. You can use any typeface you wish for your layout. I’ve used Josefin Slab as my typeface for the headings. Next, you can type the name of the school to the right of the image in the bottom left corner of the document. The first school that we’ve placed in the document is “Humber College”. You can also draw another text frame underneath the school heading and fill it with placeholder text by going to TYPE > FILL WITH PLACEHOLDER TEXT.

6.
Now that all of our assets are placed and laid out on the page, lets change the colour of the mappin_black.png for Humber College’s location by selecting it with the selection tool and relinking it with the mappin_red.png. Open the LINKS panel by going to the WINDOW > LINKS menu. Click on the relink button at the bottom of the panel and choose the mappin_red.png from the folder. Before we move on and begin creating object states, take some time to arrange yourdigital publishing suite document as shown above.

7.
Next, we can begin to create our multi-state object. Open the Object State panel by going to WINDOW > INTERACTIVE > OBJECT STATES. Select all of the items on your page except for the main heading of the article (Graphic Design Schools In Toronto) and group them together by holding CMD + G or go to the OBJECT > GROUP menu. We need to group all of the objects so that they can be added as a single state in our Object State panel.

*By default, when creating a multi-state object, the object states panel will create two states. If you only have one item or group selected when converting an object into a MSO, the panel will create a copy of the item you’ve selected.

digital publishing suite object state panels

8.
Once our group is converted into a MSO, we’ll name this multi-state object as “school-map”. After naming the MSO, select State 2 in the object states panel. We can now modify State 2 by swapping out the humber college image for the next school on our map, which is OCAD University and change its title and the map pin from black to red.

*Once you convert an item into a multi-state object using the digital publishing suite, you will see a blue dashed stroke outlining the MSO on your page when it is selected.

digital publishing suite multi-state objects

9.
Earlier, we grouped our map, images, text and map pin icons so that we could make them into a single object state within our MSO. Now that we have our object states created, we can treat each object state as a grouped object when we need to edit each state. To swap out the image on State 2 of our MSO, double click on the school image within the MSO on your page. Double-clicking on the object will take you inside of the object states group and allow you to select a specific item within that group.

digital publishing suite humber college

10.
Once you see the bounding box appear around the humber school image, look to your links panel and click on the relink button to swap the current humber.jpg image with the ocad.jpg.

digital publishing suite object state setup

11.
After swapping out the image, take your type tool and click inside of the text frame for the schools title. Change the title name from Humber College to OCAD University.

digital publishing suite button states

12.
Finally, we will change the colour of the map pin for OCAD University to red on State 2 and change the humber map pin to black. Use the LINKS panel to swap them back and forth.

*The red map pins indicate that a location is selected and active. The black map pin will tell our reader that the location is not active. 

digital publishing suite buttons and forms

13.
Next, we will copy State 2 within our object states panel by dragging State 2 over top of the CREATE NEW STATE button at the bottom of the panel. This action will allow us to swap out the images for the other schools and change there titles and map pin colours fairly quickly and easily. After copying State 2, rename it as State 3 by clicking on the name of the state.

digital publishing suite object states panel

Once you’ve renamed the state to State 3, repeat the steps above and swap-out the current ocad.jpg image in State 3 with the ryerson.jpg using the links panel. Change the title beside the image to “Ryerson University”. You can also relink its map pin colour to red and the OCAD University map pin back to black.

adobe digital publishing suite

Once you’ve finished editing State 3, copy it again using the object states panel and rename the copy to State 4. Again, repeat the steps to swap out the images, titles and change the map pin colours. This time, swap-out the ryerson.jpg image on State 4 with the georgebrown.jpg and change the title to “George Brown College”.

digital publishing suite MSO

14.
Now that we have all of our states modified and updated, we can rename all of our states within the object states panel. Rename State 1 as “Humber College”. Then, rename the other states in the order of their appearance. State 2 = OCAD University, State 3 = Ryerson University and State 4 = George Brown College.

We can now begin to add the interactivity to the map by converting our map pins to toggle buttons. Open the Buttons and Forms panel by going to the WINDOW > INTERACTIVE > BUTTONS AND FORMS menu. Select the MSO on your page with your selection tool and click on State 1 (Humber College) within the object states panel. Now, double-click on the Humber College map pin until you see its bounding box appear around the map pin. This will allow us to convert the map pin into a button and apply an action to it within the buttons and forms panel. With the map pin selected, go to the Buttons and Forms panel and change the TYPE to “Button”. Next, change the Name of the button to “humber-state-1”. Click on the ADD ACTION button (+) and select GO TO STATE from the drop down menu. The Object drop down should populate our “school-map” MSO. Choose “Humber College” from the State drop down menu.

digital publishing suite states

We also have to convert the other map pins to buttons and make them trigger their appropriate states. Click on the other map pins within state 1 (Humber College) and convert them into buttons. You can repeat the above steps for the other map pins so that they activate their corresponding states when the reader taps on them.

digital publishing suite toggle buttons

Since we’ll need to convert all of the map pins to buttons for each state within our MSO, we will need to make sure that each button has a distinct name. Name the buttons you convert in the following format: humber-state-1, ocad-state-1, ryerson-state-1 and georgebrown-state-1.

digital publishing suite button actions

15.
Once you’ve converted all of the map pins to buttons on State 1 (Humber College), click on State 2 (OCAD University) and convert those map pins to buttons, while making them trigger their corresponding states. This time you will name the buttons: humber-state-2, ocad-state-2, ryerson-state-2 and georgebrown-state-2. You can complete this process for the other two states; State 3 (Ryerson University) and State 4 (George Brown College).

*Remember to name the buttons in the format above so that you don’t have duplicates of any button names.

16.
We’ve now completed our digital publishing suite layout and setup our interactive map with toggle buttons for each state. Before we preview our article, Select the MSO on the page so that you see the blue dashed stroke surrounding it. Open the Folio Overlays panel by going to the WINDOW > FOLIO OVERLAYS menu.

*When a MSO is selected, it is treated as a Slideshow within the DPS. You can change how a MSO interacts with the user by adjusting various settings within the Slideshow Overlay panel.

One of the settings that I will configure in my MSO is the quality of the objects when it Exports in PDF Articles. Since I have text and vector icons within each state, I want those items to retain their quality and not be rasterized when the article is previewed or exported as a folio. To do this, click on the Export Format in PDF Articles drop down menu at the bottom of the Slideshow Overlay panel. Change the setting from Raster to Vector.

digital publishing suite slideshow

17.
Now that our digital publishing suite layout is complete and our interactions are setup, we can preview our map within the Desktop Content Viewer or directly on our Tablet Device. You can select the Preview button at the bottom of the Folio Overlays panel and select Preview On Desktop. If you have an iPad or Android Tablet and would like to preview your layout on your device, plug the device into your computer via USB and launch the Content Viewer App on your device. Once you’ve launched the app, you can select the Preview button at the bottom of the Folio Overlays panel or the Preview button at the bottom of your Folio Builder panel within InDesign and you will see your device populate in the drop down menu. Choose your device and your digital publishing suite layout will loaded and ready to view on your device.

digital publishing suite content viewer preview

 

Conclusion:

Once your interactive map previews in the Desktop Content Viewer or your tablet device, tap on the map pins and watch each state activate with its corresponding information. The map pins should also change colours depending on which school you tap on. Creating a Multi-State Objects (within the digital publishing suite) with toggle buttons is a great way to engage your reader. The user will enjoy viewing multiple images and or information on a single page within your digital publishing suite publication.

If you found this tutorial helpful, feel free to like it or leave a comment below.

 

2 Comments

Add yours

+ Leave a Comment