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

What is in5?

This short video will help you get a quick understanding of what in5 is, what it does, and who uses it.

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.

Triggering Animation with a Button

This video shows how to start an animated sequence with a button, as well as how to edit a motion path to create a diagonal animation.

Source files can be found in the premium version of the Creating Your First Interactive Document course.

Creating a 3-D Flip Card

This video shows how to start create a 3-D Flip Card that animates when you tap or click it.

Source files can be found in the premium version of the Creating Your First Interactive Document course.

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, Scaling, & Mobile

Scaling a Single Design to Multiple Devices

The Desktop Scaling Setting can be used to control how your design scales automatically on all devices (including tablets and smartphones).

Creating a Mobile-Friendly Reading Experience

You can create an SEO-friendly mobile reading experience without compromising your layout.

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.

Note that Desktop Scaling (above) is recommended for most projects, instead of Liquid Layout.

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

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.

Saving and Retrieving User-Entered Form Data

This video shows you how to use the Form Element Data widget which lets you save user data that is automatically restored when the visitor returns to the page.

Publishing Your Files

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.

How to Embed in5 in a WordPress Post

This tutorial shows you how to include HTML exported from InDesign with in5 inside a blog post using a free plugin.

Get the plugin.

Advanced Navigation

How to Create Scrolling Chapters, aka "Tall" Pages

This video shows you how to create scrolling chapters for using InDesign and in5. This feature was originally designed for the Baker Framework (no longer in use), but it works with several of the current output and page formats (other than the Flipbook and Liquid).

How to Create a Previous Page Button

This video shows you how to create a button that jumps back to the last page that was viewed.

Source files can be found in the premium version of the Non-Linear Navigation course.

How to Remove the Page Transitions

This video shows you how to remove the transitions between pages with the Custom Slide Transitions Enhancement.

Source files can be found in the premium version of the Non-Linear Navigation course.

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.