The Image Sequence element allows you to insert simple animations into your Graphic, using static images as a source.
This building block can handle two different types of sources:
A set of sequential images (PNG or JPG) contained in a zip file
One pre-composed, single image (PNG or JPG) sprite sheet
The maximum supported size is: 5 MB
1. Sequential images contained in a zip (Recommended)*
Compress all the individual exported image files into a .zip file, and upload it in the Source field, at the Image Sequence inspector panel.
Keep in mind:
All images must follow the same numbered sequence of file names: img_001.png img_002.png img_003.png
The prefix can be any text, as long as it is the same in all files
The numeric suffix has to exist and be sequential.
All images inside the zip have the same size in px
All images have to be of the same type (PNGs or JPGs, but all the same)
There should be no other files besides the images inside the zip
Animation or video editing tools like Adobe Premiere and After Effects let you easily export compositions as a collection of image files, one for each frame.
Image Sequence Settings
(1) Click on the image sequence element.
(2) Upload the .zip with the image sequence. After uploading it you will see the information about frames and images size.
(3) FPS: Set the amount of frames per second you want your animation to reproduce. This will determine your animation's speed.
(4) Loop: There are 2 types of behavior:
Enabled: The animation will be displayed in an infinite loop.
Disabled: Useful for animations you want to stop at their last frame, such as a lower third background.
2. Using a pre-composed sprite sheet
A sprite sheet is an image file that contains several smaller images (sprites or frames) in a tiled grid arrangement which, when played sequentially, makes the animation happen.
For example, this image:
Will be played as:
When using this way you need to:
(1) Click on the image sequence element.
(2) Upload the pre-composed sprite sheet.
(3) Two inputs will appear, there you will have to set how many columns and rows of frames your sprite sheet has.
Columns: Refers to the vertical frames you have in your sprite sheet. In the example above we have 3 coin columns.
Rows: Refers to the images put out horizontally in your sprite sheet. In the example above we have 2 coin rows.