Home > ActionScript

ActionScript Archive

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も対応したかったのだけど、まだまだ理解不足なので次のバージョンで対応とかしたいです。

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

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

デザイナー上がりのFlasher1年生が読んだ19冊の本を、これほどかというほどに感想を書きます。だいたい3行だけど。

Flasherになって1年が経ちました。この1年いろいろと勉強さしてもらいました。

大掃除で本の片付けついでに、今年買ったFlash技術周辺本のレビューでもしましょう。

途中までしか読んでない本が大半ですが、まったく読まなかった本もあります。
ここでは最低でも50ページは読んだ本19冊を選抜しました。Flash本9冊、それ以外10冊です。

ずらずらと並べた19冊の感想を読むのはつらいと思うので、1冊だけ「ムツゴロウさんの動物王国のナレーション」のモノマネをしながら書いています。

2008-01月~03月に読んだ本

01.ActionScript 3.0 アニメーション

★★★★★。オススメ。3か月で全ページ読破しようと思ってた。

結局、最後の100ページは流し読みをしたけれど、初心者にはかなりいい内容。とりあえず大量のモノを動かして、ある程度の高速化を意識して…という基本がわかればええと思う。

02.UMLモデリングレッスン-21の基本パターンでわかる要求モデルの作り方

★★★☆☆。例がFlashと無縁なので忍耐が必要。

UMLでも勉強しようと思って買った。この手の本に共通して言えるのが、例がよくわからんのだ。会員が何かを購買した情報を分類したり、従業員の種類を気にしたり、顧客の種類を気にしたり、といった「Flashではない向こう側のプログラミング」の例だらけだ。このような例に耐えられる、もしくはそんなん気にせず本質を読み取れるならいい本じゃないかと思う。UML、つまりオブジェクト指向の表現の幅が広がるはず。

03.リファクタリング―プログラムの体質改善テクニック

★★★★★。オススメ。ビューティフルなコードを書くための本。

第3章まで読めとamazonに書いてあったけど、そこまで読めたら全部読める。コードの不吉な匂いがわかればよし。優秀な人のソースも読めるようになる。
ただ、このままFlashに適応させると大変な目にあうので注意!律儀に書くとコードの実行が遅くなるので、この辺のバランス感覚は経験が必要になってくる。

04.モーション・タイポグラフィ

★★★☆☆。古い。中古で買ったら間の4ページくらいが破られてた。

モーション・タイポグラフィの歴史とか見方とかその辺を意識できるようになった気がする。とりあえず、映画のオープニングはしっかり見ようと思った。

05.ActionScript3.0 ビジュアル・リファレンス

辞書は1冊あればいいだろう。Flashのヘルプで事足りるので不要かもしれない。1か月に1度開くと知らん機能を発見できたりする。

06.Advanced ActionScript 3 with Design Patterns

★☆☆☆☆。Flashでのデザインパターンはどのようにして行われるのか、そういった疑問を持ち、英語の本に手をだした。

しかし、単に他言語の教育用デザインパターンをActionScriptで書きました的内容なのがとても気になってしまった。AbstractGameのサブクラスにFootBallGameやで。どこで使うねん。Flashのために書かれたとは思えない内容で残念。

2008-04~06月に読んだ本

07.Webデザインの「プロだから考えること」

★★★☆☆。一流の人たちの作り方がほんの少しわかる

個人的には電通の中村洋基氏とimaginativeの水藤祐之氏・深澤 洋介氏の話が印象に残ってる。みんなクオリティを高めるために死に物狂いなんやなー。そらぁ、僕みたいな底辺が太刀打ちできるはずもない。そういうことを実感できただけでもありがたや。

08.FLASH OOP (AS2のやつ)

★★★★☆。オススメ。のちにAS3版がでるけど、こっちのがいい。

なにがいいかというと、Flash以外のことが書いてある。すなわち、Flash以外の本を読め!と書いてあるのと同義だ(と思う)。これを見てプログラミングの世界の広さを垣間見れたし、興味の対象も広がった。

09.Learning Actionscript 3.0

★★★☆☆。のちに和訳が出たのでこいつ(原著)は買う必要がない。和訳はこっち初めてのActionScript 3.0 Flashユーザーのためのステップアップガイド

内容は実にわかりやすい。わかりやすすぎる。コードもわかりやすいし、サンプルも興味をそそるものが多い。あと、AS3でつまづきやすいところと基礎的なところに絞られていて、無理なく読めた。デザイナ上がりで大重さんの本を読んだら次はこれか。

10.Production Studio マスター After Effects

★★★☆☆。高い。高いけど、サンプル素材がすごいらしい。

内容は初心者向け。エフェクトの一覧があるので、やさしい。Flashばかりに頼ってたら死ぬ状況もあるので、AfterEffectsは絶対覚えとかないといけないし、表現の幅も広がる。

11.Flashデザインラボ -プロに学ぶ、一生枯れない永久不滅テクニック

★★★☆☆。初心者向けだけど、むらけん氏とTeamLabがずば抜けてる。

むらけん氏とTeamLabの2つはつくりがきれいだし、解説も豊富。Flashの実践的な作り方をきちんと書いてある本はほとんどないので、それだけで買う価値はある。

12.FLASH OOP for ActionScript 3.0

★★★☆☆。OOPとは少し違う。

AS版と比べて、OOPに比重が置かれていない。初心者には難しいだろうし、上級者ならすぐわかるだろうし…といった中途半端感が目立つ。もうすこしページがあってもいいのではないか。値段も高いんだから。

2008-07~09月に読んだ本

13.Adobe Flash CS3 詳細! ActionScript3.0入門ノート2

★★☆☆☆。入門ノート1の続編。

入門ノート1がかなりわかりやすかったので買ってみた。内容はそれほど高度なことや必要性のあることでもない(FLVのキャプションはそんなに必要ないだろう)。こちらは立ち読みをして購買の検討をすればいいと思う。

14.ゲーム開発のための数学・物理学入門

★★★☆☆。最近はAS3の数学・物理学本も出たみたいなので、そっち読めばいいのではないか。僕も今買った。

この本は説明をかなりはしょるけれど、公式は暗記すればいいのでそんなのでもいいかもしれない。高校数学どまりでも読めるけど、わけわからないぜ!これを乗り切らないと野たれ死ぬだけなので頑張ろう。

15.実例で学ぶゲームAIプログラミング

★★★★☆。ゲームの世界に衝撃を受けた。

ゲーム業界のノウハウはすごい。こんな膨大な知識が埋まっているとは。

内容は単純なステートパターンから探索行動まで、きっちり書かれてる。もうここまでくるとデザイナ上がりのFlasherは太刀打ちできないレベル。しかし、ここを理解できないとそのうち野たれ死ぬだろう。ノード探索とかはしっかり覚えたいところ。

16.増補改訂版Java言語で学ぶデザインパターン入門

★★★★★。オススメ。日本人のデザパタ本。読みやすくわかりやすい。

デザパタ本はずーっとGoF本と周辺本を読んでたけど、ぜんぜんわからん。ごめん言い過ぎた、なんとなくはわかる。でも「えっ?デザインパターン?ああ、となりのクラスの?」という顔見知りレベルを脱却できない。つまりなんにも使えないのだ。

しかし、この本は相当わかりやすい。わかりやすすぎて、Decoratorパターンはそんなに使う必要がないこともなんとなくわかる。抽象化して思考することを嫌というほど叩き込んでくれるので、パターンやOOPの本質を理解できるし、どのように応用すべきかもなんとなくわかる。デザパタ本ってそういうところが重要なんだわ。

2008-10~12月に読んだ本

17.達人プログラマー―システム開発の職人から名匠への道

★★★★★。オススメ。達人がなんたるかをなんとなく理解できる。

Web業界の歴史は浅いので、なかなか達人や師匠に巡り合えない。また、Flashなんて大抵1人で開発が終了するから、技を盗むことも至難だ。Web業界における「達人から盗む」という作業は、「他の業界の達人」から盗んだ方が効率がいい。この本は徹底した達人の姿勢を教えてくれる。個人的には「割れ窓理論」がマジウケるんだけど~!

18.ゲームプログラマになる前に覚えておきたい技術

★★★★★★★★★★。超オススメ。通称セガ本。セガの偉い人が新人教育用に書いた本。

これはすごい。どうしてこういう作りの戦略をとるか、最適化を行うかなどなどありったけのノウハウを詰め込んでる。まったくノウハウがない新人に教える感覚なので、Flasherみたいな独学大王たちはこの本からものすごくたくさんのことを学べるはずだ。まじで(僕のamazonリンクから)買えばいいと思う。

19.詳説 ActionScript 3.0

★★★★☆。せめて半年前に読みたかった。もうFlash10が来てるんだぜ!

広大なアメリカ大陸から西へ西へと遥々やってきたコリンムックさんの本。さあ、ここにはいったいどんな動物がムツゴロウさんを待ち構えているんでしょうか?

ムツゴロウ「いや~かわいいですね~、これを見てください。表紙をみてください。アメリカサンゴヘビですね~。アメリカサンゴヘビは毒を持っていて、この毒が獲物の体に回るまで噛みついたまま離さないんですね~」

まとめると…「Flasher1年生は2学期からFlashの本を読むな」

みなさんお気づきの通り、ムツゴロウさんのナレーションは間違いなく不要でしたね。高枝切りバサミに付いてくる普通のハサミと同じくらい不要ですね。

それはさておき、これらを一言でまとめると

「Flasher1年生は2学期からFlashの本を読むな」

ということです。いまのところFlash本でかっちりとした構築ノウハウを提供してくれる本はあまり見かけません。それならいっそのこと他の分野からノウハウを移植したほうが効率的です。

最初の4~6ヵ月でASの基礎を固めておいて、あとはデザインパターンや数学など、他分野から吸収したほうがよさげです。

特にゲームはFlashと近いところにいます。uiがあって、ローディングがあって、動的に画面が遷移して…と、かなり似ています。衝突判定やAI、画像処理など山のようにノウハウが蓄積されています。僕は今後がっつりこっちの本を読もうと思っています。

それと、あと1冊で20冊というキリのいい数字なのにどうして19冊なのか?そう思いますよね。いや、読んでるんです。50ページ以上ね。読んでるんです。なんだったら2周読んでます。でもね、その1冊が通学路で拾ったエロ本だったんです。

よいお年を~!!

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

AS2で遅くなる書き方を研究しようか

上条さんとこで、AS2でOOPをやると遅くなる可能性があると書いてあって泣いた。

AS3 で動的言語のススメ

AS2 における型の使用は、オーサリング時の ”生産性向上のベストプラクティス” としての位置づけ以上ではないわけです。実際 OOP をまじめに追求するほど AS2 のアプリケーションは遅くなる傾向を持っています。

気になったので、単純なカウントアップでベンチマークをとった。

試したところは以下

  • タイムラインに書くかクラスに書くか
  • 型宣言の有無
  • 処理をfunctionにくるむかどうか

AS2でタイムラインに書く。型宣言はなし

//型宣言なし
var startTime = getTimer();
var trialNum = 100000;
var cnt = 0;

for (var i:Number = 0; i < trialNum; i++) {
	cnt++;
}
benchmark();

function benchmark()
{
	var endTime = getTimer();
	trace("time: " + (endTime - startTime)); 
}
//だいたい228

AS2でタイムラインに書く。型宣言あり・カウントアップは生で書く

//型宣言あり
var startTime:Number = getTimer();
var trialNum:Number = 100000;
var cnt:Number = 0;

for (var i:Number = 0; i < trialNum; i++) {
	cnt++
}

benchmark();

function benchmark()
{
	var endTime:Number = getTimer();
	trace("time: " + (endTime - startTime));
}

//だいたい230

AS2でタイムラインに書く。型宣言あり・カウントアップはfunctionにくるむ

リファクタリングの本やOOPの本を読んでいると、できるだけ細かいfunctionに分けるべきだ、と書いてある。確かにそのほうがやりやすいが、やればやるほど遅くなる気はしていた。

//型宣言あり,function
var startTime:Number = getTimer();
var trialNum:Number = 100000;
var cnt:Number = 0;

for (var i:Number = 0; i < trialNum; i++) {
	countUp();
}

benchmark();

function countUp():Void
{
	cnt++;
}

function benchmark():Void
{
	var endTime:Number = getTimer();
	trace("time: " + (endTime - startTime));
}

//だいたい709

クラスに書く

クラスに書いてみた。やってる中身は上とほとんど一緒。試したのは以下。

  • 型あり
  • 型あり・function
  • 型あり・別クラスstatic function
  • 型あり・別クラスを参照static function 「型あり・別クラスstatic function」は
    for (var i:Number = 0; i < trialNum; i++) {
    	cnt = sandbox.BenchTest.countUp(cnt);
    }

「型あり・別クラスstatic function」は

var test:BenchTest = BenchTest;
for (var i:Number = 0; i < trialNum; i++) {
	cnt = test.countUp(cnt);
}

AS2速度まとめ

型なし型あり型あり・function型あり・別クラスstatic function型あり・別クラスを参照static function
タイムライン228230708455
クラス102101245313227

ループ処理だけでの単純な比較なので、あまりあてにならない。

実際のところどっちが速いのかよくわからん、という結果になった。とりあえず、タイムラインでのfunctionがやたら遅いということがわかった。アクティベーションオブジェクトのせいだろうか。

でも、OOPにのっとってめちゃくちゃ細かく分割すると、遅くなることは事実だろう。わりと、お茶濁しな結果に!

AS3とAS2での差はクラスのメンバにあるかどうかでかなり変わる

AS3では

var point:Point = new Point(x,y)
point.x++;

と書くとめちゃくちゃ早い。メンバ変数であるかどうかがかなりの違いの模様。

これを単なるオブジェクトとして扱うとめちゃんこ遅くなる。ハッシュがどうのこうのらしい。配列はそこそこ早い。 PointとArrayで速度比較

var obj:Object = new Object();
obj.x = 1;
obj.x++;

AS2ではどれをやってもほとんど同じ速度だった。

さっさとAS3に全部移りたいぜ!

//var point:Point = new Point(1, 1);
//var obj:Object = new Object();
//obj.x = 1;
var array:Array = [1];
for (var i:Number = 0; i < trialNum; i++) {
	//point.x++;
	//obj.x++;
	array[0]++;
}
AS2でメンバとかの速度
point.x++;obj.x++;array[0]++;
9493106

いまさらDelegate.createを理解しようと思ったけれど、謎が深まった愛され系の俺

長らくAS2でお世話になっているおまじない、Delegate.create。ただなんとなしに使うのではなく、そろそろ理解しようと思い調べてみました。

理解するためには2つ必要でした。

  1. argumentsオブジェクトの理解
  2. Functionクラスの理解

argumentsオブジェクトの理解

argumentsオブジェクトは引数オブジェクトのことです。アクセスするには配列演算子を用いますが、単なる配列とは異なるようです。

argumentsオブジェクトにはcallerとcalleeプロパティが存在します。

arguments.caller

現在実行中の関数を呼び出した関数への参照となります。関数オブジェクトはdynamicクラスなので、あとからいくらでもプロパティを追加できるので、実際に参照しているのかテストしてみましょう。

function firstStep(){
	secondStep();
}
firstStep._x = 1;

function secondStep(){
	trace(arguments.caller._x);
	arguments.caller._x++;
}
firstStep();   //1が出力される
firstStep();   //2が出力される
firstStep();   //3が出力される

arguments.callee

現在実行中の関数への参照となります。

Functionクラスの理解

Function.apply()

Function.apply(scope:Object, [argArray: Array ]) :Void

functionオブジェクトのthisを置き換えるのがこのapplyメソッド。 これをうまく使えばmc.onReleaseなどのthisが変わるめんどくささから解放されます。

以上を踏まえて、mx.utils.Delegate.create()では何をしているのかというと

まずはmx.utils.Delegate.create()のコードを見てみましょう。

static function create(obj:Object, func:Function):Function
{
	var f = function()
	{
		var target = arguments.callee.target;
		var func = arguments.callee.func;
		return func.apply(target, arguments);
	};

	f.target = obj;
	f.func = func;
	return f;
}
  1. functionオブジェクト(var f)を作成
  2. functionオブジェクトに匿名関数を参照させる
  3. functionオブジェクトはdynamicクラスなので、追加プロパティを作れる
    • scopeとなるobjectと関数を保持させる
  4. 匿名関数内で、arguments.calleeを使って、自身(現在の関数)を参照し、
    • 先ほど保持したscopeと関数を拾う。
    • func.apply()で意図したscopeにfuncを割り当てる(thisを変える)

だいたいこんな感じでした。しかしながら、func.apply()には同時に引数も渡せるはずです。なので、ちょっと付け足してみました。

static function createWithArgs(obj:Object, func:Function, args:Array):Function
{
	var f = function()
	{
		var target = arguments.callee.target;
		var func = arguments.callee.func;
		return func.apply(target, arguments.callee.args.concat()); //ここを追加
	};

	f.target = obj;
	f.func = func;
	f.args = args; //ここを追加
	return f;
}

applyメソッドの第2引数にarguments.callee.args.concat()を追加するとうまく引数を登録できます。 引数の配列となるargsはconcatしないとうまく動作しません。

このあたりがさっぱりわからなかったので、ググってみましたがめぼしいものは見つからずさらに謎の動作まで見つけてしまいました。

http://library.sfug.ch/trac/browser/trunk/doc/as2/examples/sfug_as2lib/ch/sfug/utils/Delegate.as

ここはarguments.shift()でscopeとfuncを定義してるあたりがおもしろいですね。concat(arguments)でさらにdelegateした後で呼び出したときの引数も定義しています。なぜargumentsが使えるのかがなんとなくでしかわからないので、完全なる理解にはしばらく時間がかかりそうです。

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

ホーム > ActionScript


Search
Feeds
Meta

Return to page top