flash

weightってこんな感じで動いてる

• ロードするItemが10個あって
• それぞれのItemにweightが設定されていない

というケースでは、各Itemに割り当てられるパーセントは1/10、つまり10％ずつです。

このうち1つのItemがFLVなどで他のファイルより重いときにweightを設定します。この重いItemをweight=11と設定しましょう。あと、Itemのデフォルトのweightは1ということを覚えておいてください。

_bulkloader.add("hoge.flv", { type: BulkLoader.TYPE_VIDEO, weight: 11 } );

すると、

こんな感じであがります。元の分母はItem数なので10。それに、増えた重みを足して10+10で分母が20になります。たぶん！これで、FLVのパーセントが55%分を占めるようになり、期待している値に近づきました。

このweightが設定されたパーセントを取得するにはweightPercentを使用します。

weightPercentでもうすこし正確なパーセント表示

BulkProgressEvent.weightPercentにweightを考慮したパーセントが入っています。

(item._bytesLoaded / item._bytesTotal) * item.weight;

いたってシンプルですね。こういった形で加算されていくので、かなり実際と近いパーセントが取得できそうです。

weightの設定にひと手間かける分、ratioLoadedやbytesLoadedよりもわりと正確な値を取得できます。

マルチプログレスマネージャーは、パーセント表示のMVCのM（モデル）部分

マルチプログレスマネージャーはモデルに徹します。大きな流れとしては以下の3点！

1. MultiProgressManagerのインスタンスを作って
2. それぞれのプログレスを見張るをモデルを突っ込むと、
3. 全部をまとめて0～1までに変換された進捗率が吐き出されます

//マルチプログレスマネージャーのインスタンス生成
_progressManager = new MultiProgressManager();
//ローダーのプログレスを70%に設定して突っ込む
var loader:Loader = new Loader();
var model:AbstractProgressModel = new ProgressEventModel(loader.contentLoaderInfo, 0.7);
_progressManager.addProgress(model);

//他の素材読み込みを残り30%に割り当てて突っ込む
var urlLoader:URLLoader = new URLLoader();
_progressManager.addProgress(new ProgressEventModel(urlLoader, 0.3);

//読み込み開始
_progressManager.start();
loader.load(new URLRequest("main.swf"));
urlLoader.load(new URLRequest("config.xml"));

パーセント表示はMultiProgressManagerのイベントを監視するだけ。それもプログレスとコンプリートの2つだけ！

MultiProgressManagerを稼動させるとプログレスのイベントが通知されるのでそれをリスンします。

//このイベントにまとめられたパーセントのプログレスが入っています。
_progressManager.addEventListener(ProgressPercentEvent.PERCENT_PROGRESS, progressHandler);
//パーセントの完了イベント
_progressManager.addEventListener(ProgressPercentEvent.PERCENT_COMPLETE, completeHandler);

//プログレスのイベントハンドラ
private function progressHandler(event:ProgressPercentEvent):void
{
	//パーセント表示を更新
	loadingBar_mc.scaleX = event.percent; //event.percentは0～1までのNumber
}
private function completeHandler(event:ProgressPercentEvent):void
{
	trace("終了");
}

さっきのわかりにくい図が驚くほど簡単に！

担当すべきクラスを分けることで、みるみるあっさりしました！これこそ宇宙の波動！

UMLっぽくするとこうなります（でっちあげのUMLです）

モデルの拡張も簡単！いろんなプログレスに対応できる！

AbstractProgressModelを継承すれば、標準のプログレス以外にも対応できます。しかも、考えるのは2点だけ！

1. progressイベントをリスンすることを書く
2. 完了したときの処理を書く

を書くだけで簡単に拡張できます。同梱しているBulkLoader用のBulkLoaderProgressModelがまさにこれです。

「main.swfは全体の50%くらい、config.xmlは10%くらいで」といった、割り当てもサクっとできる！！

個別にプログレスを監視するクラス（AbstractProgressModel）にはpercentRangeというプロパティがあります。こいつが「main.swfは全体の50%にしよう」といったプロパティになります。

//50%で読み込む
var model:AbstractProgressModel = new ProgressEventModel(loader.contentLoaderInfo, 0.5);

下図のような割合でやるときも、引数を割り当てるだけで実現できちゃいます。

さらに、今回は「パーセントが上昇するときのスムージング（線形補完）」もお付けします！

new MultiProgressManagerするときの第二引数をtrueにするだけで、スムージングします。
いちいちView側で操作する必要がありません。

//引数は EnterFrameの監視にStage
//スムージングをtrue
//スムージングのfrictionを0.3
//パーセントがいっきに上がりすぎないための、最大の上昇幅
new MultiProgressManager(stage, true, 0.3, 0.05)

1.preloader.swf起動（Preloader.as)

2.preloaderがmain.swf読み込み（Preloader.as)

reloader.as 66行目付近から

1. インスタンスの生成（シングルトンバージョンを使用します）

   SiMultiProgressManager.getInstance(stage, true, 0.3, 0.05);

2. イベントハンドラの設定
3. 読み込み開始

3.main.swfを読み終えたら、設定xmlの読み込み

1. Preloader.as 95行目付近 mainLoadCompleteHandler内部で
2. Main.as の86行目 start()を呼び、Mainの構築用のスレッドを開始します
3. LoadConfigThread.as内部でxmlを読み込みます。

4.設定xmlに指定された複数画像の読み込み

AssetsLoadThread.as内部で複数画像の読み込みを行います。
ここではBulkLoaderを使って複数読み込みをまとめています。

5.読み込んだ素材を配置していきます

複数読み込みが終われば BuilderThread.asで配置します。

6.パーセント表示の終了処理

1. すべての読み込みが終了し、パーセントが100%になったら、パーセント表示をフェードアウトさせて消します。
2. Main側ではOpenContentsThread.asでパーセント表示が消えるまで待機状態になります。
3. Preloader.as の116行目付近 completeHandler()が呼ばれるので、そこでパーセント表示をフェードさせます。

7.main.swfの表示開始

パーセント表示のフェードアウトが終わったら、待機していたOpenContentsThreadが動きだし、mainの表示を行います。

スクリプトの流れ

1. 小さなプレビュー画面かどうか
2. ネットワークチェックとSWFの縦横サイズがゼロじゃないかのチェック
   • 2-1.ネットワークにつながってるかどうかのチェック
   • 2-2.stageWidthとstageHeightがゼロじゃなくなるまで待つ（Mac対策）
3. 外部設定ファイル読み込み
4. その他の素材読み込み
5. コンテンツビルド
6. コンテンツスタート～ループ

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の縦横サイズがゼロじゃないかのチェック

new URLRequest(url + new Date().getTime());

3.外部設定ファイル読み込み

外部の設定ファイルを読みに行きます。この設定ファイルには

• 本体となるswfが最新の状態かどうか
• 読み込む素材はどれどれ

などといったことを記述しておきます。

4.素材読み込み

外部設定ファイルに書いてある素材を読み込んでいきます。

たいていの場合、複数の素材を読み込むことになるので、まとめて読み込めるローダーを使うと便利です。僕はBulkLoaderを使ってガスガス読み込みます。BulkLoaderについてはこないだ書いたのも参考にしてください。

また、すぐに必要のない素材は少しずつ先読みしていくだけのプリローダーを裏で動かし、キャッシュ化しておくと効果的なケースもあります。ドデカいFLVとかは厳しいかもしれませんが、いずれすべて読み込むことになるのなら、ささっと読み込んじゃいましょう。

5.コンテンツビルド

素材のロードが終わり、さまざまな設定を格納したら、ページや配置する画像などの要素をビルド（生成して配置）していきます。

6.コンテンツスタート～ループ

要素の準備ができたら、やっとコンテンツをスタートできます。

スタートさせればあとはループするだけです！

mailto:でメーラー立ち上げようとすると、ブラウザまで立ち上がってしまう

winならIEも開いてしまうので、実質使えません。

「友達に教える」機能を付けるときはWebサイト側にリンクを貼って、

• 「友達に教える」フォームを用意する、もしくは
• mailtoのリンクを置く

のがベターです。

インストール時に一緒にインストールされる追加ファイルにフォルダを作れない

fla:verではどの素材も、スクリーンセーバーの本体となるswfと同じ階層に置かれてしまうので、素材の名前付けに注意しましょう。

これには前回のコメント欄で開発者さんが補足してくれました。セキュリティ的に階層がない方がいいそうです。

スクリーンセーバーを再生している途中で「ネットあり」→「ネットなし」になったら落としたほうがいいときもある

途中で設定を「ネットあり」から「ネットなし」に変更すると大変な労力が必要になることがあります。ならば、いっそのことスクリーンセーバーを強制的に落としてしまいましょう。

スクリーンセーバーが再生されている＝「PCが放置されている状況」が多いので、落としてもしばらくすると「ネットなし」としてスクリーンセーバーが立ち上がります。

ロードする状況化でIO_ERRORなどを見張っておいて、エラーがでたらスクリーンセーバーを落とすコマンドfscommand("quit");を叩くようにします。

あと、落とす前にエラー画面として

「ネットに繋がらなくなったので、落としますね」

と出すのが優しいかと思います。

Macでマウス操作などを許可しているときにブラウザを開いてもスクリーンセーバーが落ちない

マウス操作許可し、親サイトへのリンクやRSSのリンクを張ったりすることがあります。Windowsではリンクを押してブラウザが開くタイミングで、スクリーンセーバーも一緒に落ちてくれます。

このケースではMacでうまくいきません。スクリーンセーバーが落ちずに、裏でブラウザが開きます。ですので、明示的にスクリーンセーバーを落としてやる必要があります。

//リンクを押したら、落とすことも明示する
navigateURL(～～～）;
fscommand("quit"); //スクリーンセーバーを落とすコマンド
		

windows用の素材

mac用の素材

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

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を書いてたりしてました。メモなのでそこまで裏は取っていませんので間違いもあると思います。何かの役に立つかもしれませんのでそんな目でみてもらえると助かります。

• Red5まわりのこと
• SharedObjectのリモート操作
• CentOSインストール

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

マウスのロールオーバーがおかしい（追記：意味がわかった！）

マウスのロールオーバーが、左から右へマウスを移動しているときにしか利かなかったり、おかしな挙動をしています。

右上のフキダシも同様、マウスの移動方向でおかしくなってます。

追記：カーソルに色をつけたかったので、Mouse.hide()をして、カーソルのビットマップを置いているのですが、そこに問題がありました。mouseChildrenをfalseにすればokぽいのですが、衝突判定をhitTestObjectでやっていて、mouseChildrenをfalseにするとhitTestが効かなくなってしまいます。とりあえず放置！

ストーリーや目的、オチがないと、劇的につまらない

これがいわゆる出オチというやつです！

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

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

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

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

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

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

作ることはいいこと

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

スクリーンタイム（ScreenTime for Flash）

http://www.screentime.jp/

fla:ver

http://flaver.jp/

GIZMO

http://gizmo.anthill.jp/

スクリーンセーバー作成代行もしているが、基本的にはフォーマットに則ったswfを渡し、スクリーンセーバー化してもらうサービスとのことです。

Web Designing2009年 06月号のP64にHONDA INTERNAVIの事例とあわせてGIZMOのことも少し書いてありました。

まとめ　fla:verで十分、より安心感を求めるならGIZMO

案件規模にもよるでしょうが、fla:verである程度カバーできるかと思います。自動更新っぽいことも全部外部にすればなんとかなりますね。それ以上の複雑なことになればGIZMO、といったところでしょうか。

僕はこのfla:verで作るようにしています。次回はfla:verにおける制作のポイントをお話します。

あー、まじめに書いたよー、はぁーまじ疲れるわー、あー、あー、うー、う、ウコンー！！

更新することで飽きさせないスクリーンセーバーに

天下のUNIQLOCKや、オサレなHONDA INTERNAVIも、更新されるコンテンツが楽しみの一つとなっています。

UNIQLOCK

http://www.uniqlo.com/show/

HONDA INTERNAVI REALIZATION

http://www.honda.co.jp/internavi/realization/#/downloads

Play MUJI

http://www.muji.com/playmuji/

スクリーンセーバーの変更を簡単にできるようになった今、簡単に変更させずに「チャンネルはそのままで」とさせるスクリーンセーバーが求められています。せっかく好意を持ってインストールまでしてもらった優良顧客の心を、いかに引き止め、惹き付け続けるのか。ちょっとした更新性を付加することで、そういったブランドイメージを構築するに十分な媒体になりえます。

でもね、僕は頭がパッパラパーだからこれより難しいお話は頭の上に放り投げて、次の話題へ移ろうと思うんだ！アヘアヘアヘ！！

1.サーバに設定xmlを置き、更新する

サーバにあるxmlを読みに行かせ、xmlで画像を変更したり、レイアウトを変更したり、などといったことをします。

2.スクリーンセーバーの本体となるswf自体をサーバに置いて更新する

サーバに本体のswfを置きます。読み込みに時間がかかるときもありますが、不具合があってもすぐに差し替えられる安全性があります。

3.ローカルファイルを置き換えて更新する

作成ツールによってはローカルファイルを書き換えてくれるものもあります。

ローカルファイルを置き換え、中身をごっそり入れ替えることが一番いいのですが、なかなか簡単ではありません。

SWFObjectのDynamic Publishingの場合

SWFObjectで空divを起点に動的にObjectタグを埋め込むやつをすると

• IE全般
• MacのFireFox

で、一瞬だけstage.stageWidthとstage.stageHeightが0になります。

Dynamic Publishingってのは以下のjsコードで空divに埋め込むやつです

//SWFObject1.5
var so = new SWFObject("hoge.swf", "topFlash", "100%", "100%", "8", "#FFFFFF");
so.write("flashcontent");

//SWFObject2.xならDynamic Publishingと呼ばれるタイプ
swfobject.embedSWF("hoge.swf", "flashcontent", "100%", "100%", "9.0.45", "expressInstall.swf", flashvars, params, attributes);
			

サンプルでテストしてみてください。
サンプルのasはこちら

• wmodeはtransparent
• 最初にstageの中心に文字を書こうとしますが、ダメブラウザだと文字が(0,0)にきます
• swfの中心に「うんこ」と書かれたらOKブラウザ！
• 崩れてたらStageの初期サイズが0のダメブラウザ。IEかMacのFirefoxです
• traceされているテキストは以下です
  • 一発目にStageのwidthとheightをチェック
  • ENTER_FRAMEイベントと何回ENTER_FRAMEが回ったか
  • ENTER_FRAMEでStageのwidthとheightをチェック
  • stageのResizeイベント
  • stageWidthがゼロだったらADDED_TO_STAGEイベントを取得
  • それぞれのgetTimer

サンプルの結果

win

IE6～8	Firefox3	Opera9.6	Safari3	Safari4	chrome
×	○	○	○	○	○

キャプチャ

mac os10.5

Firefox3	Opera9.6	Safari3	Safari4
△	○	○	○

（崖っぷちさんとこではMacのFirefoxでもアウトでしたが私の環境ではOKでした）

ENTER_FRAMEの方がRESIZEイベントよりも速くStageのwidthが変わったことを知る

このサンプルを作っていてわかったのですが、ENTER_FRAMEでwidthとheightを監視して、ゼロじゃなくなったあと（ENTER_FRAMEのイベントハンドリングが終わったあと）にRESIZEイベントが飛んできます。なので、無意味なタイムラグが生じます。

SWFObjectでの原因

SWFObjectの原因は以前のエントリで妄想を膨らませましたが、これは間違っていると思います。詳細ご存知のかた、おしえてください！

対処法について

• Event.RESIZEよりEvent.ENTER_FRAMEの方がstageの幅高の取得が早いので、ENTER_FRAME監視がベター
• dispatchEventしてるのは入口と出口を分けないため。
  （newする前にif(stage.stageWidth * stage.stageHeight != 0)を挟めばOKブラウザをスルーできますが、OKブラウザとNGブラウザで出口がバラバラになるとややこしいのでこうしました。）

クラスとサンプル

サンプルとソースzip

StageSizeChecker.as

package com.katapad.utils
{
	import flash.display.Stage;
	import flash.events.Event;
	import flash.events.EventDispatcher;
	import flash.utils.getTimer;

	/**
	 * WinIEやMacFFでSWFObjectのDynamic Publishingをしたときにおこる
	 * Stage.stageWidthとstageHeightが0になる問題を
	 * EnterFrameで監視してチェックするクラス<br />
	 * Event.RESIZEが飛んでくるタイミングがEvent.ENTER_FRAMEより遅いので、
	 * EVENT.COMPLETEのついでにstageからEVENT.RESIZEも飛ばします(オプション)。
	 *
	 * @author katapad.com
	 * @version 0.1
	 * @since 2009/03/17 3:40
	 * @usage
	 * <p>MainクラスやPreloaderクラスの最初に</p>
	 * <pre>
	 * var StageSizeChecker:StageSizeChecker = new StageSizeChecker(stage);
	 * StageSizeChecker.addEventListener(Event.COMPLETE, delayInit);
	 * StageSizeChecker.start();
	 * </pre>
	 * <p>を書いて、あとはEvent.COMPLETEの受取先で</p>
	 * <pre>event.target.removeEventListener(Event.COMPLETE, delayInit);</pre>
	 * <p>すればOK</p>

	 */
	public class StageSizeChecker extends EventDispatcher
	{
		/**
		 * stage.stageWidthとstage.stageHeightが0以外になったら配信します。
		 * @eventType flash.events.Event.COMPLETE
		 */
		[Event(name = "complete", type = "flash.events.Event")]

		//----------------------------------
		//  static var/const
		//----------------------------------

		//----------------------------------
		//  instance var
		//----------------------------------
		private var _stage:Stage;
		private var _isResizeEvent:Boolean;

		/**
		 * ステージサイズを見張り、ゼロ以外ならEvent.COMPLETEを配信します。
		 * @param	stage
		 * @param	isResizeEvent	_stage.dispatchEvent(new Event(Event.RESIZE))も同時に発動させるかどうか
		 */
		public function StageSizeChecker(stage:Stage, isResizeEvent:Boolean = true)
		{
			init(stage, isResizeEvent);
		}

		private function init(stage:Stage, isResizeEvent):void
		{
			_stage = stage;
			_isResizeEvent = isResizeEvent;
		}

		//--------------------------------------------------------------------------
		//
		//  PUBLIC
		//
		//--------------------------------------------------------------------------
		public function start():void
		{
			if (isValidSize())
			{
				complete();
				return;
			}
			_stage.addEventListener(Event.ENTER_FRAME, check);
		}
		//--------------------------------------------------------------------------
		//
		//  PROTECTED
		//
		//--------------------------------------------------------------------------

		//--------------------------------------------------------------------------
		//
		//  EVENT HANDLER
		//
		//--------------------------------------------------------------------------
		private function check(event:Event):void
		{
			if (isValidSize())
				complete();
		}

		//--------------------------------------------------------------------------
		//
		//  PRIVATE
		//
		//--------------------------------------------------------------------------
		private function isValidSize():Boolean
		{
			//trace( getTimer(), "_stage.stageWidth : " + _stage.stageWidth );
			return _stage.stageWidth * _stage.stageHeight != 0;
		}

		private function complete():void
		{
			_stage.removeEventListener(Event.ENTER_FRAME, check);
			if (_isResizeEvent)
				_stage.dispatchEvent(new Event(Event.RESIZE));
			dispatchEvent(new Event(Event.COMPLETE));
			_stage = null;
		}

		//--------------------------------------------------------------------------
		//
		//  GETTER/SETTER
		//
		//--------------------------------------------------------------------------

	}

}

今回説明したサンプル

• ソース一式（wrap.phpはバスキュールさんのところから拾ってきて、上のソースを追加してください

• 動作サンプル

  redirect.php

  swf.php?what_i_need=money →hoge.swfにGETパラメータを付与して表示。ボタンを押すとgoogleにGETパラメータを受け流します。適当にGET部分を変えて表示してみてください