ホーム > タグ > as3

as3

BulkLoaderで「もう悩まない!」ための6つのtipsをまずは14日間で売上No.1!!

海外製のライブラリは日本語の情報が少なくて、英語のASDocやwikiを見たりしますよね。でも英語って読むのが難しいですよね…。

僕なんかね、キィーーッ!!ってなりますね。ぜんぜん読めないから。みなさんもキィーーッ!!ってなってますよね。でもBulkLoaderに関しては安心してください。もう、傷つく事に怯えなくていいんです。

BulkLoaderプロジェクトのDebeloperGuideってところにおトク情報がありました

BulkLoaderに同梱されているサンプルはほとんど説明がないのですが、GoogleCodeのプロジェクトのwikiに結構な情報がありました。

http://code.google.com/p/bulk-loader/wiki/DeveloperGuide

このうち、おトク情報を6つピックアップすることにしました。
以下目次がわりのページ内リンクです。

  1. weightプロパティで各Itemのパーセントの重み付けをして、精度のいいパーセントを取得する
  2. BulkLoaderのインスタンスはプールされている
  3. stringSubstitutionsでパスの切り替えなどができる
  4. 設定を外部ファイル化して勝手にロードしてくれるLazyBulkLoader
  5. add()するときのプロパティ一覧
  6. 一つでもエラーがあると止まってしまうから、エラーハンドリングしとこう

1. weightプロパティで各Itemのパーセントの重み付けをして、精度のいいパーセントを取得する

この間「超便利なローダーBulkLoaderの落とし穴にハマってきました」という記事を書きました。その中で、パーセント取得がちょっと難しいなーという話をしました。

よくよく調べてみると、もうひとつ打つ手がありました。

BulkLoaderのドキュメント・見出し「By weight」のところ
http://code.google.com/p/bulk-loader/wiki/ReportingLoadingProgress

ここをかいつまんで説明しますね。
あと、これから「Item」と呼ぶものは「ロードするもの」っていう意味で使います。

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 割り当てられるパーセント
weightを11にしたItem 11/20
他のItem 1/20

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

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

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

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

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

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

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

2.BulkLoaderのインスタンスはプールされている

BulkLoaderのインスタンスはBulkLoaderクラスの静的なプロパティに保存されていて、いつでも再利用できるようになっています。

BulkLoaderクラスのstaticメソッドには取得・破棄の2種類があります。

//インスタンスの取得
BulkLoader.getLoader(name);

破棄メソッドについては、すべてのBulkLoaderインスタンスを削除するものしか用意されていないようです。

BulkLoader.removeAllLoaders();

再利用しないのであれば、removeするのがいいでしょう。

3.stringSubstitutionsでパスの切り替えなどができる

ロードしたいパスに変数ぽいものを仕込んで柔軟性を上げることができます。

_bulkLoader.stringSubstitutions = {
	"base_path": "http://example.com/test/"
}
_bulkLoader.add("{base_path}test.jpg");
// これが→http://example.com/test/test.jpg に変換されます。

テスト用パスと、本番用のパスを変えるときに便利そうですね。

4.設定を外部ファイル化して勝手にロードしてくれるLazyBulkLoader

ロードしたいItemとその設定を書いたxml・jsonを書くだけで、自動でロードしてくれるクラスがLazyBulkLoaderです。以下の2種類あります。

  1. LazyXMLLoader
  2. LazyJSONLoader

xml・json内部で設定できることはasで書けることとほぼ同じだと思われます。以下のxmlを見るとよくわかります。

BulkloaderのLazyサンプルに同梱されているサンプルxml

使い方はBulkLoaderのサンプルに含まれている
/examples/serialized-loaders/SerializedTestMain.as
に書いてあります。

使い方は簡単です。

lazy  = new LazyXMLLoader("http://www.emptywhite.com/bulkloader-assets/lazyloader.xml", "theLazyLoader")
lazy.addEventListener(LazyBulkLoader.LAZY_COMPLETE, onLazyInfoLoaded); //設定xmlを読み込んだときのハンドラ。特に何かするときだけ使う
lazy.addEventListener(Event.COMPLETE, onAllLoaded); //すべてのItemがロードされたら(いつもの)
lazy.addEventListener(ProgressEvent.PROGRESS, onAllProgress); //ロードのプログレス(いつもの)

AS側でやることがほとんどなくなるように見えますね。ロードしたあとのパースにしわ寄せがきますが、うまく使いこなせば楽になるかもしれません。

5.add()するときのプロパティ一覧

ASDocではわかりにくいので超意訳してみました。

プロパティ Classのconst データ型 説明
preventCache PREVENT_CACHING Boolean urlにランダム文字列を付与して、キャッシュを防ぐかどうか
id ID String getXML()などで取得するためのID。とくに指定しないとurlがIDになる
priority PRIORITY int 読み込みの優先順位。intが大きい順に読み込む。
maxTries MAX_TRIES int ロード失敗したときに何回リトライしにいくか。デフォは3
weight WEIGHT int weightPercentを使うときのパーセントの重み
headers HEADERS Array 追加のリクエストヘッダ
context CONTEXT LoaderContext or SoundLoaderContext 追加のContext
pausedAtStart PAUSED_AT_START Boolean VideoItemのみ。nestreamがロードした直後からVideoを再生するかどうか 

6. 一つでもエラーがあると止まってしまうから、エラーハンドリングしとこう

IO_ERRORやセキュリティエラーが発生したら、そのItemは失敗とみなされ放置されます。放置されると「すべてのItemがロードされました」というイベントCOMPLETEが呼ばれなくなります。

以下のようにエラーハンドリングすると、まあ、なんかできるでしょう!

_bulkLoader.addEventListener(ErrorEvent.ERROR, errorHandler)
private function errorHandler(e:ErrorEvent):void
{
 	//失敗したファイルをremoveする
	_bulkLoader.removeFailedItems();
 	//まだファイルのロードが残ってたら
	if (_bulkLoader.isRunning)
	{
		//コンプリートイベント待つなどする
	}
	else
	{
		//失敗したやつ以外は終了したので、終了処理に移る
		bulkLoadComplete(null);
	}

}

MultiProgressManagerのBulkLoaderのモデルも対応させました

ついでに、SparkにコミットしたMultiProgressManagerのBulkLoaderのモデルもweightPecentに対応させました。だいぶまともな動作になりそうです。

ハイ!ということでね!

今回はBulkLoaderを眺めるだけの記事でしたー。

特に何も茶々を入れなかったので、期待してくれてたみんなからは大ブーイングだね!むしろ大ブーイングの方が嬉しい!「今回みたいに普通に書いてよ。しょうもないこと書かんでいいから」とか思われたくないんです!

い、イヤー!心の声が聞こえるー!!それ以上言わないで!!やめてー!!ロマンティックとめてー!!もう、傷つく事に怯えたくないー!キィーーッ!!

複数ロードのプログレスを一本化できる「マルチプログレスマネージャー」で幸運パワーを掴め!

パーセント表示のとき、ちょっと面倒な複数のプログレスの監視

たくさん外部ファイルを読み込むコンテンツを作る際、ローディングの表示ををまとめるのって厄介だったりします。

そこで、あらゆるProgressEventをまとめちゃおうというクラスがマルチプログレスマネージャー(MultiProgressManager)です。

Spark Projectにコミットしました!

複数ロードのプログレスが多いと、ホントやっかいですよね!

最初のロード画面で、以下のような流れを行うFlashは比較的多いですよね。

  1. PreloaderからメインのSWFを読むプログレス
  2. xmlを読むプログレス
  3. 画像を読むプログレス
  4. 読み込んだ画像などからビルドするのに時間がかかるときのプログレス
  5. ようやくコンテンツがスタート

わかりにくい図にするとこのような感じです。
m_normal1

これらを最初にまとめて読み込んで、パーセントをうまく100%にまとめようとすると、下図のように、よくわからないことになります。
m_gonyo1

Preloaderがloader経由でmain.swfを読んで、そのプログレスを監視して、main.swf側でconfig.xmlを読んで、その中の…、ああー、もうややこしいわ!30歳近くなったし、将来に不安あるし、湿度高いし、イライラするわ!

そんな悩めるFlasherにお届けするのが今回のマルチプログレスマネージャー!

使い方はとても簡単!面倒だったパーセント表示が、たちどころにまとまります!

マルチプログレスマネージャーは、パーセント表示の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("終了");
}

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

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

m_result1

UMLっぽくするとこうなります(でっちあげのUMLです)
m_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)

未対応なところもあるけれど、今後もっと成長する余地があるってことだネ!

  • エンターフレームで監視しているときに、常にProgressPercentEvent.PERCENT_PROGRESSを飛ばしている(以前のフレームと比較して、パーセントに変化がなければ飛ばさなくてもいいかも)
  • IOエラーなどは監視していない(これは監視しなくてもいい?ロードしてる本体が処理すべき?)
  • キャンセルがちょっと雑?

というわけで、みなさんの風水パワーを待ってます!

無人島でもくもくとやってきたので、ライブラリとはどういう流儀で、どのようなものが求められるのかあまりわかっていません。とにかくコミットしてみました。

「ここおかしい!」というところがございましたら、ガンガンつっこんでください!

サンプルの中身を普通に説明

サンプルも作りました。Sparkのリポジトリに入っています。

サンプルでは普通のFlashでありがちな流れをやっています。

  1. preloader.swf起動
  2. main.swf読み込み
  3. 設定xml読み込み
  4. 複数画像の読み込み
  5. パーセント表示の終了処理
  6. main.swfの表示開始

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の表示を行います。

ハイ!ということでね!

そないたいしたクラスでもない上に、書き方の幅ちょっとを広げようとして、また失敗してしまいました。「イライラするわ!」のくだり以降、途中で飽きてきてるのもわかりますね。

はい。今回の記事はスクリーンセーバーの記事で使う予定のライブラリの説明でもありました。複数ロードを使うので、ここらで説明する必要があったのでした。

あと、Threadライブラリにも影響を受けてます。ほんとはThreadのIProgressも対応したかったのだけど、まだまだ理解不足なので次のバージョンで対応とかしたいです。

あーあ、なんつーか、輝いてへんわ。ガイアのやつ、ぜんぜん囁いてくれへんから輝きもせえへんわ。全部ガイアのせいや。ガイア君、どこいってもうたんや。

更新できるスクリーンセーバーを作ろう(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号線ネタはしばらく公の場では封印します。ポップさが圧倒的にたりませんでした。そんで新しいのを考えました。二次会で期待してください。

収穫

作ることはいいこと

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

SWFObjectのDynamic Publishingを使うとIEとかでStage.stageWidthとheightが一瞬ゼロになるという都市伝説は実在した!

IEとかでstage基準の中央寄せができなくなることがある

特定の状況で一定時間、swfの「stageのwidthとheightがゼロ」になり、stageの中心にモノを置いたはずなのに、変な位置にきてしまうことがあります。今回はその問題を肩パッド探検隊が追います。

基本的な対処法は以下のblogにおまかせ!

崖っぷちWEBデザイナーブログ | stage幅取得のタイミングをテストしてみた

二番煎じですが、ちょこっと書いていきます。対処するクラスが見たい方はページ内リンクで!

SWFObject1.5、SWFObject2.1のDynamic PublishingでWinIEがダメで、MacのFirefoxも怪しいらしい。あとMacのFla:verで作ったスクリーンセーバーもダメ

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);
			

widthとheightがゼロになるサンプル

サンプルでテストしてみてください。
サンプルの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
×
キャプチャ
win_capture
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の原因は以前のエントリで妄想を膨らませましたが、これは間違っていると思います。詳細ご存知のかた、おしえてください!

fla:verで作ったスクリーンセーバーをMacで再生するとき

fla:ver(http://flaver.jp/)というスクリーンセーバー作成ソフトで作ったスクリーンセーバーでも起こります。
ref) Mac OS X 10.5で MovieClip が表示されないことがあります

対処するクラスを作りました

大変つまらないクラスですがどうかご査収くださいませ
stagesize問題を対処したサンプルの実行結果

対処法について

  • 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
		//
		//--------------------------------------------------------------------------
	
	}
	
}

超便利なローダーBulkLoaderの落とし穴にハマってきました

便利なAS3用ローダー:BulkLoaderの解説は他のサイトにおまかせ!

BulkLoaderは複数の素材をまとめて読み込める万能ローダーです。解説はほかのサイトにおまかせ!ぜひ読んでください。読んだら僕のサイトに帰ってこなくても大丈夫です!

BulkLoaderの便利ポイントをまとめると

  • まとめてロードできる
  • String形式のurlをadd()するだけでロードの準備はOK。さらにvideoなのかxmlなのかjpgなのかなどを自動判別してロードしてくれる(きちんとtype指定もできるのでやったほうがいいです)
  • ロードが終わったら、あらかじめBulkLoaderに渡しておいたIDやurlのstringで取得できる
  • getXML()とかgetBitmapdata()などで好みのインスタンスで取得できる
  • 複数ロードのパーセントや何個中何個がロードできたかを取得できる。
  • ロードしたものを取得後、メモリに残したり、取得したらメモリから消したりと、メモリ管理が簡単

といったところです。ものすごく便利です。

今回ハマったローディングパーセント処理

今回、外部素材を10個ほど読み込んでいました。しかし、パーセント表示がおかしな挙動になってしまいました。

  1. 最初の1秒間くらいでパーセントが100%近くに達し
  2. その後の1秒で10%ちかくまで減り、
  3. その後は正常に100%まで達しました。

原因は2つあって、

  1. ロードするときにproressイベントが発動するまで、bytesTotalが見えない問題
  2. BulkLoaderのパーセント表示には2つ種類があり、そのうち強引な作りのほうを選んでしまった

1.ロードするときにproressイベントが発動するまで、bytesTotalが見えない問題

外部素材との接続を確立してproressイベントが発動するまではbytesTotalが見えません。下のスクリプトで確認してみましょう。

このように、progressEventが発生するまでbytesLoadedやbytesTotalはわかりません。複数ロード時にはこのへんの問題があります。

BulkLoaderのパーセント表示には2つ種類があり、そのうち強引な作りのほうを選んでしまった

次にBulkLoaderが持っている2種類のパーセント表示を見てみましょう。

  1. 読み込みが完了したアイテム数 / トータルのアイテム数(BulkProgressEvent.ratioLoaded)
  2. 今までに読み込んだアイテムの総bytesLoaded / トータルのアイテムの総bytesTotal(BulkProgressEvent.percentLoaded

「1.完了数/総数」は複数ロードするときによく使われる手法ですが、2つしかロードがないときは50%ずつ増えることになるので、使いどころが難しいときもあります。
正確なパーセントを知りたいときは後者の「bytesLoadedとbytsTotalの比率」を使います。

しかし、ここが大きな落とし穴となっていました。

BulkLoaderはこのパーセント表示を強引な手法で実装しています。前述のとおり、flash.event.ProgressEventが飛んでこない限り、bytesTotalを知る術はありません。BulkLoaderでは、

  1. bytesTotalを取得できたitemだけを加算し、
  2. すべてのitemのbytesLoadedと上記のbytesTotalの比率からパーセントを表示します

つまり、すべてのitemのbytesTotalがわかるのは最後のitemのprogressが始まったときになのに、分母(bytesTotal)が変動する状態でパーセント表示を開始してしまうのです。

ロード直後では
800/1000(80%)
だったものが、その次のフレームで
1000/10000(10%)
となる可能性があるのです。

じゃあどうする?

2009-10-06追記 : weightPercentを使う

以下のやりかたよりもスマートな解法がありました。BulkProgressEvent.weightPercentを使うともっとまともなパーセントを取得できます。
こちらの記事に書きました。「BulkLoaderで「もう悩まない!」ための6つのtipsをまずは14日間で売上No.1!!

1.読み込みが完了したアイテム数 / トータルのアイテム数をとる

これが一番安全ですね。パーセント表示は正確なものが期待できませんし、トータルのアイテム数が2つ3つのときはおおざっぱになるので、ごまかしの効くviewにしましょう

2.読み込み順序に優先順位をつけ、重たいものから先に読み込む

先に軽いファイルを大量に読み込むと、重たいファイルを読み込み始めた瞬間にグッと分母が上昇してしまいます。重たいファイルから読めば分母の変動が少ないので、ある程度ゴマカシが効くようになります。

//優先順位はこんな感じで設定
//addの引数でpriorityを設定。priorityが高いやつが優先的に読み込まれる。重たいファイルを優先的に指定しとく。
var bulkLoader:BulkLoader = new BulkLoader("main loading");
bulkLoader.add("めっさ重たい.flv", { priority : 1000 });
bulkLoader.add("コニシキ.flv", { priority : 1000 });
bulkLoader.add("ダイエットコーラ.xml", { priority : 0 });
bulkLoader.add("糖分ゼロ.xml", { priority : 0 });
bulkLoader.add("ふわっふわ.xml", { priority : 0 });
bulkLoader.add("納品前日に仕様変更.swf", { priority : 500000 });
bulkLoader.addEventListener(~~~);
bulkLoader.start();

addメソッドの引数はasdocで

重たいファイルは後回しにした方がいいときの方が多いので、そのへんはトレードオフとかを考えてベターな手法を選びましょう。

  • Comments (Close): 0
  • Trackbacks (Close): 0

TextFieldから文字列が溢れたときに「…」ってするやつのasを少し高速化

TextFieldから文字列がはみ出した時の処理 – blog.nium.jpを読んでいて、高速化できそうだと思ったのでほんの少しいじくりました。

ソースだけ必要な人もいると思うのでいきなりソース!適当なクラスのstaticにでも置いてください。

public static function trimmingText(textField:TextField, endText:String = "...", defaultFontSize:Number = 12):void
{
	textField.wordWrap = false;
	if (textField.maxScrollH <= 0) 
		return;
	textField.appendText(endText);
	var text:String = textField.text;
	
	//ループの回数を減らす
	if (textField.maxScrollH > defaultFontSize * 1.5);
		textField.text = text.slice(0, text.length - endText.length - 1 - Math.ceil(textField.maxScrollH / defaultFontSize)) + endText;
	while (textField.maxScrollH > 0) 
	{
		text = textField.text;
		textField.text = text.slice(0, text.length - endText.length - 1) + endText;
	}
}
//こうやって使う
var unko_txt:TextField = addChild(new TextField()) as TextField;
unko_txt.width = 100;
unko_txt.autoSize = TextFieldAutoSize.LEFT;
unko_txt.text = "君、ウンコくさいね。すごく臭うからしたよね?ね?ね?君が好き。"
Hogehoge.trimmingText(unko_txt);

本家でのソースの流れ

本題に入る前に、本家ではどういう処理をしてるかを少し説明します。

  1. 水平スクロールがあれば
  2. テキストフィールドの最後に”…”をつける
  3. 水平スクロールがなくなるまで↓をループする
  4. 1文字ずつ削除していく

以下高速化をした点

テキストをトリミングする方法を配列じゃなくて、Stringをいじくる方法に変えた

配列はnewして、中身を入れるときがずいぶん重いらしいので、普通のStringをいじくる方法にしてみた。5~10%高速化。

//配列を作ってspliceして、joinするという、配列生成+操作が重そうだったので
//var words:Array = textField.text.split( "" );
//words.splice( words.length - 4, 1);
//textField.text = words.join( "" );
 textField.text = text.slice(0, text.length - endText.length - 1) + endText;

whileループの回数を減らすために、if分をひとつ挟んで、がっつり削除する

1文字ずつ削除するのがもったいない気がするので、ある程度がっつり削除する方向にしてみた。文字数にもよるけれど、80%高速化

 if (textField.maxScrollH > defaultFontSize * 1.5);
 	textField.text = text.slice(0, text.length - endText.length - 1 - Math.ceil(textField.maxScrollH / defaultFontSize)) + endText;

whileループ前に一枚かませます。あふれた文字数をフォントサイズから割り出してがっつり削除します。半角文字などが大量にあると一発では消えませんが、それでもかなりの量の文字を一気に消せます。

図にするとこんな感じです。

(textField.getTextFormat().sizeからフォントサイズを取得できますが、ここでいちいち取得してると重くなるので引数にしています)

結果 45ms → 5ms

計測方法は

  • 以下の文章が入ったTextFieldを5つ用意してまわしました。
    □□□□■□□□□1□□□□■□□□□2□□□□■□□□□3□□□□■□□□□4□□□□■□□□□5□□□□■□□□□6□□□□■□□□□7□□□□■□□□□8□□□□■□□□□9□□□□■□□□□10
  • TextFieldのwidthは200にしました。

for文で10万回まわしたとかじゃないですよ。日常的に使う場面っぽくしてみました。

ちっさいところとは言えど、ループ回数が多いのと、描画に関わるところなので若干の高速化ができました。

  • Comments (Close): 0
  • Trackbacks (Close): 0

as3はじめました

さてみなさん、ときめいていますか?僕は元気です。心配しないでください。I’m fine thank you.

前回のエントリで目標を設定しました。2008-03-31までにActionScript3.0アニメーションという本を読了するのが目標です。なのでちょこちょこ記していきます。

単にサンプルを書くだけではつまらないので、TOPページにおいてあるunkoFlashをas3にして、リファクタリングする作業も合わせて課題にします。

まずはサンプルを作ったりする前に事前準備ですね。

制作環境

マシンとソフト

  • WinXP
  • Flash CS3 IDE
    (コンパイルするだけ)
  • FlashDevelop
    (メインのエディタ。コード補完が最強なので、as2とas3の違いによる単純な書き損じを減らせる)
  • Flex SDK
    (コンパイルするだけだがまだ導入してない。誰かが背中を押してくれたら試す)

as2との違い

なんやかんややる前に事前に調査しとく。

イベント処理

  • Sprite.addEventListner()で自身がイベントをリスンしていることを伝える
  • MouseEvent.MOUSE_DOWN == onPress
  • MouseEvent.CLICK == onRelease
  • onReleaseOutsideが削除(歓迎!)

プロパティ

  • _xなどアンダーバーがなくなる
  • rootとmaskがプロパティになった

データ型

データ型が増えた。以下増えたやつ

データ型 初期値 範囲 使いどころ
int 0 正負の整数
(-21億~+21億)
整数
uint 0 正の整数
(0~42億)
forでi++するとき

MCやSpriteなどの重なりとかDisplayオブジェクトらへん

  • stage.framerateでFPSを変更しまくれる
  • rootの扱いがよくわからん。lockrootとかどうなるのか。そのへんを大重さんが書いてたけどいまいちわかってないので、もう少し勉強。外部swfからメインタイムラインにはどうやってアクセスするのか。
  • as3からaddChild方式に変わった。htmlのDOMに似た感じ。
  • container.setChildIndex()などで順序を切り替えていく

どこからどうログしていけばいいのか難しいですが、覚えたいことはログしていきます。

  • Comments (Close): 0
  • Trackbacks (Close): 0

大重さんのActionScript3.0セミナーに参加

ActionScript始めて4ヶ月。そろそろas3に足をつっこみたくなったので参加してきました。
http://event.67.org/summercamp/

参加前のAS3印象

  • プロパティから"_x"などのアンダースコアが消えた
  • イベントを全部リスナーに登録せんとダメ
  • ややこしい

実際参加してわかったこと

  • 要素がレイヤーとかじゃなく、displayObject(?)のノードになってる(深度がなくなって、配列の順序で重なり順を操作する感じ)
  • maskがプロパティに
  • ドキュメントクラスのおかげでASは全部外部に移せる
  • フレームアクションがそのMCの全フレーム共通になった
  • timerクラス
  • xml使いやすくなった
  • イベントリスナーっていう考え方はクール。functionをadd、removeがやりやすくなった。
  • pointクラスがいい感じ
  • deleteよりnullが推奨されてるらしい

覚えることも多いけれど、クラスの作り方が一貫してんのかな?勉強がしやすい。

このへんのことは大重さんのActionScript 3.0 入門ノートに書いています。2.0入門ノートもよかったけれど、こちらもたいへん優秀な本です。
http://www.amazon.co.jp/o/ASIN/4881665901/

ちなみに、大重さんのレクチャー手法は…

僕の手法と似てました。もちろん、大重さんの方がすばらしい内容のお話ですが、似てた。

  • 「AはAです」ではなくって、
  • 「AはAだけど、Bっていう概念も知っておかないと…。それでBっていうのは…」

という形です。

「AはAです」と言い切ったほうが初学者の混乱はさけられるけれど、それは本質ではない。だから脇道だとしても伝えたい、というところでしょうか。

そのへんのさじ加減って難しいですよね。僕の場合は

「あーこれはこうやからこうなのですが、あー、(ここまで言っても混乱するだけかな?うまく伝えれるかな?あー)どうしようかな 。(やっぱやめとこ)ええっと、まあそんな感じです」

と最低なパターンになります。 あっ、でも大重さんはきちんと説明されていたので、そのあたり僕とは違います。そこだけはきちんとお伝えします。

  • Comments (Close): 0
  • Trackbacks (Close): 0

Home > Tags > as3


Search
Feeds
Meta

Return to page top