Spritesheet Tutorial

Problem: Can you outline the steps used to create the spritesheet animation from the “Finding Fruits” Scene_1 main screen?

Saola Animate version: 2.7.1

OS: Windows 10 Pro

Notes: I’d like to create a start screen with a simple animation like the waving palm tree in Finding Fruits, but I don’t know where to start. Can you outline the steps you used to create it? Thanks.


To create the spritesheet animation, you can follow the steps below:

Sprite Sheet

  1. Prepare a sprite sheet image which consists of multiple frames (For example: the palm tree image consists of 4 frames)
  2. Convert image to symbol.
  • Right-click image > Convert to Symbol without checking Create Playback check box.
  1. Create Sprite Sheet Animation
  • Double-click symbol to enter the symbol-editing mode.
  • Select the image > click the Properties pane > Image section > Create Sprite Sheet.
  • In the dialog:
    • Choose the Default Sprite mode.
    • Number of Rows: 4
    • Animation Duration: 1000ms

For more information, please refer to this tutorial: https://atomisystems.com/html5-animation/create-sprite-sheet-animation-saola-animate/

Loop Animation

  • In the symbol-editing mode > Add Event - Action for Timeline
  • Open Timeline Event Handlers dialog.
  • Add Start Timeline action to Complete event.

For more information, please refer to this tutorial: https://atomisystems.com/html5-animation/using-multiple-timelines/ and https://atomisystems.com/html5-animation/using-timeline-triggers-loop-animation/

Start Symbol in Main Timeline

  • From the Symbol-editing mode, double-click outside the symbol content on the Canvas to navigate to the closest parent symbol.
  • Click Insert Trigger on the Actions bar.
  • In the Timeline Trigger dialog: Add Action > Symbol > Start Symbol.


Thank you for taking the time to respond to my question.

I followed your directions to the letter and was able to create a basic animation consisting of 4 images converted into a Sprite Sheet. However, I still cannot see the animation when I preview it in my browser. I’m going crazy trying to figure out what I’m doing wrong. It is so frustrating. I have tried everything I can think of to get the animation to display, but it just doesn’t show up.

I have only 1 scene and the animation is the only element in that scene. The animation looks good when I preview it in the editing window but it’s nowhere to be found when I try to run it in my browser.

Can you think of what I might be doing wrong? Perhaps I have missed a step? I’ve recreated the scene and animation many times, each time following your instructions. I must be missing something.

Any help you may be able to provide would be greatly appreciated.


It seems that you inserted Trigger to start symbol in Timeline of the Symbol-editing mode(symbol (2)).

After adding Start Timeline action to Complete event, you can click the document name (animation (1)) in the hierarchy to navigate to the main document > insert Trigger at the beginning of the Main Timeline to start Symbol > Preview to see if it works.

If it still doesn’t work, please share your project, so we can check. You can email it or share the download link to support@atomisystems.com.