Home > Archives > 2009-07

2009-07

更新できるスクリーンセーバーを作ろう(3):fla:verでの制作の流れと注意点

前回では作る手前の話をして、ずいぶんウコンウコンしましたね。またfla:verの開発者さんからもコメントがありました。自動更新に対応してくれるかもしんない!スゲー!応援して待ちましょう。

さて、今回からは技術的なことをお話したいと思います。具体的なコードの手前、設計まわりから見ていきましょう。

fla:verでの制作の流れ

Macで再生するときにいくらかの地雷がありますが、知っていれば回避できるので恐くありません。

1.小さなプレビュー画面かどうか

fla:verでは、小さなプレビュー画面でもスクリーンセーバーの本体(swf)が再生されます。小さなプレビュー画面とは以下のものです。

  • Win「画面のプロパティ→スクリーンセーバー」上の小ないプレビュー画面
  • Mac「システム環境」→「スクリーンセーバ」上の小さなプレビュー画面

そのまま本体の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

さてさて、こうして骨組みは出来上がりましたね。いっきに説明したので、わけわかんないところもあると思います。

今回もまじめに書いてしまいました。楽しみにしてくれていたみなさん、本当にすみません。ただ、頭にパンティーをかぶって記事を書いていたことだけは覚えておいてください。

次回は実際にサンプルを作ってみましょう。

スクリーンセーバーのことシリーズ

大阪teraco23でRed5のことを話してきました

大阪てら子23に参加してきました。発表する人がたくさんいて、とても有意義でおもしろかったです。みんなすごいんです。刺激的な一日でした。

僕はRed5というFMSクローンアプリの軽い紹介をしてきました。

マルチユーザのサンプル・ENGACHO

発表内容のスライド(wiki)

サンプル http://lab.unko.me/engacho/
(サーバの問題で期間限定です。1ヶ月くらいたったら消えます)

Red5を使ったマルチユーザのサンプルです。一人でやってもまったくつまらないので、お誘いあわせの上、触ってみてください。人数が多いとほんのすこしだけマシになります。

  • unkoに触れるとunko状態になります
  • unko状態で他のユーザに触れると伝染します
  • unko状態でステージ左に配置されてるハブラシでこすると、きれいになります
  • 右上のフキダシに触れると、感情を表示します(キーボードの1~4でもできます)
  • コナミコマンドを叩くと全員が感染します
  • よくグダグダになります。グダグダになったら広い心でリロードしてあげてください

サンプルのスクリプトなど、細かい解説ができなかったので、ここで補足

sequence

サーバサイドの処理の流れ

  1. サーバサイドに接続されたら、サーバの中でアプリケーションインスタンスが生成される
  2. appStartが呼ばれるので初期化
  3. appConnect()で接続してきたユーザにユーザIDを発行して返す
  4. appDisconnect()で切断されたユーザからユーザIDを取り出して、SharedObjectにsetしたそのユーザのプロパティを削除する

といったことをしています。

クライアントサイド(SWF)の処理の流れ

  1. rtmpにコネクト
  2. ユーザIDを取得
  3. SharedObjectに自分のIDとデータ(マウスの座標などのプロパティ)を登録
  4. SharedObjectの更新にあわせて他人のマウスカーソルを追加する
  5. EnterFrameで描画の更新をする
  6. 接続が切れたらサーバ側で、切断されたユーザのプロパティをSharedObjectから消す
  7. SharedObjectのプロパティが削除されたイベントが飛んでくるので、それを受けて他人のマウスカーソルを除去する

といったことをしています。文字だとちょっとわかりにくいですね。

SharedObjectのSyncEventが鬼門で慣れるまでが大変ですが、けっこう簡単に作れそうな感じです。

サーバへのインストールとかはwikiで

実はひっそりとwikiを書いてたりしてました。メモなのでそこまで裏は取っていませんので間違いもあると思います。何かの役に立つかもしれませんのでそんな目でみてもらえると助かります。

その他わけわからん現象とか作った感想とか

マウスのロールオーバーがおかしい(追記:意味がわかった!

マウスのロールオーバーが、左から右へマウスを移動しているときにしか利かなかったり、おかしな挙動をしています。
右上のフキダシも同様、マウスの移動方向でおかしくなってます。
追記:カーソルに色をつけたかったので、Mouse.hide()をして、カーソルのビットマップを置いているのですが、そこに問題がありました。mouseChildrenをfalseにすればokぽいのですが、衝突判定をhitTestObjectでやっていて、mouseChildrenをfalseにするとhitTestが効かなくなってしまいます。とりあえず放置!
ストーリーや目的、オチがないと、劇的につまらない
これがいわゆる出オチというやつです!

反省

スライドを作って行かなかった

htmlをスクロールして見せてました。u-stream見てる人には文字が細すぎて見えてなかったかと思います。次はそのへんを改善します。

何をしゃべってるのかわからなかった

スライドを読み上げているだけだったなーと思います。ここが一番の失敗でした。スライドと原稿をわければよかった。

芸風がダメなんじゃないかと思った

国道43号線ネタはしばらく公の場では封印します。ポップさが圧倒的にたりませんでした。そんで新しいのを考えました。二次会で期待してください。

収穫

作ることはいいこと

「どうやって楽しませよう」とか「どうやって驚かせよう」とか、久しぶりにそういうことを考えれてよかったですし、なにより反応を間近で見れるのはいいですね。稚拙な内容でしたが、ライブ感が楽しかったです。今度はもっとクオリティをあげていきます。

Home > Archives > 2009-07


Search
Feeds
Meta

Return to page top