The latest version of in5 includes some big updates that should make several tasks more accessible to designers. It’s been possible to add custom code to in5 output for quite some time, but if you’re not used to working with code, there’s definitely an intimidation factor. With version 2.4, we’ve made it easier than ever to incorporate Google Analytics and Social Sharing buttons in your HTML (or app), without having to copy and paste code!
One-Step Google Analytics Tracking
You can now add Google Analytics to your in5 project simply by copying and pasting your Google Analytics Tracking ID into the in5 dialog.
That’s it! No more setup required. No need to even look at the tracking code below the ID.
As soon as you post your HTML to a web server, Google Analytics will begin collecting data.
In addition to the basic tracking functionality, you can choose to monitor other events within the document:
Pages – lets you track which pages are viewed most and least often.
Button Clicks – lets you track how often buttons are clicked.
Audio and Video Playback – lets you see which media are being played in your document.
Social Sharing – lets you see how often your document is shared using the Social Sharing Buttons (more info below).
This feature lets DPS users take advantage of the wonderful Animation and Timing Panels in InDesign.
Credit for this feature goes to Keith Gilbert who came up with a way to use content exported by in5 to include native InDesign animations in DPS projects. Keith wrote up the idea on InDesign Secrets and suggested that we automate these steps as a feature. Which is exactly what we’ve done. So, now you can simply make a selection and right-click (or use the Object menu) and choose Convert Selection to Web Overlay Using in5…. A special version of the in5 dialog will then appear, and once you’ve selected the options you’d like and clicked OK, in5 will export the content, create a Web Overlay (animation and all) inside your current document, and hide the original content in a separate layer.
Lazy Load Images
Lazy Load Images will only load images on the current page and neighboring pages, rather than loading all of the images in the document right away. This is a feature we’ve wanted to add for quite some time, so we’re glad that we can finally make it available!
Turning this option on can dramatically reduce the load time in the browser, especially for long documents. There’s not much of a downside to this feature, so it is turned on by default.
Bookmark Linking within “Tall” Pages
Version 2.3 also adds the ability to link to locations within pages using Bookmark Anchors. This feature came about based on a request on the Answer Exchange. To create vertical chapters in Baker Framework output, in5 supports creating taller pages that can be scrolled vertically (swiping takes the reader to the next “chapter”). We even added a script that could merge multiple pages into one tall page. Doing so, however, made it difficult to link to locations inside of the tall page. Now, you can create a Bookmark Anchor (a bookmark from within a text frame), and use a button to link to that Anchor, and clicking that button will now take the reader to the tall page and scroll to the anchor location.
Added Video Options
We’ve had a couple of requests to support the None Video Controller skin option, so we’ve added support that option, which will hide the control bar at the bottom of a video (when not in fullscreen mode). Choosing any other skin will show the full controller in the output.
We’ve also had a few requests for the Play Full Screen Video Overlay option. This option allows a video, once reached (or clicked to play), to take over the screen. This works best on a browser and device that supports this behavior.
Support for Top and Left Pull Tabs
Pull Tabs are essentially a nice hack of the Scrollable Frame Overlay. To see screenshots of pull tabs in action, check out this InDesign Secrets article where Keith Gilbert has some tips and tools for pull tabs. Pull tabs are simply scrollable areas with the scrollbar hidden and they rely on a touch device. in5 has supported tabs that start at the bottom or right side of the screen for quite some time because they simply required scrolling functionality, but tabs at the top and left were essentially inverted, so the browser didn’t realize that scrolling was desired. Even though there was overset content in the frame, it was in the wrong direction. So we’ve added some code in the output to recognize this and to trick the browser into scrolling normally. Hopefully this will be helpful for fans of pull tabs.
Download the update
You can update your current version or test a trial version of in5 by visiting the download page.
Other fixes in version 2.3
Here’s a list of other items that we’ve updated for the latest version:
Updated Add to Home Screen graphics for iOS 8.
Fixed tap start on Image Sequences.
Fixed error in non-English versions of InDesign caused by none swatch.
Fixed syntax for transform origin in webkit.
Fixed error with ampersands in video paths.
Fixed errors that may occur when scrollable frames exist inside of other scrollable frames.
Fixed in5 footer position on Baker and LSPS output options.
Fixed error related to Custom Rasterization and update in5 to support new settings in CC 2014.
Fixed nested text frames that are marked as scrolling frames but do not have scrolling content.
Version 1.4 of in5, our InDesign to HTML5 conversion tool, introduces several highly requested new features.
The Slideshow option in the Folio Overlays panel of InDesign makes it possible to create an interactive slideshow from a Multi-State Object and export it to a Digital Publishing Suite (DPS) app. With in5 v1.4, you can now export that same slideshow directly to HTML.
HTML Embedding for CS4, CS5, and CS5.5
InDesign CS6 introduced a fantastic new feature that made it possible to insert HTML into an InDesign document. You could even copy embed code (from YouTube, Vimeo, Google Maps, etc) and paste it into InDesign. InDesign would recognize that the incoming text was HTML and automatically generate a box with the right dimensions. in5 has supported the use of the embedded HTML feature since version 1.0. In version 1.4, we duplicated this ability to insert/paste/edit HTML code for anyone using InDesign versions prior to CS6 (CS4, CS5, and CS5.5).
My throat is still recovering from a cold and the visuals were enough to show the features, so don’t adjust your speakers, there’s no narration is this video.
Animated GIFs used to be all the rage on the web. As Flash introduced more sophisticated animation, animated GIFs fell out of fashion. Since Steve Jobs’ Thoughts on Flash, and the increasing popularity of mobile devices that do not support the Flash Player, animated GIFs have made a comeback. And now they’re supported by in5!
Any .gif file that is imported into InDesign and not cropped will be preserved by in5 by duplicating the original .gif file (rather than rendering a new image).
Hyphenation is an important element in design, as it allows the lines of a paragraph to be broken up in a less ragged fashion, creating a smoother visual flow of text. Hyphenation is just now beginning to be supported on the web. Even though it will only appear in a few browsers at the moment, we’ve added support for those browsers because hyphenation is such an important design feature.
Additional Support for WAV and MP3 Audio
in5 has supported .wav and .mp3 files as a primary audio format since version 1.0. Since different HTML5 browsers support different audio formats, in5 also has a fallback mechanism that checks for audio files with the same name but a different extension to include as alternate sources. Previously, in5 would only search for an OGG file as a fallback. In v1.4, in5 also does an additional search for MP3 and WAV files as fallbacks. So, for example, if you place intro.mp3 into an InDesign document, in5 will search for intro.ogg and intro.wav (in the same folder) to use as alternate sources for browsers that support those formats.
Dialog Loading Time
Before displaying the export dialog, in5 collects information about document swatches to use as options in the dialog. A user discovered that having hundreds of swatches in their document could cause a significant delay before the in5 dialog appeared. We’ve added a time limit to swatch collection in v1.4 to help remove this delay.
We like to have a theme with each major update of in5. Version 1.3 is all about interactivity. Just like the previous updates, this one is heavily driven by user requests. The interactivity listed below is already built into InDesign, so there are no new panels or vocabularies to learn, just added support for some awesome InDesign features.
Multi-State Objects (MSOs) in InDesign allow you to create something akin to frames within a single object. That object can then be controlled by other elements on screen. The possible uses for MSOs extend far and wide, from slideshows to popups and user feedback.
It’s possible for a designer to create a highly interactive experience without coding by using multi-state objects, buttons, and forms (like this page created for the demo video below).
Shlomo Goltz, one of the original Kickstarter backers for in5, recently wrote an excellent article in Smashing Magazine, arguing in favor of InDesign as a prototyping tool because of its feature set. We couldn’t agree more. The video below shows how to create an interactive prototype entirely in InDesign (and exported with in5, of course).
Along with supporting MSOs, in5 v1.3 also supports the behaviors that can be associated with MSOs: Go to Next State, Go to Previous State, and Go to State.