Seb Lee-Delisle

Menu

Outline drawing by Keith Peters

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.

Plug-in Media Goo drips

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...

Levitated.net - converging particles by Jared Tarbell

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. 🙂

This entry was posted in Actionscript, Flash, General, Obsolete. Bookmark the permalink.

One Response to Outline drawing by Keith Peters