This tutorial describes the creation of sprite animations from a sprite sheet, using Fireworks MX. The skills demonstrated here though can be adapted in other programs.
The first step in this tutorial is to chose a sprite sheet which we would like to use. For this tutorial I have chosen a basic animation that involves a spiny shell simply spinning on the spot. The sprite sheet for this animation is shown below.
Note: It is important that when you chose sprite sheets that background for the sheet is transparent. This makes it a lot easier when it comes to cutting out each individual frame. If you have a sprite sheet without transparency then you may have to do editing on the background depending on how you want he result to be.
To create a sprite animation we need each one of these pictures to be in its own frame. So firstly I used the Marquee tool to select the area of the first shell.
I then cut the shell out using Ctrl + X and then pasted it again using Ctrl + V. The shell should then have the dotted line around it if the marquee tool is still selected. This now only selects the shell and not the box that you drew before with the marquee tool. By cutting and pasting you have now put that shell on its own layer. If you then cut the shell out again and use the Ctrl + N to create a new document the settings as shown below should match the same size as the shell. Ensure that the settings are the same as shown below and click OK.
Fireworks MX cleverly matches the Canvas size to the most recently added object to the clipboard. When doing more complex sprites the canvas size may have to be constantly adjusted based on the size of the picture. In this example we are lucky as the first picture is the biggest of the sprites and since we want the animation to move on the spot there is no need for canvas size to change. Use Ctrl + S to save your work so far and call it whatever you want.
At the moment we have one frame worth of animation. To add extra frame we can use the add frame function on the Frame toolbar. If your frame toolbar is currently hidden then select Frame under the Windows on the taskbar. Then add a new frame using the add frame button on the frame taskbar. Click the button five times to add five frames.
Then return to the sprite sheet and use to technique as mentioned before to cut each frame and paste in each respective frame. To move from frame to frame double click on frame you want to go to in the Frames taskbar or use the navigation under the work area. Also when you return to your sprite sheet be careful and make sure that you are working on the layer with the sprites and not a blank layer which was created as a result of cutting and pasting.
If you have completed all of these steps then you should have a small animation which plays. No to get that as an animated gif. Go to file then export preview. Select Animated GIF under Format on the drop down menu and select alpha transparency.
This will ensure that the file is a GIF that animates and will be transparent. If you then click on the animations tab you can select the speed of the animation. The greater the values you enter per each frame the slower the animation. Once you have finished choosing your settings click export and then your done. My end result can be seen below.
