Flash Intermediate:Snowflakes

I've seen a number of snow samples, but none quite caught my attention, so here is my rendition. There's room for improvement and below I make some suggestions.

Download files download files


The snowflake

We begin with a single snowflake. Eventurally, we'll loop to create a number of duplicates of the snowflake.

We start with a drawing of a snowflake. Snowflakes are pretty small, so there's no sense killing yourself drawing a complicated snowflake. my snowflakeHere's mine:

  • Circle with a Radial Fill
    3 px diameter, white fill, with _alpha=0 at the edge and _alpha=100 in the center.
  • MovieClip
    Eventually, we'll duplicate this snowflake to create a storm of snowflakes, so convert it to a MovieClip symbol. I named my symbol snowflake.
  • Center Registration Point
    Not necessary.

Snowflake behavior and ActionScript

So we want this showflake to behave just right. So what do snowflakes do?

  • Fall vertically
    But not just fall with a constant velocity; sometimes the wind defeats gravity and the flake may float upwards momentarily.
  • Horizontal float
    And just as a snowflake may sometimes float upwards, they rarely fall in a straight line. So we want some random x-direction to the flake as well.
  • Z-depth a la DaVinci
    Like DaVinci, let's imitate backwards depth with the use of fading (_alpha). That is to say, snowflakes closer to the eye should be crisper, clearner, brighter than snowflakes further away from the eye.
  • Z-depth: Faster and slower snowflakes
    Snowflakes closer to the eye should appear to fall faster than snowflakes further from the eye. This will also enhance the illusion of depth to the snow storm.
  • Varying sizes?
    I thought about making background snowflakes smaller, but snowflakes are so small , I decided against playing with their _xscale/_yscale.

So, let's add some code. Inside the movieclip symbol snowflake, add a layer at the top, and name it 'actions'. Now for some actionscript to fulfull our snowflake wish-list.

actionscript for snowflake

  1. Position snowflake randomly in the x-direction.
  2. Position snowflake randomly in the y-direction.
  3.  
  4. Generate a random number between 0 and 1. I'll use this random factor to affect the _alpha property of snowflakes, to give the illusion of depth to the snowstorm (snowflakes with less _alpha will appear further to the rear and snowflakes that fall slower will further the illusion of depth).
  5. Use the random number contained in myFactor to affect each snowflake's _alpha. Some will appear with _alpha close to 100, others with varying degrees of _alpha (there's part of the illusion of depth).
  6.  
  7. I used the onEnterFrame event to execute the code at the piece's framerate. So, for default fps=12, then 12 times per second the following will happen for each snowflake:
    1. Generate a random number for moving the snowflake in the _y direction.
      The random number will range between -1 and 3. The negative direction allows for the possibility that the snowflake might move up, rather than down. However, most of the time, each snowflake moves down.
      • Note: it is important that we recalculate the incrY over and over again. That way, no single snowflake falls to the bottom at a constant _y velocity.
    2. Generate a random number for moving in the _x direction.
      The random number ranges between -1 and 1. The idea is that a snowflake doesn't just fall straight down, but wonders off of the y axis randomly in a negative and positive direction.
      • Note: Again, it's important to recalculate this over and over again, to get the truly random effect.
      • Note: If you want to add a windy effect, play with the number range in the _x direction; make it lopsided either positive or negative and see the snow blow to the right or left.  
    1.  
    2. Change the snowflake's _x position.
    3. Change the snowflake's _y position.
    4. Check to see if the snowflake wandered off of the stage in the _x direction
    5. Yes, the snowflake is off stage, so reposition it in the _x direction randomly on the stage.
    6.  end of if
    7. Check to see if the snowflake wandered off of the stage in the _y direction.
    8. Yes, the snowflake is off stage, so reposition it in the _y direction at the top of the stage (to reposition it randomly in the _y direction, use the commented-out code instead).
    9.  end of if
    10. end of onEnterFrame

Notice the variable myFactor affects both the _alpha and incrX - incrY variables. So, snowflakes that are dimmer (and appear further to the background) fall slower in both the _x and _y directions. That's exactly what we want.

Finally, I drag a single snowflake instance from the library and place it anywhere on the stage. By the way, I named the instance 'snowflake' ... never miss the opportunity to name an instance. We'll need that name later when we get around to duplicating the snowflake, using the duplicateMovieClip method of movieclips. So, we have a single flake moving randomly on the stage, as follows:

 

I've exagerated the size of the snowflake to make it easier to see.


Final step

One snowflake is not a storm, so let's make a storm. On the maintime (_root), we create a simple loop to make a bunch of snowflakes

actionscript

  1. A variable for the number of snowflakes.
  2.  
  3. A quick comment
  4. Create a for-loop, from 0 to maxSnowflakes (500).
  5. Each new instance needs a unique depth; this refers to the main timeline.
  6. Duplicate the instance on the stage (remember I named it 'snowflake'); give each new flake a dynamic name of flake0, flake1, etc.
  7. end of loop
  8.  

And now we have our final snowstorm.

Room for Improvement

  • Perhaps, instead of working with a single flake, we might have worked with a movieclip of several flakes, widely dispersed. Then we could have the whole group of flakes fall with the same properties. Perhaps, this would be more CPU efficient and I doubt anyone would notice the similarity among the group of flakes.
  • Play with the frames-per-second rate, and the various numbers, to achieve a smoother snowfall.
  • Yank out all the hardcoded numbers; use variables instead. It's cleaner and easier to experiment with variables.