There’s nothing more eye catching on a website than an animated picture. Done right, it can make your webpage spring to life, often being the first thing that a user will look at. It can be a great way of saying “look here” should a certain section of your webpage need it. But how do you make animated graphics?

Keep reading to find out how easy it is to make animated graphics in Adobe Fireworks.

Our above graphic is simply a few vector lines, one of which (the stickman’s arm) moves a small amount each time over a set amount of frames. It took us no more than 5 minutes with some quick tweaking to make the stickman look like he’s waving. So let’s take a look how to do it…

First of all, if you want to follow along with this tutorial, you’ll need to download our stickman PNG file. Right click on the image and “save image as…”.

Our stickman is made up of 5 vector lines - 1 for each leg, 1 for his body, 1 for both arms, and 1 circle for the head. We’ll move the vector that represents his arm to make it appear as if he’s waving.

Animations are made using frames. An image in the first frame is copied, the duplication is moved a slight amount, and then the same happens with frame two, until the animation reaches it’s conclusion.

To open the Frames toolbar in Fireworks, click ‘Window’ and then click ‘Frames’ if it doesn’t already have a tick next to it. Alternatively, Hold shift and press F2 on your keyboard. This will open the Frames toolbar as shown in the image above. We already have one frame in the example file and we want to make many more frames to animate our stickman. To create the second frame, click the ‘New/Duplicate Frame’ button at the bottom of the Frames toolbar. We will then get an empty frame.

Click on Frame 1 and select all (CTRL + A on the keyboard) of the stickman and copy (CTRL + C on the keyboard). Return to Frame 2 and paste (CTRL + V on the keyboard). This has moved a copy of our stickman from Frame 1 to Frame 2. We can now edit Frame 2 to make the stickman’s first movement.

Let’s select the stickmans arms (the vector path that represents his arms) with the sub selection tool . The sub selection tool allows us to choose individual elements within an object. For example: we may have a group of 5 vectors, and to move one and save having to ungroup everything, we can use the sub selection to just choose one element in that group. In this next step we are going to use the sub selection tool for selecting an individual vector point that makes up a vector path. Our stickman has one vector path making up his arms, and 4 vector points on that path (2 for his hands and 2 for his shoulders). Once you have click the arms vector path, you can then sub select the vector point. Vector points appear as small white boxes and when selected they turn blue. We have already selected our vector point in the above image. The two blue lines that protrude from the vector point we selected, control the line curve between our selected point and the right shoulder vector point, which we will discuss shortly. For now let’s simply drag our hand vector point a slight amount to create the first movement.

Above we can see the first movement of the hand vector point. We’ve only moved it a slight amount, but if we move it slowly over many frames, the animation will look smoother than it would if we completed the animation over fewer frames.

To demonstrate what we’ve achieved so far, we can press the play button in the Fireworks control bar. Our stickman is now moving, even if it does look a bit strange! You may find in your version your stickman is moving his arm a little faster. Let’s take a look at how to change the speed between frames…

In our above image we have 2 frames, both with 50 next to them. 50 is the number of milliseconds the frame will play before moving on to the next. When you want to change this value, simply double click the number and change in the ‘Frame delay’ box. Make sure ‘Include when exporting’ is checked so the animation works properly when we export it later on. You can experiment with the timing but we’re going to finish the animation before concentrating on the timing.

In frame two, the arm moves up but we also want to add a slight bend. Select the hand vector point using the sub selectiont tool again. The protruding blue lines allow us to control the bend of the vector path between the hand vector point and the right shoulder vector point. In the above image we move the top point to the left to make the arm look as if it’s bending from the elbow. Remember at any point you can undo an action (CTRL + Z on the keyboard) if you don’t like the change you just made.

We’ve continued with the above method; copying all of the stickman from our latest frame, pasting our stickman into a new frame, moving his arm slightly and repeating.

At frame 10 we are ready to animate the hand at the top of the arm. Don’t worry if you’ve used more or less frames at this point, we found 10 made the animation smooth but anything around that should look fine. The arm is now at a position where it will stay in place but the hand will continue to move back and forth. To do this we need to add an extra vector point. This new vector point will represent the wrist.

As before, select the arm vector path with the sub selection tool . To add an extra vector point we need to use the pen tool , which we made good use of in our previous tutorial: “Remove Background/Cut Out Image in Fireworks/Photoshop“, should you want to learn more. Here we’re just going to use it once so prior knowledge isn’t necessary. When you have the pen tool selected, click on the vector path where the wrist vector point should be. We can now move the top vector point that represents the end of the hand and the path (that represents the entire hand) will move between the top and wrist points.

In frame 11 and 12 we’ve moved the hand to the left and now it needs to go back. To save some time, we haven’t moved the arm back, instead, we’ve just copied the entire stickman from frame 11 into frame 13, and then frame 10 into frame 14. This has reversed the hand moving left and sent it back to the centre. We can then make frame 15 and 16 move the hand to the right. Frames 17 and 18 will then have frames 15 and 14 copied into them so the hand returns to the centre again.

In our animation we’re going to have the hand move left again, return to the centre and the arm then drops. We’ve already animated enough frames to do this so our next frames will repeat what happened in frames 11, 12, 13 and 14. The arm dropping is animated using frames 1 - 9 in reverse.

Our animation is complete with 31 frames but pressing the play button, it look’s a little slow. We can click frame 1 in the Frames toolbar, hold Shift on the keyboard, and select the last frame. This will select all of our frames. Now we can double click any one of the timing boxes next to a frame and change the timing for all frames. We’ve chosen 7 milliseconds for each frame, as it makes the animation appear smooth.

Play the animation and you should see your stickman waving at you! Should you be unhappy with any frame, you can simply select that frame and make alterations. You can also change the speed of a single frame should you want to have certain points slower/faster.

Now our animation is finished, we need to export it as an animated GIF file. Press F6 on the keyboard to open the ‘Optimize’ toolbar. Select ‘Animated GIF’ and choose the options we’ve chosen in the above image. These can differ but for our animation this will give us a nice quality and reasonable file size. We can then click ‘File’ and ‘Export…’ and save our animated GIF file onto our computer.

We now have an animated image ready to put on the web!

Take a look at our useful links below for different ways you can share your animations on the web.

discuss this topic to forum