Becoming a Digital Publishing Master with in5

Images from apps and sites created with in5.

This course will teach you how to use InDesign and in5 to create beautiful and accessible sites and mobile apps. Learn to become a master of digital publishing from the ground up by using familiar design tools.

For full course details, visit the main course page.

Lesson 8: Creating Dynamic Content with Multi-State Objects

Multi-state objects are among the most powerful interactive features in InDesign. They can be used for anything as simple as a slide show all the way to combining multiple full pages into a single object to allow a user to view multiple pages while navigating with buttons.

Expert Contributors to this lesson

Bob Levine

Bob Levine

The InDesign Guy

Today's Course Outline

  1. Creating Object States
  2. Navigating States with Buttons
  3. Previewing Object States
  4. Tips for managing and working with MSOs

Estimated time for lesson

Today’s lesson should take approximately 10 minutes.

Originally intended for SWF output, multi-state objects can now be used in DPS and Fixed Layout EPUB, and in5 HTML5.

So, what exactly is a multi-state object? It’s an InDesign object that by definition has multiple possible appearances.

They can be used for anything as simple as a slide show up to combining multiple full pages into one to allow a user to view multiple pages while navigating with buttons.

In this lesson, we'll create a simple slideshow.

Creating Object States

In the screenshot below you can see that I have four objects on the page. I’d like to turn this into a slideshow so I select them all.

(As an aside here, for fixed layout EPUB or DPS purposes I like to set the page up as 1024x768 with the intent as Digital Publishing).

In most cases for a slideshow like this, you’d use the align panel to have all of the objects in the same position but that’s not required. I’ll leave them where they are.

selected page items

The Convert selection to multi-state object button is now active.

Clicking that button will create the MSO and thumbnails of the states will appear in the Object States panel.

MSO with first state selected

On first blush it appears that that the three of the objects have disappeared, but looking at the Object States panel shows them as individual states. Clicking on any one of them makes it the active state.

third object state selected

Now that we’ve created the MSO we need a way to navigate through the various states. We’ll do this by creating buttons.

Navigating States with Buttons

There are two ways we can handle this.

We’ll start out by creating a couple arrows (but you can use anything for a button) and selecting them both. With both still selected open the buttons and forms panel (if not already open, it’s under the Window > Interactive > Buttons and forms menu) and click on Convert to Button at the bottom of the panel.

Convert to Button button

Buttons have a distinct thick dashed border around them so they’re very easy to see.

buttons

Select the right arrow (InDesign will not allow for actions to be assigned to multiple buttons at the same time) and from the Buttons and Forms panel click the plus sign (+) in the Actions section.

Choose Go To Next State. At this point, if you’d like you change the name of the button, but you don’t have to, but do not change the Event. Leave it at On Release or Tap.

Button actions

Do the same for the left arrow but choose Go To Previous State.

You’ll notice when doing so that the panel changes to allow you to choose which MSO these actions will apply to (in this case there’s only one to choose) and, since you’re using go to next and previous actions, the capability to stop at the last state is added.

This is optional and will depend on user experience you want.

Object field

With that, we’re ready to test the MSO.

Previewing Object States

The easiest way is to launch the EPUB Interactivity Preview panel, found under Window > Interactivity (or the SWF Preview in older versions of InDesign).

preview

That’s it for this simple demo. But, it’s just the tip of the iceberg for MSOs.

Each object state can contain virtually anything. There’s no limit to the number of objects or depending on output, interactivity.

There's no limit to the interactivity that you can create with MSOs

For EPUB or through the use of in5, even native InDesign animations are supported.

Tips for managing and working with MSOs

These tips will help you to work with MSOs in your documents.

How to add a state to an existing MSO

If you have multiple objects selected and want them all in the same state, then alt/opt-click the new button.

Know what you have selected

There are visual cues in the Object States panel to tell you what is selected.

object state selected

In the image above, the content is selected.

content selected

In the image above, the state selected.

state selected

You can easily select the MSO by clicking the icon next to the Object Name.

state selection indicator

In the image above, the MSO is now selected.

How to Add an object or objects to an existing state

Once you've created an MSO, you may want to make additions or alterations.

To add an object to an existing state:

add objects button

That button is contextual. If you have an MSO selected and an object on the pasteboard, it will allow you to paste the contents into the selected state (shown in the image below).

paste contents tooltip

Adding buttons to a state

Buttons can also be added to an MSO. Be aware that adding a button with a go to state action to an MSO will cause the action to be lost and you’ll need to reselect the button to add the action back once its been moved into the MSO.

Take Aways

  • Overlays let you quickly add sophisticated interactions.
  • An MSO can become a slideshow with a couple of clicks.
  • A Scrolling Frame is just a simple copy and paste away.
  • You can load live content from other sites into your site or app.

Want to learn more about the power of MSOs? Check out Bob's Developing Multi-state Objects with InDesign course on lynda.com (You can also get a free 10-day trial with Bob's affliate link).