This tutorial was created for Web Designer magazine issue 161. The brief was to show concepts for programming particles using AS3.0 in Flash CS4. The tutorial focuses on creating custom movieclips with linked classes to control the behavior of the duplicated particles. The tutorial also shows how to set up an animated line chaser too that follows the mouse around.

This is quite processor intensive but only a mere 2.7k in file size, with all the work being done in the ActionScript code. Click on the screenshot to try it out.


This post is tagged

3 Responses

  1. David Quiles says:

    Hi Mark,

    I tried this file out through the cd when I purchased the Web Designer magazine. It is really cool! Can I obtain permission from you to use this as an added background element to my personal portfolio web site I am building? Also, if given permission would you be able to guide me on how to remove the line effect and simply add the generation of particles without being followed by the mouse? I simply want to add the random particles as a subtle background element to my main page. Thanks Mark.

    Best,

    David

  2. Porter says:

    That’s amazing looking, I seriously just played with that for about 3 minutes, that’s pretty long given the hour, and it being a simple particle animation. I love the glow effect on the blue trailing tail, very cpu heavy as you said, but it’s so worth it. In a few years, it won’t even matter, so it’s all good haha.

    On a complete side note, excellent looking site, top notch design.

  3. Mark says:

    Thanks for your kind comments.

    David – here is the amended code for Main.as that removes the line and makes all the particles just appear random:

    package {
    import flash.display.*;
    import flash.events.*;

    public class Main extends MovieClip {

    private var cont:MovieClip;
    private var cont2:MovieClip;
    private var line:MovieClip;
    private var dustCount:Number;
    private var dparticle:Array = new Array();

    public function Main() {
    cont2 = new MovieClip();
    cont2.x=stage.stageWidth/2;
    addChild(cont2);
    createBG();
    cont = new MovieClip();
    //cont.x=stage.stageWidth/2;
    addChild(cont);
    addEventListener( Event.ENTER_FRAME, track );
    //line = new LineEffect();
    //addChild(line);
    }

    private function track( e:Event ):void {
    if (dparticle!=null) {
    for (var j:int=dparticle.length-1; j>=0; j–) {
    if (dparticle[j].alpha< =0){
    cont.removeChild(dparticle[j]);
    dparticle.splice(j,1);
    }
    }
    }
    var dust:MovieClip = new Dust();
    dust.x=Math.round(Math.random() * 800);
    dust.y=Math.round(Math.random() * 500);
    cont.addChild(dust);
    dparticle.push(dust);
    cont2.rotationY+=2;
    }

    private function createBG():void {
    for (var i:int=70; i>=0; i–) {
    var bg:MovieClip = new BG();
    cont2.addChild(bg);
    }
    }
    }
    }

Leave a Reply

Categories