画像読み込みとリスナーオブジェクト

質問

下記スクリプトが上手く理解できずに混乱中です。

var mcLoader:MovieClipLoader = new MovieClipLoader();
var listenerObject:Object = new Object();
listenerObject.onLoadInit = function() {
photoFrame._width = 120;
photoFrame._height = 160;
};
mcLoader.addListener(listenerObject);
mcLoader.loadClip("photo001.jpg", photoFrame);

上記は画像を読み込み、指定サイズに調整する というASですが、上手く理解できずにおります。まず、
var mcLoader:MovieClipLoader = new MovieClipLoader();
mcLoader.loadClip("photo001.jpg", photoFrame);
で、画像を読み込み、を学びました。

ここに単純にサイズ指定のASを追加しても、画像読み込み完了より先にサイズ指定が実行されてしまうため、指定サイズにならない場合がある。なのでリスナーオブジェクト（この単語も説明は読んだのですがいまいち理解しておりません）を作成使用し、画像ロードが完了した事を確認後、画像サイズを調整する という段階を踏ませるために、
ar listenerObject:Object = new Object();
listenerObject.onLoadInit = function() {
photoFrame._width = 120;
photoFrame._height = 160;
};
mcLoader.addListener(listenerObject);
を追加する。という説明まではよいのですが、この追加コード部分の内容がよく分かりません。

まずこのコードは実際どのような流れにになるのでしょうか？
「実際の流れ」というとおかしな表現になってしまうのですが、例えば、
function FuncName(){
this._x += 10;
}
MC01.onRelease = FuncName;
は、
MC01がクリックされたとき、
MC01.onRelease = FuncName;
ファンクションが呼び出され、
function FuncName(){ this._x += 10; }
ファンクションが実行される。
という流れという説明をつけられるとおもうのですが、実際の描画の流れとでもいえばよいのでしょうか、最初に上げた画像読み込みのコードはどのような順で実行されるものなのでしょうか？

何がわかっていないかがわからない的な部分もあり、少々不明瞭な説明になってしまっているかもしれないですが、できうる範囲でアドバイスやご説明をいただけたらと思います。

よろしくお願いします。

回答No.1

BlurFiltan

追加部分はこれですね↓。

-----------------------------------
//オブジェクトの作成
var listenerObject:Object = new Object();
//何らかのイベント発生時の動作定義
listenerObject.onLoadInit = function() {
photoFrame._width = 120;
photoFrame._height = 160;
};
//あるオブジェクトに イベントリスナーが呼び出されたときに通知を受けるオブジェクトを登録
mcLoader.addListener(listenerObject);
-----------------------------------

> このコードは実際どのような流れにになるのでしょうか？

流れは単純に上から順です。

// オブジェクトの作成
　　↓
// 何らかのイベント発生時の動作定義
　　↓
// あるオブジェクトに イベントリスナーが呼び出されたときに通知を受けるオブジェクトを登録

しかしこれは，
動作定義や登録をしているだけで，実際の動作は何も起こりません。
mcLoader に何かがロードされ，ロードされたものが表示されると同時に
// 何らかのイベント発生時の動作定義
で定義した動作が起こります。

前半と後半に分けて考えますか。

///////////////////////////////////////////////////////////////////////

追加部分の前半はこれです↓。

-----------------------------------
//オブジェクトの作成
var listenerObject:Object = new Object();
//何らかのイベント発生時の動作定義
listenerObject.onLoadInit = function() {
photoFrame._width = 120;
photoFrame._height = 160;
};
-----------------------------------

まず，オブジェクトを作成して，
そのオブジェクトに対する何かのイベント発生時の動作を定義しています。

上の例では実際のものが目で見えないので観察しにくいです。
目で見えるような形で上と同じような例を書きます。

Flash 8 以降 AS2 スタイル で書いた例です↓。
-------------------------------------------------------------
//オブジェクトの作成
var txtField:TextField = _root.createTextField("myField", 0, 30, 100, 200, 50);
txtField.border = true;
//何らかのイベント発生時の動作定義
txtField.onSetFocus = function() {
myField.text = "フォーカスを受けました";
};
-------------------------------------------------------------

Flash 8 以降をお持ちでない場合はスタイルが変わってしましますが，
上と全く同じ内容のものをFlash MX 2004 以前の形式で書くとこうなります↓。
--------------------------------------------------------
//オブジェクトの作成
_root.createTextField("myField", 0, 30, 100, 200, 50);
myField.border = true;
//何らかのイベント発生時の動作定義
myField.onSetFocus = function() {
myField.text = "フォーカスを受けました";
}
--------------------------------------------------------

新規ドキュメントのフレーム1に書いて，
パブリッシュもしくはムービープレビューしてもらうと，すぐに動作確認ができます。

これ↑と同様に考えるとわかりやすくなるような気がします。

MovieClipLoader.onLoadInit も
TextField.onSetFocus も
イベントリスナー（イベントハンドラメソッドの拡張版）です。
MovieClipLoader と TextField との違いは，
MovieClipLoaderオブジェクトは，別にコールバック通知を待機するオブジェクトが必要ですが，
TextField はコールバック通知を待機する機能を内包しているという点です。

そこは違いますが，
結局，MovieClipLoader.onLoadInit も TextField.onSetFocus も
何かのイベントが発生したときの動作を定義できるイベントリスナーには違いはありません。
「ロードしたものが表示されるとき」 の動作を定義できるイベントリスナーか，
「テキストフィールドがフォーカスを受けたとき」 の動作を定義できるイベントリスナーかという違いだけです。

> 「実際の流れ」というとおかしな表現になってしまうのですが、例えば、
> function FuncName(){
> this._x += 10;
> }
> MC01.onRelease = FuncName;
> は、

それは例が違いすぎるのでわからないのだと思います。
形が違うので比較のしようがありません。
匿名関数で書くところをバラしているわけですから，
バラさずに同じような書き方をするとこうなります↓。

----------------------------
//何らかのイベント発生時の動作定義
MC01.onRelease = function() {
this._x += 10;
};
----------------------------

この場合，
MC01 は手動で作成してあると思うので，
var listenerObject:Object = new Object();
とか
var txtField:TextField = _root.createTextField…
のような，
MC01オブジェクト 作成のためのスクリプトが上に付いていないだけです。

あえて MC01オブジェクト 作成の部分まで付けると次のような感じになります。

----------------------------------------
//オブジェクトの作成
_root.createEmptyMovieClip("MC01", 1);
MC01._x = 100;
MC01._y = 100;
with (MC01) {
beginFill(0x00EEEE);
moveTo(0, 0);
lineTo(80, 0);
lineTo(80, 60);
lineTo(0, 60);
lineTo(0, 0);
}
//何らかのイベント発生時の動作定義
MC01.onRelease = function() {
this._x += 10;
};
----------------------------------------

これも新規ドキュメントのフレーム1に書いて，
パブリッシュもしくはムービープレビューしてもらうと，すぐに動作確認ができます。

MovieClip.onRelease は，
イベントハンドラ ですが，イベントリスナーのようなものなので同じと考えて良いです。

ただし，
上の２例でも動作定義をしているだけで，実際の動作は何も起こりません。
"テキストフィールドを選択したとき" または，"MC01をクリックしたとき" に，
//何らかのイベント発生時の動作定義
で定義した動作が起こります。

///////////////////////////////////////////////////////////////////////

そして，追加部分の最後がこれです↓。

----------------------------------------
//あるオブジェクトに イベントリスナーが呼び出されたときに通知を受けるオブジェクトを登録
mcLoader.addListener(listenerObject);
----------------------------------------

作成したオブジェクトは単なるオブジェクトとそのイベントリスナーに過ぎません。
つまり，mcLoader というオブジェクトに対するリスナーオブジェクトとして登録しないと，mcLoader の監視はしてくれません。
そこで，mcLoader というオブジェクトの監視をするように登録しているのです。

お礼

BlurFiltanさん、書き込みありがとうございます。
参考にさせて頂いております。
現在、わからない部分など調べながら読解中です。
とりあえず時間もかかりそうなので、書き込みをしかも長文でいただいた事にお礼をさせて頂きたいと思い書き込みさせていただきました。