Ran across a cool use of the glow filter recently. Thought it would be fun to share. Basically, if you make a glow filter with a relatively small amount of blur, set to inner and knockout, it will just draw an outline of whatever it is applied to. Here it is used in interactive drawing. Cool effect that would be pretty close to impossible without filters. Click and draw. Press a key to clear.
[kml_flashembed movie=”http://www.bit-101.com/misc/outlinedraw.swf” height=”400″ width=”550″ /]
I actually just did this on the timeline in Flash CS3, so here’s the code. Play with the parameters to get other effects.
[as]import flash.filters.GlowFilter;
import flash.events.MouseEvent;
var xpos:Number;
var ypos:Number;
graphics.lineStyle(20, 0);
filters = [new GlowFilter(0, 1, 4, 2, 2, 1, true, true)];
stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
stage.addEventListener(KeyboardEvent.KEY_UP, onKeyUp);
function onKeyUp(event:KeyboardEvent):void
{
graphics.clear();
graphics.lineStyle(20, 0);
}
function onMouseDown(event:MouseEvent):void
{
xpos = mouseX;
ypos = mouseY;
graphics.moveTo(mouseX, mouseY);
stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
}
function onMouseMove(event:MouseEvent):void
{
var dx:Number = xpos – mouseX;
var dy:Number = ypos – mouseY;
if(Math.sqrt(dx * dx + dy * dy) > 10)
{
graphics.lineTo(mouseX, mouseY);
}
}
function onMouseUp(event:MouseEvent):void
{
stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
stage.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp);
}[/as]
Nice! I’ve used that in the past to create an outline for dynamic text. The designer (surprise surprise) wasn’t satisfied with the quality, but such is life 😉
Hey Keith,
that’s cool! Although you can do a very similar effect without filters… unless I’m missing something?
Edited version here :
http://www.sebleedelisle.com/?p=111
cheers!
Seb Lee-Delisle
Thanks Seb. Yeah, I have used your technique before – also inspired by Jared, as well as David Hirmes.
Two things are different with this technique. One, it will work with any content – predrawn shapes, text, drawing api, loaded content, etc., with no extra work. It’s not just for drawing API, though that’s what I used to demonstrate it. Also, the outline is actually an outline. It’s not obvious on the white background, but if there were something behind there, you could see right through it. Of course, you could change this by setting knockout to false, too.
ahhh yes I thought it may be something like that! I guess you could always use a mask to knock out the middle? Hahahaha yeah OK masks are horrible… 🙂
Ah bugger i should have read the comments here before clicking the link.
Very cool, an elegant….as usual 🙂
Weirdness in the player, though. If you right click, and zoom in tree times, the shape is filled in solid black. I wonder why.
yeah Kristin, I noticed that too. I’ve seen other weirdness with filters when zoomed in, too.
I think the reason filters stop working when zoomed in is because the movieclip is automatically set to cacheAsBitmap in order for the filter to work.
As the size of a bitmap is limited (2880 x 2880 i think?), when you zoom in the movieclip becomes too big to cache as a bitmap any more, and the filter fails.
You could achieve a similar looking effect by taking the shape you have there and drawing it onto a bitmap data repeatedly, only rotating it a certain number of degrees at a certain radius, and then punching out a hole in the middle by redrawing that part with 0 alpha. That’s the kinda trick we did at http://www.wiffiti.com.
I must admit, this solution is much more elegant.
Well done!
http://www.as3tutorial.com/tutorial/creating_glow_function_using_as3/12/
Ä° have found a easy using glow filter samples on this link.