Posts tagged "InDesign"

Using Twitter feeds in Adobe DPS

Edit: 7/19/2013  Twitter once again updated its APIs, so this article is inaccurate. I am working on a solution, and will update this article when I have one that works. There is a suggestion over in the DPS Forums, but the results seem to be spotty.

Recently Twitter changed its widgets so that they will no longer run outside of a web site. This presents a problem for folks who have relied on embedded Twitter widgets in their DPS publications. There is a workaround which should present no problem to readers, since they need to be online in order to read Twitter content in the first place.

First, post your widget to a web site, then either refer to it directly from your web overlay or embed an HTML file in your folio that contains an iframe that displays your widget. Here’s a more concrete example.

I have a widget called dpstweets.html, which displays all of the tweets that reference @adobedigitalpub. It resides at, and it consists of the following code:

<meta charset="UTF-8">
<title>DPS Twitter Feed</title>
 <script charset="utf-8" src=""></script>
 new TWTR.Widget({
 version: 2,
 type: 'search',
 search: '@adobedigitalpub',
 interval: 30000,
 title: 'Adobe DPS',
 subject: 'See what\'s trending',
 width: 180,
 height: 187,
 theme: {
 shell: {
 background: '#8ec1da',
 color: '#ffffff'
 tweets: {
 background: '#ffffff',
 color: '#444444',
 links: '#1985b5'
 features: {
 scrollbar: false,
 loop: true,
 live: true,
 behavior: 'default'

That in itself is pretty plain vanilla. However, if I were to embed this file into my DPS app as a web overlay, I would get a blank white rectangle. The easiest solution is to make my web overlay point to I set it to auto play, allowed interactions, and made it transparent. Of course, that’s hard to see unless you preview the folio on your desktop or on your tablet.

The other solution is the iFrame, and it’s easy to implement.

I made a second HTML file that I called dpsiframe.html, and in the body tag, I put this:

<iframe src="" width="200" height="312" frameborder="0" marginheight="0" marginwidth="0">Your browser doesn't support iFrames</iframe>

You can look up how to stylize iFrames with CSS and with their own tags, but once I put this new html file into my web overlay in my folio, it worked like a charm.

CS6 users have an additional bonus feature, though. In InDesign CS6, you can just copy and  paste the <iframe src-” … /iframe> line of code into InDesign, and InDesign will make a nice poster frame of the page for you when you paste. It makes it much easier to figure out how the widget will fit into your layout. Give it a try with my iframe code above, and tell me that’s not awesome. You can’t, can you? Unless, of course, Twitter changes its widgets again and makes them unusable in iFrames.

Share on Facebook

Using content from InDesign documents in CQ5.5

When Adobe acquired Day Software, it got not only a revolutionary Web Content Management system, but also a revolutionary Digital Asset Management platform based on CRX, Day’s implementation of the Java Content Repository. Quick to recognize its potential as a binding agent for an end to end Adobe workflow that included asset creation and management, campaign deployment, measurement and targeting, and campaign refinement, CQ quickly jumped to the forefront of many of our minds here at Adobe.

Adobe Drive 3 can connect to a CQ DAM and provide version control for Creative Suite assets. While this functionality existed with CQ5.4, in CQ5.5, there are some built-in examples of how CQ can extend an InDesign workflow to the Web. CQ5.5 ships with a couple of workflow scripts designed specifically for InDesign Server, which is required for them to function. Without InDesign Server available to CQ, what follows won’t happen. If you are a CQ customer and would like to try this for yourself, download the InDesign Server trial and install it on the same server where you keep CQ5.5. Otherwise, read on and you’ll get a sense of what’s possible with CQ DAM and InDesign Server.

InDesign server must be running and servicing requests on port 8080. On my Mac, I issue the following terminal command to fire up ID Server prior to starting CQ. I assume that it’s similar on Windows:

/Applications/Adobe\ InDesign\ CS5.5\ Server/ -port 8080

Once it’s running, it’s safe to start CQ in author mode. We’re looking at an author instance, not a publish instance, from this point forward. Once it’s running, you can mount the repository with Drive 3. Open Drive 3 and connect to your DAM. In my example, I’m running CQ on my local machine, hence the localhost connection.

Once connected, I can browse content in the DAM as if the DAM were a filesystem. CS apps such as Photoshop, Illustrator, InDesign, InCopy and Bridge understand that when CQ DAM is mounted via Drive, they can check files into and out of the DAM and access versions of those files in the DAM. This article isn’t about version control, though, it’s about repurposing content from InDesign in CQ5.5.

When I drop an InDesign file into the DAM via Bridge, Bridge creates a version and checks the file into CQ. In CQ, the appearance of that InDesign file fires off a series of workflow steps that, with the help of InDesign Server, create previews of that file, extract an IDML rendition of that file, extract text and images from that file, and assemble those items into a Page node in CQ. It’s this page node that’s the really, really cool product of ingestion.

Page nodes are reference-able in CQ using a reference component. Normally, when you place a reference component onto a page in CQ, you double click it and browse to the page you want to reference. Unfortunately, when CQ and InDesign Server make the page node of your InDesign file, it places that page into the “renditions” folder, which is a reasonable place to store it. Unfortunately, the Reference component doesn’t know how to look into the Renditions folder for this Page note. Fortunately, a colleague on the Chinese Solutions Consulting team, Joseph Lee, figured out a simple solution that allows us to use this page node as a source of content for other pages on our CQ site.

In the diagram above, the selected page node needs to move up two levels in the hierarchy so that it is at the same level as the jar:content node, just below the InDesign file’s primary node. We can drag it up there in CRXDE Lite, but that’s pretty “dirty,” as Joseph was quick to point out. Looking at the workflow, however, he identified a single modification that puts the page node into a place where it can indeed be found by a reference component. Note that it will no longer appear in the Renditions tab when you browse to the InDesign file in DAM, however. I think that the trade-off is worth it, though.

The change we need to make is in the DAM Update Asset workflow. Browse to your workflows console and double click DAM Update Asset. At the bottom of the workflow, there’s a step called Page Extraction. This is one of the new steps that’s included in CQ5.5. You need to change the Page Root Path to “/.” (do not include the quotes) just like below. This will instruct the workflow to create the page node directly below the InDesign file’s primary node. Once you’ve made the change, click OK and then Save in the upper left hand corner of the window. Now, you’re ready to reuse content from your InDesign files in your CQ pages.

To see this in action, let’s look at what the reference component will see after this workflow change, and after we either ingest a new InDesign file or make a change to it and check it back into the DAM, either of which will trigger the InDesign Page Extraction workflow and fix the page node location. Once you do this, you can now browse to it from a reference component.

In the figure above, I have selected a story that’s present in my InDesign document. Here it is in InDesign:

Now, here it is on my CQ page.

Now, here’s the really, really cool part. Nowhere in this process was I required to send my InDesign document overseas for XML extraction in order to get its content back into my Web Content Management system. Ingestion took literally seconds and allowed my authors to use the text and images from my InDesign documents immediately. In addition, when a user makes a change in InDesign and checks the document back into the DAM, the text will update in my CQ Author instance so that I can gracefully publish it to the Publish instance when I am ready.

Thanks again to Joseph Lee for his elegant but powerful suggestion to expose the page rendition to reference components.

I know that this workflow is a demonstration of capabilities, but what an amazing demonstration it is. A capable developer could develop components and workflows which would allow a CQ user to edit that same referenced copy, and then would fire off a workflow to re-inject that content back into the InDesign document. How about the situation where a CQ user mocks up a page layout and then pushes a button to tell InDesign Server to build an InDesign document using a specific template and the text and images from the repository. The possibilities are endless.

I firmly believe that CQ5.5 and its ability to drive InDesign Server heralds the beginning of a new era in multi-channel communications. Already the lines between print and web and apps are blurred. With InDesign Server and CQ5.5, those lines disappear entirely. Now, content truly becomes independent of presentation, which frees the marketer or publisher to extend their reach in existing channels and expand their businesses into emerging channels.

Share on Facebook

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

There is a new course available at 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
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