Talkie

A tool for adding voiceovers to interactives and web apps, and for creating interactive animations and slideshows. (And more.)

The idea

Talkie is a tool for producing pieces of content – ‘Talkies’ – that combine the accessibility and story-telling strength of a video with the depth and explorability of a data-rich interactive visualisation.

At its simplest, creating a Talkie means adding an audio voiceover to an interactive map or visualisation so that users can be ‘talked through’ the content rather than approaching it cold and doing all the interpretation themselves. The Talkie JavaScript library makes it easy to trigger animations and other changes at the appropriate points in the voiceover introduction.

Talkie can also be used for producing interactive animations and presentations from scratch, or for enabling a video to take control of the website in which it sits.

Getting started

To use Talkie, include the library in your page, either by downloading a local copy or including the following line of code:

<script src="http://kiln.it/talkie-1.0.min.js" charset="utf-8"></script>

Note that Talkie relies on D3 for animations and other features. So be sure to include D3 as well:

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

Once that’s done, refer to the documentation and demos on Github:

Some things you can do with Talkie

1. Add a voiceover to your interactive

An easy way to make any interactive map or visualisation more engaging. First record a voiceover – as if you were talking a friend through the interactive to show them how it works and what’s interesting about the content. Include the Talkie library in your page, along with the voiceover in Ogg format (for Firefox) and MP3 (for other browsers). Add a big play button over the middle and specify what should happen when as the audio plays back, as described in the documentation. The result will give a similar effect to the introduction on The Carbon Map.

2. Create an interactive animation

Talkie makes it possible to create impressive interactive animations from scratch – à la Unburnable Carbon. Here’s how we do it. First, plan the animation by sketching out a storyboard and writing a script. Next, draw the various elements in a layered document in Illustrator (or your vector graphics programme of choice). Ensure that each element you want to manipulate independently is named in the layers palette. (In Preferences, choose to show layer names as XML IDs to avoid duplicates.) Export your graphic as an SVG, drop it into your interactive, along with the Talkie library and voiceover or audiotrack (as described above). Use Talkie to manipulate the SVG elements as required. In addition to simple tranformations such as fading in and out and moving elements around, it's possible to morph between two shapes, as long as they have the same number of points. So for example you could duplicate a complex shape in illustrator, manipulate the points into a new shape and then morph between the two. For a simple how-to example, see Heads & Shoulders demo.

3. Create an interactive slideshow

Talkie comes with a ready-to-use customisable slider module. This is a handy way to present all kinds of content; the user can browse the slides in their own time as with a normal slider or (assuming you include a voiceover audio track) press play and watch the presentation in the style of a video. A simple example would an audio slideshow for photos. Just drop a photo into each panel, add a voiceover and use Talkie to specify when in the audio track the slider should slide. A more complex example would involve triggering individual animations on arrival on each panel. This approach can be useful with or without an audio track.

4. Let audio or video take control

Talkie can turn a simple video (or audio track) into something more surprising and interesting, by enabling the video to control the webpage that it’s part of. For example, at any given timecode Talkie could resize or reposition the video, slide the page and highlight things on it, make the video fade out, add live links over the top, change the text on the page, and so on.

History

We developed the Talkie concept when creating projects such as The Carbon Map and Better or Worse. These early projects did not use the Talkie library, of course, since we hadn’t developed it yet, but the experience of creating them had a strong influence on its design and implementation. Since then we’ve used it in many of our projects, including In Flight and First World War.

We hope that releasing an easy-to-use library will help the Talkie concept become adopted more widely. Almost every interesting data interactive would be improved by the addition of a short Talkie introduction – and it’s so easy to do, there’s no excuse not to.