Universal Scrolling Frames for InDesign

Universal Scrolling Frames From InDesign to HTML and EPUB

Adobe InDesign is full of wonderful interactive capabilities. The DPS Overlays panel adds several additional options, such as scrolling frames.

While this extra interactivity is supported by DPS, as well as our tool—in5 (InDesign to HTML5)—it’s not supported by InDesign’s native export formats: ePUB, HTML, and Publish Online.

In looking for ways for add this interactivity for all formats, I heard from many people that scrolling frames were a high priority.


in5 v2.6 – The Hidden Gems Release

hidden gem icons

Version 2.6 of in5 makes several improvements and gives you more ability to control the output.

These improvements come without any visible changes to the user interface, hence we’re calling this the “hidden gem” release.


in5 2.5 Improves InDesign to HTML Export Speed by up to 100x!

breaking the sound barrier

Image credit: wikipedia.org

Faster Exporting

Yes, you read that headline right. Up to 100x faster exporting from InDesign to HTML! There’s nothing extra for you to do, just run the latest version of in5 and you’ll find it’s much faster.


in5 & the InDesign CC 2015 Release

The InDesign CC 2015 updates the InDesign format. So, CC 2015 is a separate application from CC 2014. Here are some things you should know about the InDesign CC 2015 release and how they relate to in5.

Installation of InDesign CC 2015

You must click Advanced to avoid deleting older versionsAdobe has designed the new default installation behavior so that a CC 2015 app overwrites all previous versions of the application (InDesign CC, InDesign CC 2014, possibly InDesign CS6 if it’s linked to your CC account).

in5 is licensed to the version of InDesign, so before you install InDesign CC 2015 (but after you click the Update button next to InDesign CC 2015), make sure to sure to deselect the Remove old versions option. That should prevent you from losing versions of InDesign where you have in5 activated.

More words of caution about installation below.

Publish Online

If you’ve installed the English-language version InDesign CC 2015 it will come with a new “Technology Preview” called Publish Online. Publish Online lets you export and upload your document to Adobe’s Creative Cloud. Once the upload is complete, you will receive a public URL where your document is visible. Under the hood, InDesign has converted the InDesign document to HTML and uploaded it to Adobe’s server. This is similar in some ways to what in5 does, so we want to take some time to explain the similarities and differences between in5 and Publish Online, and the respective advantages of each.

Advantages of Publish Online

Convenience. Publish Online does not give you the HTML output files. Instead, it uploads them directly to an Adobe server and provides you with the URL to the upload location. This is a nice convenience if you don’t want to deal with uploading your files to a web server. It also means that the files will not be hosted on your company’s server, so the web address will be branded by Adobe, rather than your company’s name. It also means that you don’t control the output files: you can’t update them, re-purpose them, or move them elsewhere.

For those who simply want a quick way to get their content to the web, and don’t care about control or branding, Publish Online is a good way to go. Also note, the Publish Online preview currently creates a new URL each time you publish. So, if you send a URL to colleagues, then update your InDesign document and republish, your colleagues won’t see the updates unless you send them another message with the new URL.

Cost. If you already have an Adobe CC subscription, the new technology preview is free (if you’re an English-language user).

Advantages of in5

It’s now been almost 3 years since the Kickstarter project that launched in5. We’ve been busy making additions ever since. So, it’s to be expected that in5 will be further along in its development than Publish Online. However, there are also some key differences that are likely to persist as well. The differences listed here are accurate as of the release of CC 2015 and the writing of this post.

keyboard control buttonWith in5, you own the files. As long-time users of design software, we care very much about ownership of our files. We know how important it is to be able to make a simple update to our files (e.g., changing a copyright date or email address) several days, months, or even years after launching. Perhaps even after we no longer have access to the software that we used to create the original files.

One of the inherent advantages of the HTML file format is its flexibility with respect to making changes: HTML is saved as a text file that can be opened by any text editor. The “editability” of HTML has always been a high priority for in5, as we built in5 as a tool that would let users to edit their own files and implement any changes as needed (if they so desired).

So, unlike Publish Online, the files that you export with in5 are available on your local machine and are yours to keep and re-purpose as you see fit. With in5 output, you can:

  • Host the files on your own domain (with your company’s or your own personal brand)
  • Host the files privately if you so choose
  • Distribute the files over email or by another method
  • Extend or modify the output
  • Make edits to the files
  • Replace old versions on your server so users automatically see updates (without the need to send a new URL)
  • Embed your content into other formats like DPS
  • Convert your files into native apps (with services like Baker Framework, Amazon Marketplace, and Adobe PhoneGap Build)

Several Adobe technologies have come and gone and/or evolved over the years (e.g., Flash has changed dramatically, nearly everything built on Flex is gone, Adobe Version Cue no longer exists, Forms Central is gone, Adobe Stock came and went and now is back in a different form, to name a few). For this reason, I have personally felt uneasy about leaving my content on certain outside (e.g., Adobe) servers, since my files could disappear or be changed without my awareness or control.

Interactivity via the Folio Overlays. in5 supports the interactivity that can be created using the Folio Overlays panel within InDesign (scrolling frames, web content, pan and zoom boxes, slideshows). Publish Online does not support Folio Overlays.

Note: InDesign CC 2015 also removes the Folio Overlays panel. DPS is essentially “on hold” until Adobe comes out with a new version of their publishing solution. This leaves InDesign CC 2015 with less capability to create interactivity than CC 2014. This may be another reason to put off upgrading.

Text Rendering. in5 can render text as selectable, searchable HTML. In addition, in5 can embed fonts from your local machine (as well as rendering text as images to preserve appearance). Publish Online can only render text as images.

clickable linksHyperlinks in Text. in5 includes working hyperlinks in the output, even when rendering text as images. Publish Online does not support hyperlinks within text in CC 2015 (which means that links within Tables of Contents will not work, either).

Format Options. In addition to being able to re-purpose your files, in5 also offers several 1-click format options right out of the box. For example, in5 lets you create a Web App that can be installed to a device’s Home Screen without the need for App Store approval.

Multiple Page Sizes. in5 supports documents with variable page sizes (e.g. having a longer, scrollable page). Publish Online does not.

CC 2015 and Installation of in5

in5 can be installed with Adobe Extension Manager (which now may be found in the Previous Versions section of your CC Desktop App). However, in order for InDesign CC 2015 to appear in Extension Manager CC, you may first need to install another CC 2015 application (in my case, Photoshop CC 2015 did the trick).

Watch out!We’ve posted a CC 2015-compatible installer for in5, but I haven’t been able to successfully install an extension for InDesign CC 2015. In fact, with InDesign CC 2015 installed, I can no longer install extensions for InDesign CC or InDesign CC 2014, either. So exercise caution when installing CC 2015 if you rely on extensions.

We’re busy developing a workaround and will be posting it for our users ASAP.

As mentioned above, because the InDesign team has modified the file format, and CC 2015 is a separate application from all previous versions of InDesign, activating in5 in CC 2015 will require its own license seat.

Update (06/28/2015)

New custom installers for in5 are now available. These installers no longer rely on the Adobe Extension manager.

in5 Support for CC 2015 features

The main new feature that will be relevant to in5 users is Paragraph Shading, which lets you add a background color to a paragraph (or paragraph styles). in5 will offer support for this feature as a free update to v2 license holders in the near future.

In Summary

  1. Be very careful about updating to CC 2015 if you rely on extensions or you want to keep your previous installations of CC applications.
  2. Publish Online is a time-saver if you don’t want to use your own server.
  3. in5 has a lot of useful features to offer. CC 2015 updates coming soon.

6 Custom Solutions from the in5 Answer Exchange

One of the best things about exporting HTML5 from InDesign using in5 is that the output is infinitely extendable. Here’s a collection of free code snippets from the Answer Exchange that can be use to alter the functionality of your exported content:

  1. Smooth Swiping Slider – This will drag a preview of the next (or previous) page as the user swipes.
  2. Scale to Desktop Browser Window – in5 can automatically scale to a mobile device window using the viewport meta tag (which is configured by default), but desktop browsers don’t support the viewport meta tag. This solution provides a workaround for modern desktop browsers.
  3. Reset Multi-State Objects on New Page – Sometimes the appearance of MSOs is changed by user interaction and you want your MSOs to return to a “starting” state.
  4. Allow Text Selection with Swipe Enabled – With the swipe enabled, the page is listening for swipe gestures, which prevents text selection. This bit of code lets these two bits of functionality live together by disabling the swipe on live text only.
  5. Blinking Initial Next Arrow – This gives the user a visual clue on how they can begin to navigate your site/app/document.
  6. Make Lightbox Fill the Screen – By default, the lightbox covers 80% of the screen. This code causes it to fill 100% of the screen.