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.

Hi,

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.

Regards

1 Like

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.

Hi,


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.

Regards