Best way to create neon glow line effect in AS3?

Question

What's the best way to create a neon glow line effect in Flash AS3? Say similar to what's going on in the game gravitron360 on the xbox 360?

Would it be a good idea to create movieclips with plain lines drawn in them and then apply a glow filter to them? or perhaps just apply the glow filter to the entire movieclip layer the movieclips are on? or just draw them manually and create a glow effect by converting the lines to fills and then softening edges? (wouldn't blend as well but would be the fastest CPU wise?)

Thanks for any help

Answer 1

I was looking for a solution to this too, but I found a easier, and performance-wise better one. Just draw everything in your graphics object again, but with a slightly fatter linestyle, wich is white and has an opacity of let's say 0.2.

It gives you a nice little glow effect, and you probably won't even notice the difference until you zoom in (or if the outline is too fat).

And I know your question is 9 months old, but I reckon that anyone who reads this will be thankful :3

Answer 2

The most flexible approach is to use the graphics object of the Shape, Sprite or MovieClip class and paint your lines dynamically. Then (as you suggested), apply a Glow effect to this display object.

With the graphics object, you can paint many lines in a single Sprite (or MovieClip), so it's a good idea to do that and have the filter applied to the Sprite, so that all lines will get the same filter effect. If you're drawing lines over a huge area, you should know that the glow filter is limited to certain size. From the docs:

A filter is not applied if the resulting image exceeds the maximum dimensions. In AIR 1.5 and Flash Player 10, the maximum is 8,191 pixels in width or height, and the total number of pixels cannot exceed 16,777,215 pixels. (So, if an image is 8,191 pixels wide, it can only be 2,048 pixels high.) In Flash Player 9 and earlier and AIR 1.1 and earlier, the limitation is 2,880 pixels in height and 2,880 pixels in width. For example, if you zoom in on a large movie clip with a filter applied, the filter is turned off if the resulting image exceeds the maximum dimensions.

I don't know how your background looks like, but with a dark background and bright lines, I suggest you additionally set the blendMode of your Sprite to OVERLAY or SCREEN (see BlendMode). With dark lines on a bright background, MULTIPLY could be a good blend-mode.

Update: In terms of performance, the fastest approach is probably a simple image of a blurred line. But that's not very flexible, as you would need an image for every possible line-length. A vector-based approach (with gradients or different fills) is going to be slower than the glow-filter. These filters are very fast and optimized and will outperform the drawing of lots of complex vector shapes.