ブログパーツの作り方(2)～フローティングパーツ

2008/09/28

こちらのソースをはりつけてもらえれば、このように偉人が出てくるだけのフローティングパーツが表示されます。

Flashとjsのソースをまとめたものがこちら(zip)。
作ってもローカルじゃ動かないので、確認するときはサーバに上げるかlocalhostを立ててみてください。

参考資料：teraさんのDelicious

全体の流れ

JSを読み込む
パーツのflashを描画
パーツflashをクリックされたらJSと連携
フローティングのflashを描画
フローティングのflashをクリックされたらJSと連携
フローティングを削除
パーツのflashに偉人が帰ってくる

解説

やってることは http://cross.ryow.net/blogparts02.js を読み込んでもらって、基本になるURLを設定します。そこで、document.writeでその他必要なjsを読み込んでからSWFObjectで描画（ブログパーツ）、フローティングを描画する用の関数も設定。という流れです。

普通にjsなので難しいことはないんですが、ポイントが一点。Flashとの連携をするためにExternalInterface（以下Ex）つまりEx.callとEx.addCallbackを使います。

Ex.callはそのまんまコールすればいいだけですが、Ex.addCallbackは注意が必要。前のエントリにも書いていますが、クロスドメイン問題がひとつと、JS側の用意ができてないのに呼ぼうとするとブラウザが落ちるというエラーがあります。この対策のため、callbackするJS関数はできるだけセットタイムアウトしてあげるのが確実です。その他、画面を激しく再描画するときもですね。
具体的には：

function overlayReturn(){
//オーバレイを画面から消す
window.setTimeout(function() {
$("#"+overlay.id).remove();
}, 1);
//パーツを消す
var player = document.all? window[parts.objID] : document[parts.objID];
player.FlashCallBack1();
}

via:ブログパーツの作り方
１年前のエントリなのでさすがにそろそろ補足したいと思ってました。

あわせて読みたい

自分で作る blog ツール

ブログパーツを自作しよう Webサービス+JavaScript編

ホームページやBlogが生まれ変わるお手軽Ajaxパーツ集