AS3 Glow/blur effect

[fr34k]

I've come across several AS3 movies using what looks like a special kind of blending glow or blur effect. As I'm relatively new to AS3 I haven't come up with a similar effect.

The effect looks like the one used here:
http://www.playauditorium.com/

Does anyone know how they do it?

[neznein9]

I assume you're asking about the slow dropoff of the fade while the objects move (everything else is done with soft blur filters). They're using a bitmapdata object to draw the stage every frame, then they move the particles and show the bitmap underneath at a low alpha - then redraw all of that (including the bitmap) back into the bitmap again - which gives you the trail and the effect of the blur fading out as it gets redrawn over and over at a slightly lower alpha each time.

[fr34k]

Yes, that's the effect I meant. But I'm didn't really follow you there. As said, I'm a bit new to AS3. An example or more in-depth explanation would be greatly appreciated :)

Thank you

[fr34k]

OK, so I got it basically working, but there's a problem. Once's the script starts blurring out the trail, a big black blob starts growing, which creates a weird effect. Looks like this:

http://www.imigin.org.uk/img/3b84c470.png

And here's the code:

var bmd:BitmapData = new BitmapData(550, 400, true, 0x151515);
var bm:Bitmap = new Bitmap(bmd);
addChild(bm);

var bf:BlurFilter = new BlurFilter(2, 2, 3);

var particle:Particle = new Particle();
addChild(particle);
particle.x = stage.stageWidth / 2;
particle.y = stage.stageHeight / 2;
particle.vx = particle.vy = 0;
var friction:Number = .95;

function mover():void
{
particle.vx += Math.random() * 4 - 2;
particle.vy += Math.random() * 4 - 2;
particle.x += particle.vx;
particle.y += particle.vy;
particle.vx *= friction;
particle.vy *= friction;
if(particle.x < 0){
particle.x = 550;
} else if(particle.x > 550){
particle.x = 0;
}
if(particle.y < 0){
particle.y = 400;
} else if(particle.y > 400){
particle.y = 0;
}
}

addEventListener(Event.ENTER_FRAME, loop);

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

[hafunui]

I'd like to know the solution to this as well. It's no problem if the background is black, but that's not always the case.

My only guess would be blend modes.

[fr34k]

Ye, but how would I do that, I'd really like to know how to create this effect!

[biscuitcleaver]

The easiest way is to use TweenMax - this is a free package that you can use to tween whatever you'd like.

Tween Max (http://blog.greensock.com/)

There's a plug in explorer and you can see the 'glow filter' line. Just hit example, and it'll show you the effect and even some code on how to achieve it.

[fr34k]

ok, so i tried the package out, and honestly, i don't know how that plug-in could achieve the effect im looking for..

[biscuitcleaver]

Could you go a bit more in depth as to what effect you're looking to achieve?

[fr34k]

well, as i said in my very first post, the somewhat 'organic' blur that seems to melt together and fade away, as made by the particles in this game: http://www.playauditorium.com/