Step-by-step tutorial for creating animated photo transitions

Before you start make sure you have the images you intend to use in JPEG form, and at the right size - which should be no larger than the maximum size you intend to use in your Flash animation. For a description of how to do this, see April's Outsider tutorial. For this example create photos that are the exact same pixel size as each other.

1. Create a new blank animation document (File>New>Animation).
2. Drag and drop the first photo onto the blank page.
3. Select the photo and give it a name. Click the 'Create new name' button
4. Create the second key frame by clicking the Copy frame button.
5. Rotate and resize the photo (tip: hold Shift while doing this to resize it around the center).
6. Adjust the transparency. In Transparency tool just drag the slider
   
   to be 90% transparent.
7. Click the preview button to see the first stage of your animation. That's the first photo spinning away and fading. Now we'll spin the new photo in.
8. Drag and drop your second photo onto the page.
9. Give it a new name with the 'Create new name' button.
10. Copy it to the clipboard (you'll need this later).
11. Rotate, resize and fade the photo as you did the first. Place it on top of the, just visible, first photo.
12. Create a third key-frame by clicking the 'copy frame' button again.
13. Delete both of the small photos and Paste the second photo you copied at step 10.
    
    The reason for this is that we no longer need the original photo 1, and we need to replace the second small photo with the original full size version, so the animation sequence from Frame 2 to 3 goes from the small rotated Photo 2 back to the full size version.
14. Position the full sized photo so it's in exactly the same position as the original one on frame 1.




You can do this by clicking on Frame 1 in the Frame Gallery, taking a note of the XY coordinates, and then click back onto frame 3 and entering those same coordinates. This ensures that when the second photo spins back it ends up at the exact same position as the original.
15. Preview your flash animation by clicking
    
    So now photo 2 spins back to full size.
    Neither photo stays around for any time and it repeats the whole animation. So let's now slow things down and put pauses in.
16. If you've not done so already open the Frame Gallery by clicking the button on the top toolbar. You can dock the gallery to the right of the screen by dragging it there.
17. You can see that each frame has a [display for 50cs] which means it takes half a second for each animation sequence between key-frames. To slow down the animation of the first stage click on "Frame 1 title" and then the Properties button to display the Animation Properties dialog.
    
    
    
    On the Frame tab, change the display period to be 100cs. Click "Apply" and then preview your animation.
    
    By clicking the Apply button the dialog remains on screen, which saves a lot of time if wanting to change the time or other parameters on lots of frames.
    
    Now lets hold the first image static for 2 second before it spins away.
18. With Frame 1 highlighted, click the Copy button. This creates a new Frame 4 at the top. Now carefully drag this Frame 4 down the frame Gallery and drop it below the Frame 1. It should look like this now.
    
    
    
    Now preview your animation again. And you'll see the first image stays static for 1 second, and then takes 1 second to spin away. It doesn't matter that Frame 4 appears before Frame 1 - the names are irrelevant when playing. You can rename the Frame in the Properties dialog and click, say to Frame 0 and click Apply.
    The reason this causes a pause is that there is no difference between Frame 0 and Frame 1, so no animation occurs. It just displays the static image for 1 second before it moves onto Frame 1 and start spinning.
19. Do the same to Frame 3. First change the display period to 1 second. Now Copy this frame as before to make a new Frame 4. Your frame gallery should look like this now




Preview you animation and you'll see the last frame now also stays around for 1 second.

As an exercise change the static periods to keep the photos on screen for longer. Also you might note the second photo spins back rather faster. Why should be obvious. See if you can fix this.

So we now have a nice animation, but when it transitions from the end to the start it's not a smooth transition. So to complete the cycle we need to fade from the second photo back to the first.
20. With frame 4 selected, copy this to create Frame 5. And now adjust the transparency of the second photo so it's 90% transparent. Resize and rotate so it's a small almost invisible image. Remember to hold Shift down when resizing to ensure it resizes around the center point.
21. Select Frame 0 and copy the first bitmap to the clipboard. Select the last frame, 5, and Paste in Place (Ctrl+Shift+V).
22. Now also resize, rotate and adjust the transparency. So now both images are small and almost invisible.
23. Copy frame again, to create Frame 6.
24. Delete both objects, so the page is blank. And now Paste in Place (Ctrl+Shift+V) again. This should put the full size first photo back exactly where it is in Frame 0 (because you copied in step 21)
25. Your animation is now complete. Preview it.
    
    
    
    As a last small point, you might notice that the first photo stays on screen for twice as long. Can you work out why?
    Answer: Because it's displayed on the last frame for 1 second, before cycling around to the first frame, which is also up for one second. To solve this you could either just delete frame 0 (select it and click the Delete button in the Frame Gallery), or you could adjust the display time of the last frame to be 0.

Tip: As with Photos in the .xar file it doesn't matter how many times you use a photo in the Flash animation, the file gets hardly any larger.

Tip: You can add numbers or text onto your key frames to help you understand where you are in your sequence. The text will appear at the start of the key-frame and vanish at the start of the next.

Click here to download the XAR file used in this animation.