in5 Video Demos and Tutorials

The videos below demonstrate some of the features available with in5. For many of the videos, you can also download the source file or view the HTML5 output shown in the video.

Contents

General Videos

These videos offer basic introductions to in5 and its features.

Overviews

in5 in 2 minutes

This video provides a quick overview of in5.

v2 New Features

This video was the sneak peek of new features before version 2 was released. Several new features have been added since this video was produced. Check our blog for updates.

Tutorials

These videos show you how to use the features within in5 and InDesign.

Adding Interactivity

Custom Navigation Controls

This video shows you how to create your own navigation controls.

Creating a Toggle to Show/Hide Items

This video shows how to create a toggle button in InDesign and export to the web (or an app) using in5. The toggle button can hide or show items, depending on whether those items are already visible.

Creating an Interactive Prototype with in5

This video shows you how to add interactivity with InDesign (without using code) and export it directly to HTML5 using in5. Features shown: form elements, button behaviors, and multi-state objects.

Fluid Layout and Scaling

Intro to Liquid Layout

This video walks through some of the basics of Liquid Layouts, showing you to control how your designs scale on any device.

Scaling a Single Design to Multiple Devices - in5 Viewport Zoom Setting Explained

The Viewport Zoom Setting can be used to control how your design scales automatically on mobile devices (tablets and smartphones). This video provides a tour of versatile Viewport Zoom options and shows the results displayed on the screens of multiple devices.

Controlling the Appearance of Layout Items

Wrapping Text Around Object

This video shows you how to create text wrapping that will appear in HTML.


Or, even better than the technique above, use the Drag and Drop Anchoring (available as of InDesign CS5.5).

How to Embed HTML from in5 in Another Web Page

This tutorial shows you how to include HTML exported from InDesign with in5 inside another webpage or blog post.

Note: In version 2, the slider class has been renamed to anythingSlider-in5 and the 0 margin and padding settings automatically take effect when the width is equal to or smaller than the the window (or iframe), so in many cases the custom CSS step in the video above may now be skipped.

Advanced Rendering: Blend Modes

This video shows you how to ensure your output will match your InDesign layout, regardless of the availability of HTML5 features.

Note that in5 now includes native CSS blend modes for supported browsers.

Baker Framework

The Baker Framework is a free, open source code library that makes it easy to create mobile apps from HTML5 content.

Getting Started with Baker Framework Apps

This tutorial walks you through the basics of creating and testing a standalone iPad (or iPhone) with in5 and the Baker Framework.

How to Create Scrolling Chapters for the Baker Framework

This video shows you how to create scrolling chapters for the Baker Framework using InDesign and in5.

Extending in5 Output to Add New Functionality

Using Google Fonts with in5

This video shows you how to use Google Fonts with in5 to export HTML5 pages from Adobe InDesign, so that you can have beautiful fonts on any device. This same technique can be used with Adobe Typekit.

Advanced: Creating a Custom Menu using the Resources section within in5

This video demonstrates how to use the Resources section within in5 to extend your HTML5 output. This example shows how to create a simple navigation menu.