electronslibres.ca ça mute avec l'AS3

Slow Mo’

I recently stumbled on this amazing japanese flash coder Yasunobu Ikeda and one of his experiment on slow motion. Digging into his code, I realized he was using BetweenAS3 tweening engine. I was already very comfortable with Jack Doyle's TweenLite, but I had not tried the TimelineLite feature. You can download the source code for JD's TimelineLite engine here.

This engine has the ability to create tweens sequences as in a Timeline. Like a multitrack recording machine, you can choose to add a tween at the end of the sequence (serial tweenings) or in a parrallel manner then control all these tweens individually or at once for conveniance you will soon understand.

This movie shows cubes that bounce on a plane ground. 2.4 seconds after the sequence of tweens is initiated, the time mapping property of the Timeline is changed to achieve the slow motion effect.

first, let's create those cubes and a virtual ground for them to simulate a bounce:

var floor: Plane = scene.addChild(new Plane(new WireframeMaterial(0x666666), 5000, 5000, 15, 15)) as Plane;
floor.rotationX = 90;
 
// create TimeLine instance to store the cube tweens
myTimeline = new TimelineLite({onUpdate:checkTime});
 
// add the camera tween to the sequence
myTimeline.insert( new TweenLite(camera, 6, {y:400, zoom:4, ease:Cubic.easeInOut}) );

Then we want each cube to fall down with a bounce effect as if they were bouncing on the ground. So let's add a tween with an easing set to bounce:

// number of cubes on the scene
static private const OBJ_NUM :int = 20;
 
// define a composite material for all the cubes
var mt:CompositeMaterial = new CompositeMaterial();
mt.addMaterial( new ColorMaterial(0x0, 0.6) );
 
// creating 3D Objects and tweening each object
for (var i:int = 0; i < OBJ_NUM; i++)
{
// create a cube with the same composite material for all its faces
var cube:Cube = scene.addChild(new Cube(new MaterialsList( { all:mt } ), 100, 100, 100)) as Cube;
 
// random position for each cube on the scene
cube.x = 1500 * Math.random() - 750;
cube.y = 2000;
cube.z = 1500 * Math.random() - 750;
 
// random duration for each tween (from 3 to 5 seconds)
var sec:Number = 2 * Math.random() + 3;
 
// add tween to myTimeline sequence
myTimeline.insert( new TweenLite(cube, sec, {y:50, ease:Bounce.easeOut}) );
}

One of the great features TimelineLite offers is the ability to re-interpret the Time of the sequence with a property called timeScale. By default, timeScale = 1 which means time is unchanged. If you increase its value, the sequence will play faster, and vice versa. If timeScale = 2, your sequence will play two times faster, and if timeScale = 0.5, the sequence of tweens will play at half speed!

TimelineLite also features a currentTime property, and a totalDuration property. I chose to calculate a percentage for the sequence advancement. As I used a random duration for each tween, I don't know which one is the longest, and I don't need to! Whenever the movie has executed 40% of the duration of the sequence, it shifts timeScale 10 times slower than normal speed for 5 % of the sequence time, and then back to normal speed. And there you have it ! Real slow Motion HD effect !

private function checkTime():void
{
var percent:int = Math.round(myTimeline.currentTime / myTimeline.totalDuration  * 100);
switch (percent)
{
case 40:
myTimeline.timeScale = 0.1;
break;
case 45:
myTimeline.timeScale = 1;
break;
}

source code is available here
Papervision classes are available here, and gs TimelineLite here.

Cheers!