drububu's pixel art tutorial :: adobe flash

Particle Animation

You need to upgrade your Flash Player

For the animated road worker I needed pixels that jump up into the air - and fall down - as a result of drilling.
Of course, you can animate these pixels by hand on the timeline, but this is not very flexible. Every single trajectory has to be animated by hand, and you need a lot of these single timeline animations to avoid repetition.
ActionScript is ideal for the job.

Particles

Particles is a general description for individual entities - in this case rectangles the size of 3 x 3 pixels - which have one or more properties. In this specific animation, the number of properties is quite small: position (x and y position), speed/direction, and color.

A particle can be represented by a so-called object in ActionScript By using an object, multiple related variables can be grouped.


 particle = new Object();
 particle.direction_x;
 particle.direction_y;

With a few simple calculations derived from the particle object, a movieclip is drawn at a certain position, with a particular color, during the animation.

The object doesn't include variables for the position and color.
The direction is used in relation to the horizontal and vertical movieclip position. The position of a movieclip can be read with the movieclip properties ._x and ._y, so there's no need to included in the object information about the position.
The color of the particle is randomly chosen at its creation, and doesn't change during the animation, so color information is also not included in the object.

An array is used to store multiple particle objects.
An array is a multidimensional variable that can store multiple variables of the same type, in this case particle objects.


 var particle : Array = new Array(20);

When a particle is created, the position, speed, and color are calculated based on fixed values, which differ slightly to prevent repetition of the trajectories.
First the starting position of the particle is set or initialized. The position is the same as the position of the drill chisel in the final Flash animation.
The y-position of the chisel is stored in a global variable 'particle_baseline'.

In this example a number is used as 'particle_baseline' since the code and artwork for the nameless puppet is not present in this example.


 var particle_baseline : Number;

The next property that has to be set is the direction and speed; this is done by a so-called vector.

Vector

A mathematical vector is a line with a starting position (x, y (, z)) and an end position (x, y (, z)).
The length of the line is used as speed in this animation. Besides the length, a vector has a direction, which can be derived from the starting point and end point.

vector

To create a nice trajectory for this animation, the particles should start moving upwards, so the direction of the vector should point in this specific direction.
To limit the possible directions, a formula that describes a circle is used.
Every position on a circle can be described by a sinus, cosine, and a radius, in combination with an angle. The angle is measured in radians, rather than degrees.

Radians and degrees can be converted with the formula:


 degrees = radians * (180.0/Math.PI); // Math.PI = 3.14159265358979...
 radians = degrees * (Math.PI/180.0);

The formula to calculate a position on a circle is:


 radius = 100.0;
 radian = 1.1334;
 x      = Math.sin(radian)*radius;
 y      = Math.cos(radian)*radius;

In this example the angle is 0.24, but it can be any number.

Another slightly different formula to calculate a position on a circle is:


 radius = 100.0;
 radian = 1.1334;
 x      = Math.cos(radian)*radius;
 y      = Math.sin(radian)*radius;

Notice Math.sin and Math.cos can be changed to calculate the x and y position.
The result of both calculations is a point somewhere on the circle. By using the same radian, the position of the first calculation will be different from the result of the second calculation.

calculation point on circle

By using a minimum and maximum radial to calculate a specific position on a circle with a certain radius, you can limit the direction (radian) and length/speed (radius) of a vector.

For this animation, a minimum angle of -45 degrees and a maximum angle of 45 degrees are used.
The exact angle for an individual animation is randomly chosen between these values.
Just as the minimum and maximum angle, the radius also varies between a minimum and maximum value for an individual particle animation.

By using random values for different variables, the chances of repeating exactly the same trajectories are reduced to almost zero.

The so-called coordinate system within Flash dictates which lines of ActionScript code is needed to calculate the required upward-pointing position.

Coordinate System

Adobe flash uses a coordinate system that differs from the commonly used coordinate system.
In the commenly used Cartesian coordinate system, the horizontal x position increases when a point is moving to the right on the x-axis, and the vertical y position increases when a point is moving up to the y-axis in a coordinate system (left image).
Inside Adobe Flash, the horizontal x position behaves 'normally'; the farther to the right the higher the x value, the more to left the lower the x value.
The vertical y position behaves differently. The y position increases when moved downwards on the y-axis, and decreases when moved upwards on the y-axis (right image).

adobe flash coordinate system

This coordinate system is important for calculating the minimum and maximum angles of the circle. If the Cartesian coordinate system is used in Adobe Flash, the particles move downwards at the start.
The calculated y-positions should be negative, so that the direction of the vector points upwards within the Flash coordinate system. The first calculation is used for this animation.


 radius = 100.0;
 radian = (-45.0+(Math.random()*90.0))*(Math.PI/180.0);
 x      = Math.sin(radian)*radius;
 y      = Math.cos(radian)*radius;

Gravity

The direction of the particles needs to be adjusted, so that they eventually fall down during the animation.
Gravity is pulling the particle downwards, just as gravity does in real life. The amount of gravity in the animation is equal to the variable 'particle_gravity'.


 var particle_gravity    : Number =  1.2;

For this animation, the 'particle_gravity' value is set to 1.2. A higher value results in a quicker descent, a lower value results in a slower descent.
Keep in mind that the y-position in Flash increases downwards due to the coordinate system of Adobe Flash. The value of the 'particle_gravity' variable should be positive in this case, not negative!

Particle Trajectory Animation

We now know how to calculate the direction and speed of a particle. Due to gravity, the particle has to fall down during the animation.
The next problem is how to combined both into an animated particle.

The fundamental element of an animation is time. Instead of using time in (milli)seconds, the frame rate is used to update the animation.
Adobe Flash updates an animation at a specific amount of frames per second. This can be 24 frames per second or, for instance, 31 frames per second, depending on what you have specified in the 'document properties' popup in Adobe Flash.

adobe flash document properties

The ActionScript 'onEnterFrame' command is executed 24, 31 - or whatever value you use for the frame rate - times per second.

When a particle is created, the color of the movieclip is set, the starting position is calculated, and the speed/direction is set.

The position of the movieclip in the first frame is calculated, based on the initial starting position plus the direction of the particle.


 this.mc_particles["mc_"+a]._x = int(this.mc_particles["mc_"+a]._x+particle[a].direction_x);
 this.mc_particles["mc_"+a]._y = int(this.mc_particles["mc_"+a]._y+particle[a].direction_y);

The result of the addition is converted into an integer (int), so that the movieclip remains crisp and doesn't show anti-aliased/blurred borders.
See 'Actionscript Basics' for more details about this issue.

Once the movieclip is positioned at a horizontal and vertical point, the direction of the particle is adjusted.
To include gravity, the value of the 'particle_gravity' variable is added to the vertical y position of the direction, so that the direction is pulled downwards slightly. The horizontal x position does not change, because gravity is pulling the particle downwards, not sideways.


 particle[a].direction_y = particle[a].direction_y+particle_gravity;

Or the same line of code, written shorter:


 particle[a].direction_y += particle_gravity;

The position of the particle movieclip in the second frame is equal to the position of the movieclip in the first frame plus the newly calculated particle direction.
By constantly adding 'particle_gravity' to the particle direction, the direction slowly turns from upward to downward during the animation.

particle trajectory

This process is repeated until the position of the movieclip is less than 'particle_baseline' plus 'falloff_height' (this will be explained next).
As soon as the position of the movieclip is below this value, a new starting position, speed, and direction is calculated, and the whole process is repeated again.

the complete page is available in the commercial version of this tutorial.

adobe flash