Как сделать так, чтобы веб-страница «развалилась» (например, реклама Wario Shake it на Youtube)?

Question

Как они сделали эту страницу? http://www.youtube.com/wariolandshakeit2008

Если у кого-то есть учебник о том, как сделать что-то подобное, пожалуйста, сообщите мне!

Answer 1

Похоже, все это для меня флэш-фильм. Существует встроенный фрейм с этим 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

На самом деле, вот SWF: http://facebook.gspsf.com/~wii/wariolandshakeit2008/gadget_files_040209/main.swf

Answer 2

Примечание: по какой-то причине я думал, что в эффектах использовались те же трюки js, что и в эксперименте с хромовой гравитацией.

Хотя это, кажется, реализуется во флэш-памяти, кое-что очень похожее можно сделать с помощью нового html5-содержимого.

Обычно ничто не мешает вам загрузить весь исходный код javascript самостоятельно и попытаться выяснить, что происходит. Также взгляните на существующие физические движки Javascript и эксперименты с Chrome как этот

Если вы покопаетесь в исходном коде гравитационного эксперимента, вы обнаружите две важные вещи:

1. Используется движок javascript box2d
2. Координаты - и, что более важно, вращение элементов изменяется с этими утверждениями

-

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)';
}

Answer 3

Это круто - я не мог объяснить, как это сделать, но если вы щелкнете правой кнопкой мыши в любом месте тела страницы, вы увидите, что все это флэш.