Flex | Flash | Air | AS3
Falling Snow Christmas Card with AS3
December 20th, 2009 in FlashThis tutorial covers how you can create falling snow with actionscript 3 over an image to create an animated Christmas Card.
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);
}
}
Dec 21st, 2009
Good morning,
They do not see the démo.
Dec 21st, 2009
Seems Ok!
I like it.
Only snow maybe is falling to fast.
you could also add some random snow directions
Dec 23rd, 2009
Nice Effects at nice Time
Dec 26th, 2009
it is not snow , but a stone rain.
Dec 28th, 2009
[...] or Happy New year greeting cards. This animation using a little action script 3.0 programming. Read Complete Tutorial | Download [...]
Jan 7th, 2010
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…
Jan 7th, 2010
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.
Feb 2nd, 2010
how can i make the snow fall a bit slower?
Feb 5th, 2010
ok problem solved in 2 days
thx