何かが起きる!映画「ハプニング」のブログパーツ

映画「ハプニング」ブログパーツ・プレビュー
映画「ハプニング」ブログパーツ・プレビュー

今回ブログ経由でお仕事の依頼が来た初めてのパターン。書いてて良かったはてなダイアリー!と言うわけでFlashJavaScriptの実装を担当したオレが軽く解説するよ!

設置方法

上記ブログパーツのページにあるようにパーツを設置したいところに次のタグを埋め込めばオッケーです。

<script type="text/javascript" src="http://www.foxj.jp/happening/blogparts/happeningBlogParts.js" ></script>

あらゆるページで「ハプニング」を発生させたい!

残念ながらここはてなダイアリーは使えるブログパーツが限られていて今回のものを設置することはできません。そのようなページでも次の方法で体験することができます。

javascript:(function(){var d=document;var s=d.createElement('script');s.type='text/javascript';var date = new Date();s.src='http://www.foxj.jp/happening/blogparts/happening.js?'+date.getTime(); s.charset='UTF-8';d.body.appendChild(s)})()

これをアドレスバーに貼り付けて実行すると、そのページで「ハプニング」が発生します。Enjoy!

個人的なお気に入り表現

Flash部の奥に舞散っていく紙の表現がお気に入り。これは実際に作ってみたら脳内でシミュレートした以上にうまい具体にできたので作っていてハイテンションになりました。
これ、いろんな実装方法があると思うんですけど、採用したのは正弦(サイン)・余弦(コサイン)などをスクリプト側では使わない方法。具体的には中心(回転の原点)から一定の距離にオブジェクト(紙)を配置したスプライトを毎フレーム回転させつつ縮小させています。紙そのものを動かしているのではなく、紙を配置したスプライトを回しているのです。(紙そのものも自身を中心に回転する表現も入れています) Flashならではな感じかも。