14 December 2010

Snowfall Flash Animation Effect Example

This simple example is based on two previous posts:

1) Simple Flash Snowflake Generator and
2) Flash Tutorial : Rain Effect

Instead of using AS2 as in Rain Effect Tutorial, this is pure AS3 code.



hosted on ShareSWF

You can expect more complex examples later. Ask if you need further explanation.

*_*

12 December 2010

Simple Flash Snowflake Generator

Just like every year, few weeks before holidays there is plethora of animations which includes Santa, snow, various gift boxes, evergreen trees etc. Many of them are quite good as Christmas and New Year Flash cards, but almost all of them has one small shortage - snowflakes are made from same single MovieClip. Now if objects are small and distant that's fine, but to imitate depth some animations display bigger graphics and defect is visible.

They say in real life there isn't two exact the same snowflakes, so I decided to solve this problem and create simple Snowflake Generator which will randomly create slightly different snowflake every time object is created.

I don't have to generate entire snowflake at once, because snowflake is symmetric object in two ways.



Take a look at a blue shape above. Points A, B and C are randomly generated, but they must be placed inside appropriate rectangles. After the shape is drawn, we copy the same shape and place it in mirrored position. Combined object is then copied 5 times and rotated for 60 degrees per object. In this way we will get 6 movie clips which forms single randomly created snowflake! Every time we call new snowflake() we get just a little bit of different shape. Nice.

ActionScript 3.0 doesn't have duplicateMovieClip() method (this has been discussed widely on forums and some workarounds have been made) and in this case I will just create 6 different MovieClips and draw same graphic shape inside them. Six clips act as single snowflake which can be further animated to simulate falling snow Flash animation.

We create new MovieClip and inside we place next code:

x = stage.stageWidth/2;
y = stage.stageHeight/2;

var field1:MovieClip = new MovieClip();
var field2:MovieClip = new MovieClip();
var field3:MovieClip = new MovieClip();
var field4:MovieClip = new MovieClip();
var field5:MovieClip = new MovieClip();
var field6:MovieClip = new MovieClip();

function drawFlake(mc:MovieClip):void
{
mc.graphics.beginFill(0xffffff);
mc.graphics.lineTo(0, 80);
mc.graphics.lineTo(aX, aY);
mc.graphics.lineTo(bX, bY);
mc.graphics.lineTo(cX, cY);
mc.graphics.lineTo(0, 0);
mc.graphics.lineTo(0, 80);
mc.graphics.lineTo(-aX, aY);
mc.graphics.lineTo(-bX, bY);
mc.graphics.lineTo(-cX, cY);
mc.graphics.lineTo(0, 0);
mc.graphics.endFill();
}

var aX = Math.random()*10+10; // (10-20)
var aY = Math.random()*20+60; // (60-80)
var bX = Math.random()*10; // (0-10)
var bY = Math.random()*20+40; // (40-60)
var cX = Math.random()*10+10; // (10-20)
var cY = Math.random()*20+20; // (20-40)

drawFlake(field1);
addChild(field1);

drawFlake(field2);
field2.rotation = 60;
addChild(field2);

drawFlake(field3);
field3.rotation = 120;
addChild(field3);

drawFlake(field4);
field4.rotation = 180;
addChild(field4);

drawFlake(field5);
field5.rotation = 240;
addChild(field5);

drawFlake(field6);
field6.rotation = 300;
addChild(field6);

DrawFlake function actually draws two symmetric shapes based on three Points with randomly chosen position. On main timeline we only have to call our snowflake like it:

var flake:snowflake = new snowflake();
addChild(flake);



*_*

 

template by blogger templates