ft-interactive/explainer

Name: explainer

Owner: FT Interactive News

Description: Explainer player component

Created: 2012-10-24 15:43:36.0

Updated: 2014-10-30 09:17:53.0

Pushed: 2013-02-18 09:40:43.0

Homepage: null

Size: 19532

Language: JavaScript

GitHub Committers

UserMost Recent Commit# Commits

Other Committers

UserEmailMost Recent Commit# Commits

README

Explainer

Usage
  1. Export the audio from Audition as both .mp3 and .oga (ogg) formats. It helps if both files have the same name.
  2. Put the audio files in your animation's folder.
  3. In Edge, open the code window ( ⌘E ). Then click the Stage item in the menu on left.
  4. Paste the Javascript snippet below into the code window.
  5. Ensure that paths to audio files is correct - no need for the file extension. The one below might not be quite right for you.
  6. Use the correct width parameter. 'wide' or 'narrow' are your options. See below.
  7. Edit the explainer's html file. Add <link rel="stylesheet" type="text/css" href="../lib/0.0.2/explainer-0.0.2.min.css"/> to the <head> of the HTML generated by Edge. This ensures styles are loaded immediately. Again, ensure the URL is correct.
  8. Add the fallback message in conditional tags just inside the body tag. An example of this is below.

Javscript Snippet for pasting into the Stage section of the Edge Code window:

var version = '0.0.2';

Edge.yepnope({
    load: [
        '../lib/'+ version +'/explainer-'+ version +'.min.js'
    ],
    callback: function(){
        IG.Explainer.create(compId, 'audiofilename', version, 'wide');
    }
});

HTML fallback message example:

<!--[if lt IE 9]>
   <div id="fallback" class="fallback fallback-overlay">
        <div class="fallback-msg">
         <p>Sorry, your internet browser does not support
         the technology used in this interactive graphic. Most likely you
         are using an older version of Internet Explorer.</p>
         <p>Please either upgrade to
         Internet Explorer 9, or view this interactive graphic in another browser such as
         Mozilla Firefox, Google Chrome, Safari or Opera.</p>
        </div>
    </div>
<![endif]-->

You may also like to try using Grunt to package (minify JavaScript files etc) the Explainer before publishing it. :-)

Troubleshooting

Adobe Audition doesn't let me export as .oga format. What should I do?

You can export as an 'ogg' file and then manually change the the file extension to 'oga'.

What standard settings do I need to use in Adobe Edge?

Normal (Wide)

Narrow

All

What should the Methode iFrame code look like?

Wide

<iframe src="http://interactive.ftdata.co.uk/path/to/explainer" width="792px" height="650px"></iframe>

Narrow

<iframe src="http://interactive.ftdata.co.uk/path/to/explainer" width="600px" height="450px"></iframe>

MORE HELP WITH EDGE

See the [Explainer wiki](wiki)
Hacking the Explainer library

We use the following libs and tools.

Getting started

$ git clone https://github.com/ft-interactive/explainer.git
$ cd explainer
$ npm install
$ grunt --help

Create a distribution package

$ grunt dist

Create a release package

$ grunt release

Notes

You'll need to serve the code out of a webserver that is set up to do the following:

This work is supported by the National Institutes of Health's National Center for Advancing Translational Sciences, Grant Number U24TR002306. This work is solely the responsibility of the creators and does not necessarily represent the official views of the National Institutes of Health.