« Blur Worm
Burn baby, burn »

Ready for the storm

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. };

This entry was posted on Thursday, August 10th, 2006 at 11:06 pm and is filed under Drawing API, perlinNoise, ActionScript 2. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

8 Responses to “Ready for the storm”

  1. Chris Simpkins Says:
    August 31st, 2006 at 3:16 pm

    I was wondering if you had a tutorial on how to do this. I am currenlty working on an image with a storm in the background. I want to make it seem as thought the storm is approching.

    Thanks,
    Chris

  2. Jason Says:
    August 31st, 2006 at 3:20 pm

    Sure thing Chris! I’m finishing up some projects at work right now, but I’ll get the code for this up before the day is out. Hope that’s not too late for ya. :)

  3. Another Chris Says:
    September 13th, 2006 at 10:47 am

    Nice effect, Jason! Long time troller, first time commenter. Love the blog and widget. Also, thanks for posting this project.
    I like the first Chris’s idea of having the storm in the background. I haven’t been working with Flash that long and have been struggling with getting the ActionScript to run in the background. I tried putting the foreground in a higher layer, embedding the AS in a movieclip in the lower layer, and even using a mask. Any suggestions? Thanks!

  4. Jason Says:
    September 13th, 2006 at 10:55 pm

    Hey Chris. Thanks! I’ll try a few things out when I get home from Flashforward but just off the top of my head, you might try directly setting the depths of the clouds and stuff to a low number instead of using getNextHighestDepth(). Or you might try creating the storm first and then setting the depth of the objects in the foreground with getNextHighestDepth(). Again tho, I’ll mess around with it when I get home.

  5. Another Chris Says:
    September 14th, 2006 at 8:18 am

    Thanks Jason! I’ll try those suggestions. Flashforward sounded great this year. It’s awesome that you got to attend. I’m hoping they’ll host it in Atlanta or Orlando next time so I can attend. For now I appreciate your list of winners and the podcasts Flashforward made. :)

  6. Jason Says:
    September 15th, 2006 at 12:53 pm

    Hey Another Chris. I just tried out placing the code inside a MovieClip instance which I had on the bottom layer in the timeline and it put the storm behind the stuff in the foreground. Take a look at this zip file and let me know if we’re talking about the same thing.

  7. Gus Says:
    June 2nd, 2007 at 2:46 am

    Jason,
    I want to tell you this is an awesome script! I would like to know if you will allow me to use it? I’m gonna need to make some modifications but all in all its a workable solution for me. Please let me know as soon as you can. Thanks and keep up the great work!

    V/r

    Gus C.

  8. Jason Says:
    June 2nd, 2007 at 8:22 am

    Hi Gus. I don’t mind at all if you use this script. Thanks so much for having the courtesy to ask first and let me know if you have any questions about it.

Leave a Reply

You must be logged in to post a comment.