How to Create Animated Set

Assets Library

Here at Animatron we are working on assets library for our users.

In the first version the library will contains the following categories of assets:

static icons
simple static paths: fill and stroke
static backgrounds
static characters
Clouds, Wind Gusts, Smoke, Water, Rain, Fire, Falling Rubble, Explosion etc
Audio Tracks 
Sound Effects 

We plan to add more categories in future and one of those new categories will be Animated Sets.

Animated Set

Animated Set is a background and a number of objects related to this background. Some of those objects can be static and some animated. The background itself is an object too. The background can be completely static or may have some animated elements in it. For example moving clouds or birds etc.

For example, let’s say we need to create several Farm-themed sets. It could be something like that:

First Farm set

Background: rural area, fields, sun is shining, clouds are moving
Elements: tractors, cows, sheep, haystacks etc

Some of those are static (fields, haystacks), some are animated, for example tractor has its wheels rolling, cows eat the grass etc The set can contain farm related sounds.

Second Farm set:

Background: farm backyard, barns etc.
Elements: all those farm animals, farm-related objects. Some are just there laying, standing, some are doing something simple.

Space/Moon set:

Background: moon surface, earth crescent
Elements: astronauts, lunar lander, us flag, aliens

Our users will be able to get sets as whole or as individual components. They can combine them, rearrange, send along some path, animate, they can create stories using those components and they can also edit them.

There could be more objects in a set than is needed, meaning that say the moon set could have 5 different astronauts in different poses, actions, suites. The idea is to give user a choice, not to create a complete scene in terms of composition and common sense.

Each set is like a Lego set from which you can compose something interesting and unique or if you want you can take several scenes and create something from them all.

Requirements for Animated Set

Currently all submissions to the library should be done manually, by sending a link to your project, but in nearest future we will automate the process. To comply with the process the set’s structure should follow these rules:

  • One set is one Animatron project.
  • Ideal dimensions of the project: 640x360, but if this size does not work for your set you may choose something else.
  • Name of the project will be name of the set.
  • Description of the project will be description of the set.
  • Tags of the project will be tags of the set.
  • The project should have at least 3 scenes named: Preview, Background and Objects. It could have more scenes, but those must be there.
  • Scene Preview contains background with some of the objects. Thumbnail of this scene will be used as preview for the whole set in the library.
  • Scene Background contains only background layers, i.e. it could be many layers for one background or just one.
  • Scene Objects contains all the objects which should be included in the set. They can be placed anywhere on the scene. Our script will pick them up. There should be exactly one layer per object.

There is only one requirements for Objects: each object should be on one simple layer, not Group layer, i.e. there should be exactly one object on a layer. Objects could be static or animated. Static objects are for things which are naturally static (stone), but can be moved by users to new location. It is preferably to design animated objects in such a way so that users can move them to new locations or send them along some path, i.e. so that they can be reusable to create some new settings or story. On most of the objects the animation should be subtle, i.e. open/close eyes, chewing gum, look left or right, walk, waving banner, shining sun, rotating wheels. The animation preferably should be looped.

Basically an idea is to create a construction set, like a Lego, of objects from which users can create some other scenes. Again most of the objects should be reusable.

Backgrounds may have moving parts or can be completely static.

Animatron Specifics

Currently Animatron does not support: shape morphing and tweening, anchor nodes tweening, skeleton/bones kinematics, frame by frame animation.

All those features will be supported soon with preliminary dates: frame-by-frame June, 2015; bone kinematic Fall, 2015; Shape/Nodes tweening - End of 2015.

Animatron does support the following tweens: motion, scale, skew, rotation, opacity, fill, stroke, shadow.

Animatron is a browser based software and as such is not really as powerful as desktop based software. The following rules should be applied when you design your assets in some other software (Illustrator etc):

  • Do not use complicated strokes or fills. Most of the assets should be have simple solid stroke or no stroke at all.
  • Try to minimize number of nodes on all paths.
  • If a detail is too small do not use it all.
  • Objects should be simple and number of nodes should be minimized.
All assets created in Animatron itself usually already simple and fast to draw.

Following these rules will make your animation really fast and responsive on Web!

All animations should be designed with those limitations in mind.

Suggested Workflow

  • First create your project with all your assets in any way you like, no special layer or scene structure etc
  • This first project may have several sets, with different background and different or overlapping objects
  • When you finish everything copy (Duplicate option in main menu) this project several times, one copy for each set
  • Then open each copy and transform it into a set, proper naming of scenes and layers. Use copy/paste and Scene duplications.

IMPORTANT: Please remember to make all your projects Unlisted.

IMPORTANT: Do NOT use Firefox with Animatron! Use only Chrome or Safari version 8+.

Submission & Payment

The work can be done on per set basis or per hour. It should be negotiated on case by case basis. If you are working with us via elance or odesk then everything is handled there. Otherwise we can arrange payments via paypal, bank wire transfer, credit card or western union.


Our goal is to make Animatron the best online animation software and we would appreciate your honest feedback. If you think something is done wrong or if something can be improved or added, if there are bugs (which are plenty) please report to us either using Feedback button right in the editor or by emailing at
Best feedback reports will get a bonus! And please do not make it all rosy, it has to be brutal truth! :)