A Flash Developer Resource Site

Results 1 to 10 of 10

Thread: AS3 Glow/blur effect

  1. #1
    Junior Member
    Join Date
    Mar 2009
    Posts
    8

    AS3 Glow/blur effect

    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?

  2. #2
    Ө_ө sleepy mod
    Join Date
    Mar 2003
    Location
    Oregon, USA
    Posts
    2,441
    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.

  3. #3
    Junior Member
    Join Date
    Mar 2009
    Posts
    8
    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

  4. #4
    Junior Member
    Join Date
    Mar 2009
    Posts
    8
    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:



    And here's the code:

    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);
    }

  5. #5
    Junior Member
    Join Date
    Jul 2008
    Location
    BC, Canada
    Posts
    29
    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.

  6. #6
    Junior Member
    Join Date
    Mar 2009
    Posts
    8
    Ye, but how would I do that, I'd really like to know how to create this effect!

  7. #7
    Member
    Join Date
    Feb 2007
    Posts
    63
    The easiest way is to use TweenMax - this is a free package that you can use to tween whatever you'd like.

    Tween Max

    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.

  8. #8
    Junior Member
    Join Date
    Mar 2009
    Posts
    8
    ok, so i tried the package out, and honestly, i don't know how that plug-in could achieve the effect im looking for..

  9. #9
    Member
    Join Date
    Feb 2007
    Posts
    63
    Could you go a bit more in depth as to what effect you're looking to achieve?

  10. #10
    Junior Member
    Join Date
    Mar 2009
    Posts
    8
    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/

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center