# Hack 33 Particle Effects  Add realism to any animation using effects with small particles, such as explosions, sparks, rain, or snow.

When animating using timelines, one of the hardest things to achieve is common particle effects such as snow, star fields, or moving water. Flash doesn't have native support for particle effects, and animating thousands of tiny movie clips in different directions is time consuming. But it is easier than you may think to create varied effects.

The simplest particle is one that moves in only one direction?straight down. So let's start with a simple "dropping particle," created using a nested movie clip. This clip can be rotated to create a number of different effects without too much effort on your part.

```function mover( ):Void {

this._y += this.speed;

if (this._y > 400) {

this._y = 0;

this.speed = Math.random( )*10+5;

}

}

var path:MovieClip = this.createEmptyMovieClip("path", 0);

var dot:MovieClip = this.path.createEmptyMovieClip("dot", 0);

dot.lineStyle(0, 0x0, 100);

dot.moveTo(0, 10);

dot.lineTo(0, 15);

dot.speed = Math.random( ) * 10 + 5;

dot.onEnterFrame = mover;```

The preceding code creates a movie clip, path, inside which another clip, dot, is created. The dot clip is then made to move from the top of the screen downward. You're probably thinking, "What's the point of path?" Well, that's the hacky part?by rotating path, we can change the direction in which dot moves. Try adding this to the end of the previous listing to see how it works:

```// Move the clip to (100, 100) so it is visible even if rotated.

path._x = path._y = 100;

path._rotation = 50;```

By rotating path, we rotate the direction in which dot falls. Further, by scaling path as dot moves, we can create complex acceleration without doing too much work.

#### Star Field

The following listing shows a modified version of the preceding code. Note the scaling and rotation effects highlighted in bold. Also, note that the code assumes you have turned the Stage color to black (choose Modify Document, then click on the color swatch and select black).

```function mover( ) {

// Move the particle over time

this._y += this.speed;

this._yscale += 10;

this.speed++;

if (this._y > 500) {

this._y = 0;

this.speed = Math.random( ) * 10;

this._yscale = 100;

}

}

function starField(x, y, n) {

// Generate a starfield of specified dimensions with n  stars

for (var i = 0; i < n; i++) {

var star = this.createEmptyMovieClip("star" + i, i);

var dot = star.createEmptyMovieClip("dot", 0);

star._rotation = Math.random( ) * 360;

star._x = x;

star._y = y;

dot.lineStyle(0, 0xFFFFFF, 100);

dot.moveTo(0, 10);

dot.lineTo(0, 15);

dot.onEnterFrame = mover;

dot.speed = Math.random( )*10;

}

}

starField(275, 200, 100);```

In the preceding code, we create multiple star clips, each of which takes the role of the path clip in the earlier example. Each star clip is rotated at a random angle, as shown in Figure 4-21.

##### Figure 4-21. A star field created with particle effects We also scale the star clips; elongating the path (the star clip) while the dot is moving along creates acceleration, simulating the way things appear to get faster as they get closer to us.

Using the "scale the path clip as the dot clip moves" trick, you can create gravity effects [Hack #38] . This code listing employs the same techniques to simulate moving water:

```function mover( ):Void {

this._y += this.speed;

this._yscale += 10;

this.speed++;

if (this._y > 500) {

this._y = 0;

this.speed = Math.random( ) * 10;

this._yscale = 100;

}

}

function waterfall(x1, x2, n) {

for (var i = 0; i < n; i++) {

var star:MovieClip = this.createEmptyMovieClip("star" + i, i);

star._x = Math.random( ) * x2 + x1;

star._y = 0;

var dot = star.createEmptyMovieClip("dot", 0);

dot.lineStyle(0, 0xFFFFFF, 100);

dot.moveTo(0, 10);

dot.lineTo(0, 15);

dot.onEnterFrame = mover;

dot.speed = Math.random( )*10;

}

}

waterfall(200, 300, 800);```

The final effect shown here is snow. By varying the angle of the particle paths randomly, we get a flurry of moving particles that look a lot like snow:

```function mover( ) {

this._y += this.speed;

if (this._y > 500) {

this._y = 0;

this.speed = Math.random( )*10+5;

}

}

function snow(a,  n) {

for (var i = 0; i < n; i++) {

var star:MovieClip = this.createEmptyMovieClip("star" + i, i);

star._x = Math.random( ) * 550;

star._rotation = (Math.random( ) * 2 * a) - a

star._y = 0;

var dot:MovieClip = star.createEmptyMovieClip("dot", 0);

dot.lineStyle(0, 0xFFFFFF, 100);

dot.moveTo(0, 10);

dot.lineTo(0, 15);

dot.onEnterFrame = mover;

dot.speed = Math.random( ) * 10 + 5;

}

}

snow(30,  800);```

#### Final Thoughts

Although it is normal to attempt to create particle effects using (x, y) coordinates, you can sometimes get bogged down with the trigonometry or complex motion effects. By using an embedded clip to allow you to define a particle angle and speed (i.e., a polar coordinate description), many particle effects become much easier and require minimal calculations, which means you can have lots of them, and they become very easy to create.  Chapter 1. Visual Effects  Chapter 2. Color Effects  Chapter 3. Drawing and Masking  Chapter 4. Animation  Hacks #26-34  Hack 26 Smooth Scripted Motion  Hack 27 Time-Controlled Movement  Hack 28 Quick, Bandwidth-Efficient Character Animation  Hack 29 alt-Flash: Motion Graphics Alternatives  Hack 30 Deja New Animations  Hack 31 Hacking The Matrix  Hack 32 Computer-Generated Character Animation  Hack 33 Particle Effects  Hack 34 Shape Tweening Complex Shapes  Chapter 5. 3D and Physics  Chapter 6. Text  Chapter 7. Sound  Chapter 8. User Interface Elements  Chapter 9. Performance and Optimization  Chapter 10. ActionScript  Chapter 11. Browser Integration  Chapter 12. Security