Falling Snow Christmas Card with AS3

This tutorial covers how you can create falling snow with actionscript 3 over an image to create an animated Christmas Card.

View DemoDownload Source

1. Create a new flash file (Actionscript 3.0) and save it as snow.fla.

2. Rename “layer 1” to “card”. On this layer import the image of your choice that will be the card.
In our example, the image was taken from www.xmas-wallpapers.com

3. Create a new “actions” layer.
First before writing the code, let’s create a snowflake. Draw the shape of your snowflake and convert it to a movie clip with registration point at the top left. Export if for Actionscript with a Class Name of Snowflake.
Remove the snowflake that you’ve just created from the stage as now all will happen in the code.

4. With the actions layers first frame selected, open the actions panel.
First add an enterframe event listener :

addEventListener(Event.ENTER_FRAME, createSnow);

5. In the createSnow function that handles the enterframe event, we create a snowflake by using the Snowflake class and set its x position to a random value. Also we add an enterframe listener to the snowflake in order to animate it.

function createSnow(event:Event):void{
	var snowflake : Snowflake = new Snowflake();
	snowflake.x = Math.random() * stage.stageWidth;
	snowflake.y = 0 ;
	addChild(snowflake);
	snowflake.addEventListener(Event.ENTER_FRAME, moveSnowflake);
}

6. In the moveSnowflake function, we check whether the snowflake is still visible on the stage by monitoring its y property.
If so, we modify its y, alpha, scaleX and scaleY properties to make it falling and melting.
Else as we don’t see anymore the snowflake, we remove its event listener and remove him from the display list.

function moveSnowflake(e:Event):void{
	if(e.target.y < stage.stageHeight){
		e.target.y += 10 + Math.random() * 5 ;
		e.target.alpha -= 0.015;
		e.target.scaleX = e.target.scaleY -= 0.01;
		
	}
	else{	
		e.target.removeEventListener(Event.ENTER_FRAME,moveSnowflake);
		removeChild(e.target as Snowflake);
	}
}

7. Here’s the final code, test your movie to see it in action. And Merry Christmas !!!

addEventListener(Event.ENTER_FRAME, createSnow);

function createSnow(event:Event):void{
	var snowflake : Snowflake = new Snowflake();
	snowflake.x = Math.random() * stage.stageWidth;
	snowflake.y = 0 ;
	addChild(snowflake);
	snowflake.addEventListener(Event.ENTER_FRAME, moveSnowflake);
}

function moveSnowflake(e:Event):void{
	if(e.target.y < stage.stageHeight){
		e.target.y += 10 + Math.random() * 5 ;
		e.target.alpha -= 0.015;
		e.target.scaleX = e.target.scaleY -= 0.01;
		
	}
	else{	
		e.target.removeEventListener(Event.ENTER_FRAME,moveSnowflake);
		removeChild(e.target as Snowflake);
	}
}

10 thoughts on “Falling Snow Christmas Card with AS3

  1. Pingback: Falling Snow Animation Tutorial using Flash and Action Script 3.0 | Design Inspiration and Resource

  2. Deoxys

    The problem here is that a flake doesn’t fall in a constant speed, because you set the falling speed each frame, and on each frame the Math.random() value is different…

  3. Deoxys

    You should make an own property when you initialize your flake, like

    snowflake.fallspeed = 2 + Math.random() + 5;

    or something like that.
    Then at the enterFrame Handler you write:

    e.target.y += e.target.fallspeed…

    Then you see that the animation is much smoother.

Leave a Reply

Your email address will not be published. Required fields are marked *