Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthorSam K
    • CommentTimeDec 19th 2005 edited
     permalink
    pre {border-left: 6px solid #FFFFAA; background: #FFFFEE; padding: 8px; padding-left: 16px; display: block;}

    Okay set your stage dimensions to 300x400, the background to a very dark blue (#000022) and then draw a little ball of white, I did one 10px by 10px and gave it a gradient to nothingness so it faded into the background. Make it a movieclip.

    step1.png

    Right click on your snow movieclip in the library and select "Linkage...", in that box tick the Export for Actioscript tickbox and enter "snow" (without the quotes) into the textfield at the top.

    step2.png

    Now on line 1 of your root timeline enter these 29 lines of code:

    width = 400; // pixels
    height = 300; // pixels
    max_snowsize = 6; // pixels
    snowflakes = 75; // quantity

    for (i=0;i<snowflakes;i++) {
    t = attachMovie("snow","snow"+i,i);
    t._alpha = 20+Math.random()*60;
    t._x = -(width/2)+Math.random()*(1.5*width);
    t._y = -(height/2)+Math.random()*(1.5*height);
    t._xscale = t._yscale = 50+Math.random()*(max_snowsize*10);
    t.k = 1+Math.random()*2;
    t.wind = -1.5+Math.random()*(1.4*3);
    t.onEnterFrame = mover;
    }
    function mover() {
    this._y += this.k;
    this._x += this.wind;
    if (this._y > height+10) {
    this._y = -20;
    }
    if (this._x > width+20) {
    this._x = -(width/2)+Math.random()*(1.5*width);
    this._y = -20;
    } else if (this._x < -20) {
    this._x = -(width/2)+Math.random()*(1.5*width);
    this._y = -20;
    }
    }

    Test your movie and voila! You have some snow!

    You have a choice, you can stick around a learn how the code works or you can leave and have fun with the effect you just created.

    • CommentAuthorSam K
    • CommentTimeDec 19th 2005 edited
     permalink

    How the code works:



    The first 4 lines are simple.



    width = 400; // pixels
    height = 300; // pixels
    max_snowsize = 6; // pixels
    snowflakes = 75; // quantity


    They're setting the boundries of the movie.



    The next clump of code is responsible for producing the snow.



    for (i=0;i<snowflakes;i++) {
    t = attachMovie("snow","snow"+i,i);
    t._alpha = 20+Math.random()*60;
    t._x = -(width/2)+Math.random()*(1.5*width);
    t._y = -(height/2)+Math.random()*(1.5*height);
    t._xscale = t._yscale = 50+Math.random()*(max_snowsize*10);
    t.k = 1+Math.random()*2;
    t.wind = -1.5+Math.random()*(1.4*3);
    t.onEnterFrame = mover;
    }


    The for loop is responsible for creating a temp variable called 't' that we attach our snow to. It then asigns that flake a random alpha (opacity) between 20 and 80 percent. The next two lines are positioning the flake in a random position. The x position places the snow slightly over each border so when they move, if the wind direction is right it will 'blow' the snow in from the side. Then it's the size of the snowflake. notice how I did t._xscale = t._yscale. This means they both get the same number, therefore keeping the snowflake a perfect circle. The next two lines are variables, k is for the drop speed of that snowflake and the wind is, obviously, the wind for that snowflake. This is a slightly unrealistic touch as it means each snowflake has it's own wind direction and speed, but I thought it looked cooler. Finally, the for loops tells the snowflake to perform the mover function every frame. This loop is repeated depending on how many snowflakes you set, in this example, 75.



    function mover() {
    this._y += this.k;
    this._x += this.wind;
    if (this._y > height+10) {
    this._y = -20;
    }
    if (this._x > width+20) {
    this._x = -(width/2)+Math.random()*(1.5*width);
    this._y = -20;
    } else if (this._x < -20) {
    this._x = -(width/2)+Math.random()*(1.5*width);
    this._y = -20;
    }
    }


    This final bit of code is the mover function and it is responsible for making our snow fall.

    this._y += this.k;
    this._x += this.wind;
    This bit simply applies the wind and drop speed's to the x and y axis'. You may want to note that I'm adding to the _y scale, and yet the snow goes downwards. This is because Flash works on a cartesian scale, which means the y axis is inverted. Basically, more is down and less is up.
    if (this._y > height+10) {
    this._y = -20;
    }
    if (this._x > width+20) {
    this._x = -(width/2)+Math.random()*(1.5*width);
    this._y = -20;
    } else if (this._x < -20) {
    this._x = -(width/2)+Math.random()*(1.5*width);
    this._y = -20;
    }


    These 3 if loops replace the snow if it has finished it's journey or has misbehaved along it's way. The first loop checks to see if the snow has reached the bottom, and if it has to replace it above the stage to fall again. The other two, an if...else if replaces the snow at the top of the screen with a new x position if the snow is caught moving away from the stage area.



    Just one bit more, to make it a bit more special you could add some fancy scenary!




    And there you have it. Merry Christmas with a traditional white christmas!



    You can also see this tutorial on my website here

    • CommentAuthoradmin
    • CommentTimeDec 19th 2005 edited
     permalink
    Very cool, this could be handy for christmas cards ;)
    • CommentAuthorGustavs
    • CommentTimeDec 20th 2005
     permalink
    Sweet. I like the idea of tutorials beeing posted here. :)

    Oh and by the way. I didn't find it in FAQ or anything. How can I post code quote? (So it's in that yellow border)
    •  
      CommentAuthornifkin
    • CommentTimeDec 20th 2005 edited
     permalink
    wrap the code in <code></code> tags.

    function fancy_code_example(){ return true; }
    • CommentAuthorGustavs
    • CommentTimeDec 20th 2005 edited
     permalink
    Doesnt's seem to work for me. :/ I tried all the text, html, BBCode and Markdown. None of them.

    <code>function fancy_code_example(){ return true; }</code>
    •  
      CommentAuthornifkin
    • CommentTimeDec 20th 2005
     permalink
    make sure to post as HTML, and if that doesn't work take a look at the top right of your posts and see if it says " unblock user" or "unblock comment". those links toggle whether you can see html in posts from that person/individual post.
    • CommentAuthorSam K
    • CommentTimeDec 20th 2005
     permalink
    Hahaha, just "blocked" my comments on this thread and good lord that looks ugly!
    •  
      CommentAuthornifkin
    • CommentTimeDec 20th 2005
     permalink
    he he, yeah, it's meant as a tool to stop people who post bad HTML from breaking the rest of the page or from posting pictures.
Add your comments
    Username Password
  • Format comments as (Help)