Animatron Help Center
Home
Animatron Studio: Animation and Webinars
Animation

How do I present my animations one-by-one using player?

Edited

If you'd like to attract users by creating a playlist of different animations, the Animatron Player is capable of doing this, easily.

First, you need to create these animations in the Animatron Editor and publish them as HTML5.

When you publish an animation, you create a snapshot of it. A Snapshot is a saved state of your chosen animation. When you edit your project afterwards, no new changes are reflected in the previous snapshot, until you Publish a new one.

When you publish to HTML5, you get a URL link of that snapshot as a result. When you open this URL in a browser, you see the last state of the project, exactly the way it looked before you pressed the “Publish” button. This URL looks like:
​ http://clips.animatron.com/dc7d7b1e946fa43c53d012a22f3045e4

Here is an example of this process.

I've created three simple animations with shapes moving from left to right, to show you the step-by-step process:

Every "Playable Snapshot" link from the list above, looks like http://clips.animatron.com/dc7d7b1e946fa43c53d012a22f3045e4, the difference is only in the ID of the snapshot. If you add .json to the end of this URL, i.e. http://clips.animatron.com/dc7d7b1e946fa43c53d012a22f3045e4.json, you'll get the snapshot in a "raw" format, which the Player understands. For the projects above, the corresponding URLs are:

  • Square: http://clips.animatron.com/3a612e05fdb534e68c759af5e28cca99.json

  • Circle: http://clips.animatron.com/f33e5f0bcdb6a6a7a50e0759a7fb7e17.json

  • Chick: http://clips.animatron.com/dc7d7b1e946fa43c53d012a22f3045e4.json

It's time to add everything into your page now.

Add the Player javascript in the <head> of your page:
​ <script src="http://player.animatron.com/latest/bundle/animatron.min.js" type="text/javascript"></script>

Create a target to place the Player inside, in the <body>:
​ <div id="player-target"></div>

Add the URL’s of the snapshots you plan to use in an array (meaning, you can continue to add more than only 3 URL’s):
​ var snapshots = [
'http://clips.animatron.com/3a612e05fdb534e68c759af5e28cca99.json',
'http://clips.animatron.com/f33e5f0bcdb6a6a7a50e0759a7fb7e17.json',
'http://clips.animatron.com/dc7d7b1e946fa43c53d012a22f3045e4.json'
];

And after that, add this code just below it:
​ // configures Player to show itself as transparent when nothing is loaded inside,
// see notice below for the reasoning
anm.Player.EMPTY_BG = 'transparent';
anm.Player.EMPTY_STROKE = 'transparent';
anm.Player.EMPTY_STROKE_WIDTH = 0;
// importer understands the format of animations which lie under given URLs
��var animatronImporter = anm.importers.create('animatron');
var player = new anm.Player();
// this function helps to cycle the snapshots
var currentSnapshot = 0;
function loadNextSnapshot() {
if (!projects[currentProject]) return;
player.stop(); // ensure Player is stopped
// load next snapshot
player.load(projects[currentProject], animatronImporter);
currentProject++;
};
// initialize the player with custom options
player.init('player-target', {
width: 200, // any width you like
height: 164, // any height you like
autoPlay: true,
drawStill: false, // NB: see notice below
ribbonsColor: 'transparent', // NB: see notice below
controlsEnabled: false });
// load first snapshot into Player and plays it
loadNextSnapshot();
// on every complete-playing event (different from 'stop' event),
// try to load next snapshot and play it
player.on('complete', loadNextSnapshot);

And there you have it! Your projects will play one-by-one, as seen here in the final result.

Important Notice
Depending on your connection and page design, you may or may not notice a flashing screen, appearing just between your scenes. This actually exists for a purpose, and here's why:
When the Player finishes playing the previous snapshot, it begins pre-loading the next one, and it takes a tangible amount of time to load it from a remote resource, resulting in a pause between these snapshots. If you don't like the way this appears with your page design, you are free to configure EMPTY_BG and EMPTY_STROKE values in the code, the way you want. The same goes for the ribbonsColor Player option, as well.

To resolve the flashing between your clips, completely, you may include snapshots in JSON format, directly into your page. This will change nothing, but the snapshots’ array will look like this:
​ var snapshots = [
{ /* JSON of a first snapshot */ },
{ /* JSON of a second snapshot */ },
{ /* JSON of a third snapshot */ }
];

Since now the loading will be synchronous, you can not expect to load immediately from complete handler. You must postpone it a bit by changing loadNextSnapshot to:
​ var currentProject = 0;
function loadNextSnapshot() {
if (!projects[currentProject]) return;
player.stop();
setTimeout(function() {
player.load(projects[currentProject], animatronImporter);
currentProject++;
}, 1);
}

Here is the final version, without flashing.

Caution:
This will guarantee an unnoticeable switch between your clips, however, this will make your page "heavier" to load at start.