Seb Lee-Delisle

Just a quick post to show off one of the new effects that was in my recent FlashBelt session on particles.

I’m really pleased how this one came out, it’s a combination of a little spark particle and a smoke effect, although the smoke looks a little more like retinal burn. Which is fine by me

It looks like there’s a kind of motion blur as the particles fly out, but all I’m doing is actually rotating the lozenge shaped spark particle to match the direction the particle is moving in. The way we calculate the angle of the direction of movement uses pythagorus’ theorum – it’s the same way that we calculate the angle of a right-angled triangle.

clip.rotation = Math.atan2(velocityY, velocityX);

Except of course that this will return the value in radians and we need degrees. And we do that by multiplying by 180/PI:

clip.rotation = Math.atan2(velocityY, velocityX) * 180 / Math.PI;

Source is in my earlier FlashBelt post.

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.

Hi guys,

here are the source files for today’s presentation. Download, play with them and then resend them to pluginmedia@gmail.com.

sebleedelisle-particles.zip

Wow, just been rewriting my “Particles for the non-scientist” session into AS3, and as we all would expect, there are major speed increases.
Here’s a quick example, click for massive particle bursts…

I’ll be presenting this work at FlashBelt next week, and I’ll post the code up shortly afterwards.

Remember that huuuuge game we were working on earlier in the year? The one that caused me to stop blogging for about 3 months and cancel Christmas? Well it’s finally up on MiniClip.

In fact it had over 103,000 plays in the first 20 minutes! And now after one day it’s had well over a million. Which is truly amazing and indicative of how massive MiniClip is these days.

It’s a massive 9 level platform game, each level is a different part of the world with a different enemy chasing you. In Paris you’re in a crumbling cathedral with Quasimodo, in Sweden you’re in a sauna with a fat guy with a towel, and in Amsterdam you’re running from a leather-clad dominatrix! There’s even a snowboarding level – see if you can find it.

But anyway check it out if you fancy a little lunchtime distraction.

Over the last few months we’ve been working like crazy little typing elves painstakingly crafting the new masthead for the FlashForward site. It’s such an honour to be asked, so we’ve put far more work into it than we allocated, in order to produce something we hope is a little bit special.

Plug-in’s creative director Dominic Minns came up with the initial concept, which, like our own website, was heavily influenced by 50s B-Movie posters. We also liked the abstract nature of the title sequence of The Twilight Zone. So while he got to work drawing and animating disembodied typing hands, giant robots, brains in Flash branded jars (amongst other things) I started building prototypes for a mindbending 3D spiraling vortex.

We wanted it to have the effect of of a rotating spiral, you know the kind of effect you see in cartoon characters’ eyes to show that they’re being hypnotised But I also wanted a kind of Doctor Who type space worm-hole type thing! And we’d just converted our Plug-in 3D engine into AS3 so it was the perfect opportunity to see what we could do with it!

I’ll be explaining in much more detail step-by-step how we made it in later blog posts but for now check out the demo version above – click on it to see how the models work in wireframe.

Although you can see the full banner in all it’s glory at www.flashforwardconference.com along with a full explanation from Dom and myself about the background thinking behind the banner on their blog.

Oh and really excited to be giving the AS3 version of my particles session! But more about that later…

[Update] apparently the banner crashes the new beta Flash plug-in… if anyone has any insight as to why this may happen, i’d be very grateful!

[Update] according to Tinic Uro they saw our banner and realised there is a bug in the beta release. They’ve fixed the bug internally and this will be implemented in the next release. Cool!

Adobe Live

Myself and fellow Plug-in Media director Dominic Minns have been asked to present a 45 minute session all about the work we do. We’ll be giving you an insight into the thought processes (ha!) and the tricky codey things behind the projects we make. We’ll be in the Web Theatre on Tuesday and Wednesday at 3pm.

FlashBelt

A truly mindblowing speaker line-up means that this year’s FlashBelt is nearly sold out! I’ll be presenting my new particles session, now updated for as3, giving us 10 times as many particles! I’m really looking forward to visiting Minneapolis, there are some awesome speakers and I’m particularly looking forward to meeting Andre Michelle who’s work is always astonishing.

Flash on the Beach
Ah and who could forget Flash on the Beach? Dom and I will be running a day long Flash games workshop!