New improved cacheAsBitmap!

I’ve been working on a smart function that can convert a MovieClip into a bitmap so that it renders faster. “What’s wrong with the cacheAsBitmap property?” I hear you cry. Well much as it’s an amazing way to optimize the speed of moving clips, it can sometimes actually slow down render time!

It’s fine as long as you don’t resize or rotate your MovieClip. But as soon as you change the clip, the FlashPlayer has to re-create the bitmap cache.

So what I’ve done is make a bitmap and rotate and scale that instead. It’s not quite as good quality as when you do it with Vector graphics, but it’s so much faster it doesn’t matter.

And here’s an example:

And yes it is AS2! 🙂

So I spent ages working on this code (matrix hell that you don't want to know about), and I have a horrible feeling someone else beat me to it, so if anyone's seen anything like this before let me know!

And I'll be releasing this under a creative commons licence as soon as I get a spare moment, so keep an eye out :-).

MovieClip.transform.matrix experiments…

Just been playing with the MovieClip.transform.matrix property to copy one movie’s rotation, scaling and position to another, and it’s been behaving a little unexpectedly… Here’s an example:


movieclip2.transform.matrix = movieclip1.transform.matrix;

This code copies movieclip2‘s position, scale and rotation to that of movieclip1. But importantly, it only sets movieclip2‘s transform
object, and not its _xscale, _yscale, and _rotation properties. Which you need to adjust manually, it seems.

I’ve been making some smart code that manually caches a bitmap version of a movie… I’ll be posting that soon.

Update : interestingly, it does seem to set the second movieclip’s _x and _y properties…

More realtime easing : Flash 3D Boxes

Here’s another example of the realtime easing method I described in the last post, this time being applied to the rotation of 3D boxes. The target rotation of each box is changed on a rollover.

I think this could make a good game… see if you can get all the squares to be red at the same time!

Click to activate :

Simple real-time easing in Flash & 3D panels

News Flash!

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!

New Plug-in Media news page

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. [sorry, files no longer available]

The site will be launched and the end of this month, if you want us to let you know when it's ready, mail us 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!

3D in Flash – Cel shading

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.

Plug-in Media home page - exploding skeletons

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.

Spark effect from the new Plug-in Media website

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.

3D Cell shaded switch in situ on the new Plug-in website

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

New 3D Flash examples available

I’ve had several requests for the 3D realtime animated slides that I presented at Flashforward this year, so here they are!

3D Physics

The first is a walkthrough of how we simulate physical movement, firstly in one dimension, then 2, then 3! Followed by an explanation of how spin on a ball makes it curve.

Click through to get to the cool 3D examples at the end of the slideshow.

3D Textures

The second shows you how we break up an image into triangles in order to get the perspective distortion required for 3D texture rendering in Flash.

Again, click through to see the 3D textures in action!

Thank you for the particles

Just had a really sweet email from Steve Heffernan who was the guy who did the George Bush particles (check the audience submissions from yesterday). Apparently he was so inspired by FlashForward speakers that he had to express his gratitude in swf form [link no longer available] (Flash 9 required) :-). Thanks Steve!

FlashForward thank you card

And thanks also to my new friend Niqui Merret who was also very complimentary about my particles on her blog.

And while I’m in Oscar-acceptance-speech mode, I’d like to thank Lynda, Toby and all the organisers of FlashForward in Austin this year who did an amazing job as ever.

And thanks also to my manager, my mum, etc etc… heheheh 😉

Particle-mania

I thought I should just post a quick follow up to my particles session at FlashForward… you guys have been going particle crazy!

First of all, here are the audience submissions* that you guys made during the session… seriously entertaining. 🙂

My favourite by Bronius Motekaitis…he actually took the picture mid presentation! hahaha! And yes that is a Dell I’m using in the picture, which ironically has just blown up in real life!

And here are the source files (zip)* used during the presentation.

More coming soon...

*Files no longer available - sorry!

If you can’t beat them…

hahaha so I finally succumbed and started my own blog. It was largely due to the great feedback I had from my sessions at FlashForward this year. And yes I’ll be posting up some of the demos that I showed there. 🙂

I’m planning on mainly using this site to log the work and experiments I’m doing, but I may sneak in the odd non-related post from time to time!

In the meantime, continue to send me emails, perhaps it’ll remind me that I need to keep this site updated…