All Collections
Animatron Studio: Animation and Webinars
Animation
How do I present my animations one-by-one using player?
How do I present my animations one-by-one using player?
Dmitry Skavish avatar
Written by Dmitry Skavish
Updated over a week ago

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

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.

Did this answer your question?