Letter Particle Generator
May 10th, 2008
A little while back a friend of mine asked me to help him put the finishing touches on a jewelry site he was having built. They wanted to take the existing AS 2 site and connect it to my FlashBaker Admin panel and clean up a few things as well. Since I detest AS 2 at this point I felt it would be better to just port the entire site over to AS 3. While I did that, I overhauled this Letter Particle Effect that was being used on the site. I thought I would release the source code to the particle system and hopefully drum up some traffic to his site TypeOfLove.com.
So you can see the full effect on typeoflove.com. Warning that the site is still alittle buggy. I had to port the entire thing over in a few days so it is still missing that “FlashBum” polish I normally put into a site. Here is an image of the effect.
So I thought for this round instead of posting all 6 classes of code I let you download the source files and let you play around with it on your own. For those interested, I will highlight a few of the important parts of the code and discuss a little about this partical system and what you can do to customize it. Here is a sample of the demo swf:
Lets start with how you create a “generator”. In this example there is one class (controller) that manages instances of particles (Letters and Dust) and has the power to start and stop them. In the source file, if you look in the FLA you will see this code:
var config:GeneratorConfig = new GeneratorConfig();
config.width = 400;
config.height = 300;
config.letters = new Array(“a”, “b”, “c”, “d”, “e”, “f”, “g”, “h”, “i”, “j”, “k”, “l”, “m”, “n”, “o”, “p”, “q”, “r”, “s”, “t”, “u”, “v”, “w”, “x”, “y”, “z”);
config.max_particles = 25;
var gen:Generator = new Generator(config);
addChild(gen);
gen.start();
As you can see the generator needs a config class. Some of the important properties to look at are the width, height, and charactes. The characters array allows you to create particals out of any text character. This is the display of the paticals. There are two type of particals, Letters and Dust. A letter partical is the base partical class. It generates a display randomly from the list of characters. Once the display is set, it then begins to move itself based on a predetruming set of variables and random multipliers. Lets look at this a little further.
Letters need to do the following things:
- Move from x0 (Start) to x1 (End).
- When it reaches x1 it needs to restart back at x0.
- It needs to be a random size, alpha, and rotation.
- As it move its needs to not only rotate but also grow or shrink in size and move in a curve. (letters are designed to move like leafs in the wind.
Dust is an extension of the letter particle. It has the same kind of display and uses the same character list. The only difference is the following:
- Dust is always a fixed size and rotation.
- Dust moves from straight and has no curve or arc.
- Dust moves a lot faster then Letters, it is more like a bullet across the screen.
So all the particals have a custom config file that has specal setting for each type of partical. This allows you to customize the speed, rotation, character of each and let the class handle any custom logic needed to run. The Generator is unaware of the specifics of the partical, it just needs to know how to turn it on and off. And so the partical engine is a nice modular collection of code following some basic (hacked in) OOP ideas.
Here is a sample of the 3 main functions to move, rotate and scale the particals
* Moves partical based on a its speed.
*/
protected function move():void
{
var distancex = _target_x - x;
var move_x = distancex/2;
if (x > 890 || x < 0){
_x_speed *= -.3;
}
if (y < 500 || y > 0) {
_y_speed *= -.07;
}
if (x > 920 || y < 2 || y > 500 || _display.alpha < 0) {
disappear();
}
if (x > 750 || y >490)
{
_display.alpha -= .10;
}
// Update X,Y
x += move_x/_x_speed;
y += _y_speed;
}
/**
* Increments the partical’s rotation.
*/
protected function rotate(value:Number):void
{
rotation += value;
}
/**
* Calculates size of the partical
*/
protected function size():void
{
if (_display.scaleX < 100){
_display.scaleX += .03;
_display.scaleY += .02;
}else{
_display.scaleX -= .02;
_display.scaleY -= .01;
}
}
What is next? If this was something I had built from the ground up I would have broken things down a little further. It is always better to type classes to a interface or abstract class. Here I probably would have done both. There should be an IPartical interface along with a base partical class I would probably call AbstractPartical. The generator would have its particals types to the Interface, and the Letters and Dust would extend off of the AbstractPartical Class. Things like this are overkill in a small “static” website environment with predefined rules but if I wanted to change this up or reuse it in another project the extra effort to use Abstarct Classes and Interface would really pay off.
Also the way I handle the movement loop blows. I am not a big fan of enterframe loops at this stage of the game but when you need to get something up and running ASAP they are a good cop out. It is always important to weigh out the cost of what you are doing verses the time you have to do it in. I noticed a slight performance hit on the motion and I think that I could have done a better job of making things move faster and require less processor.
I find particle systems really interesting and fun to play with. Its amazing how you can take something so simple and get it to yield such complicated visual effects. The master of Flash Particals in my opinion is Seb Lee-Delisle1 over at Plug-In Media. The man is a mad genius and I had the please of not only being at his presentation at FlashBelt last year but also got in a few drinks/karaoke songs2. Take a look at his blog if you want to learn more about some of the cool effects you can achieve in Flash with particles.
Leave a Reply