Captions Module

Matt Karl edited this page Dec 17, 2015 · 19 revisions

The Captions module provides a standard way for playing back captions within your Application. The captions are relatively simple and work both with CreateJS and Pixi Text field objects.

Dependencies

Installing

In order to use the Captions module, make sure to include the module's JavaScript file within your springroll.json project file under libraries and librariesDebug.

"libraries": [
	"components/springroll/dist/core.min.js",
	"components/springroll/dist/modules/captions.min.js",
	"components/springroll/dist/modules/captions.min.css"
],
"librariesDebug": [
	"components/springroll/dist/core.js",
	"components/springroll/dist/modules/captions.js",
	"components/springroll/dist/modules/captions.css"
]

## Application Plugin

The Captions module options and properties that are added to the Application.

Options

  • options.captions (String, DOMElement) The output where to display the captions either the ID of a DOM element or a DOM element reference. Default is "captions" which is the ID of a DOM element.
  • options.captionsPath (String) The path to the captions JSON dictionary which is preloaded before the application initializes.

Properties

  • captions (springroll.Captions) The reference to main Captions object.

Usage

Creating a caption is pretty straightforward. Captions will work with both CreateJS and PIXI Text fields as well as DOM Elements.

var dictionary = {
	// Single line captions
	"Alias1": [{
		"start":0, 
		"end":2000, // times in milliseconds
		"content":"Ohh that looks awesome!"
	}],
	// multi-line caption
	"Alias2": [{
		"start":0, 
		"end":2000, 
		"content":"Love it, absolutely love it!"
	},{
		"start":2100,
		"end": 4500,
		"content":"Alright, let's do it again!"
	}]
};

// add the text field
var app = new springroll.Application({
	// Pass in the ID of the captions
	// HTML should contain: <div id="captionsDisplay"></div>
	captions: "captionsDisplay"
});

app.on('init', function()
{
	// Add the captions
	this.captions.data = dictionary;

	// Play a caption
	this.captions.play("Alias1");
});

SpringRoll Studio

If you aren't interested in creating a bunch of JSON captions by hand, we've created a handy tool for building captions for your project. Download the SpringRoll Studio app for your desktop (Windows and OS X).

CaptionCreator preview

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.