Seb Lee-Delisle

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!

I’m really sorry to go on about it but it’s the last day to vote for us in the Webby People’s Voice award! I wouldn’t hassle you except that we’re currently in second place!

Please visit the site, register and vote for your favourite in the Professional Services category.

http://pv.webbyawards.com

and here’s a link to us once you’ve registered and logged in :

http://pv.webbyawards.com/nominee/entry/360

I’ll be eternally grateful!

Amazing news this week that our site has been nominated for a Webby award this year. We put so much work into that site so to have it recognised by the industry is really rewarding. True to form, Plug-in’s creative director Dominic Minns, (the creative genius behind the mad ideas on the site), provided us with a suitably quirky quote for our press release : “It’s great to be nominated, especially alongside such monsters of the interweb, having put so much time and effort into building a site that made us laugh, it’s a great relief to find that others get the joke too.”

We’re also up for a people’s choice award, but seeing as we haven’t spammed the internet trying to get votes, I’m not holding my breath. But if you’re feeling generous click here :

Thank you!

Well it’s been a week, and I’ve been sooo busy I haven’t even had a chance to post a quick review of Flash on the Beach! We’re just at the negotiation stages of a HUGE Flash game, so watch this space for more information.

Mario steals Dom’s ukulele (photo: Marc Thiele)

It was an awesome conference, and I had a great time! John did an amazing job and the venue and speakers were all spot on. It was such a privilege to have this conference here in Brighton, and it was great to see my home town in the eyes of new visitors! Thankfully, you all seemed to like it .

On the first day we had the Adobe guys doing pretty much the same presentation they did at FlashForward, but hey I only had to travel down the road to see it this time! (I live in Brighton )

Then I saw Craig Swann, who’s doing great work with tactile interfaces in Flash, and he’s certainly inspired me to start playing around with webcams again!

Craig enjoying Brighton’s unique eco-system. (photo:Keith Peters)

And then I was called back to the office, so gutted cos I missed my good friend Aral Balkan‘s session. And just when I needed his explanation of how to run a huge software project. Damn it! And then I missed Eric Natske’s session!!! I saw him at Flash Forward in New York in 2005, and he was awesome. But at least I got to finally meet him at the Plug-in party (more below).

The next day, I just about made it in time to see Brendan Dawes – a great session as ever. I really must get a copy of his book… and then off to Marcos Weskamp, who somehow makes boring data look really beautiful!

Then a sneaky look at MS Expression, and then made it to Keith Peters’ session who gave us a quick lesson in AS3 (not a moment too soon!)

Day 3! Up early for my session, which seemed to go down well! Then back to the office again! But thankfully I managed to see Hoss Gifford (nutter) and Mario Klingemann (crazy genius).

But we were all gearing up for the Plug-in Media end of conference party! Which was a bit of an event (to say the least!) Everyone who was anyone in the Flash world was there, and we even had Dom’s ukulele band, and our new friend Zamira the belly dancer. (AKA Michelle Yaiser from Boston)

Really excited about how it when, let’s look foward to the next one! And MASSIVE kudos to John Davey, great work mate!

As a special Christmas gift, I’ve made a snowing screensaver for Plug-in Media to give away!

I’ve been working on edge detection in images, so now the snow settles on the surface of objects in any bitmap :

So I thought it’d be fun to make a screensaver that makes the snow land on the windows and icons on your desktop:

I built it using Zinc, which I picked up at Flash on the Beach. It’s only a PC screensaver at the moment, but I should hopefully get a mac version working soon!

UPDATE : I’m having some serious problems with Zinc, and the screensaver is unreliable, so it’s been removed for the time being. I’m working with Zinc to fix the problem.

Filmed in PLUG-IN-O-VISION, it’s become the living, breathing manifestation of Frankenstinian innovation. Dare you enter and bear witness to Flash wizardry, actionscripting of monstrous proportions, terrifying illustration and insane creativity?

Ahem.

In other words, after months of development, and nearly 40,000 lines of code (I just counted!) the Plug-in Media site is finally finished!

Just in time for Flash on the Beach, where I’ll be explaining how we produced the real-time generated 3D with texture mapping and light sourcing.

Check it out and let us know what you think.

I’m going to tell you all about the scary horror that has been programming the Plug-in Media news page. It’s been tricky to say the least, but then that’s probably my own fault because it was my idea to have realtime generated 3D news panels that float and flip to reveal each news story. It would indeed be boring if it were too easy.

And here is the fruit of our labour at half size. (Click on a panel to reveal the story) .

And if it isn’t complicated enough, the content for the panels is loaded in dynamically from an XML file! So where to start…

Making the 3D objects

Thankfully this bit is quite straightforward. Well, as least it’s straightforward for us – we have our own Flash 3D engine! (The last 3 years of slogging away at this system was worth it after all… ) Our system makes it quite easy, so we make several 3D rectangular objects, one for each news item.

Making the labels

OK so we’ve loaded the headline in from the XML file, now we have to convert that into a bitmap to put on to the side of the 3D object : easily done using the BitmapData object. So, in actionscript we create a movieclip with the paper texture and headline in it, resize it to fit the text, and draw it into a bitmap using the BitmapData.draw() method.

We then map that bitmap onto the 3D surface on the front of the panel – those of you that were at my FlashForward presentation will understand how we do this, but the notes are here if you missed it!

The news item itself

When the news panel flips round you can see the full story on the other side, along with working scroll bars and images! So we had to convert all of the news content into a bitmap while it’s flying around on the panel, and then, after it stops moving around we have to sneakily switch it for the real content!

Simple real-time easing

For the movement of our panels we did our usual trick… we have a really easy to use real-time ease out function. This is a great method and you can use it for any kind of movement in 2D or 3D.

Here’s a 1 dimensional example.

The x position of our ball is 50. And we want it to move to 400, but gradually slow down as it gets there. The secret is that, every frame we move the ball only a fraction of the way to the target:

ball._x = 50;
ballTargetX = 400;

onEnterFrame = function(){

	//find out the distance between where the ball is and where it's going
	difference = ballTargetX-ball._x;

	 //and multiply it by 0.2
	difference*=0.2;

	// and add this value to the x position.
	ball._x+=difference;
}

And here it is in action (click to activate) :

The ball will gradually slow down as it approaches the target. The great thing about this method of easing is that you don’t need to know in advance where the ball is going to end up – in fact you can continually change the target as you go along… as in this 2 dimensional example that follows the mouse :

var ballTargetX:Number;
var ballTargetY:Number;

this.onEnterFrame = function(){

	ballTargetX = _xmouse;
	ballTargetY = _ymouse

	//find out the distance between where the ball is and where it's going
	differenceX = ballTargetX-ball_mc._x;
	differenceY = ballTargetY-ball_mc._y;

	 //and multiply it by 0.2
	differenceX*=0.2;
	differenceY*=0.2;

	// and add this to the position.
	ball_mc._x+=differenceX;
	ball_mc._y+=differenceY;

}

And here’s the swf (click to activate):

And to get the springy effect we use a really simple velocity method. We’re basically remembering the distance the ball moved in the last frame, reducing it, and adding it to the amount we have to move this frame. It just “remembers” the direction in was moving and still moves a little bit in that direction:

var ballTargetX:Number;
var ballTargetY:Number;

var velX:Number = 0;
var velY:Number = 0;

this.onEnterFrame = function(){

	ballTargetX = _xmouse;
	ballTargetY = _ymouse

	//reduce the velocity
	//(the higher this is the more springy
	// the movement gets. Should be < 1! )
	velX*=0.7;
	velY*=0.7;

	//find out the distance between where the ball is and where it's going
	differenceX = ballTargetX-ball_mc._x;
	differenceY = ballTargetY-ball_mc._y;

	 //and multiply it by 0.15
	 //(the higher this number, the faster it moves)
	differenceX*=0.15;
	differenceY*=0.15;

	// and add this to the velocity.
	velX+=differenceX;
	velY+=differenceY;

	// and add the velocity to the position
	ball_mc._x+=velX;
	ball_mc._y+=velY;

}

And here’s the swf (click to activate):

You can apply this method to any of the attributes of any object – in our news page, it’s affecting the position, scale and rotation of our 3D news panels. You could use it for anything, scaling buttons on a rollover, rotating a spaceship to follow the mouse, or even fading MovieClips in and out.

And just in case you’re interested, you can download the example source files. .

The site will be launched and the end of this month, if you want us to let you know when it’s ready, mail Plug-in Media and we’ll add you to the mailing list.

NB Now the smarter among you may have noticed a slight flaw in the logic of this method : as we’re never quite moving all the way to the target, the distance will just get continually smaller and smaller and never actually reach the target! So it’s a good idea to actually check the distance, if it’s less than, say, 0.001, then just move the object to the target. This will save the constant floating point maths calculations too!

It seems like weeks and weeks since we started developing the new Plug-in Media website. It’s like a huge alien organism from outer space, growing and growing out of control, not satisfied until it overtakes the Earth!

Which is only to be expected, considering its 50s and 60s b-movie theme.

It seems like every page requires some crazy new effect, so far we have flying saucers, gooey drips, exploding skeletons, and lens flare particle sparks.

You probably already know that we have a Flash 3D rendering engine, and it was important to me to show off our 3D capabilities gratuitously and at every possible opportunity.

But we had a problem. The ultra clean clinical look of the 3D objects just didn’t match the style of comic book hand illustrated graphics. So we had to work out how to make our 3D objects look more “cartoony”.

The first problem was that our 3D objects lacked a black outline. Well, we already had a way of rendering each side (or plane) of a 3D object with a black outline, but when shapes got complex it looked a bit messy. For example, our cylinder objects are made up of many planes, and the outline would appear on every one, making a huge blob of outlines! See example above.

When working in 3D you can save processor time by working out which planes are facing away (or “back-facing”) and then not draw them. This is called “back-face culling”. But we realised that we could use these back-faces to our advantage – if we drew them with a massive fat outline, they would only show up around the edge of the shape. And that’s how we get our new cel outline effect.

One of our website pages is called “Dr Pluginschtein’s lab” where you can play with various switches and knobs and cool stuff happens (honest). Here is a 3D cel rendered switch in the lab, seamlessly(!) integrated with cartoon style illustration.

Coming soon – 3D string simulations, bat particles, 3D spinning news panels, and scantilly-clad women flashing their underwear (don’t ask).