Nested Overlay conundrum and solution for DPS

One of my customers’ favorite aspects of Adobe’s Digital Publishing Suite is how new features appear every 6 weeks or so. This rapid pace of development means that the DPS team can respond to customer requests for new functions in the Overlay Creator and the Folio Producer parts of the solution. One of the recent changes was the addition of what are known as Nested Overlays.

Nested Overlays allow you to combine multiple overlays into one object. For instance, you can now include a buttons, videos or a Pan and Zoom Overlay in your slide show. This is very handy when trying to create an interactive slide show like you see on popular news sites: there’s a photo with some text under it and six dots along the bottom, and when you touch a dot or swipe across the image, it takes you to the image or video that’s in the slide show.

I have heard from customers that while this seems to work on the desktop Content Viewer, it often fails on the iPad. I was surprised, so I did some investigating and here’s what I learned.

When you build a slide show, you need to create a Multi-State Object, or MSO. This MSO is a container for all of the different slides you want to present, with each state in the MSO representing a slide. Inside of each state, you can include DPS overlays. In my example, I have three slides in my slide show, so I have three states in my MSO. On the second slide, I have a Pan and Zoom Overlay, because the text is too big to fit in the space I’ve allowed. When I preview on the desktop, this works as expected. When I preview on the iPad, however, it doesn’t work.

The solution is easy, and I came upon it after following some of my own advice. When I first began teaching about interactive features in InDesign CS5, I exhorted my students to “think like a developer!” This meant that they needed to start naming their design elements if they wanted to have a productive relationship with the Flash developer who would take their comps/projects and turn them into full-fledged apps. This reduced guesswork and established a workflow that fostered collaboration between the two. Until InDesign CS5, designers all worked in Photoshop and sent layered PSDs with layer comps and written instructions to the developers, who chopped them up and added interactivity. This Photoshop-centric is still prevalent today, and it is fraught with errors in communication. I promote the idea of using InDesign as an interactive comping tool, however, and make judicious use of the layers panel to name my design elements. The key here is how InDesign names objects when you don’t.

By default, InDesign names all of its objects with the name of the primitive surrounded by brackets, like <rectangle> or <graphic frame>. If you place a graphic, the name becomes <nameofthisgraphic.psd> or whatever the graphic’s file name is. If you type some text, the first few words of the text frame become the name of the object, plus those surrounding brackets. It turns out that these names look suspiciously like HTML tags, but as tags, they have no meaning. I think (and I expect to get either some dope slaps or back slaps for this) that the webkit part of the iPad Content Viewer gets confused when it sees these names in the nested overlays. If you change the name of the overlay from InDesign’s default to something without brackets, your overlay will work as you expect.

In my example, I drew a box and pasted my text into it in order to make the Pan and Zoom overlay. InDesign named the box <graphic frame>. We can see this in the Layers panel. One of the great features of the Layers Panel is that we can use it not only to reorder the objects within a layer, but we can also use it to change the names of the objects. When I change the name to More Than Professors and update my folio, my overlay works as expected. It is not necessary to adhere to a strict Action Script naming convention, which would have a name like moreThanProfessors. The Content Viewer doesn’t seem to be bothered by spaces in the name, but if you’re going to be working with a Flash developer, then you should consider talking with them about how they want objects to be named.

On the left, the result with InDesign's default name. On the right, the result with my custom name.

Changing times require changing workflows. For interactive design and DPS specifically, it is time for designers and developers to share best practices. While naming conventions have never been a concern of a print designer, they are critical for a developer. In InDesign, these two worlds collide, and the collaborative workflow I have been preaching for the last two years is now paying off.

Share on Facebook

16 Responses to Nested Overlay conundrum and solution for DPS

  1. Chad Chelius says:

    Great post James! And a great tip to avoid this frustrating behavior. With the current DPS model, it can take some time to upload your folio to the cloud in order to test on your iPad so anything that can save time and frustration is a plus.

    While you’re on the topic of naming, I recently was approached by a client who was experiencing gray boxes where the multi-state objects appear in the folio. This was occurring in the Desktop viewer by the way. Upon investigating, I discovered that the designers were naming each state as #1, #2, #3, etc. Again, thinking like a developer, I looked at those names and thought… DPS isn’t going to like that. So I changed the state names to logical names and Voila! Everything worked as expected.

    Just another example of why you need to think at least a little bit like a developer. Again, great post!

    chad

    • Uwe Laubender says:

      @Chad – good point. Naming states like #1 etc. lead to a gray boxes in the Desktop viewer. renaming them did the trick. I can confirm that with ADPS 18.

      Are there possibly other characters that will trigger that kind of error?

      Uwe

  2. Uwe Laubender says:

    Good read, James! Thank you for sharing.

    About naming conventions:
    sometimes one will find a few hints every now and then in the current documentation, but I have the strong feeling, that there should be a specific place (blog post, pdf help file or forum section) where all these things are summed up…

    Uwe

  3. Jo says:

    Hi there, it looks like i takes SPRINT 18 to ghave these eatures in INDD CS5.5 and what I can’t figure out is … where to get this SPRINT 18 !
    ????

  4. Great point James and a great article.
    I do not consider myself a programmer but I have learned to very conscious of my naming conventions. I stick to the Actionscript convention you mention in everything that I do including Photoshop. For me it is just easier to stick with one naming convention than trying to remember who can handle what.

  5. Uwe Laubender says:

    Are objects also affected? Or does the bug only play tricks on “primitive” objects like or etc…?

    I ask, because I’m thinking about a script, that does the renaming in a more automatic way.
    I dont’t like the idea of renaming every page item, but only the possibly affected ones…

    Uwe

  6. Uwe Laubender says:

    OOps … The Blog software did tricks on characters like “”…

    So I ask again: Are “group” objects also affected? Or does the bug only play tricks on “primitive” objects of “rectangle” or “polygon” (etc.) -type?

    Uwe

    • James Lockman says:

      Groups will also be affected, as they assume a default name as well. In some cases, like in nested content, the group name becomes the name of one of the items in the group. It is always a good idea to adjust the name to remove the .

  7. Uwe Laubender says:

    I should escape my brackets…

    Test opening bracket: \

    Uwe

  8. James Lockman says:

    I have also discovered that overlapping overlays can fail if you do not change names. For instance, on one spread I had a video and a web content overlay that overlapped each other. Neither one worked if they overlapped. When I changed the names, everything worked as expected.

  9. Ryan Ackley says:

    This was totally a project saver. Thank you so much for this. I was wracking my brain in trying to figure out why it was not working and once I renamed it,… it worked. Thank you again.

  10. maggie says:

    This just saved my life! Thank you. But does anyone know of a script, or way to automatically change the object names within a document? I foresee a week’s worth of renaming…

    • James Lockman says:

      Know that with the recent release of the DPS tooling, this issue should be resolved. Nevertheless, it is always good to name your objects in DPS. Think like a coder, but design like a designer. ;-)

  11. Dan Restuccio says:

    James your nested overlays article was great. Would you or anyone know how to create the effect where there is a background layer, a scrollable frame on top of that and then a third layer on top where the scrollable layer is behind it and it doesn’t bleed through?

    • James Lockman says:

      Sure, Dan.

      You need to put the background static image at the bottom.

      Next up, put your scrollable frame.

      On top of that, make a slide show with two slides that are the same. The slides can be transparent or can be irregularly shaped. Think of a window frame with those sticks in it to divide the individual panes of glass. Have it auto play and stop on the last slide. Do not allow the user to swipe to change.

      The result is that the slide show becomes the window on top, and when the user swipes, the scrollable frame moves under the top image. Kind of like a poor man’s parallax, but it works!

      There is an example of using this as a mask for video in Bob Bringhurst’s DPS Tips app, which you can download here. http://itunes.apple.com/us/app/digital-publishing-suite-tips/id436199090?mt=8