Have you ever wanted to learn to make a gif? It's pretty simple if you want to make something basic! So we are going to start with making a simple gif (pronounced jif not gif, apparently) with shapes!
First, you'll open Adobe Fireworks and open a new file (for demonstrative purposes I'm just making a 1000px x 1000px file at 72 dpi with a transparent background (your file does need to be 72 dpi since you will most likely be using this for the web, the transparent background is up to you).
Put a big shape onto your art board and give it some color
Now, if you are familiar with Photoshop, Illustrator, or Indesign then you should be used to seeing the layers panel on your screen. Layers in Fireworks work the same as layers in any other program and you can actually carry over a file from photoshop to fireworks and keep all of your layers (but that's a subject for another blog post). But right beside your layers panel tab is a tab titled States, go to this tab.
States is what you use to determine what your gif will look like! If you've ever seen a movie storyboard or a storyboard for animation, it's similar to that! Each state describes a different movement or change.
The first thing we are going to do is make our shape change colors in the gif. So you'll need to make a new state! You can either right click and chose to make a new state or look at the bottom of the panel and click the icon that looks like a sticky note.
Your new state should look blank.
For now, go back to your first state and copy your shape, then go back to your second state and paste it!
Now you can change the color of your shape either using a filter or the color panel.
Also, you can duplicate states by right clicking on them and choosing the "duplicate state" option and then choosing where you want it to go!
Now, go ahead and add 3 more states with the same shape and make all of your shapes different colors. Now we are going to make our shape move out of our gif frame. Duplicate your last state and put it at the end. Now move that shape a little bit to the left or right. Now Duplicate that state and put it at the end and move it a little more, keep repeating this until your shape is out of the frame.
Great! Once we export we'll see our shape disappear before our eyes! Now for the exporting. If you look to the right of your states you'll see numbers beside each one. This number determines how long that frame is going to last. We're going to slow ours down a bit. Double click the number, then change it to 40. Do this for each state. This will make the gif move slower. The higher the number, the slower the gif.
Now we are going to select what's going to be in our gif using a method called slicing! Your slice tool is under web in your toolbar. Select it and then click and drag over your shape- this should produce a green box.
Back in your states panel, hit the space to the left of the numbers on the top and bottom state to connect them- it should look like this when you've done that:
To the right of your window there should be a tab called Optimize, this is where you'll edit your export settings.
Click where it says Export Defaults and select Animated Gif Websnap 128. Also, make sure it'll be an animated gif not just a gif.
If you want the background of your gif to be transparent you can choose Alpha Transparency in the transparency options.
Once you've finished setting up, right click onto your green slice and click Export Selected Slice.
From there you can name your gif and save it! Just make sure that it saves as a .gif! Here's mine to show you what it looks like:
Hopefully that gives you an idea of what it's like to make gifs! Eventually we'll be posting more in-depth gif making tutorials, but this'll get you started on the right track! Happy gif making!