ZAPAnet総合情報局 > ZAPAブログ2.0 > 崩壊ボタン設置しました

崩壊ボタン設置しました

2008年09月29日 プログラミングTIPS



YouTube - experiencewii さんのチャンネルを初めて見たとき、ワリオ動画の動きに合わせてHTMLが崩壊していく様子に衝撃を受けました。

早速これと似たような動作を実現させるために、にとよんさんが
を公開されました。

ActionScript3のソースコードも公開されていたので、コンパイルして、このブログに設置してみました。記事本文の右上にある「崩壊」ボタンを押すと、ブログの画像が崩れ落ちていきます。
崩壊
もし良かったら、試しに押してみてください。


この崩壊の動作は、FlashとJavaScriptを連携させて作られています。Flashプログラムでは、ActionScriptライブラリのBox2dFlashAS3が使われています。Box2dFlashAS3のダウンロードは下記ページからできます。

物理エンジンのBox2dについては、
の連載に詳しい使い方が解説されています。

にとよんさんのソースコード Meltdown.asでは、Box2dの古いバージョンが使われているようで、最新の2.0.1ではb2BodyDefが使えずコンパイルできませんでした。そのままのソースコードで動かすには、古いバージョンのBox2DFlashAS3_1.4.3.1を使う必要があります。

あとは、できあがったSWFファイルをmeltdown.jsから読み込ませるようにして（ソース下部のSWFObject関数の引数Meltdown.swfのところを変更）、「崩壊」をクリックしたときにmeltdown.jsが呼ばれるように、 
function meltdown(){
        var d=document;
        var s=d.createElement("script");
        s.charset="UTF-8";
        s.src="書き換えたmeltdown.jsのパス?"+(new Date()).getTime();
        d.body.appendChild(s)
}
などと適当にmeltdown()関数でも作っておけば、クリックに応じて画面のHTMLが崩壊するようになります。


今回のにとよんさんのHTML崩壊もすごいですが、最初にHTML崩壊を考えついた2007年11月の
もすごいですね。

今後Webブラウザのjavascript実行速度はどんどん速くなっていくそうなので、これからはJSを利用した面白いアプリケーションも出てくるかもしれません。Flashとの連携で、今回のような面白い動作も可能になりますね。
←一つ前の記事へ