Create the Pose
This tutorial assumes you've gone through the Frame-by-Frame and Motion Tween Animation tutorials and have the basics down for navigating your way around the Pose Maker. As such, the steps will not be quite as detailed as before.- Create a new pose called 5-summon. This is taking place in Florina's dress removal stage, which is stage 5.
- Leave the base height at 1400.
Add Florina
- Add a sprite using 5-embarrassed.png from Florina's folder.
- Name the sprite "dress" since this is the sprite used while Florina still has a dress on.
Summoning Orb
Now that Florina is present to torment, the next step is to add a summoning orb, which will fall from the sky and land in front of her.- Add a sprite using ep_orb.png from Florina's folder and name it "orb".
- Zoom out the canvas a couple times since we want this to fall in from somewhere above the screen.
- Pan the camera up by holding the right mouse button and pulling the canvas down.
- Drag the orb above Florina's head a good distance. It needs to be high enough that it spawns outside the game window, whose exact height depends on the browser's window size. This image is using -1300.
- Create a key frame at 1:00s and move the orb to Florina's feet, Y: 1100.
- We want the orb to fall and bounce a few times before stopping. Conveniently there's an easing method that does just that. Click the ease icon on the Y property and change it to Bounce.
- The orb is going to stay centered, so you can kill any X frames that were created. Click the orb's X row and press delete to remove all key frames for the X property.
- You can play the animation now and watch an orb fall from the sky. Click the "Recenter scene" button next to the canvas' zoom out button to reset the zoom and view.
An Orb? Yikes!
Summoning orbs in SPNATI don't seem to work quite like they do in Fire Emblem Heroes, and Florina has firsthand experience. An orb falling at her feet can't be good, so let's make her react.- Click and drag the timeline marker's handle at the top of the timeline. As you move it back and forth, the preview will update instantly to reflect that point in time. By default this will snap to the tick marks. Hold shift to allow finer movements.
- Note: If you still have the orb sprite selected, while dragging you'll see that there are two orbs: a selected one that doesn't bounce and an unselected one that does bounce. This happens because the selected orb always uses linear easing and interpolation. Otherwise, modifying it would be frustrating since it wouldn't necessarily move to where you're trying to move it.
- Drag the marker to the point where the orb first hits the ground, which is somewhere around 0.4s.
- Select the "dress" sprite and add a key frame here. Change the Source to 5-loss.png.
- Type 0 in the Y value to put Y into the key frame.
- At 0.5s, set Y to -30.
- At 0.6s, set Y to 0.
- If you did this correctly, Florina will now hop in surprise when the orb hits the floor.
- The last thing to do is jump to 1:00 and change her Source to 5-shocked.png. This is important for the fade we'll be performing in a few steps.
Flash of Light
-
The orb has come to a halt. Time for it to work its magic. Let's make a flash of light explode outwards and fade away.
- With the time marker at 1:00, add a new sprite using ep_flash.png from Florina's folder. Name it "flash".
- Whoa! The sprite's box in the timeline starts at 1:00 instead of 0:00. This is known as a delayed sprite. It will not get added to the pose until 1:00s into the animation.
- You can adjust a sprite's delay by dragging the whole box left or right. For now, let's leave it at 1s, which is the point where the orb stopped moving.
- Select the key frame and move the Y position to 1145 so it's lined up with the orb.
- For fun, we're going to skew this sprite. Hold shift and position the mouse over the top edge of the sprite's selection box in the canvas and then drag it left to skew the sprite. Go with 20.
- We don't want the flash to appear immediately at 1 second, so select the key frame and change the opacity to 0.
- The sprite is going to grow larger and shrink back to its starting height, so let's set up the end frame right now.
- First, set Scale X and Scale Y to 1 so they get added to the key frame.
- Select the key frame in the timeline and press Ctrl+C to copy the whole key frame to the clipboard.
- Move the marker to 2:00s and press Ctrl+V to paste the sprite here.
- While we're at it, flip the Skew (X) on this new frame to -20.
- Jump the marker to 1:50 and set the opacity to 100.
- Grab a corner of the sprite's selection box in the canvas and resize it to cover most of Florina, ex. a scale factor of 15.
- Change the Easing Method for opacity, scale (X), and scale (Y) to use Ease-In-Out Cubic. This makes the flash bit faster in the middle when it's at its brightest.
- At this point when playing the animation, the orb should fall, Florina jumps, and then a flash of light bursts from the orb
Clothing Damage
-
Surprise, surprise. The orb's effect causes her dress to fade away. One way to do this would be to add a new key frame that changes the dress sprite's source, but we want something a bit more dynamic than an instant change.
- Add a new sprite using 6-shocked.png and call it undies.
- Due to the way 5-shocked.png and 6-shocked.png are cropped differently, they don't line up exactly. To minimize this, we want to delay adding the undies sprite until needed. Change the Start value in the Sprite Settings to 1.00. This is another way to move a delayed sprite's starting point in addition to dragging the starting key frame.
- As you can tell, this is Florina in her underwear. We want to layer this behind the dress sprite so that we can fade away the dress and reveal the underwear beneath it. Right now though, since undies was added later, it appears on top of dress.
- We could fix this like we did in the Motion Tween tutorial by toying with sprite layers, but lets use another approach. Grab the sprite's box in the timeline by its blue bar and drag it upwards until it's above dress. Make sure the Start point remains at 1:00.
- This reordered the sprites without specifying layers. It's effectively the same thing as if we'd added the undies sprite first.
- Switch back to the dress sprite and move the marker to 1:50 (the point where the flash is at full opacity). Keyframe: dress (1.5s) should be showing in the Property Window.
- Set opacity to 100. It was already 100 prior to this point, but this is the key frame where we want to first start reducing it.
- Click into 2:00 and move the opacity to 0. Change the Opacity's Easing Method to Ease-Out Cubic.
- Select the undies sprite again and click into 2:50. Change the Source to 6-embarrassed.png
- If everything's set up correctly, playing the animation will now cause her dress to fade away at the flash's peak. After a moment, she covers herself.
Orb Damage
It doesn't make sense for the orb to stick around if it's exploding, so let's get rid of it.- But first, let's make the orb spin so it looks more dangerous.
- Select the orb's key frame at 0 and set its Rotation to 0.
- Jump the marker to 0.25s and rotate it to 360 degrees.
- Set the Rotation property to loop by clicking the empty space in its row beneath the eyeball.
- Change the Rotation Easing Method to Linear. Otherwise it will repeatedly speed up and slow down while spinning.
- The point of this is to demonstrate that properties can animate independently from each other. The rotation will continue its 0.25s loop for the whole pose while the rest of the orb's animation plays once.
- Move the marker to 1:00 and set Scale X and Scale Y for the orb to 1.00.
- At 1:50, set Scale X and Scale Y to 1.5.
- Change the easing method for Scale X and Scale Y to "Ease-In".
- Select the orb's sprite again and add key frames at 0.6, 0.7, 0.8, 0.9 and 1.0s with Opacity 100, 0, 100, 0, and 100 to make the orb smoothly pulse in and out for a bit.
- Add a final key frame at 1:50 with Opacity: 0 so that the orb vanishes for good when the flash bursts.
- We want this to happen instantly. Set the Opacity's interpolation mode to None. This is the line segment to the right of the ease method and the left of the looping toggle.
- Play the animation. The orb vanishes now, but it also flickers instantly between 0.6 and 1.0 seconds when we actually wanted that to pulse in and out smoothly.
- Change the interpolation back to Linear and click on the Opacity key frame at 1.5s. Make sure you're selecting only the Opacity key frame and not the orb's general key frame at 1.5s.
- Right click the key frame and choose "Split animation." The diamond turns into a half diamond.
-
Play the animation again. Now it pulses like we wanted, but also instantly disappears at 1.5s. A "split" marks a new set of keyframes. Once the animation reaches the last key frame before a split, it will stop there until the time reaches the split frame, at which point it will immediately jump to the new value.
- Split animations also allow for a new set of interpolation/easing methods for the property, so you ease-in the first few key frames, split the animation, and use linear for the rest.
Congratulations!

Your final timeline should look similar to above when finished. That's it! You've made it through the tutorials. Hopefully this has given you a pretty solid understanding of the basics of the Pose Maker.