- 2009-07-09 (木) 0:54

- Tweet

前回では作る手前の話をして、ずいぶんウコンウコンしましたね。またfla:verの開発者さんからもコメントがありました。自動更新に対応してくれるかもしんない!スゲー!応援して待ちましょう。
さて、今回からは技術的なことをお話したいと思います。具体的なコードの手前、設計まわりから見ていきましょう。
fla:verでの制作の流れ
Macで再生するときにいくらかの地雷がありますが、知っていれば回避できるので恐くありません。
スクリプトの流れ
1.小さなプレビュー画面かどうか
fla:verでは、小さなプレビュー画面でもスクリーンセーバーの本体(swf)が再生されます。小さなプレビュー画面とは以下のものです。
そのまま本体のswfを再生すると画面サイズが小さすぎて不都合が生まれることも多いので、ここで分岐をとり、プレビュー画面ならプレビュー用の画面を見せる、といったことをします。
スクリーンセーバーで再生されているとFlashvarsの"flavermode"にプレビューかどうかのstateが入ります。
trace(stage.loaderInfo.parameters["flavermode"]) //preview プレビュー
//normal スクリーンセーバー再生時
- AS3での簡易チェックコード
-
public static function isPreview(stage:Stage):Boolean { var mode:String = stage.loaderInfo.parameters["flavermode"]; var result:Boolean; switch (mode) { case "normal" : result = false; break; case "preview" : result = true; break; default : result = false; break; } return result; }
補足)previewのときでもstageWidthとheightがゼロじゃないかをチェックする必要があります。Macでは初期値がゼロになります
2.ネットワークチェックとSWFの縦横サイズがゼロじゃないかのチェック
2-1.ネットワークにつながってるかどうかのチェック
- ネットワークにつながっていれば、サーバから最新の情報をダウンロードする
- ネットワークにつながっていなければ、ローカルに同梱したファイルを見るようにする
実装方法は外部サーバの適当なファイルに接続を試し、IOErrorが返るかどうかでチェックをします。
という分岐があるので、ここでネットワークのチェックをします。
チェックするファイルにはキャッシュ対策をする
スクリーンセーバーもファイルをキャッシュするので、対策を施します。以下のような簡単なもので大丈夫です。
new URLRequest(url + new Date().getTime());
2-2.stageWidthとstageHeightがゼロじゃなくなるまで待つ(Mac対策)
Macで再生するとstageWidthとstageHeightの初期値がゼロになり、意図しない配置になります。以前のエントリに詳しい実装方法を載せていますので参考にしてください。
SWFObjectのDynamic Publishingを使うとIEとかでStage.stageWidthとheightが一瞬ゼロになるという都市伝説は実在した! | Katapad Design
3.外部設定ファイル読み込み
外部の設定ファイルを読みに行きます。この設定ファイルには
- 本体となるswfが最新の状態かどうか
- 読み込む素材はどれどれ
などといったことを記述しておきます。
4.素材読み込み
外部設定ファイルに書いてある素材を読み込んでいきます。
たいていの場合、複数の素材を読み込むことになるので、まとめて読み込めるローダーを使うと便利です。僕はBulkLoaderを使ってガスガス読み込みます。BulkLoaderについてはこないだ書いたのも参考にしてください。
また、すぐに必要のない素材は少しずつ先読みしていくだけのプリローダーを裏で動かし、キャッシュ化しておくと効果的なケースもあります。ドデカいFLVとかは厳しいかもしれませんが、いずれすべて読み込むことになるのなら、ささっと読み込んじゃいましょう。
5.コンテンツビルド
素材のロードが終わり、さまざまな設定を格納したら、ページや配置する画像などの要素をビルド(生成して配置)していきます。
6.コンテンツスタート~ループ
要素の準備ができたら、やっとコンテンツをスタートできます。
スタートさせればあとはループするだけです!
さてさて、大雑把なスクリプトの流れはご理解いただけたでしょうか?ちょっと駆け足過ぎたかもしれないですね。
続いてはちょっとした注意点を見てみましょう。
知っておくと健康にいい注意点4つ
mailto:でメーラー立ち上げようとすると、ブラウザまで立ち上がってしまう
winならIEも開いてしまうので、実質使えません。
「友達に教える」機能を付けるときはWebサイト側にリンクを貼って、
- 「友達に教える」フォームを用意する、もしくは
- mailtoのリンクを置く
のがベターです。
インストール時に一緒にインストールされる追加ファイルにフォルダを作れない
fla:verではどの素材も、スクリーンセーバーの本体となるswfと同じ階層に置かれてしまうので、素材の名前付けに注意しましょう。
これには前回のコメント欄で開発者さんが補足してくれました。セキュリティ的に階層がない方がいいそうです。
スクリーンセーバーを再生している途中で「ネットあり」→「ネットなし」になったら落としたほうがいいときもある
途中で設定を「ネットあり」から「ネットなし」に変更すると大変な労力が必要になることがあります。ならば、いっそのことスクリーンセーバーを強制的に落としてしまいましょう。
スクリーンセーバーが再生されている=「PCが放置されている状況」が多いので、落としてもしばらくすると「ネットなし」としてスクリーンセーバーが立ち上がります。
ロードする状況化でIO_ERRORなどを見張っておいて、エラーがでたらスクリーンセーバーを落とすコマンドfscommand("quit");を叩くようにします。
あと、落とす前にエラー画面として
「ネットに繋がらなくなったので、落としますね」
と出すのが優しいかと思います。
Macでマウス操作などを許可しているときにブラウザを開いてもスクリーンセーバーが落ちない
マウス操作許可し、親サイトへのリンクやRSSのリンクを張ったりすることがあります。Windowsではリンクを押してブラウザが開くタイミングで、スクリーンセーバーも一緒に落ちてくれます。
このケースではMacでうまくいきません。スクリーンセーバーが落ちずに、裏でブラウザが開きます。ですので、明示的にスクリーンセーバーを落としてやる必要があります。
//リンクを押したら、落とすことも明示する
navigateURL(~~~);
fscommand("quit"); //スクリーンセーバーを落とすコマンド
インストーラ用の素材:アイコン素材と背景画像を用意する
http://flaver.jp/からProfessional版をダウンロードし、実際のインストーラがどんなものかを体験してみてください。
シリアルを入力せずに開始すると「試用版」になるので、気軽に試せます。試用版ではスクリーンセーバーを再生したときに「試用中です」と文言がでますが、すべての機能が使えます。
windows用の素材
| アイコン素材 | icon形式。48、32、16をそれぞれTrueColorと256色を用意します。vista用に特大サイズのアイコンを用意してもいいかもしれません。 IcoFXというソフトを使うと簡単に作れます。IcoFXはMacのicns形式も作れます。 |
|---|---|
| インストーラ画面用の画像 | 64px * 294px: png, jpg |
mac用の素材
| アイコン素材 | icns形式。img2icnsというソフトが簡単です。 |
|---|---|
| インストーラ画面用の画像 | 最大567px * 320px: png, jpg |
さてさて、こうして骨組みは出来上がりましたね。いっきに説明したので、わけわかんないところもあると思います。
今回もまじめに書いてしまいました。楽しみにしてくれていたみなさん、本当にすみません。ただ、頭にパンティーをかぶって記事を書いていたことだけは覚えておいてください。
次回は実際にサンプルを作ってみましょう。
- スクリーンセーバーのことシリーズ
-
- 更新できるスクリーンセーバーを作ろう(1):最近の動向と消費者とのかかわりや基礎知識
- 更新できるスクリーンセーバーを作ろう(2):作成ツールを比較したらどれも一長一短あるね!
- 更新できるスクリーンセーバーを作ろう(3):fla:verでの制作の流れと注意点
Comments:1
- SK 09-07-28 (火) 10:59
-
ちょうどfla:verでスクリーンセーバーを作ろうとしてここにたどり着きました。自動で更新できるのは良いですね!次の解説楽しみにしております!
Trackbacks:0
- Trackback URL for this entry
- http://katapad.com/wp/2009/07/09/design_and_build_on_flaver/trackback/
- Listed below are links to weblogs that reference
- 更新できるスクリーンセーバーを作ろう(3):fla:verでの制作の流れと注意点 from Katapad Design

