Spritesheet animations

Last Updated: Jul 22, 2016 11:36AM CEST

In this article

    There are occasions where you want to implement animations based on image frames, or even GIFs. In order to play and animate the sprite sheet, all you have to do is use our Spritesheet animation widget.

    How to use

    1. In order to use the Spritesheet animation, start by uploading the spritesheet to your media library.
    2. Once it's uploaded, right-click on it in the Media Library and select Download Image. On the page that opens, copy the URL from it in the address bar.
    3. Next, drag and drop the Spritesheet animation widget to the banner canvas.
    4. Double-click on the widget and paste the URL you copied earlier into the text area.
    5. In order for the widget to step through the sprites correctly, what you need to do is to specify the Amount of frames (sprites) that exists in the sprite sheet, the Amount of columns as well as the Amount of rows. If they are set incorrectly, the sprite animation will look wonky.
    6. To further adjust it to your liking, change the Frames per second to change the animation speed.

    Requirements

    All that's needed is a spritesheet (typically a PNG) with frames that are all equal in width and height.
     

    Tip

    If you want to have more control over your GIF animations, we highly recommend that you convert it to a sprite sheet. To do this efficiently, we recommend using SpritePlane

    Settings

    Settings Description Value type
    Number of frames The total amount of frames the sprite sheet has Number
    Frames per second How many frames of the sprite sheet that should be animated per second Number
    Play infinitely Whether or not the animation should keep playing once it's finished On/Off
    Sprite rows The amount of rows the spritesheet has Number
    Sprite columns The amount of columns the spritesheet has Number
    Previous Article Next Article

    RELATED ARTICLES

    support@bannerflow.com
    https://cdn.desk.com/
    false
    desk
    Loading
    seconds ago
    a minute ago
    minutes ago
    an hour ago
    hours ago
    a day ago
    days ago
    about
    false
    Invalid characters found
    /customer/en/portal/articles/autocomplete