Simple real-time easing in Flash & 3D panels

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

[kml_flashembed movie=”/wp-content/uploads/manual/2006/Demo-Panels.swf” width=”460″ height=”190″ FVERSION=”8″ fvars=”root_dir=/wp-content/uploads/manual/2006/” /]

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) :
[kml_flashembed movie=”/wp-content/uploads/manual/2006/easeoutdemo1.swf” width=”450″ height=”100″ FVERSION=”8″ SCALE=”noborder” /]

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):
[kml_flashembed movie=”/wp-content/uploads/manual/2006/easeoutdemo2.swf” width=”450″ height=”300″ FVERSION=”8″ SCALE=”noborder” /]

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):
[kml_flashembed movie=”/wp-content/uploads/manual/2006/easeoutdemo3.swf” width=”450″ height=”300″ FVERSION=”8″ SCALE=”noborder” /]

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!