Authoring Image Transitions (Part 2)

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

The Image transitions described in Part 1, rely on applying effects to grouped objects. This technique works well, but can’t use shapes other than the ones created by the break into pieces option. The ClipClone component, in conjunction with movie clip masking and some scripting, can be used to create an infinite number of image transition effects based on specific shapes (circle, square etc). Some examples are shown below.

Step 1: Use ClipClone to create a “Dynamic” mask

Drag the ClipClone component from the Components | Utility area onto the stage.

In the Parameters Panel, change the parameters:

  • Number of Items -> 1,
  • Arrangement -> Horizontal,
  • A -> 16 and
  • B -> -3.

(If the Parameters Panel is not visible, it can be made visible using the main menu | Window option.)

Expand the component in the Outline Panel and draw a 28×28 square. Then delete the existing logo shape.

In the Outline Panel, right click on the shape and choose the Convert to Movie Clip. The Outline Panel should now look like this:

Rename the new movie clip “appear” although any name would suffice.

With the “appear” movie clip selected, right click on frame 1 of the timeline and choose Movie Control | stop().

With the same movie clip selected, right click on frame 4 of the timeline and choose Frame | setLabel(…). Enter “appear” for the label name.

In the properties panel check the Stop playing at end checkbox.
Now right click in frame 4 of the timeline panel for the shape object (the square) and add a place effect. The final timeline should look like the one shown to the left.

Note that effects other than the place effect could be used here. Choosing other effects such as Fade in, Wild – Web or other Appear into position effects as well as altering the duration can add variety to your image transitions.

Add the following script to the ClipClone movie clip:

onFrame (1) {
 const N=192;
 var showorder = new Array();
 var i:Number;
 for (i=0;i<N;i++) {
 showorder[i] = i;
 }
 for (i=0;i<N;i++) {
 // shuffle
 j = Math.randomInt(N);
 k = Math.randomInt(N);
 temp = showorder[j];
 showorder[j] = showorder[k];
 showorder[k] = temp;
 }
 i = 0;
}

onFrame (2) {
 setLabel ("starttransition");
 lim = i+5;
 if (lim > N) lim = N;

 for (j=i;j<lim;j++) {
 this[indexToName(showorder[j])].gotoAndPlay("appear");
 }
 i+=5;    
}
onFrame (3) {
 if (i < N) {
 gotoAndPlay("starttransition");
 }
}

Script Explanation

The onFrame (1) section defines the number of objects within the ClipClone component (const N=192). It then creates an array of numbers 0..n-1 (first for loop) and then shuffles those numbers into a random order (second for loop). It then sets the array index to 0 for the following frames.

The onFrame (2) section causes the next 5 movie clips to start playing from the appear label. The clips are ordered according to the number in the next position within the sortorder array. The upper limit (lim) is set by i+5 or N whichever is less.

This loop causes the next 5 clips to start playing:

for (j=i;j<lim;j++) {
 this[indexToName(showorder[j])].gotoAndPlay("appear");
 }

After the movie clips have been played, i is incremented by 5 for future use.

The onFrame (3) section causes the timeline to repeat frame 2 if “i” is still less than the number of items in the ClipClone component. This is achieved with the if statement:

onFrame (3) {
 if (i < N) {
 gotoAndPlay("starttransition");
 }
}

As the ClipClone component has the Stop playing at end checkbox checked. Play stops automatically once the play head moves past frame 3.

Testing

Set the Stop playing at end checkbox and set the Number of Items in the Parameters Panel to 192.

In the main movie timeline, if you add a place effect at frame 1 and a remove effect at frame 50.

When you press the preview button, you should overlapping squares randomly appear as shown in the example movie clip below (see the overlappingsquares.swi file within the sample files .zip file).

The mask can easily be altered for different effects by altering the shape or the effect that is applied to the shape within the “appear” movie clip. If the shape or effect is altered, press the ClipClone update button in the Parameters Panel to re-copy the changes.

Note that the shapes should overlap slightly so that no background can be seen. The amount of overlap can be adjusted using the “B” parameter for the ClipClone component.

The number of shapes can be adjusted, however you must then change the script value of N defined in the onFrame (1) event.

const N=192;

The aspect ratio can be adjusted by altering the ClipClone parameter “A“. This parameter represents the number of shapes in each horizontal line. However, it doesn’t really matter if the mask is larger than the image.

The speed of the transition can be adjusted by altering the number of items that start playing in each frame.

For example, to speed things use a number > 5 in the script:

onFrame (2) {
 setLabel ("starttransition");
 lim = i+10;
 if (lim > N) lim = N;

 for (j=i;j<lim;j++) {
 this[indexToName(showorder[j])].gotoAndPlay("appear");
 }
 i+=10;    
}

In this example I have used 10 which doubles the speed of the transition.

Step 2: Add an image

Use menu | Insert | Import image to import an image onto the stage. Use an image of 400×300 if available or resize the mask using the transform panel to suit.

Remove the place and remove effects that were applied to the ClipClone component for testing.

In the Outline Panel, select the image and the ClipClone component, right click and then choose Grouping | Group as Movie Clip.

Name the movie clip something descriptive and set its Use bottom object as mask checkbox.

With the new movie clip selected, a place effect at frame 1 and a remove effect at frame 100. This creates the demonstration movie below. (See smallfish.swi in the sample .zip file).

Multiple transition movie clips can be then stacked on top of each other. Place and remove effects are then used to place each transition in the main timeline. (The transition starts when the movie clip is placed on the stage). See the example movie transitionsexample.swi (also in the .zip file).

Downloads

The sample files can be downloaded here. Although the techniques discussed should work in Max3, the sample files have been authored in Max4 and hence cannot be opened by Max3.

Tags: ,

One Response to “Authoring Image Transitions (Part 2)”

  1. Great, thanks for spend your time to wrote this. Is nice to read some “fresh” stuff :-P


Switch to our mobile site