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:
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)
- Square: Animatron Project, Playable Snapshot
- Circle: Animatron Project, Playable Snapshot
- Chick: Animatron Project, Playable Snapshot
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:
It’s time to add everything in a page now.
<head> of your page:
Create a target to place a Player inside, in a
Add the URLs of snapshots you plan to use in an array (so yes, it can be extended):
1 2 3 4 5
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
Here you go, you’ll see your projects play one by one. Once more, here you may find the final result.
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_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
Since now the loading will be synchronous, you can not call load immediately from
you need to postpone it a bit, change
1 2 3 4 5 6 7 8 9
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.