Hi gang!
I downloaded this Flash program that demos a list of cool banner transitions. It randomly starts with a banner; next to the banner is a list of transitions (Mask 1, Mask 2.....Mask 30)it will demonstrate; clicking one, the banner transitions to another randomly chosen banner. Any time the list changes (ie. a transition effect is chosen) the program executes that transition. You can also change the angle of the sweep of the transition, e.g. top to bottom, or left to right using a second radio button list.
I just want to adapt the program to one transition between banners (or images) but I'm not having much luck; the library consists of the two components List, and Radio button, and 30 Mask folders (some of the folders have 3 symbols in them).
Here is the code:
imageWidth = 450; imageHeight = 300;
//the movie clip in which the images in and masks are loaded:
img = createEmptyMovieClip("img", 2);
img._x = 140;
i = 0;
//generating a random nr. between 1-4 (a random image from the 4 images in the library):
rand = Math.round(Math.random()*4); if (!rand) rand++;
//attaching a random image
imgHolder = img.attachMovie("image"+rand,"imgHolder"+i,i);
imgHolder._width = imageWidth; imgHolder._height = imageHeight;
//adding the list event listener:
var listListener:Object = new Object();
listListener.change = function() { changeImage(); }
thelist.addEventListener("change", listListener);
//adding the radio group event listener:
var rbListener:Object = new Object();
rbListener.click = function(){ changeImage(); }
radioGroup.addEventListener("click", rbListener);
//changing image when clicking the list or radio group:
changeImage = function() {
//removes previous images:
ii = i-2;
removeMovieClip(img["inner"+ii]);
i++;
//generating a new photo number (different from the previous):
prev = rand;
rand = Math.round(Math.random()*4); if (!rand) rand++;
while(prev == rand) {
rand = Math.round(Math.random()*4); if (!rand) rand++;
}
//creating an inner movieclip which will contain the image (imgHolder) and the mask (masc)
inner = img.createEmptyMovieClip("inner"+i, i);
imgHolder = inner.attachMovie("image"+rand,"imgHolder",1);
masc = inner.attachMovie(_root.thelist.selectedItem.label,"masc",2);
//setting the mask according to rotation specified through radio boxes:
switch(radioGroup.selection.data){
case "original" :
masc._width = imageWidth;
masc._height = imageHeight;
break;
case "90r" :
masc._height = imageWidth;
masc._width = imageHeight;
masc._rotation = 90;
masc._x += masc._width;
break;
case "180r" :
masc._width = imageWidth;
masc._height = imageHeight;
masc._rotation = 180;
masc._x += masc._width;
masc._y +=masc._height;
break;
case "270r":
masc._height = imageWidth;
masc._width = imageHeight;
masc._rotation = 270;
masc._y += masc._height;
break;
default:
masc._width = imageWidth;
masc._height = imageHeight;
break;
}
//adding the mask to inner
inner.setMask(masc);
}
Right off, you can see the set up for the listeners for the changes to
theList which is the list of masks, and the rblistener for any radio button changes; either change can call the changeImage function. The specific
transition (mask) is referenced with the line:
Bookmarks