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

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

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パーツ集