Posts tagged "InDesign"

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

Adobe DPS course available at Lynda.com

There is a new course available at lynda.com to help users get started with Adobe’s Digital Publishing Suite.
with: James Lockman
Course Description:
Up and Running with Adobe Digital Publishing Suite shows designers how to create interactive publications for tablet devices using Adobe InDesign and the Adobe Digital Publishing Suite. Introducing this emerging publishing platform, author James Lockman discusses the DPS workflow, comparing it with existing EPUB and print workflows, and highlights key layout and design considerations when designing for DPS. The course explains how to incorporate hyperlinks, slideshows, panoramas, audio and video, and pan and zoom capabilities as a means of adding value to a publication. Lastly, the course sheds light on compiling interactive folios and testing and publishing finished projects. Exercise files accompany the course.
Topics Include:
  • Determining your digital publishing market
  • Designing for an interactive publication
  • Creating buttons
  • Setting up image sequences
  • Building the panorama viewer
  • Configuring audio and setting video playback options
  • Creating a web viewer portal
  • Structuring articles into folios using the Folio Builder
  • Testing a folio locally
  • Publishing folios
  • Building viewers for iPad and Android
Duration:
2.68 Hours
Here’s a sample:
Share on Facebook

Version Cue and Adobe Creative Suite 5

From time to time, customers ask me how to use Version Cue with Adobe Creative Suite 5. Version Cue is not a platform that Adobe will support going forward, but for now, there is at least a means of using Version Cue CS4 with Creative Suite 5. Drive 2 is available now and is out of beta. Get it here.

Most recently, I had a customer ask about how to migrate their Version Cue CS2 workflow to a Version Cue CS4 and Creative Suite 5 workflow.

To migrate, you’ll need to go from VC CS2 to VC CS3 and finally to VC CS4. There isn’t a direct migration path from CS2 to CS4. You can migrate from CS2 to CS3 from the server administration panel’s Advanced section, and this is best done on the machine where the new server is running.

Once you’ve done that, install Drive 2 on your CS5 machines. Browse to your VC CS4 server and log in to your projects. You will be able to check content in and out from the desktop and from within CS5 apps. In addition, if you would like to use Bridge with VersionCue CS54 then you will need to enable VersionCue support in Bridge. After you install Drive2, you’ll see the following message when you start Bridge:

You can enable or disable Drive2 in Bridge later if you want to. Go to Bridge’s preferences, and disable the Drive 2 Startup Script. Once installed, you will have access to the inspector Panel. The metadata explorer is off by default, but you can enable it in the preferences as well.

Having done that, you will now have a new panel in Bridge that lets you access projects through Drive 2. Click on Drive 2, then click the Connect To.. icon in the Content panel.

Then, enter the URL and credentials for your server.

Once you’re connected, then you can then browse your Version Cue CS4 projects in Bridge CS5. In addition, you can show versions, examine metadata, check out files and check in new versions. You’ll be able to use Version Cue directly from within InDesign, InCopy, Photoshop, and Illustrator. You’ll also be able to view versions and check files in and out from Bridge and the desktop.

To open/check out project files from within CS5 applications, simply browse to them in the Drive 2 folder that will appear on your desktop when you log in to your server.

It is interesting to note that Drive 2 allows you to check any file type into and out of a project, not just Design application files. You can manage versions of Flash Builder files, for instance, or even your Office documents. It’s a very versatile solution for small workgroups.

Share on Facebook