AS 3.0 基本学習1-2 画像ビューア制作-イベント
ActionScript3.0基本学習シリーズの目次はこちらです。
外部ライブラリ学習シリーズの目次はこちらです。
今回は前回制作した内容にイベントの設定を付け加えてみます。
イベントはActionScript3.0で制作する場合に避けては通れないものです(単純なアニメーションぐらいなら必要ないかもしれないですが)。
また、ActionScript2.0との違いの一つとしてよく取り上げられます。ActionScript2.0から3.0に移行する際に引っかかるポイントのようです。
イベントとは
イベントとは特定の事象が発生した際の通知ぐらいに考えてください。
たとえば、マウスをクリックした際に絵を切り替えるなら、マウスをクリックしたというイベント通知を取得して絵の切替処理を行うことになります。
ActionScript2.0の場合にはインスタンス上に
on(press)
と書くだけでマウスプレスのイベントを取得できましたが、ActionScript3.0では異なります。
今回加える処理
まず、前回は画像のロードが完了してもしなくても表示リストに追加しましたが、今回は画像のロード完了を待って表示リストへの追加を行います。
今後画像ビューアの制作を進めていくに当たって、ロードしたものをただ順番に表示するだけではなく、ロード完了した画像の表示切替等を制御する必要がありますので。
また、マウスクリックした際に画像を回転する処理を加えています。
画像ビューアとして画像回転は特に必要ないのですが、クリックされたことを判断するための仮処理です。
スクリプト
まず、スクリプトはこちら。
以下は実行結果です。
(クリックすると画像が回ります)
イベント処理の設定
今回追加や変更を加えた箇所について一つずつ解説していきます。
-----------7〜8行目-----------
import flash.events.Event;
import flash.events.MouseEvent;
イベント取得に必要なクラスのインポートを行っています。
import flash.events.Event;はロード完了取得用です。
import flash.events.MouseEvent;はマウスクリック取得用です。
Eventクラスについては公式サイトのEventに、MouseEventクラスについては公式サイトのMouseEventに詳しい解説が載っています。
-----------20〜21行目-----------
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, finishLoad);
loader.addEventListener(MouseEvent.CLICK , clickImage);
20行目がロード完了イベントの設定です。loaderがロード完了した際にfinishLoadというメソッドを呼び出すように設定しています。
21行目はマウス完了イベントの設定です。loaderがマウスクリックされた際にclickImageというメソッドを呼び出すように設定しています。
addEventListenerがイベント取得を設定するためのメソッドです。
ロード完了した際にはloader.contentLoaderInfo、マウスクリックした際にはloaderとaddEventListenerの呼び出しが異なることに注意してください。
-----------26〜28行目-----------
private function finishLoad(event:Event):void{
addChild(loader);//表示リストへの追加
}
ロード完了時に呼び出されるメソッドです。
loaderを表示ツリーに追加しています。
メソッドの定義は
メソッド属性 function メソッド名(引数):戻り値の型
という書き方をします。
引数はそのメソッドが受け取る値、戻り値はそのメソッドが呼び出し元に返す値です。
戻り値についてはまだ使用していないため、現時点では気にしないで大丈夫です。
Voidは戻り値がないという意味です。
他のクラスからアクセスすることがないため、属性はprivate(同クラス内でのみアクセス可能)にしてあります。
もちろん、public(どこからでもアクセス可能)にしても動作します。
引数のevent:EventはEventクラスのデータを、インスタンスeventにて受け取ることを意味します。
今回は使用していませんが、Eventクラスのイベントを受け取る場合はこのように記述します(インスタンス名は変更して平気です)。
-----------31〜33行目-----------
private function clickImage(event:MouseEvent):void{
event.target.rotation++;
}
こちらはマウスクリック時に呼び出されるメソッドです。
引数のevent:MouseEventはMouseEventクラスのデータを、インスタンスeventにて受け取ることを意味します。
event.targetはイベント通知元を意味します。つまり、今回の場合はloaderと同意となります。
rotationはloaderのプロパティです。
プロパティとは性質を表すデータのことです。
rotationは回転角度を示すプロパティです。
各クラス毎にx座標を示すx、y座標を示すy、透過度を示すalpha等、様々なプロパティが用意されています。
ActionScript2.0のように_はつきませんので注意してください。
event.target.rotation++;はevent通知元(loader)の回転角度を1増やすことを意味します。
++を--に変えると1減ります。
5増やしたいならevent.target.rotation = event.target.rotation + 5あるいはevent.target.rotation += 5と書きましょう。
「ここで定義したどちらのメソッドも同じ名前のeventというインスタンスを使っているけれど大丈夫なのか」
そう考えるかもしれません。
まったく問題ありません。
この二つは同じ名前ですが、変数のスコープのルールによって、異なるものとして処理されています。
これについては後述いたします。
変数のスコープ
-----------14行目-----------
private var loader:Loader;
-----------18行目-----------
loader = new Loader();
前回のスクリプトでは、この2行は1行にまとまってコンストラクタの中に記述していました。
var loader:Loader = new Loader();
といった風に。
なぜ今回、二つに分けて前半をコンストラクタ外に書いたかと言うと、ActionScript3.0ではメソッド内にて定義した変数がそのメソッド内でのみ有効だからです。
つまり、コンストラクタ内で定義した変数はコンストラクタ内でしかアクセスできません。
今回はloaderインスタンスをロード完了後に表示ツリーに追加するため、コンストラクタ内だけで完結しません。
そのため、コンストラクタ外からもアクセスできるよう、クラスの最初に書きました。
この変数の有効範囲のことを変数のスコープと呼びます。
変数のスコープについて
さきほど、eventという名前のインスタンスを各メソッドで用意しても問題ないと書いたのは、変数のスコープというものが存在するからです。
finishLoadの中で定義した変数はfinishLoadの中でのみ有効であり、clickImageの中で定義した変数はclickImageでのみ有効となります。
メソッドの外にて定義した変数はプロパティの扱いになり、属性指定によっては他のクラスからアクセスできます。
今回はprivateとして定義したため、他のクラスからはアクセスできません。
変数、定数の属性については以下のものが用意されています(定数については別記事にて説明いたします)。
- public：どこからでも参照可能
- private：同じクラス内でのみ参照可能
- protected：同じクラスあるいは派生クラスにて参照可能
- internal：同じパッケージ内で参照可能
- static：インスタンスではなくクラスに属するように指定
最初の4つの同時指定はできません。省略した場合のデフォルト値はinternalです。
詳しくは公式サイトのクラスプロパティの属性及びステートメント、キーワード、ディレクティブをご覧下さい。
まとめ
イベントは今後ずっと使っていく知識です。
import、addEventListener、そして対応するメソッドの定義がイベント使用のためのセットですので、お忘れなく!!
前の記事"AS 3.0 基本学習1-1 画像ビューア制作-画像のロード"はこちらです。
ActionScript3.0基本学習シリーズの目次はこちらです。