The following step-by-step instructions will show you how to create a Firestarter animation featuring three images that fade into each other. When you create your own animation, you can add as many images as you like and adjust the amount of time they appear onscreen to fit your own preferences.

There is also a video tutorial for this process located here.

1. Add three images to your animation using the Add New Image button in the Toolbar, which is located at the top of the screen. In this tutorial, we’ll call these images Image1, Image2, and Image3. All three images will appear in your workspace at the same time. To hide an image, click the eye icon in the Cutting Room for that image. The Cutting Room is located at the bottom left-hand side of the screen, and lists each element in the animation (images, sound, etc.), along with the Eye, Magic Wand, and Blank Space icons.

Note: Keep in mind that any hidden images will appear in your final animation — this option simply allows you to clean up your workspace.

2. Click the Magic Wand icon in the Cutting Room for Image1. A screen will appear prompting you to select which type of effect to use. Select Motion Effect.

3. In the screen that appears, select Fade In, and then click OK.

4. If you look at the Timeline, you will notice a pink bar labeled Fade In in the timeline for Image1. This indicates how long the effect lasts. By default, it will last for 50 frames. You can click and drag the right-hand side of this bar to adjust the amount of time the effect takes place. For the sake of brevity in this tutorial, we’ll drag it to Frame 20.

5. Click the Magic Wand icon in the Cutting Room for Image1, and select Motion Effect from the screen that appears.

6. In the screen that appears, select Fade Out, and then click OK.

7. You will now see another pink bar in the Timeline for Image1, this one labeled Fade Out. Click the middle of this bar and drag it so it begins on Frame 40, and then click the right-hand side of the bar and drag it so the fade-out effect ends on Frame 60. This will ensure that Image1 will display for 20 frames before it begins to fade out. In your own animation, you can have your images display as long as you like.

Note: Once an image fades out, it will not appear in the animation again unless you apply another effect that causes it to reappear.

8. Click the Blank Space icon in the Cutting Room for Image2. Click and drag the right-hand side of the Blank Space bar until it reaches Frame 40.

9. Click the Magic Wand icon in the Cutting Room for Image2, and select Motion Effect from the screen that appears.

10. In the screen that appears, select Fade In, and then click OK.

11. Adjust the Fade In bar for Image2 so it begins on Frame 40 and ends on Frame 60. (Starting to notice a pattern yet?)

12. Click the Magic Wand icon in the Cutting Room for Image2, and select Motion Effect from the screen that appears. Then select Fade Out and click OK.

13. Adjust the Fade Out bar for Image2 so it begins on Frame 80 and ends on Frame 100.

14. Click the Blank Space icon in the Cutting Room for Image3 and adjust the blank space so it stretches from Frame 0 to Frame 80.

15. Click the Magic Wand icon in the Cutting Room for Image3 and select Motion Effect from the screen that appears. Then select Fade In and click OK. Adjust the Fade In bar so it begins on Frame 80 and ends on Frame 100.

16. Click the Magic Wand icon in the Cutting Room for Image3, and select Motion Effect from the screen that appears. Then select Fade Out and click OK. Adjust the Fade Out bar so it begins on Frame 120 and ends on Frame 140.

And that’s it! As you can see, having images fade in and out of each other is simply a matter of overlapping the Fade In and Fade Out effects. You can now preview your animation using the Test Your Flash button on the Toolbar.