5 Replies Latest reply on Feb 18, 2014 9:41 AM by AMULI

    How to animate snow fall as background?

    duenorth09 Level 1

      I'd like to animate snow falling. I assume Edge would be able to do this. Will it be possible to add it as a background? Or would it just be easier to add the effect to the top graphic portion of my page? I've used Edge back when it first came out. But havent' touched it in a while. I'm now working "in the Cloud". thank you! Oh... and I do use Dreamweaver.

        • 1. Re: How to animate snow fall as background?
          Zaxist Level 4

          you can make this effect by these lines :

           

          in Stage > compositionReady :

           

          (function(e){e.fn.jSnow=function(t){function w(){r=e("body").width();if(!d){i=window.innerHeight||document.documentElement.clientHeigh t;i-=50}else i=d}function E(t,n){t=t||1;n=n||false;var s=0;for(s=0;s<t;s++){var h=e("<span />");var d=a+Math.floor(Math.random()*f);var v=o[Math.floor(Math.random()*o.length)];if(v.indexOf(".gif")!=-1||v.indexOf(".png")!=-1){ var m=new Image;if(g)v=v.replace("png","gif");m.src=v;v="<img src='"+v+"' alt='jSnowFlake'>"}h.html(v).css({color:u[Math.floor(Math.random()*u.length)],fontSize:d+ "px",display:"block",position:"absolute",cursor:"default","z-index":p});e(y).append(h);f_l eft=Math.floor(Math.random()*(r-h.width()-50))+25;f_top=n?-1*h.height():Math.floor(Math.ra ndom()*(i-50));var w=Math.floor(Math.random()*90);jQuery.data(h,"posData",{top:f_top,left:f_left,rad:Math.ra ndom()*50,i:Math.ceil(l+Math.random()*(c-l)),swingRange:w});h.css({top:f_top+"px",left:f_l eft+"px"});b.push(h)}}function S(){var e=0;for(e=b.length-1;e>=0;e--){var t=b[e];var n=jQuery.data(t,"posData");n.top+=n.i;var r=Number();r=Math.cos(n.rad/180*Math.PI);n.rad+=2;var s=n.left-r*n.swingRange;if(v){op=i-n.top<100?(i-n.top)/100:1;t.css("opacity",op)}t.css({t op:n.top+"px",left:s+"px"});if(n.top>i){jQuery.removeData(t);t.remove();b.splice(e,1);E(1, true)}}}var n=e.extend({},e.fn.jSnow.defaults,t);var r,i;var s=n.flakes;var o=n.flakeCode;var u=n.flakeColor;var a=n.flakeMinSize;var f=n.flakeMaxSize;var l=n.fallingSpeedMin;var c=n.fallingSpeedMax;var h=n.interval;var p=n.zIndex;var d=n.vSize;var v=n.fadeAway;var m=n.followScroll;w();var g=false;if(e.browser.msie&&parseFloat(e.browser.version)<8)g=true;if(e.browser.msie&&pars eFloat(e.browser.version)<8&&p=="auto")p=0;var y=e("<div />");y.css({width:r+"px",height:1,display:"block",overflow:"visible",position:"absolute", left:"1px",zIndex:p});if(m){y.css("top",e("html").scrollTop()+1+"px")}else{y.css="1px"}e(" body").prepend(y).css({height:"100%"});e("html").css({"overflow-y":"scroll","overflow-x":" hidden"});var b=Array();E(s,false);setInterval(S,h);window.onresize=w;if(m){window.onscroll=function(){ y.css({top:e("html").scrollTop()+"px"})}}return this};e.fn.jSnow.defaults={flakes:30,fallingSpeedMin:1,fallingSpeedMax:3,flakeMaxSize:20, flakeMinSize:10,flakeCode:["•"],flakeColor:["#fff"],zIndex:"auto",interval:50}})(jQuery)

           

           

          $("body").css({"background-color":"black"})

           

           

          $("body").jSnow({

                   //vSize:'100',

                   fadeAway:true

                 });

           

           

          Smple Link : http://www.mediafire.com/?inv5uuw506109q4

           

          Zaxist

          1 person found this helpful
          • 2. Re: How to animate snow fall as background?
            vladi013 Level 1

            Thanks for the script.

             

            In other words EA needs particle system to avoid this coding mess.

            • 3. Re: How to animate snow fall as background?
              AMULI Level 4

              Hi vladi013, hi Zaxist,

              In other words EA needs particle system to avoid this coding mess.

               

              Not at all Edge Animate is a perfect tool to simulate snow fall.

               

              I used Fireworks to draw five different flakes, which where converted to SVG.

               

              snow1.png

               

              Each SVG imported in Edge gave birth to a symbol where the location is tweened along a curved path, the flake spinning :

               

              snow2.png

               

              The five path symbols are instantiated in a snow shower symbol, the play commands for each path being staggered :

               

              snow3.png

               

              Each path symbol having a different duration, as well as a different delay to the sym.play(0) trigger, any repetition pattern is avoided.

               

              You can see the result here : http://www.maisondessources.fr

               

              Gil

              1 person found this helpful
              • 4. Re: How to animate snow fall as background?
                Zaxist Level 4

                Good job Gil..

                 

                this is a good way to simulate things in AE, but the problem is this wil work only in the Stage area not the Whole Body !!

                 

                but i think it's good enough to do the job for us

                 

                Zaxist

                • 5. Re: How to animate snow fall as background?
                  AMULI Level 4

                  Thanks, dear Zaxist

                   

                  I am wondering if it could be generalized : with overflow = visible, and instead of hard-instantiation in the symbol's timeline, instantiation by code of the flake paths objects.

                   

                  Gil