Transforming one image into another is a popular animation technique. Adobe Fireworks has many tools to do this; picking the right one for each type of transformation is the key. In this tutorial we will look at the animation technique of fading one image into another, using parallel crossfading of two animated symbols. As part of the exercise, we will make the following simple fade animation:

Overview

Basically, we are going to pair up a fade-out Object 1 with a fade-in Object 2 and vice versa, creating the illusion of one image fading into another. The following diagram illustrates how this works:

This exercise is comprised of the following steps:

1. Fading from first image to the second
2. Fading back to the first image
   
3. Where to go from here
4. Recommended reading 
   

Fading from first image to the second

1. Bring in your first image. I'll start with a simple red ellipse on a 100x100 white canvas.
   
   


2. Press F8, give your symbol a descriptive name and select "Animation" as the type of symbol.
   



3. In the next window, specify the animation characteristics of the symbol. To get a complete fadeout, lower the final opacity to 0. For a smooth animation, give it a long duration, like 20 frames.
   
   



4. Next, bring in the second image into a new layer. Mine is a blue ellipse with the same dimension and positioning as the first one. Turn it into an animated symbol as described above. When specifying the animation, set the starting opacity to 0 and give it a duration slightly longer than that of the first symbol. I set it to 25 frames. 

Play the animation; you will see that now we have a smooth fading of the first object into the second. In the next few steps we will extend this animation to fade back to the first object.

Fading from second image to the first 

1.  Go back to the first frame of the animation and copy the first (red) symbol. Jump to the end of the animation. You'll see that both layers are emtpy. Paste the copied first symbol into same layer it was on the first frame.
2. From the Property Inspector, reverse the opacity values (0 to 100). Also, give it a duration of 20 frames.
3. Again, return to the first frame. This time, copy the second object. Jump to Frame 25 and paste the object into its respective layer.
   
Use the Frames panel to quickly jump to the desired frame.
4. Like before, reverse the opacity values of this symbol using the Property Inspector (from 100 to 0) and set the duration to be 19.
5. Play the animation again and erase any empty frames at the end of the sequence that have been introduced when we copied the second symbol but changed its duration. (Delete the frames using the  trashcan icon on the lower right corner of the Frames panel.)

Where to go from here 

You have just created a seamless fading of one image into another using Fireworks animation. Congratulations! Download the source file (png, 105KB)

Recommended reading (Adobe Livedocs)

Working with animation symbols