The FlashCanon Lab http://lab.fincanon.com Jason Fincanon's Flash experiments and play time Thu, 25 Oct 2007 22:29:08 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Hello MXNA readers, welcome to my lab http://lab.fincanon.com/archives/19 http://lab.fincanon.com/archives/19#comments Fri, 19 Jan 2007 14:55:27 +0000 Jason http://lab.fincanon.com/archives/19 I received an email yesterday notifying me that my lab has been added to the MXNA. It’s been a little while since I posted anything here, but I’ll be getting back to experimenting just as soon as I finish up with the book. Also, when I do get back to it, I’ll probably be mixing in some Flex experiments every once in a while.

On a side note, if you’ve posted a comment requesting code for any of these projects and I haven’t responded to you, I apologize and I’ll try to go through and answer (or post code) soon.

]]> http://lab.fincanon.com/archives/19/feed 0 soundSpectrumA 1.0 http://lab.fincanon.com/archives/18 http://lab.fincanon.com/archives/18#comments Sat, 14 Oct 2006 04:02:48 +0000 Jason http://lab.fincanon.com/archives/18 So here’s my first public run at ActionScript 3 and I figured I’d go with the awesome computeSpectrum (I love this thing). I included 4 different songs so you could see some variation on the output. Just click on the name of the artist at the bottom of the movie and off ya go.

]]> http://lab.fincanon.com/archives/18/feed 2 Code/source files for experiments http://lab.fincanon.com/archives/16 http://lab.fincanon.com/archives/16#comments Thu, 17 Aug 2006 17:37:18 +0000 Jason http://lab.fincanon.com/archives/16 From here on I’ll be including the code to reproduce some of my “projects”. If there are needed elements within the fla files, I’ll be including those as well. If anyone is interested in the code for any of the “projects” prior to this post, just write a comment to that particular post and I’ll get the code and/or source file(s) up as soon as I get a chance and make sure they are cleaned up a bit. Keep in mind that there may be reasons for not posting some of the projects’ code right away, but I will when I can.

]]> http://lab.fincanon.com/archives/16/feed 4 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 Galaxies of Math http://lab.fincanon.com/archives/14 http://lab.fincanon.com/archives/14#comments Fri, 11 Aug 2006 04:06:31 +0000 Jason http://lab.fincanon.com/archives/14 I started out this project wanting to work on some kind of fractal math and decided I would start with the Spleenwort Fern. After I got it where I wanted it, I started playing with the rotation. I couldn't decide which amount of rotation I liked best, so I just set it up to choose one at random every few seconds or so. After that, I just added a bit of a bluish glow and thought it resembled a galaxy. I'd have to add that I learned a good deal about the Matrix Object. Especially the translate and tranformPoint methods.

]]> http://lab.fincanon.com/archives/14/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 Ready for the storm http://lab.fincanon.com/archives/12 http://lab.fincanon.com/archives/12#comments Fri, 11 Aug 2006 04:06:12 +0000 Jason http://lab.fincanon.com/archives/12 How bout a little perlinNoise, Drawing API, and GlowFilter for ya? eh? I started playing with the BitmapData.perlinNoise method and came up with some moving clouds. From there, I added some rain and the lighting which my "northern lights" experiment was based on. After that, I figured I'd make the wind appear to gust by modifying the angle of the rain. Hope you enjoy it!


PLAIN TEXT
Actionscript:
  1. import flash.filters.GlowFilter;
  2. import flash.display.BitmapData;
  3. import flash.geom.Point;
  4.  
  5. //create the clouds
  6. var cloudBmData:BitmapData = new BitmapData(300, 225, false, 0);
  7. var clouds:MovieClip = this.createEmptyMovieClip("clouds", this.getNextHighestDepth());
  8. clouds.attachBitmap(cloudBmData, this.getNextHighestDepth());
  9. var cloudPoint:Point = new Point();
  10. var randomSeed:Number = random(15);
  11.  
  12. //function to move the clouds (cloudPoint.x controls the speed)
  13. function moveClouds(){
  14.     cloudPoint.x -= 0.3;
  15.     cloudBmData.perlinNoise(300, 225, 6, randomSeed, false, true, 1, true, cloudPoint);
  16. };
  17. var moveNow:Number = setInterval(moveClouds,10);
  18.  
  19. //set up the GlowFilter for the lightning
  20. var color:Number = 0xffffff;
  21. var alpha:Number = 1;
  22. var blurX:Number = 40;
  23. var blurY:Number = 40;
  24. var strength:Number = 10;
  25. var quality:Number = 3;
  26. var inner:Boolean = false;
  27. var knockout:Boolean = false;
  28. var gFilter:GlowFilter = new GlowFilter(color, alpha, blurX, blurY, strength, quality, inner, knockout);
  29.  
  30. //create a MovieClip to hold the lightning
  31. var ltng:MovieClip = this.createEmptyMovieClip("ltng", this.getNextHighestDepth());
  32.  
  33. //function to "create" lightning
  34. function lightning(startX,startY,endX,endY,theJag){
  35.     ltng.lineStyle(0,0xffffff);
  36.     if(theJag <1){
  37.         ltng.moveTo(startX,startY);
  38.         ltng.lineTo(endX,endY);
  39.     }else{
  40.         var midx:Number = (startX+endX)/2;
  41.         var midy:Number = (startY+endY)/2;
  42.         midx += (Math.random()-.5)*theJag;
  43.         midy += (Math.random()-.5)*theJag;
  44.         var branch:Number = random(500);
  45.         if(branch>495){
  46.             //create a "branch" from the lightning strike
  47.             lightning(midx,midy,endX+random(50)+50,endY+random(20)+20,30);
  48.         };
  49.         lightning(startX,startY,midx,midy,theJag/2);
  50.         lightning(endX,endY,midx,midy,theJag/2);
  51.     };
  52. };
  53.  
  54. //function to draw lighting
  55. function strikeIt(){
  56.     clearInterval(lightNow);
  57.     if(nextPoint <lPoints.length){
  58.         ltng.moveTo(lPoints[nextPoint][0],lPoints[nextPoint][1]);
  59.         ltng.lineTo(lPoints[nextPoint][2],lPoints[nextPoint][3]);
  60.         nextPoint++;
  61.     }else{
  62.         clearInterval(drawStrike);
  63.         nextPoint = 1;
  64.         var goNow:Number = setInterval(lightIt,100);
  65.     };
  66. };
  67.  
  68. //function to make/get length of lightning and choose to put it behind or in front of the clouds
  69. function lightIt(){
  70.     ltng.clear();
  71.     var strike:Number = random(500);
  72.     //if strike is greater than 460, create a lightning strike
  73.     if(strike>460){
  74.         var startX:Number = random(Stage.width);
  75.         var startY:Number = random(50);
  76.         var endX:Number = random(Stage.width);
  77.         var endY:Number = random(Stage.height)+100;
  78.         if(endY-startY<230){
  79.             //behind the clouds
  80.             gFilter.blurX = 80;
  81.             gFilter.blurY = 80;
  82.             gFilter.knockout = true;
  83.             gFilter.strength = 7;
  84.             //change the angle of the rain to give the look of wind
  85.             angle = random(50);
  86.         }else{
  87.             //in front of the clouds
  88.             gFilter.blurX = 40;
  89.             gFilter.blurY = 40;
  90.             gFilter.knockout = false;
  91.             gFilter.strength = 5;
  92.         };
  93.         ltng.filters = [gFilter,blur];
  94.         var lPoints:Array = new Array();
  95.         lPoints.push([startX,startY]);
  96.         lightning(startX,startY,endX,endY,80);
  97.     };
  98. };
  99.  
  100. var lightNow:Number = setInterval(lightIt,50);
  101.  
  102. //create one rain drop
  103. var rain:MovieClip = this.createEmptyMovieClip("rain",this.getNextHighestDepth());
  104. rain.lineStyle(1,0xffffff);
  105. rain.moveTo(0,0);
  106. rain.lineTo(0,-20);
  107. var angle:Number = random(50);
  108.  
  109. //loop thru to create more drops
  110. for(var r=0;r<60;r++){
  111.     duplicateMovieClip("rain","rain"+r,this.getNextHighestDepth());
  112.     var moreRain:MovieClip = this["rain"+r];
  113.     moreRain._x = random(500)-200;
  114.     moreRain._alpha = random(10)+5;
  115.     moreRain._yscale = random(50)+100;
  116.     moreRain.speed = random(50)+40;
  117.     moreRain._rotation = -angle;
  118.     //onEnterFrame applied to each drop to make it fall and reset to the top of the screen
  119.     moreRain.onEnterFrame = function(){
  120.         if(this._y<225){
  121.             this._rotation = -angle;
  122.             this._y += this.speed;
  123.             this._x += angle;
  124.         }else{
  125.             this._y = 0;
  126.             this._x = random(500)-200;
  127.             this._alpha = random(10)+5;
  128.         };
  129.     };
  130. };

]]> http://lab.fincanon.com/archives/12/feed 8 Blur Worm http://lab.fincanon.com/archives/11 http://lab.fincanon.com/archives/11#comments Fri, 11 Aug 2006 04:06:02 +0000 Jason http://lab.fincanon.com/archives/11 Well, here I am again with another experiment using BitmapData and BlurFilter. This time, there's a good bit more math involed in animating the... well, I'll just call it... umm... ringworm. heh heh. Click on the Skitzify button if you dare, but be careful with it because I couldn't see straight for a little while after watching that.

]]> http://lab.fincanon.com/archives/11/feed 0 Ah, those northern lights http://lab.fincanon.com/archives/10 http://lab.fincanon.com/archives/10#comments Fri, 11 Aug 2006 04:05:49 +0000 Jason http://lab.fincanon.com/archives/10 So this started out as a lighting project and as I was messing with the glow of the lightning bolts, I decided to see what it would look like if I blurred and moved them. I liked what I saw, I tweaked it a bit and ended up with what you see here.


]]> http://lab.fincanon.com/archives/10/feed 3 Exploding…twisting…spinning…bitmap…thing….. http://lab.fincanon.com/archives/9 http://lab.fincanon.com/archives/9#comments Fri, 11 Aug 2006 04:05:35 +0000 Jason http://lab.fincanon.com/archives/9 Well, I'm not really sure what to say about this. This is one of those experiments where I just kinda let it drive itself and this is where it ended up. Anyway, click the picture to make it happen.

]]> http://lab.fincanon.com/archives/9/feed 1