My first go on AS3

I’ve been putting off learning AS3 or a good while, over the weekend I decided to have a bash at it :slight_smile:

My thoughts are mixed on it. I love the speed, and the class system seems much better than AS2, but my god is it unforgiving with the code, any slight hitch and it throws you an error message and doesn’t compile.

Also the depth management is really annoying me, I can’t even seem to put something at a depth of 1000 if I want to, it says index not available etc.

But the speed :beer: :thumb2: :bandit:

Anyway enough rambling, here it is, and yes you guessed it fellas, it’s a particle engine :smiley:

http://rumblesushi.com/AS3/star_mayhem.html - 6000 multicoloured, smoky particles.

http://rumblesushi.com/AS3/woods.html - The same engine with image manipulation

http://rumblesushi.com/AS3/gb2.html - Keep pressing the right arrow key to ramp up the particles, and an image shall form. First person to guess what it is is a super cool guy :bandit:

I enjoyed using it, but it was hard work, just so different. AS1 to AS2 was easy, but AS2 to AS3, not so much :slight_smile:

At this stage I can’t imagine creating a whole website in AS3, or a game, or anything fairly involved, I think I’m going to have to buy an AS3 book, and study hard.

Looks good! :thumb:

By the way, on the depth management front, the syntax is [FONT=“Courier New”]addChildAt()[/FONT] or [FONT=“Courier New”]setChildIndex()[/FONT]. If you want something at the top of the stack, just[FONT=“Courier New”] setChildIndex(child, numChildren)[/FONT].

You no longer go around willy nilly setting things to random depths, it’s all about the display list and the number of items that exist. :slight_smile:

those are pretty neat, nice going for a first shot at AS3

Thanks dudes. So did you get who the person is in the 3rd link? :smiley:

Ano - thanks man, so to simply add something at the top I do setChildIndex? Where do I specify the depth?

I thought simply “addChild” inserted an object at the top of the pile automatically? addChild is what I’ve been using.

I kept trying to use addChildAt and it kept saying index not available etc :slight_smile:

I’m finding AS3 a bit overwhelming to be honest, but despite that I like what I’ve created in it so far, I can see the power, so I am going to work hard at learning it proper.

Yeah, [FONT=“Courier New”]addChild()[/FONT] automatically puts it at the top of the stack - but if you want to put something at the bottom of the stack (or anywhere in the middle) use [FONT=“Courier New”]addChildAt()[/FONT], and if you want to move something after you’ve added it, use [FONT=“Courier New”]setChildIndex()[/FONT].

Do you know why it kept saying index not available when I tried addChildAt? I tried very simply, to add one Child at a depth of 1, and another at 2, and I kept getting these errors :slight_smile:

The index starts at 0, not 1. And it doesn’t permit empty indices.

If it was the only child, then 0 is the only acceptable parameter. It’s 0 based, so if you have 5 objects, their indexes will be 0, 1, 2, 3, 4.

OK I see, so 0 has to be filled, so it’s sort of like an Array now?

And it’s impossible for me to add something at a depth of 5000 for example?

How have you found the depth management Anogar? Better or worse than AS2?

[quote=rumblesushi;2335024]OK I see, so 0 has to be filled, so it’s sort of like an Array now?

And it’s impossible for me to add something at a depth of 5000 for example?

How have you found the depth management Anogar? Better or worse than AS2?[/quote]

Yup, it is an array. I think the depth management is much better.

If you have a webcam, check this out http://rumblesushi.com/AS3/wc2.html

Looks good. Be happy the compiler’s strict though. Every error the compiler picks up is one less run time error you would encounter. I actually wish it picked up more.

I don’t quite understand how you’d even do something like that. Do you just practice particle effects a lot? I had gotten pretty comfortable with myself in AS2, but after seeing something like that where I wouldn’t even know where to start, I guess I kind of realize how much I don’t know.
I could put dots on the screen and have them move around randomly, but I couldn’t make them follow a non linear path, let alone have smoke trail after them. Would you mind giving me some tips? Would you mind posting your source code if you just did it for fun?

[quote=RonH;2336639]I don’t quite understand how you’d even do something like that. Do you just practice particle effects a lot? I had gotten pretty comfortable with myself in AS2, but after seeing something like that where I wouldn’t even know where to start, I guess I kind of realize how much I don’t know.
I could put dots on the screen and have them move around randomly, but I couldn’t make them follow a non linear path, let alone have smoke trail after them. Would you mind giving me some tips? Would you mind posting your source code if you just did it for fun?[/quote]

I dunno about his code, but I had a couple minutes so I made an example for you:

Demo: http://ragonadesign.com/particles/particles.html

**Source:
**


//imports
import gs.TweenMax;
import fl.motion.easing.*

//particle variables
var numParticles:int = 100;
var particleSize:Number = 5;
var particleArray:Array = [];

//animation timer variables
var moveTimer:Timer = new Timer(2000);

//'smoke' variables
var bmd:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight, true, 0x000000);
var bm:Bitmap = new Bitmap(bmd);
var bf:BlurFilter = new BlurFilter(2, 2, 1);
var cmf:ColorMatrixFilter = new ColorMatrixFilter([1, 0, 0, 0, 0,
                                                   0, 1, 0, 0, 0,
                                                   0, 0, 1, 0, 0,
                                                   0, 0 ,0 ,0.75 ,0]);

init();

function init():void
{
    addParticles();
    addTimer();
    addSmoke();
}

function addParticles():void
{
    for (var z:int = 0; z < numParticles; z++)
    {
        var curParticle:Sprite = buildParticle(particleSize);
        //
        addChild(curParticle);
        //
        particleArray.push(curParticle);
    }
}

function addTimer():void
{
    moveTimer.addEventListener(TimerEvent.TIMER, animateParticles);
    moveTimer.start();
}

function addSmoke():void
{
    addChild(bm);
    addEventListener(Event.ENTER_FRAME, drawSmoke);
}

function buildParticle(size:Number):Sprite
{
    var retSprite:Sprite = new Sprite();
    var partX:Number = Math.random()*stage.stageWidth;
    var partY:Number = Math.random()*stage.stageHeight;
    //
    retSprite.graphics.beginFill(Math.random()*0xFFFFFF, 1);
    retSprite.graphics.drawCircle(0, 0, size * 0.5);
    retSprite.graphics.endFill();
    //
    retSprite.x = partX;
    retSprite.y = partY;
    
    return retSprite;
}

function animateParticles(e:Event):void
{
    for (var z in particleArray)
    {
        var curParticle:Sprite = particleArray[z];
        var animTime:Number = Math.random() * 3 + 1;
        var partX:Number = Math.random()*stage.stageWidth;
        var partY:Number = Math.random()*stage.stageHeight;
        var thruX:Number = Math.random()*stage.stageWidth;
        var thruY:Number = Math.random()*stage.stageHeight;
        //
        TweenMax.to(curParticle, 2, {x: partX, y: partY, bezierThrough:[{x: thruX, y:thruY}], ease:Linear.easeNone });
    }
}

function drawSmoke(e:Event):void
{
    bmd.draw(this);
    bmd.applyFilter(bmd, bmd.rect, new Point(0, 0), bf);
    bmd.applyFilter(bmd, bmd.rect, new Point(0, 0), cmf);
}

Just drop that into a blank FLA, and it’ll do the rest. This is a really basic example that I made in about 10 minutes, so you’ll have to excuse any random imperfections. I used [U]TweenMax[/U] as the tweening engine.

:thumb:

Not bad ano, if you really did it that quick :wink:

I’ll say one thing though, I don’t use tween engines. I love creating organic natural movement.

How many particles can you ramp it up to with that engine Ano?

Hah, I did do it that quick, there’s not really much work involved in something simple like that, especially when you use a tweening engine.

I put it up to about 1000 without any serious issues, but clearly it depends on your processor. (Your mileage may vary.) For the best performance using a custom movement solution (like you did) would be best.

What formula did you use for movement?

*edit:

*The biggest performance hog in that one is really the blurring, not the movement. TweenMax is pretty light on CPU usage.

That’s why I asked, I was just curious as to how a tween engine would compare with a custom movement engine :slight_smile:

Obviously - the tweenLite and tweenMax benchmarks are pretty ■■■■ impressive compared to the rest of the tween engines. I might start using tweenLite for certain things actually.

And yep, without the smoke effects the cpu usage is minimal, I could probably have 50,000 particles :smiley:

The formula, they ALL have the same random destination - which moves from stage left to stage right as you may have guessed, when they rush across, and with the scope of that end goal, they have random goals, and random velocity, that’s what creates the sort of… **very **random effect, big ball of randomness.

Within motion graphics, random movement is what interests me the most, and I like to try and create things that look sort of organic, rather than just movement with random coordinates etc.