Web Design :: Lessons :: Animated GIFs
Frame-by-Frame Animation
Fireworks makes it easy to create a frame-by-frame animation. A frame-by-frame animation is like a flip book. The animation is made up of a number of different pages, or states, which are played together in succession to form the animation. To create more complex animation you can use an HTML5 editor such as Animatron.
- Add an image or some text to a new Fireworks document.
- Make sure the object is selected.
- Go to Modify>Animation>Animate Selection...
The window above lets you decide how you want your animation to play. The more states you use the slower the animation will go. You can use the Properties Pane at the bottom of the screen to edit these settings after you create your animation. Here is an explanation of the different settings:
- Move: This is the distance, in pixels, that the animation will move.
- Direction: The direction, in degrees, that the animation will move.
- Scale to: The size that the image will become as a percentage of its original size.
- Opacity: The starting and finishing opacity or the image. Opacity is a percent and refers to the percentage of the object that cannot be seen through. 100% means the image is not transparent at all.
- Rotate: The amount, in degrees, that the image rotates. You can choose to rotate it clockwise or counterclockwise.
Once you have created your animation you can hit the Play Button at the bottom of the canvas to see a preview of it. The last step is saving the image.
- Open the Optimize Tab.
- Change the image type to Animated GIF.
- Go to File>Export to save your animation.
Animated GIF is the only option in Fireworks to save your animation. If you do not complete this final step correctly you will only see the first state of the animation.
Creating a Slideshow
Creating an animated slideshow is pretty easy in Fireworks. First, we will need a few images to use. It is important when making a slide show that all of your images are the same size so you may have to do some cropping if your images are different size.
Slideshow Image 1
Slideshow Image 2
Slideshow Image 3
- Download the three images above to your network drive.
- Create a new Fireworks document that is 500 pixels wide by 333 pixels tall with a transparent background.
- Go to File>Import... and select the first image to import.
- Click on the canvas to import the image it. Move it around so it fills the canvas if necessary.
- Insert a new state by going to Edit>Insert>State.
- Repeat steps 3 and 4 to insert the second image and then create a third state to insert the final image.
The slides of the animation are now complete. If you hit the Play Button at the bottom of the Document Window you can see the animation plays. There is no delay between states, though, so that is something we will add in the final step.
- Go to File>Image Preview...
- Change the Format to "Animated GIF".
- Click on the Animation Tab.
- Set the delay of each state to the same number. 100/100 would be a 1 second delay.
- Click on the
Loop Button below the states and choose "Forever". - Click on Export... to save your animation.
You may also want to use File>Save to save a PNG copy of your animation. This way you can modify the settings at any time.
Your final animation should look similar to the one below depending on your delay settings.
