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

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.

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

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.

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.

How to Create Mobile Apps as a Non-Developer

Justin

So you want to create a mobile app. Who doesn’t these days, right? But you’re not a hardcore programmer, and maybe your budget won’t allow you to hire one.

So how do you create an app for one or more of these platforms?

iOS
Android
Windows Phone

Each one of these operating systems uses a different programming language, and each one is reasonably complex.

Is There Some Universal Language I Can Use?

Short answer: yes. It’s HTML, the language of the web.

HTML can easily be packaged into a mobile app for many platforms. One way to package HTML into an app is using the PhoneGap code library.

PhoneGap Build

If the idea of a “code library” sends shivers down your spine, fret not, because there is a web service called PhoneGap Build. PhoneGap Build has a friendly user interface and does most of the work on the server translating your content into apps, so you don’t have worry about “compiling” or other such developer activities. And, it’s affordable!

Getting Started

Keith Gilbert has a video course on Ajar Academy to get you started.

Check out the entire Create a Mobile App with in5 & PhoneGap Build course to see how to turn an Adobe InDesign layout into a mobile app without coding.

The Best Part of Using HTML: You Don’t Have to Know HTML

You don’t have to know how to code HTML (or JavaScript, or CSS) to create HTML content. You can use a visual tool like Adobe Dreamweaver or Adobe InDesign in conjunction with our InDesign to HTML5 exporter.

Bonus Tip

If you’re looking for a way create an app for an Amazon Kindle Fire, you don’t even need PhoneGap Build. You can submit your HTML content directly to Amazon and they’ll do the packaging for you.

in5 v2.2 – HD Images, Better Buttons, HPUB Packaging, Scrolling Frames Unleashed

Justin

Version 2.2 of in5 (InDesign to HTML5) is now available. This update is chalked full of fixes and new features. Here’s rundown of some of the features.

High Definition Images

There are 2 new Image Quality settings available:

High Definition
High Definition – Text Frames Only

These options allow you to export items at 144 ppi (essentially twice “normal” resolution). This is particularly useful if you’re targeting retina displays or you want your content to be crisp when zoomed in upon.

Better Buttons

in5 has supported InDesign buttons since its very early days. However, many buttons have drop shadow or glow effects applied, usually to the roll over state. When in5 queried InDesign to get the button dimensions, InDesign did not include the size of any outer glow or drop shadow in those calculations. So, the resulting button was often cropped a bit. No more!

in5 now traverses the objects within a button checking for effects that will alter the button’s size. The result is that buttons with outer effects now display as expected, with no need for any workarounds.

Automatic Packaging for Baker Framework and Liquid State

in5 now automatically packages files when exporting for the Baker Framework (.hpub file extension) or the Liquid State Publishing System (.zip extension).

The HPUB file can be posted directly to a server and used with Newsstand issues. The HPUB file is automatically created when you select Baker Framework (HPUB) as the Output format in the in5 dialog, and the file is saved to the same directory as the book folder.

A ZIP package is now also automatically created when you select Liquid State Publishing System as the Output format. This package can then be uploaded directly into a Liquid State project.

Scrolling Frames Unleashed

Scrolling Frames previously supported text, images, and buttons. Scrolling Frames can now support all types of content, including other Overlays like Slideshows!

Animation Triggered by Object States

We didn’t even realize it, but InDesign had an On State Load event to trigger animation within Multi-State Objects. A savvy user on the in5 Answer Exchange tipped us off to the feature, which allows animation to play when a specific Object State is visible. It’s very useful and it’s now supported by in5!

Ready to try out the new features?

Get the latest version of in5 now >>

DropBox as a Web Server in 3 Easy Steps

Justin

Important update: As of October 3, 2016, Dropbox is discontinuing the ability to render HTML content in-browser via shared links or Public Folder.

So you’ve got some web content, now what do you do with it? Typically, this is where you’d upload your content to a web server.

Maybe you’re new to creating web content and the idea of signing up with a web host is daunting. Perhaps you’re dipping your toe in the water, and you don’t yet need your own domain name. You just need a place to post your files so that others can view them.

Fortunately, there’s a cheap (in most cases free) and easy solution. You can use Dropbox to host web sites.

Step 1: Copy your site into the Public folder within your Dropbox Directory

You may want to create a subfolder, so that you can house multiple sites in your Public folder.

Important note: If your Dropbox account was created before Oct. 4, 2012, you will automatically have a Public folder. If your account is newer, you may have to request a public folder. (This may now require a paid account). See the Helpful Links section below for other options.

Step 2: Right-click and choose Copy Public Link

You can create a shareable link from any Dropbox file or folder, but if your file has dependencies (images, CSS files, JavaScript files, etc) the Public folder has an easier time linking to those files.

Step 3: Paste the link in your browser to test, or paste into an email to send

You now have a link to your site. Here’s a sample site I created using in5.

Optional: You can use a link shortener to create a more memorable URL.

Strengths of Using Dropbox as a Web Server

Cheap/Free
Fast
Easy
Built-in version control
Doesn’t require an File Transfer Protocol (FTP) application. Files can be managed from the desktop.

Weaknesses of Using Dropbox as a Web Server

No server-side scripts
URL is generic

Helpful links

Apparently, you can also services like DropPages or Pancake.io, you can create a small and simple website with minimal effort (even if you don’t have a Public folder in your acccount).

New to Dropbox? It’s a very useful service. Check out Keith Gilbert’s Up and Running with Dropbox course on Lynda.com to learn more about what you can do with Dropbox.

Need a Dropbox account? You can create one for free.