The FlashCanon Lab » displacementMapFilter http://lab.fincanon.com Jason Fincanon's Flash experiments and play time Thu, 25 Oct 2007 22:29:08 +0000 en hourly 1 http://wordpress.org/?v=3.0 Dream Wash Transition http://lab.fincanon.com/archives/15 http://lab.fincanon.com/archives/15#comments Fri, 11 Aug 2006 04:06:41 +0000 Jason http://lab.fincanon.com/archives/15 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.



PLAIN TEXT
Actionscript:
  1. import flash.filters.DisplacementMapFilter;
  2. import flash.display.BitmapData;
  3. import flash.geom.Point;
  4. import flash.geom.Matrix;
  5. import flash.geom.ColorTransform;
  6.  
  7. var base:MovieClip = this;
  8.  
  9. // --- THE IMAGES IN THE LIBRARY HAVE LINKAGE NAMES (pic1, pic2, and pic3) --- //
  10. //There is also a MovieClip in the library (as well as on stage) with a TextField in it
  11.  
  12. //Text formats for the picture buttons
  13. var rollOverFormat:TextFormat = new TextFormat();
  14. rollOverFormat.color = 0xFF0000;
  15.  
  16. var rollOutFormat:TextFormat = new TextFormat();
  17. rollOutFormat.color = 0x000000;
  18.  
  19. //Here we'll loop thru the buttons and assign the actions to them
  20. for(var p:Number = 1; p<4; p++){
  21.     var link:MovieClip = base["link"+p];
  22.     link.linkName.text = "Picture " + p;
  23.     link.numb = p;
  24.     link.onRollOver = function(){
  25.         this.linkName.setTextFormat(rollOverFormat);
  26.     }
  27.     link.onRollOut = function(){
  28.         this.linkName.setTextFormat(rollOutFormat);
  29.     }
  30.     link.onRelease = function(){
  31.         for(var p:Number = 1; p<4; p++){
  32.             var link:MovieClip = base["link"+p];
  33.             link._visible = false;
  34.         }
  35.         //This starts the transition
  36.         fadeOutNow = setInterval(fadeOut,5,this.numb)
  37.     }
  38. }
  39.  
  40. //This mask keeps the pictures from showing up in front of the buttons
  41. var mask:MovieClip = this.createEmptyMovieClip("mask",this.getNextHighestDepth());
  42. mask.lineStyle(0,0,0);
  43. mask.beginFill(0,100);
  44. mask.lineTo(300,0);
  45. mask.lineTo(300,200);
  46. mask.lineTo(0,200);
  47. mask.lineTo(0,0);
  48. mask.endFill();
  49.  
  50. /*Load the first image in to a BitmapData Object
  51.    Create the MC to house the BitmapData
  52.    And attach the BitmapData to the MC*/
  53. var bmPicture:BitmapData = BitmapData.loadBitmap("pic1");
  54. var picMc:MovieClip = this.createEmptyMovieClip("picMc", this.getNextHighestDepth());
  55. picMc.attachBitmap(bmPicture, 1);
  56.  
  57. //Set the mask
  58. picMc.setMask(mask)
  59.  
  60. //Initial values for the DisplacementMapFilter
  61. var mapPoint:Point = new Point();
  62. var componentX:Number = 1;
  63. var componentY:Number = 1;
  64. var scaleX:Number = 0;
  65. var scaleY:Number = 0;
  66. var mode:String = "clamp";
  67. var color:Number = 0;
  68. var alpha:Number = 0;
  69.  
  70. var bmTrans:BitmapData = new BitmapData(300, 200, false, 0);
  71. var transMc:MovieClip = this.createEmptyMovieClip("transMc", this.getNextHighestDepth());
  72. transMc.attachBitmap(bmTrans, this.getNextHighestDepth());
  73. transMc._alpha = 0;
  74.  
  75. //Initial values for the perlinNoise
  76. var randomSeed:Number = random(50);
  77. var point1:Point = new Point();
  78.  
  79. //Using the "add" blendMode gives us the washed out look
  80. transMc.blendMode = 8;
  81.  
  82. //The fadeOut function modifies the perlinNoise, the DisplacementMapFilter, and the alpha of the image
  83. //It also changes the image once the alpha has reached 0
  84. function fadeOut(nextPic){
  85.     if(transMc._alpha <100){
  86.         transMc._alpha+=5;
  87.     }else{
  88.         picMc._alpha-=5;
  89.     }
  90.     if(picMc._alpha <= 0){
  91.         clearInterval(fadeOutNow)
  92.         var bmPicture:BitmapData = BitmapData.loadBitmap("pic" + nextPic);
  93.         picMc.attachBitmap(bmPicture, 1);
  94.         fadeInNow = setInterval(fadeIn,5)
  95.     }
  96.     point1.x += 0.5;
  97.     point1.y += 0.5;
  98.     bmTrans.perlinNoise(100, 100, 2, randomSeed, true, true, 1|8, true, point1);
  99.     var disFilter:DisplacementMapFilter = new DisplacementMapFilter(bmTrans, mapPoint, componentX, componentY, scaleX+=5, scaleY+=5, mode, color, alpha);
  100.     picMc.filters = [disFilter];
  101. }
  102.  
  103. //Once the alpha has made it to 0 and the image is changed,
  104. //The fadeIn function modifies everything again... but in reverse
  105. function fadeIn(){
  106.     if(picMc._alpha <100){
  107.         picMc._alpha+=5;
  108.     }else{
  109.         transMc._alpha-=5;
  110.     }
  111.     if(transMc._alpha <= 0){
  112.         clearInterval(fadeInNow)
  113.         for(var p:Number = 1; p<4; p++){
  114.             var link:MovieClip = base["link"+p];
  115.             link._visible = true;
  116.         }
  117.     }
  118.     point1.x += 0.5;
  119.     point1.y += 0.5;
  120.     bmTrans.perlinNoise(100, 100, 2, randomSeed, true, true, 1|8, true, point1);
  121.     var disFilter:DisplacementMapFilter = new DisplacementMapFilter(bmTrans, mapPoint, componentX, componentY, scaleX-=5, scaleY-=5, mode, color, alpha);
  122.     picMc.filters = [disFilter];
  123. }

]]> http://lab.fincanon.com/archives/15/feed 0 Burn baby, burn http://lab.fincanon.com/archives/13 http://lab.fincanon.com/archives/13#comments Fri, 11 Aug 2006 04:06:22 +0000 Jason http://lab.fincanon.com/archives/13 ]]> Ok ok, so there's already been people making fire with Flash 8's perlinNoise, but I wanted to take a stab at it. A little mixture of BitmapData, DisplacementMapFilter, perlinNoise, and blendMode and voila! Houston, we have a fire.

]]> http://lab.fincanon.com/archives/13/feed 0