ZAPAnet総合情報局 > [Z]ZAPAブロ〜グ2.0 > プログラミングTIPS > 崩壊ボタン設置しました

崩壊ボタン設置しました

このエントリーをはてなブックマークに追加
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との連携で、今回のような面白い動作も可能になりますね。