6 Custom Solutions from the in5 Answer Exchange

Justin | extensions,InDesign,software | Wednesday, May 27th, 2015

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.

in5 v2.4 Adds Easy Analytics & Social Sharing

Justin | extensions,HTML5,InDesign,software | Monday, April 13th, 2015

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.

Grab the Tracking ID from Google Analytics

That’s it! No more setup required. No need to even look at the tracking code below the ID.

in5-2_4_analytics

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).

It’s free to sign up for Google Analytics.

Social Sharing Buttons

Have you created something with InDesign and in5 that you’d like people to share?

Now, a few checkboxes in the in5 dialog will do all the work for you.

in5-2_4_sharing

Fully functional buttons will then appear in your output.

in5-2_4_sharing_tweet

(more…)

Split Text Extension For InDesign Adds Options for Characters and Text Styling

Justin | extensions,InDesign | Tuesday, March 3rd, 2015

Version 1.1.0 of the Split Text extension adds options to break text into individual characters, as well as to break text based on styling. This version also fixes a bug with the GREP option.

Download

Sign-up for our newsletter and receive this premium extension for free.

If you’ve already sign-up for the newsletter, you can access the update using your original download link.

in5 2.3 Adds Lazy Loading Images for Faster Load Times and Convert Selections to Web Overlays for DPS

Justin | extensions,HTML5,InDesign,software | Tuesday, November 18th, 2014

Convert Selection to a Web Overlay

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.

Convert Selection to Web Overlay

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.

Split Text Extension for InDesign

Justin | design,extensions,InDesign | Thursday, September 25th, 2014

This extension is useful if you’d like to break apart text in order to quickly create buttons, animated sequences, or simply separate blocks of text that can be individually positioned.

Before and After using Split Text

This extension can split text into separate text frames by:

  • Paragraphs
  • Columns
  • Words
  • Characters (new to v1.1)
  • Lines
  • Manual Line Breaks
  • Text Styling (new to v1.1)
  • Tabs
  • Custom Text
  • or even Custom Grep Expressions

Split Text automatically remembers the last settings used and can be undone in a single step.

Download

Sign-up for our newsletter and receive this premium extension for free.

Looking for the reverse? Check out Merge TextFrames.