How do you make a webpage "fall apart" (like the Wario Shake it ad on Youtube)?

Question

I was just wondering if anyone had any idea how they made this page http://www.youtube.com/wariolandshakeit2008

If anyone has a tutorial on how to do something like this, please tell me!

Answer 1

Looks like the whole thing is a Flash movie to me. There is an iframe embedded with this URL : http://1q1gafmnta4fm0riakrenq213o0sa9p9.ig.gmodules.com/ig/ifr?url=http://facebook.gspsf.com/~wii/wariolandshakeit2008/gadget_files_040209/google_gadget.xml&lang=en&hl=en_US

In fact, here's the SWF: http://facebook.gspsf.com/~wii/wariolandshakeit2008/gadget_files_040209/main.swf

Answer 2

It's cool - I couldn't explain it how to do it, but if you right click anywhere in the body of the page, you will see it is all flash.

Answer 3

Note: For whatever reason I thought the effects were using the same js tricks as the chrome gravity experiment.

While this seems to be realized in flash, something very similar can be done with new html5 stuff.

Generally, nothing stops you from downloading all the javascript source code yourself and try to figure out what is going on. Also have a look at existing Javascript physics engines and Chrome experiments like this one

If you dig into the source code if the gravity experiment, you will find two significant things:

1. It uses the box2d javascript engine
2. The coordinates - and more importantly the rotation of the elements are being modified with these statements

-

for (i = 0; i < elements.length; i++)
{
    var element = elements[i];

    element.style['left'] = (bodies[i].m_position0.x - (properties[i][2] >> 1)) + 'px';
    element.style['top'] = (bodies[i].m_position0.y - (properties[i][3] >> 1)) + 'px';

    // webkit
    element.style['-webkit-transform'] = 'rotate(' + (bodies[i].m_rotation0 * 57.2957795) + 'deg)';

    // gecko
    element.style['MozTransform'] = 'rotate(' + (bodies[i].m_rotation0 * 57.2957795) + 'deg)';

    // opera
    element.style['OTransform'] = 'rotate(' + (bodies[i].m_rotation0 * 57.2957795) + 'deg)';
}