Dream Wash Transition
I started messing around with some more BitmapData stuff last night and came up with this transition which is a combination of perlinNoise, DisplacementMapFilter, blendMode and some simple alpha fading. Other than that, I don't have much more to say, so go ahead and click on the "Picture 1", "Picture 2", and "Picture 3" buttons to see the transition in action.
Actionscript:
-
import flash.filters.DisplacementMapFilter;
-
import flash.display.BitmapData;
-
import flash.geom.Point;
-
import flash.geom.Matrix;
-
import flash.geom.ColorTransform;
-
-
var base:MovieClip = this;
-
-
// --- THE IMAGES IN THE LIBRARY HAVE LINKAGE NAMES (pic1, pic2, and pic3) --- //
-
//There is also a MovieClip in the library (as well as on stage) with a TextField in it
-
-
//Text formats for the picture buttons
-
var rollOverFormat:TextFormat = new TextFormat();
-
rollOverFormat.color = 0xFF0000;
-
-
var rollOutFormat:TextFormat = new TextFormat();
-
rollOutFormat.color = 0x000000;
-
-
//Here we'll loop thru the buttons and assign the actions to them
-
for(var p:Number = 1; p<4; p++){
-
var link:MovieClip = base["link"+p];
-
link.linkName.text = "Picture " + p;
-
link.numb = p;
-
link.onRollOver = function(){
-
this.linkName.setTextFormat(rollOverFormat);
-
}
-
link.onRollOut = function(){
-
this.linkName.setTextFormat(rollOutFormat);
-
}
-
link.onRelease = function(){
-
for(var p:Number = 1; p<4; p++){
-
var link:MovieClip = base["link"+p];
-
link._visible = false;
-
}
-
//This starts the transition
-
fadeOutNow = setInterval(fadeOut,5,this.numb)
-
}
-
}
-
-
//This mask keeps the pictures from showing up in front of the buttons
-
var mask:MovieClip = this.createEmptyMovieClip("mask",this.getNextHighestDepth());
-
mask.lineStyle(0,0,0);
-
mask.beginFill(0,100);
-
mask.lineTo(300,0);
-
mask.lineTo(300,200);
-
mask.lineTo(0,200);
-
mask.lineTo(0,0);
-
mask.endFill();
-
-
/*Load the first image in to a BitmapData Object
-
Create the MC to house the BitmapData
-
And attach the BitmapData to the MC*/
-
var bmPicture:BitmapData = BitmapData.loadBitmap("pic1");
-
var picMc:MovieClip = this.createEmptyMovieClip("picMc", this.getNextHighestDepth());
-
picMc.attachBitmap(bmPicture, 1);
-
-
//Set the mask
-
picMc.setMask(mask)
-
-
//Initial values for the DisplacementMapFilter
-
var mapPoint:Point = new Point();
-
var componentX:Number = 1;
-
var componentY:Number = 1;
-
var scaleX:Number = 0;
-
var scaleY:Number = 0;
-
var mode:String = "clamp";
-
var color:Number = 0;
-
var alpha:Number = 0;
-
-
var bmTrans:BitmapData = new BitmapData(300, 200, false, 0);
-
var transMc:MovieClip = this.createEmptyMovieClip("transMc", this.getNextHighestDepth());
-
transMc.attachBitmap(bmTrans, this.getNextHighestDepth());
-
transMc._alpha = 0;
-
-
//Initial values for the perlinNoise
-
var randomSeed:Number = random(50);
-
var point1:Point = new Point();
-
-
//Using the "add" blendMode gives us the washed out look
-
transMc.blendMode = 8;
-
-
//The fadeOut function modifies the perlinNoise, the DisplacementMapFilter, and the alpha of the image
-
//It also changes the image once the alpha has reached 0
-
function fadeOut(nextPic){
-
if(transMc._alpha <100){
-
transMc._alpha+=5;
-
}else{
-
picMc._alpha-=5;
-
}
-
if(picMc._alpha <= 0){
-
clearInterval(fadeOutNow)
-
var bmPicture:BitmapData = BitmapData.loadBitmap("pic" + nextPic);
-
picMc.attachBitmap(bmPicture, 1);
-
fadeInNow = setInterval(fadeIn,5)
-
}
-
point1.x += 0.5;
-
point1.y += 0.5;
-
bmTrans.perlinNoise(100, 100, 2, randomSeed, true, true, 1|8, true, point1);
-
var disFilter:DisplacementMapFilter = new DisplacementMapFilter(bmTrans, mapPoint, componentX, componentY, scaleX+=5, scaleY+=5, mode, color, alpha);
-
picMc.filters = [disFilter];
-
}
-
-
//Once the alpha has made it to 0 and the image is changed,
-
//The fadeIn function modifies everything again... but in reverse
-
function fadeIn(){
-
if(picMc._alpha <100){
-
picMc._alpha+=5;
-
}else{
-
transMc._alpha-=5;
-
}
-
if(transMc._alpha <= 0){
-
clearInterval(fadeInNow)
-
for(var p:Number = 1; p<4; p++){
-
var link:MovieClip = base["link"+p];
-
link._visible = true;
-
}
-
}
-
point1.x += 0.5;
-
point1.y += 0.5;
-
bmTrans.perlinNoise(100, 100, 2, randomSeed, true, true, 1|8, true, point1);
-
var disFilter:DisplacementMapFilter = new DisplacementMapFilter(bmTrans, mapPoint, componentX, componentY, scaleX-=5, scaleY-=5, mode, color, alpha);
-
picMc.filters = [disFilter];
-
}