Light Writing Effect

A while back I was given the task of trying to animate a banner that was to go on a site we were building at Visual Jazz. All in a usual days work I thought until I saw the design mockup and realised it had been photo-shopped to the bejeezus.

The idea behind it was that it was meant to look like when you take a sparkler and move it around really fast in the air – the glow leaves a line of light behind it for a few seconds.

After a fair bit of messing around I finally came up with something I think looked pretty cool, which you can check out here…

You need flash and javascript to view this content.

The way it works is kinda simple, but in a slightly complicated way… if that makes sense..

Basically, I created a round BitmapData that would act as a ‘brush’. It was a simple circles with blurred edges. I then had a second transparent BitmapData that would act a canvas for the brush to draw into.

Every frame of the animation I would check for a change in the brush position, and if it had moved I would draw a line between the two points with the brush. Unfortunately, there isn’t a built in way to draw lines using a BitmapData so I used some basic math to divide up the line I wanted to draw into equal steps, then drew the brush BitmapData at each step along the line.

That gave me a basic soft edged brush effect, but it didn’t fade out over time. That is where the BlurFilter comes in.

On every frame I would apply a BlurFilter to the canvas BitmapData – I can’t remember the exact amount, but it wasn’t too big. By itself it didn’t do too much to the canvas, but by applying it every frame, the blur would accumulate and slowly fade the drawing out to transparent.

That’s the basic gist of it.

To make it look a bit cooler, I actually ran two versions of this effect over the top of each other – one for a soft glow, and the other for a hard edged central colour – I thought it gave it a nicer effect. I also started adding in some basic scale changes depending on how fast the mouse was moving, so the lines would thin out on fast motions

I think it looks pretty cool and it worked with the designs really well. Just to make things tricky though, they made be rebuild the whole effect using AS2 so that it could be used in some banner campaigns. I had forgotten how much better AS3 is 🙂

A copy of the source code used to create this demo can be found on GitHub

Leave a Reply

Your email address will not be published. Required fields are marked *

Name *

This site uses Akismet to reduce spam. Learn how your comment data is processed.