JavaScript + Flash でできる面白いこと
Flashでページ全体を覆うという発想は無かった！面白い！
JavaScript + Flash という点では同じですが、Flash でページ全体を覆うのではなく、必要な部分にだけに Flash を重ねてページ内の画像を心霊写真のようにするというシロモノを作ったので紹介します。
次の文字列をコピーしてアドレスバーに突っ込むと、ページ内の画像にメグミが！
javascript:(function(){var d=document;var s=d.createElement('script');s.type='text/javascript';var date = new Date();s.src='http://www.foxj.jp/shutter/blogparts/shutter.js?'+date.getTime(); s.charset='UTF-8';d.body.appendChild(s);})()
ブログパーツでは最後に合成した画像をメールで送信できるようになっています。*2どうぞご利用ください。つってもここはてなダイアリーでは使えないんだけど。
仕組み
- JavaScriptでページ内の画像(imgタグ)の大きさと表示座標を取得
- 上記の情報を元にその上にぴったり重なるように透過Flashを貼り付け
- 貼り付けられる透過Flashは、いい塩梅に合成されるようにアルファやブレンドが設定されている
透過フラッシュに関しては、合成する上でアルファ値だけでなく、ブレンドの設定が有効なのが相当ポイント高いです。これのおかげで明るい画像、暗い画像に同時に対応できています。
ちなみに奥菜恵さん本人の受けがよかったというのも相当ポイント高いですｗ
ページ内の画像をともだちマークに！
こちらはブログパーツを実行するとページ内の画像がともだちマークに差し替わってしまうというシロモノ。単純に img の src を差し替えると比率がおかしくなってしまう。じゃぁどうしようってことで上の技術を応用して、img と同じ場所に Flash を貼り付ける方法を採用しています。
実際どんな感じなのかは「20世紀少年 ブログパーツ」でブログ検索すると出てくるページなどで確認できると思います。
