Seb Lee-Delisle

I just saw Keith Peter’s cool outline drawing effect using a glow filter. I love Keith’s work and this is a great example of his imaginative use of Flash techniques.

I thought I’d add to Keith’s code to demonstrate an alternative method of achieving the same thing, and it’s a trick I use a lot.

A simple edit of Keith’s file; all we’re doing is drawing a big fat black line on one sprite, then a slightly thinner white line on a separate foreground sprite.

It’s the same technique that we use on the Plug-in Media website to create the gooey particle drips – rollover the buttons on the main home page to see what I mean. It was originally inspired by the particles on the masthead of Jared Tarbell‘s levitated site. Incidentally I met Jared last week at FlashBelt; he’s a great guy, and his work is an inspiration. But more about that later…

In the meantime, here’s the code for the above example, all just put on the timeline.

 
import flash.filters.GlowFilter;
import flash.events.MouseEvent;
 
var xpos:Number;
var ypos:Number;
 
var fgSprite:Sprite = new Sprite(); 		//foreground sprite
var bgSprite:Sprite = new Sprite(); 		//background sprite
 
addChild(bgSprite);
addChild(fgSprite);
 
resetSprites();
 
stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
stage.addEventListener(KeyboardEvent.KEY_UP, onKeyUp);
 
function onKeyUp(event:KeyboardEvent):void
{
 
	resetSprites();
}
 
function resetSprites()
{
 
 
	fgSprite.graphics.clear();
	bgSprite.graphics.clear();
	fgSprite.graphics.lineStyle(20, 0xffffff);
	bgSprite.graphics.lineStyle(24, 0);
 
 
}
 
function onMouseDown(event:MouseEvent):void
{
	xpos = mouseX;
	ypos = mouseY;
 
	fgSprite.graphics.moveTo(mouseX, mouseY);
	bgSprite.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)
	{
		fgSprite.graphics.lineTo(mouseX, mouseY);
		bgSprite.graphics.lineTo(mouseX, mouseY);
	}
}
 
function onMouseUp(event:MouseEvent):void
{
	stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
	stage.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp);
}

[UPDATE] It seems I was indeed missing something as Keith and Tink pointed out. Keith’s method will work on any image, even complex shapes, whereas this method will only work on simple shapes. Also, the centre area in Keith’s example is transparent, so it’s only the outline that appears.

But still, it was a good opportunity to demonstrate this method, as it forms the basis of a lot of other effects.

Related posts:

1. Simple Flash 3D drawing API
2. Papervision "billboard" particles
3. Give an infinite amount of coders an infinite number of laptops…
4. Happy Birthday Keith Peters!
5. Papervision interactive Line3D

This entry was posted on Wednesday, June 27th, 2007 at 6:13 pm and is filed under Actionscript, Flash, General. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.