Speeding up your glow effects

Because of a current project I ran into some problems because I overused the GlowFilter. There are a lot of objects flying around that glow using blendMode add. You can imagine that the framerate directly decreased. Than I came up with four methods to create a glow effect I will list here.

Traditional way:
Create one empty movieclip and attach the object two times into that movieclip. The object with the lower depth has the glowfilter applied and the blendMode is set to add. The pros of this method are that it is very exact. The cons are of course the speed. Every frame needs a new calculation of the glow. This method should be used for objects where the glow accuracy is really necessary.

Cheap way:
Draw a simple shape of your object using radial blur for example. Create again one empty movieclip and attach the shape first, then the object. Now set the blendMode of the shape to add and you are done. This is very fast and cheap. It does not look very good but for some objects it makes sense. Imagine a ball for example or a planet in space.

Caching the glow:
This is a little bit more elegant. You start with an empty movieclip. Then create another empty movieclip and at last attach the object. Now you have to apply the GlowFilter to the object and draw that into a BitmapData. That can be attached to the other empty clip and the blendMode should be again set to add. Now you don’t have to draw the shape by yourself but of course if the object is animated it does not look very good because you will see that the glow has been cached for the first frame.

Simple code example:
[as]// imagine you have got the clip character
// another clip is character.characterMain
// and last but not least character.characterEffect
// —

// initialize filter
var glow: GlowFilter = new GlowFilter(0xFF99FF, 0×10, 0×10, 0×10, 0×01, 0×06, false, false );
characterMain.filters = [ glow ];

var matrix: Matrix = new Matrix();

// translate to correct position
matrix.translate( 40, 40 );

// correct size because of transition here
var bmp: BitmapData = new BitmapData( characterMain._width + 20, characterMain._height + 20, false, 0 );
bmp.draw( characterMain, matrix );

// attach bitmap and cache clip
characterEffect.attachBitmap( bmp, 1, ‘auto’, false );
characterEffect.cacheAsBitmap = true;

// sweet blend mode
characterEffect.blendMode = ‘add’;

// reset filters
delete characterMain.filters;[/as]

The last thing I can mention here is another method I never tried. You could cache every frame into a BitmapData. A thread in the FlashKit forums describes how to use BitmapData objects for animation. This should be the best way because it is fast and dynamic.

Because of a current project I ran into some problems because I overused the GlowFilter. There are a lot of objects flying around that glow using blendMode add. You can imagine that the framerate directly decreased. Than I came up with four methods to create a glow effect I will list here. Traditional way: Create one empty movieclip and attach the object two times into that movieclip. The object with the lower depth has the glowfilter applied and the blendMode is set to add. The pros of this method are that it is very exact. The cons are of course the speed. Every frame needs a new calculation of the glow. This method should be used for objects where the glow accuracy is really necessary. Cheap way: Draw a simple shape of your object using radial blur for example. Create again one empty movieclip and attach the shape first, then the object. Now set the blendMode of the shape to add and you are done. This is very fast and cheap. It does not look very good but for some objects it makes sense. Imagine a ball for example or a planet in space. Caching the glow: This is a little bit more elegant. You start with an empty movieclip. Then create another empty movieclip and at last attach the object. Now you have to apply the GlowFilter to the object and draw that into a BitmapData. That can be attached to the other empty clip and the blendMode should be again set to add. Now you don't have to draw the shape by yourself but of course if the object is animated it does not look very good because you will see that the glow has been cached for the first frame. Simple code example: [as]// imagine you have got the clip character // another clip is character.characterMain // and last but not least character.characterEffect // --- // initialize filter var glow: GlowFilter = new GlowFilter(0xFF99FF, 0x10, 0x10, 0x10, 0x01, 0x06, false, false ); characterMain.filters = [ glow ]; var matrix: Matrix = new Matrix(); // translate to correct position matrix.translate( 40, 40 ); // correct size because of transition here var bmp: BitmapData = new BitmapData( characterMain._width + 20, characterMain._height + 20, false, 0 ); bmp.draw( characterMain, matrix ); // attach bitmap and cache clip characterEffect.attachBitmap( bmp, 1, 'auto', false ); characterEffect.cacheAsBitmap = true; // sweet blend mode characterEffect.blendMode = 'add'; // reset filters delete characterMain.filters;[/as] The last thing I can mention here is another method I never tried. You could cache every frame into a BitmapData. A thread in the FlashKit forums describes how to use BitmapData objects for animation. This should be the best way because it is fast and dynamic.