dev.convexstyle.net

2006年05月 アーカイブ

Express Install のブルー背景の回避方法

del.icio.us hatena bookmark

これまでは、開発・制作した swf ファイルのバージョンがユーザーのバージョンよりも高かった場合、一度 Adobe(旧、Macromedia)のサイトに移動して最新の Flash Player をインストールしてから目的とページに戻ってくるといった、非常に効率の悪いインストールが通常だった。
こうしたプロセスを通ってでもユーザーが全員また元のサイトに戻ってきてくれればいいが、Flash Player のインストールの最中にめんどくさくなってインストール自体を止めたり、インストールが完了しても元のサイトに戻ってこないユーザーも少なからずいることが想像される。自分が会社で開発しているサービスなどはこういったユーザーの行動は致命的なのでどうしたら回避できるだろうかと考えていたら、Adobe からあり難い事に『Express Install』というパッケージを配布していたので使ってみた。


Express Install は Adobe で開発した便利パッケージ。
様は、このパッケージにより、これまで Adobe(旧、Macromedia)のサイトに移動して
最新 Flash Player をインストールしなければならなかったプロセスを、ユーザーが訪れたサイト上で最新 Flash Player をインストールを完了できる様になり、インストール後は通常通り訪問先のサイトを見ることが可能になった。まだ多くのユーザーが Flash Player 7 をインストールしている現在、Flash Player 8 のみ対応のコンテンツを作成した場合などには、Express Install は大きな効果を発揮するだろう。


Adobe のサイトを参考にすれば、Express Install の設定はいたって簡単である。

【参考サイト】
http://www.adobe.com/jp/devnet/flashplayer/articles/expressinstall.html

【パッケージのダウンロード先】
http://download.macromedia.com/pub/flash/detection_kit/detectionkit.zip


これにより、Express Install は設定できたはずだが、1つ問題が生じるはずである。
それはインストールのダイアログが表示している時に、swf の背景色がブルーになっていることだ。特に、ダイアログを表示する swf は Adobe のサーバ上にあるブラックボックス的なものであり、私達ではどうにもすることは出来ない。特に気にしない場合にはこのままの背景で問題はないのだが、周りのデザインのこともあり、出来ればダイアログが表示しているときにも周りのデザインに溶け込ませたい背景を配置した場合には場合は、下記の様に多少の ActionScript の追加とカスタマイズにより、ブルー背景色を回避し、独自の背景を表示することが可能である。


【回避方法】
(1)
先ほどの Adobe サイトの手順に従って作成した場合、ドキュメント上に「AutoUpdater」、「AutoUpdaterLoaderClip」の2つの MovieClipがあると思うが、この2つの MovieClip をドキュメント上から削除する。ちなみに、色々 MovieClip のカスタマイズを ActionScript で試みてみたが無理な様だった。これにより、2つの外部 AS ファイル「playerProductInstall.as」、「playerProductInstallCallback.as」が書き出しの際に読み込まれなくなる。

(2)
下記の ActionScript を frame 1 に追加する。
これにより、Adobe で準備された MovieClip に影響されることなく同様な動作を引き継ぐことは可能である。ActionScript は上記の2つの AS ファイルと AutoUpdater MovieClip の構成を崩さないように意識する。



stop();

// 読み込み確認
function checkLoaded() {
if (hold.startUpdate.toString() == "[type Function]") {
clearInterval(id);
loadComplete();
}
}

// 読み込み完了
function loadComplete() {
hold.redirectURL = _root.MMredirectURL;
hold.MMplayerType = _root.MMplayerType;
hold.MMdoctitle = _root.MMdoctitle;
hold.startUpdate();
}

// インストールの際のイベントハンドラ
function installStatus(statusValue) {
if (statusValue == "Download.Complete") {
// Flash Player のインストールが完了した際の処理を記述する。
trace("ダウンロードが完了);
} else if (statusValue == "Download.Cancelled") {
// Flash Player のインストールをキャンセルした際の処理を記述する。
// 通常、ページ内の特定ページに移動させる。
getURL("http://*********.com/cancel.html");
} else if (statusValue == "Download.Failed") {
// Flash Player のインストールが失敗した際の処理を記述する。
// 通常、ページ内の特定ページに移動させる。
getURL("http://*********.com/failure.html");
}
}

// Flash Player インストーラーの起動
System.security.allowDomain("fpdownload.macromedia.com");

// キャッシュ回避
var cacheBuster = Math.random();
var updateSWF="http://fpdownload.macromedia.com/pub/flashplayer/update/current/swf/autoUpdater.swf?" + cacheBuster;

// 「AutoUpdater」構成の作成
updater = _root.createEmptyMovieClip("expressInstallHolder", 5);
updater.installStatus = _root.installStatus;
hold = updater.createEmptyMovieClip("hold", 1);
var id = setInterval(checkLoaded, 10);
hold.loadMovie(updateSWF);

(3)
新規レイヤーを作成し、自分のサイトに適当な背景画像をドキュメント上に配置する。

(4)
書き出しをし、HTML タグを Adobe の参考サイトを基に、Javascript の特定の場所に組み込む。また、Flash Player の Express Install が必要ない場合の通常 Flash コンテンツの HTML タグも同様に、この Javascript 内に組み込む様にする。

【追記】
Microsoft Internet Explorer のアップデートにより、アクティブコンテンツのセキュリティーが強化されてしまった。アクティブコンテンツである Flash コンテンツもこの影響を受けており、Flash コンテンツ上で 1 度ワンクリックしなければFlash コンテンツはアクティブにならなくなってしまった。ボタンがある場合などは、どうしてもユーザーがクリックするが、1 度目は Flash コンテンツ自体をアクティブにすることのみで、onRelease などのボタンイベントは発生しない。これはユーザーに混乱を招くだけではなくユーザビリティを低下してしまうので、避けたいところである。対策としては Flash を表示する HTML タグをすべて外部 Javascript ファイルにおいて document.write メソッドで書き出すことで簡単に回避されるが、さらに Adobe で準備している Javascript Library を使用することで、必要なパラメータを Adobe 独自の関数に渡すだけで Flash コンテンツを HTML 上に生成する。

【参考サイト】
http://www.adobe.com/jp/devnet/activecontent/articles/devletter.html


(5)
Flash Player のバージョンが低いブラウザでテストし、以下の様に、背景画像のあるダイアログ画面が表示したら成功である。


Express Install サンプル写真
サンプル画像:3ミリより