Authoring Image Transitions (Part 1)
It is easy to create a large variety of image transitions using the SWiSH Max4 feature Break | Break into Pieces and then applying one of the many Disappear from Position effects. The example below demonstrates some of the possibilities.
As this technique requires the use of Break | Break into Pieces. The techniques described below should work with Max2, Max3 and Max4 although only Max4 users will be able to open the example file. Sorry, but miniMax4 users are unable to use this technique.
The steps below detail the procedure.
Use menu Insert | Import Image… to import multiple images. To select multiple images hold the Ctrl key while selecting the images from your image folder. After the import, the Outline Panel should look similar to the image at the left.
It is easiest if the images have the same dimensions and aspect ratio. I used images that were 400×300 pixels in size. These images were of medium jpeg quality. Typically they are about 50k in size.
Note: Higher quality larger images will result in a larger exported movie size. This will affect the load time of your movie.
While all of the images are still selected, adjust the position and size as needed.
Once the images have been ordered, copy the top image and Paste in Place. Then, in the Outline Panel, move the copied image to the bottom of the tree.
The images are displayed simultaneously. Then at various points in the timline, the images are removed using a Disappear from Position effect. The top image in the Outline Panel is removed first. The last remaining image (Sunset.jpg) which is a copy of the first image is used for continuity as the Movie clip loops.
Break into Pieces
In the Outline Panel, right click on the top image and choose the option: Break | Break into Pieces.
Break the image as desired. The settings I used are listed below under the Example Settings & Downloads heading. Note that breaking an image into a large number of pieces will cause the exported .swf movie to be larger. I recommend that the number of pieces be < 400. In many cases a smaller number of pieces will yield a better effect.
In the Timeline panel add place effect for each of the image groups in frame 1. Do this by right clicking in the frame and then selecting the Place effect. As effects will be used later in the timeline to make the images disappear, an initial place effect is needed so that the image is displayed before the start of its disappear effect. As the images are stacked on top of each other, initially, only the top image will be visible.
Add Disappear from Position effects to each of the grouped images. Add the effect for the top image at frame 25. The effects for the remaining images should be added at frames: 75, 125, 175, 225 and 275. I think the transitions have a smoother look if the effect length for all effects is adjusted to 25.
Experiment with the chosen effect to see what looks best. The effects used in the demonstration are are listed below under the Example Settings & Downloads heading.
If you press the preview button, you should see the transitions working.
Add a mask
It is possible that with the chosen effects, pieces of the previous image appear outside the new image. If desired you can mask to show only the picture area.
To add a mask, select all of the images in the Outline Panel, then right click | Grouping | Group as Movie Clip. Name the movie clip something descriptive (e.g. “pics”) and expand it in the Outline Panel. The Outline Panel should look like the one shown to the left.
Inside the new movie clip, draw a rectangle the same size as the images (400×300 in my example).
Name the rectangle “mask” and position it so it overlays the images exactly. In the Properties Panel, set the fill type as Solid.
Move the mask rectangle to the bottom position in the Outline Panel.
In the Properties Panel for the pics movie clip, set the Use bottom object as mask checkbox.
Pressing the preview button now should show the transitions constrained to the area occupied by the images.
Add a preloader
It is possible that the resulting .swf file will be large. This can be due to a large number of images, images that contain too much detail or images that have been broken into too many pieces. Consider the size of the exported .swf file. If it is above 180kBytes it may be worthwhile adding a preloader.
To add a preloader, see this blog article.
Example Settings & Downloads
The example Max4 .swi file can be downloaded from here. The techniques described above should work with Max2, Max3 and Max4 although only Max4 users will be able to open the example file.
The Break into pieces settings and the associated effects for the sample .swi are shown in the table below. Where an effect has had its custom settings altered (see the Effect panel), those alterations are noted with the effect settings.