LATEST AWESOMNESS

How to Make Carousel in Animatron

If you’d like to attract users with carouseling the sequences of different animations, Animatron Player is capable of that, and it’s easy.

First, you need to create these animations in the Animatron Editor and publish their final variants you want to use.

When you publish an animation, you create a snapshot of it. Snapshot is a saved state of animation, so when you edit your project, no new changes are reflected in a snapshot until you create a new one.

When you publish an animation, you get a URL of a snapshot in response. When you open this URL in a browser, you see the last state of a 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 what should be done step-by-step:

(If you feel self-confident, you may just take a look at the final result, though)

Every “Playable Snapshot” link from a list above looks like http://clips.animatron.com/dc7d7b1e946fa43c53d012a22f3045e4, the difference is only in the ID of a snapshot.

If you add .json to this URL, i.e. http://clips.animatron.com/dc7d7b1e946fa43c53d012a22f3045e4.json, you’ll get the snapshot in a “raw” format, which 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 in a page now.

Add Player javascript in a <head> of your page:

1
<script src="http://player.animatron.com/latest/bundle/animatron.min.js" type="text/javascript"></script>

Create a target to place a Player inside, in a <body>:

1
<div id="player-target"></div>

Add the URLs of snapshots you plan to use in an array (so yes, it can be extended):

1
2
3
4
5
var snapshots = [
'http://clips.animatron.com/3a612e05fdb534e68c759af5e28cca99.json',
'http://clips.animatron.com/f33e5f0bcdb6a6a7a50e0759a7fb7e17.json',
'http://clips.animatron.com/dc7d7b1e946fa43c53d012a22f3045e4.json'
];

And, next to that, add this code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// configures Player to show itself transparent when nothing 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 to 'stop' event),
// try to load next snapshot and play it
player.on('complete', loadNextSnapshot);

Here you go, you’ll see your projects play one by one. Once more, here you may find 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. And it actually exists there. Here’s why: when player finishes playing previous snapshot, it starts loading the next one, and it takes a tangible amount of time to load it from remote resource. So there is a pause between these snapshots. If you don’t like the way it matches your design, you are free to configure EMPTY_BG and EMPTY_STROKE values in the code the way you want, same as ribbonsColor Player option.

To resolve flash-issues completely, you may include snapshots in JSON format directly into your page, it will change nothing but the snapshots array, it will look like this:

1
2
3
4
5
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 call load immediately from complete handler, you need to postpone it a bit, change loadNextSnapshot to:

1
2
3
4
5
6
7
8
9
var currentProject = 0;
function loadNextSnapshot() {
if (!projects[currentProject]) return;
player.stop();
setTimeout(function() {
player.load(projects[currentProject], animatronImporter);
currentProject++;
}, 1);
}

The final version.

This will guarantee a non-noticeable switch between your scenes, but on the other hand will make your page “heavier” to load at start.