Building Slideshows for DPS: Multi-state Objects

Images are a powerful type of content for any publication or communications medium. They reveal information about a location, situation, or feeling quickly and easily. The challenge print publications face with images include limits of space on the page or the page count of a publication. They must select comparatively few images from the likely much larger variety of images shot for a story.

DPS publication don't face these limitations; slideshow overlays expand the options for both information and design. By allowing not only more images in one space but also allowing for additional types of interactivity inside a single slide of a slideshow. For example, a single slide might be a movie, a panorama, scrolling content, or contain buttons. Let's take a look at how they're built and how you can take advantage of this type of interactive overlay in your folios.

Let's start by laying some groundwork.

What is an MSO?

InDesign doesn't have a slideshow command and it doesn't have a slideshow panel-you're only going to find this word in the Overlay Creator panel (or Folio Overlay panel in CS6). Slideshows are a type of overlay. You don't make a slideshow in this panel, but you control how a slideshow works here.

The Object States panel with a three-state MSO selected shows each state, the top state is visible by default.

A slideshow for digital publishing is based on a "multi-state object"-and there's an Object States panel that you use to build and manipulate them. (FYI, the slang term for them is typically "MSO" and I've heard some folks call them "miso" ) The Object States panel will convert two or more things into a MSO, and then you can continue to refine the MSO with this panel to control the appearance and order of the things or states.

A couple rules to keep in mind:

• Only one state is visible at any time in your layout.
• A state may contain only one object, but this object can be a group; so the opportunities are quite broad.
• The top state in the Object States panel is the initial state visible in your publication.
• The order of the states is the playback order if you use "next" or "previous" commands for the MSO.

Create an MSO

Building an MSO is easy, you arrange objects in your layout, select them, and then convert them to a MSO using the Object States panel. A state can be a single thing like an image or textframe, or you can group objects together if they should all appear together as part of a single state before you create the MSO.

If you want to create a slideshow of three images, you'd simply place all three images on your page and arrange them where you want each image to appear. All three might be the same size and in the same location, or the could be information "highlights" which appear in various locations on the page. Select all three images and click the "Convert selection to multi-state object" button in the Object States panel.

Creating a new MSO, select the objects and follow the instructions in the panel.

Alternately, if you wanted each of the three images in the example above to also have a caption or callout, you'd group the image and caption together, then arrange them on your page, and finally convert them to a MSO.

When you create an MSO, the states are arranged in a specific order. The topmost object or group in the Layer panel when you create the MSO will become the initial or topmost state of the MSO. So if you just placed multiple images, the last-placed image is going to become the first state of your MSO.

You can drag states up or down in the Object States panel to change the playback order of the slideshow and this is how you can change the initial state of the MSO in your layout.

The panel menu help editing, resetting all MSO to their initial states, and release MSOs.

Add Interactivity to a MSO

Don't forget that the content in a state of a MSO can also be interactive. You can make a panorama a state, or a movie can be a state. You can create and combine overlays to build some amazing interactivity. Experiment with the possibilities. But also keep in mind that you need to consider and test how your readers will interact with the content. For example, if you intend to use swipe to move to each state but one of your states is an image sequence that also uses swipe-then you cannot leave the image sequence unless you design and reveal an area of your MSO that always works for changing states.

Editing the MSO

Once you create an MSO, only one state will be visible and you have to be careful about how you handle the MSO. It's easy to accidentally move just one state or loose track of which state will be seen initially; so watch for visual feedback when working with an MSO. You'll see visual feedback in two places; the pattern, weight, and color of the MSO edge is one type of feedback, the second is a series of icons on the right edge of the Object States panel.

You'll see a heavy dashed outline of the MSO when you select it. This indicates that you're working with the entire MSO. This dashed line matches the highlight color of the layer which holds the MSO.

Watch the panel for feedback about what you're working with.

The Object States panel is critical to understanding your MSO, selecting states, and editing your MSO. If you click on a state in the Object States panel, you reveal and select just that state. Notice the lighter dashed outline, the color of this outline is the "opposite color" used as the highlight color for the layer.

Clicking the icon to the right of the MSO name in the Object States panel selects the entire MSO. This is important if you want to move or scale the entire MSO.

Adding a new state

There are two ways to a new state to a MSO. One method is to arrange the additional content as you wish and group it, then select the new content and the MSO, then click the New button in the Object States panel. This will convert the new content into a new state. The second method is to use the panel menu and choose "New State".

The Object States panel instructs you on how to add content as new states.

Adding to a state

If you need to add something to an existing state of a MSO there are two ways to do this. One is to position the new content where you want it, then select it and the MSO. Then click the "Add objects to visible state" button along the lower edge of the Object States panel.

Adding additional content to a state.

The second technique is to create and arrange the additional content where you wish in front of the MSO, then cut the content. Now target a state in the Object States panel and click the "Paste copied objects into selected state" button along the lower edge of the panel. This will paste the content exactly where it was a moment ago, but inside a MSO state. This technique is great if you need to add a caption or copyright notice to all the states of the MSO.

Editing a state

Sometimes you need to get into a state and edit the content to correct a caption or move a button in a state. Once you have the desired state or object you can edit it any way you like. Change stroke/fill, edit text, change the crop, etc. There a couple ways to do this too. Your options include:

Work it Like a Group

Choose a state in the Object States panel, notice the light dashed outline of the state, now you can double-click into the state and work with individual objects much like working within a group.

Love the Select Buttons

Alternately you can use the four "select" buttons in the Control panel to navigate deeper into state, to another element within the state, or up to a higher level of the state or MSO.

The select buttons in the Control panel help navigate groups.

Lovely Layers

Or you can use the Layer panel to navigate and select content, but be aware that the Layer panel will change to reveal only the active state and hide non-active states of an MSO.

Click the "proxy" square (the little square on the right of each object or group in Layer panel to select objects.

Limitations

There are some limitations and warnings to keep in mind when working with MSOs. Here are a couple things to watch for and avoid for successful interactivity in your slideshows.

Avoiding Dead MSOs

You can build a wonderful MSO but if there is no interactivity that makes it work, it it will be flattened as part of the background, it will not function. Each MSO must include something to bring it to life: autoplay, swiping, or a button which makes the MSO interactive will do the trick. If you test a folio but only see the first state of the MSO, you need to enable something to bring it to life.

Nested MSO

Putting an MSO in another MSO as a state will not work.

Blind Buttons

Buttons inside a MSO state can only control content in that state. They cannot control anything in another state of the MSO or anything outside the MSO.

Additional Resources

InDesign Help- Create multi-state objects

DPS Help- Slideshow Overlays