This page will walk you through a basic frame-by-frame animation where multiple PNG files are displayed in succession. Functionally this is like a GIF, but superior due to better compression.

Create the Pose

For lack of better images, we're just going to reuse Florina's assets to make her cycle through different images.
  1. Open up your character and go to the Pose Maker. Click the Add Pose button in the bottom left.
  2. Rename your pose (the Id field) to 0-frames. This naming convention means the pose is only available in stage 0 (i.e. the character is fully clothed).
  3. Leave Base Height alone. 1400 is fine.

Create the Sprite

All images are going to appear on the same sprite, which will flip between them by animating the Source property.
  1. Click the Add Sprite button above the timeline..
  2. This will automatically open the file selection form to pick the starting image. Go up a directory and into Florina's folder and choose 0-calm.png
  3. The timeline is populated with a sprite named "calm" and Florina appears in the canvas. Beneath the calm title row are three property rows: Source, X, and Y.
  4. We aren't actually moving anything and the default position is fine, so X and Y are unnecessary clutter. Holding Ctrl, click X and Y (they will be highlighted white), and press Delete. You are left with only the Source property.
  5. You may note in the timeline that the sprite has a box 1 second in length. This length is actually meaningless, as once they appear, sprites will remain on screen for the rest of the pose (though you can change the opacity to make them invisible).

Animating the Source

Now it's time to animate by changing the Source image every so often. Let's go with 0.2s.
  1. Make sure your sprite is selected by clicking in the title row.
  2. Click the 2nd tickmark in the timeline to move the current time (red bar) to 0.2s.
  3. Click "Add Keyframe" which is near the Add Sprite button at the top.
  4. A diamond appears on the blue row, indicating that calm now has a key frame at 0.2s. The sprite's box has also shrunk now that there is an ending key frame. Again, sprite lengths don't really mean anything so you can ignore it.
  5. Click the diamond to select the key frame. In the property window, you'll see Keyframe: calm (0.2s) appear. "florina/0-calm.png" appears grayed out in the Source box because that is the most recent source used in the sprite.
  6. Click the ... button next to the source field to bring up the file selection. Navigate to Florina's folder again and choose 0-loss.png.
  7. The source field has been updated and is now black, meaning this is a key frame that is actively modifying the Source. Note in the timeline that a diamond has also appeared in the Source row at 0.2s.
  8. Click the dropdown arrow next to the play button and choose "Play Repeating". The animation will begin to play, but Florina won't actually animate! Why? Because upon reaching the end of the animation, it jumps straight back to the start and back to her original source, giving no time to display the 2nd frame.
  9. We need another key frame. We could repeat steps 3-5 again, but let's do something a little different this time. First, stop the playback by clicking the Pause button.
  10. Click the Source diamond at 0.2 and press Ctrl+C.
  11. The Source key frame has now been added to the clipboard. Click onto the 0.4s tickmark and press Ctrl+V. A new key frame appears at 0.4s.
  12. Change the source like you'd done in step 6. This time since the source was already populaed, it starts in Florina's folder. Convenient, huh? Choose 0-strip.png
  13. Paste another keyframe at 0.6s and set the source to 1-stripped.png.
  14. Change the playback mode to "Play to End" (dropdown arrow next to the Play button). This time the animation will play as expected.

Adjusting Ease

If you pay close attention, you'll notice that the animation is not spacing the frames out every 0.2s like you might expect. This is because the default easing method is "smooth", meaning the animation runs more slowly at the beginning and end than the middle. This is nice for moving an object so it doesn't look jerky, but for frame-by-frame animation it's not great.
  1. Click the squiggly arrow in the Source property row. . This brings up a list of ease methods. Choose "Linear". The squiggly line now becomes straight.
  2. Play the animation again. Now the frames display at a constant interval.

Looping

Maybe you want to see Florina suffer and strip her belt over and over. This is achieved by making the Source property animation loop.
  1. Hover over the empty space to the right of the Ease icon you changed in step 1 of "Adjusting Ease." A loop arrow appears.
  2. Click to toggle the frame as looping. The arrow remains when you mouse away now, and a repeat sign appears after the final key frame, indicating that the Source will now loop indefinitely.
  3. Switch back to "Play Repeating". Now in game she'll keep stripping to your heart's content, you meanie.
  4. We're back to the same problem of the last key frame not appearing though. To fix this, copy the first keyframe and paste it at 0.8s.
  5. Congratulations! You've completed your first pose! Assuming you followed all the steps, it should look similar to this:

The Easy Way

There is an easier way to setup a frame-by-frame animation using the "Create Sequence" wizard.
  1. Create a new pose by clicking the + above the list in the bottom left. Name this pose 0-sequence.
  2. Click the "Create Sequence" button.
  3. A form opens up where you can specify all the frames in the animation.
  4. Click the + to add the first frame. Choose 0-calm.png from Florina's folder.
  5. Click the + to add another frame. Choose 0-loss.png from Florina's folder.
  6. Add 0-strip.png and 1-stripped.png in the same manner.
  7. Change the "Time between frames" to 0.2.
  8. Click Okay. A sprite is added to the animation with all the frames added automatically.
  9. All that's left is to loop it as described in the Looping section above.
When adding frames, if you have files with incrementing names (ex. image1.png, image2.png, image3.png, etc.) then selecting the first will automatically pull in all the files in the sequence, simplifying things even further.