Authoring Image Transitions (Part 1)

1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 5.00 out of 5)
Loading ... Loading ...

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.

Import Images

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.

Re-order the images as required. The image at the top will be displayed first.

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.

Except for the bottom image, break all of the remaining images into pieces. The Outline Panel should now look like the one shown to the left.

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 Effects

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.

The size and position can be set precisely using the Reshape Panel.

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.

Image Name Break into pieces properties Effect settings
Sunset.jpg Come in – Bye Bye. 25-50
Sunrise.jpg Explode down. 75-100
Sunrise at Beach.jpg Wind – Vaporise 125-150
surfer.jpg Wild – Boring One 175-200Color change set to 0
Sunrise (3).jpg Random spin and rise 225-250Fade set to 100
Sunrise (2).jpg 3D Spin out 275-300Color change option to to 0.Fade option set to 0.

Tags:

4 Responses to “Authoring Image Transitions (Part 1)”

  1. Eddie Guerrero says:

    HOT!!!!

  2. Johann says:

    Thanks !! cool stuff

  3. I’m really loving the theme/design of your weblog. Do you ever run into any internet browser compatibility problems? A number of my blog visitors have complained about my website not working correctly in Explorer but looks great in Firefox. Do you have any ideas to help fix this problem?

    • jonh says:

      Hi Bert,

      Thanks for your comments. We use WordPress for the blog. I have seen minor differences with regard to bullet points and code segments between firefox and IE but both seem to generally work ok (in my experience).

      A number of our diagrams and animations are done using flash movies created in SWiSH. A recent flash player should be installed to view these correctly.

      Jon


Switch to our mobile site