akihiro kamijo: November 2005 Archives

« October 2005 | Main | December 2005 »

November 30, 2005

EventDispatcher クラス

ActionScript3 では新しいイベントモデルが導入されました。AS2 では、場合によって何種類ものイベントを使い分けなければいけなかったり、さらに、使い方によってイベントのスコープが異なったりと、使いこなすにはそれなりの熟練が要求されましたが、AS3 からは DOM Level 3 イベントモデルをベースに統一されたイベントモデルを使用します。

EventDispatcher クラス

EventDispatcher は新しいイベントモデルの基本となる機能を実装したクラスです。イベントをディスパッチしたりイベントのターゲットになったりします。また EventDispatcher は前に紹介した DisplayObject の親クラスです。flash.display パッケージの中で取り上げたクラスがイベントを処理する機能を持っていたのは EventDispatcher の機能を継承しているためです。

イベントリスナーの登録/削除にはそれぞれ addEventListener() と removeEventLister() を使います。どちらのメソッドも最初の２つの引数が必須で、指定するのは監視対象のイベントの種類とイベントを処理するリスナー関数です。

public addEventListener(type:String, listener:Function,
       useCapture:Boolean = false, priority:int = 0) : Void
public removeEventListener(type:String, listener:Function,
       useCapture:Boolean = false) : Void

少し面白いのはリスナー登録時にプライオリティを指定できることです。（４番目の引数）これで例えば、リスナーを呼び出す際の事前/事後の条件処理を行うことが可能になります。同じプライオリティでいくつも登録できるので、一般のリスナーはデフォルト（0）で登録しておいて、事前条件チェック用のメソッドをプライオリティを -1 に、事後条件チェック用はプライオリティ 1 にすればよいわけです。ちなみに同じプライオリティのリスナー同士では登録順に呼び出されます。

下の２つはリスナーの登録状況を調べるのに便利な関数です。

public hasEventListener(type:String) : Boolean
public willTrigger(type:String) : Boolean

hasEventListner() も willTrigger() も、特定のイベントに対するリスナーが登録されているかを調べるメソッドです。両者の違いは、hasEventListener() はメソッドが所属する EventDispatcher インスタンスについてのみリスナーが登録されているかを調べるのに対して、willTrigger() はイベントフロー全体の中で対象のイベントに対するリスナーが登録されているかを調べることです。

さて、イベントフローという言葉が出てきました。AS3 では一つのイベントが複数のオブジェクトを渡り歩きます。次回はここをも少し詳しく解説します。

最後にイベントをディスパッチするメソッドも紹介して起きます。

public dispatchEvent(event:Event) : Boolean

Posted by ackie at 08:01 PM | Comments (0)

November 29, 2005

A preview of Flex Beta 1

Mark Anders の blog に Flex2 beta1 に関する記事（こちら）が掲載されています。

Posted by ackie at 02:06 PM | Comments (0)

November 28, 2005

コンパイラのモード設定

ActionScript3 は動的言語ですので、実行時につじつまが合えば型の指定は省いても構わない、という記述方法が可能です。とりあえず単純な例としては、

var forDebug; // 型指定なしの宣言

forDebug = 0; // 数値を代入
trace(forDebug);

forDebug = "1"; // 文字列を代入
trace(forDebug);

のような使い方です。（ちなみに、型宣言をしないと Object 型の変数になります）これはこれで便利な機能でめんどくさいときなどは結構重宝しているのですが、やはりきちんと型指定をしておきたいケースも多々あったりします。その際は、例えば、

var forDebug:String; // String 型を指定

forDebug = 0; // 数値を代入
trace(forDebug);

forDebug = "1"; // 文字列を代入
trace(forDebug);

のように、型指定の変数を宣言することも可能です。ただ、上のサンプルでは型宣言を追加したものの、コードの２行目で数値を代入しているため、そこで型の不一致が起き正しく実行できないはずです。ためしに実行してみると、”Type Coersion failed: cannot convert 0 to String” というランタイムエラーが表示されます。当たり前のようにも見えながら、このランタイムエラーは ActionScript3 からの待ちに待った新機能です。今までのようにどこかで静かに処理が失敗しているという状況からはようやく開放され、開発生産性の向上に大きく貢献してくれそうです。（ランタイムエラーが表示されるのはデバッグプレーヤのみで、一般のユーザにはこのようなメッセージは表示されません。）

しかし、どうせ実行時にエラーになると分かっている件については、コンパイル時に検出してくれたほうが簡単に対応できます。そのため、コンパイラは strict モードが選択できるようになっています。コンパイル時、引数に -strict を付けることでコンパイラは型チェックを行うようになります。

FlexBuilder2 では strict モードがデフォルトの設定になっています。これを変更するには、画面左のナビゲータパネル内で対象のプロジェクト名を右クリックし、表示されたメニューから Properties を選んでポップアップウインドウを表示します。ウインドウ内の左のメニューから ActionScript Compiler を選ぶと下の画面になります。

compiler options

このパネルで、Enable compile-time type checking (-strict)　のチェックを外してOKを押すと、コンパイル時に型チェックが行われなくなります。

また Enable warnings (-coach) は AS2 からのマイグレーションに関連する警告（シンタックスの変更など）を表示させるためのオプションです。分かって使っている人にはちょっとうざいメッセージが出力されますが、とりあえずチェックをかけたいときにはなかなか便利です。

なお、これらの設定はプロジェクト単位で有効です。

Posted by ackie at 08:34 PM | Comments (0)

November 25, 2005

テスト用 Browser 設定

FlexBuilder2 インストール時の状態でアプリケーションを実行するとシステムデフォルトのブラウザが起動されます。テストを行うには FlashPlayer8.5 が必要ですが、普段使うブラウザに開発段階のプラグインをインストールしておきたくない、ということもあると思います。（いろいろテストしていただけると本当はうれしいのですが）そこで、ブラウザの設定について説明します。

FlashPlayer8.5 のインストール/アンインストール

まず、FlashPlayer8.5 のインストールです。FlashPlayer は FlexBuilder2 のインストール中に併せてインストールできますが、後から追加インストールしたい場合には、インストールディレクトリ内（デフォルトは C:\Program Files\Macromedia\Flex Builder 2.0 Alpha 1）の \Player\Version 8.5 alpha 1\Debug というディレクトリにあるインストーラが使用できます。ActiveX 用と Netscape コンパチブラウザーのプラグイン用があります。プラグイン用は全ての対象ブラウザにインストールしてしまいます。

FlashPlayer8.5 をアンインストールする場合、Macromedia サイトから提供される FlashPlayer8 用のアンインストーラでは正しく削除することが出来ません。FlexBuilder2 のインストールパッケージに含まれるアンインストーラを使用するようにしてください。

ブラウザの選択

次は、テスト用ブラウザの選択です。FlexBuilder2 に使用するブラウザを指定するには、メニューバーから Window → Preferences... と選択してポップアップウインドウを開きます。開いたウインドウ内の左のメニューから General → Web Browser と選ぶと下の状態になります。右下のエリアに使用するブラウザが指定されています。

web browsers

デフォルトではリストの一番上の、システム標準が選択されています。代わりに特定のブラウザをチェックして OK を押せば次回からは、指定されたブラウザが起動するようになります。（少なくとも）パブリックアルファ版では、Web ブラウザに IE を指定するとテストごとに新しく IE を起動します。たくさんウインドウが開かれると邪魔ですし、どれが最新かぱっと見ただけでは分からなくなったりすることもあります。テストに使用するブラウザはタグブラウザにして、新しい URL をタブで開くように設定しておくのもアイデアですね。

外部ブラウザを起動する代わりに FlexBuilder2 に組み込みのブラウザを使うことも出来ます。これは、プロジェクトの bin ディレクトリの下にある html ファイルをダブルクリックすると、エディタに新しいタブが追加され使用可能になるというものです。使用の手順は、まずソースファイルをセーブしてから（セーブすると自動的にコンパイルが行われます．．だから待たされるわけです）、その後にタブを切り替えてブラウザのリフレッシュボタンを押します。そうすると、ブラウザ内に更新されたアプリケーションがロードされます。この方法は FlexBuilder2 内で完結するのでなかなか便利です。ただ、デバッガから組み込みのブラウザを使用する方法が見つけられていません。（こういったの使い勝手についても、ぜひ改善要望をお寄せください）

Posted by ackie at 07:33 PM | Comments (3)

November 24, 2005

ActionScript プロジェクトの作成

今回は、FlexBuilder2 を使った ActionScript のアプリケーション開発手順を解説します。

ActionScript プロジェクトの作成

ActionScript のアプリケーションを開発するには、まず ActionScript Project を作成します。手順は、メニューバーから File → New の順に選び（もしくは、ツールバーの New アイコンをクリックして）表示されるリストから ActionScript Project を選択します。そうすると下のようなポップアップウインドウが表示されます。

new actionscript project

ここで、プロジェクト名を入力します。Main Application file の欄は、自動的にプロジェクト名と同じものが入力されます。これは変更しても構いません。入力後にウインドウ下部の Finish ボタンを押すと、プロジェクトおよび as ファイルが作成が開始されます。

作成が完了するとプロジェクトに含まれるファイルやディレクトリは画面左のナビゲーターパネルに表示され、画面右のエディタにはテンプレートが挿入済みのメインアプリケーションのコードが表示されます。以下がそのコードです。

package {
  import flash.display.MovieClip;
  public class MyFirstProject extends MovieClip {
    public function MyFirstProject() {

    }
  }
}

パッケージ名、クラス名、空のコンストラクタまでが出来ています。パッケージがデフォルト（無指定）になっていますが、確かにプロジェクト作成時にメインアプリケーションのパッケージ名を入力するフィールドはありませんでしたね。アルファ版の FlexBuilder2 では、メインの ActionScirpt アプリケーションにパッケージを指定することが出来ないようです。（不便だと思ったら、今のうちにフィードバックをお送りください。ご協力よろしくお願いします）

ActionScript クラスファイルの追加

ActionScript クラスをプロジェクトに追加するには、左のナビゲーターパネルから追加したいフォルダ上にマウスを移動して右クリックをします。表示されたメニューから New → ActionScript Class と選ぶと下のポップアップが表示されます。プロジェクト作成のパネルと比べるといろいろな指定が出来るようになっているのがわかります。パッケージ指定、クラス修飾詞の指定、親クラスとインターフェースの指定が可能です。インターフェースの欄が他より大きいのは、複数のインターフェースがインプリメントできるからですね。インターフェースに関しては、関数の自動生成機能も付いています。

new actionscipt class

メインアプリケーションの変更

プロジェクト作成後に追加したクラスをメインのアプリケーションにしたいときは、ナビゲータパネル内の対象のファイル名の上で右クリックをし、Application Management → Set as default application と選択します。変更の反映はファイルのアイコンが変わることで確認出来ます。

プログラムの実行

画面左のナビゲータパネル内のリストか、画面右のエディタのタブで目的のファイルがフォーカスされた状態にします。これで実行するプログラムが指定されます。ツールバーの run アイコンをクリックするとブラウザが起動され、選択したプログラムが実行されます。

Posted by ackie at 08:02 PM | Comments (0)

November 23, 2005

blog 直りました

�?��?�ら�??�?�迷惑を�?��?��?��?��?��?��?��?��?��?��?よ�?�や�??正�?��??表示�?�れるよ�?��?�対応�?�完了�?��?��?��?�。�?��?��?�?�れ�?�ら�?��?�?��?�?�情報を紹介�?��?��?��??�?��?��?��?�?��?��?��?��?��?よ�?�?��??�?�願�?��?��?��?�。

Posted by ackie at 11:41 PM | Comments (0)

November 21, 2005

flash.display パッケージのとりあえずのまとめ

これまで紹介してきたクラスは flash.display パッケージに含まれているクラスの主要メンバーです。少し乱暴な言い方をしてしまうと、flash.display パッケージは AS2 での MovieClip が持っていた役割を再編成したものと言えるでしょう。各クラスの役割も明確になり、使いやすくなったのではないかと思います。AS2 には無かったコンセプトがいくつも出てきましたが、AS3 でプログラミングする上では外せない部分ですので実際にいろいろと試してみていただければと思います。まだアルファ版のため ”本当はこう動くはずじゃないかな？” という期待と違う動きをすることもしばしばあります。どうもバグらしいと思ったら時間のあるときで構いませんのでレポートしてください。英語が面倒な方は、当面私宛に送っていただいてもOKです。

説明だけでは分かりにくかったかも、ということで最後に簡単なサンプルコードを載せておきます。（HelloWorld です。ベタで済みません。）サンプルコードでは、コンストラクタがいわゆる main() 関数の代わりをしています！ActionScript3 ではスクリプトだけで Flash アプリケーションが出来てしまうのですね。もう fla ファイルとか mxml ファイルとかの単なる補助ではありません。ここに AS3 の可能性をちょっと感じてしまったりします。

package {
import flash.display.Sprite;
import flash.display.TextField;
import flash.text.TextFormat;
import flash.events.Event;
import flash.events.EventType;
import flash.geom.Point;
import flash.geom.Rectangle;

// Sprite のサブクラスを作成
public class HelloWorld extends Sprite {

  // プライベート変数を宣言
  private var label:TextField;
  private var target:Point = new Point();

  // コンストラクタ
  public function HelloWorld() {
    createLabel();
    addEventListener(EventType.ENTER_FRAME, enterFrameListener);
  }

  // TextField に Hello World を表示させる	
  private function createLabel():Void {	
    label = new TextField();
    label.text = "Hello World";

    var format:TextFormat = new TextFormat();
    format.font = "Verdana";
    format.color = 0xFF0000;
    format.size = 16;
    label.setTextFormat(format);

    // ディスプレイリストに追加
    addChild(label);
  }

  // enterframe のイベント処理
  public function enterFrameListener(event:Event):Void {
    var current:Point = label.getBounds(this).topLeft;
    if (Point.distance(target, current) < 1) {
      resetTarget();
    }
    label.x += (target.x - label.x) / 8;
    label.y += (target.y - label.y) / 8;
  }

  // ターゲット座標の設定
  private function resetTarget():Void {
    target.x = Math.random() * stage.stageWidth - 100;
    target.y = Math.random() * stage.stageHeight - 10;
  }
}

}

Posted by ackie at 10:40 PM | Comments (3) | TrackBack

November 07, 2005

Stage クラス

Stage クラスは Flash コンテンツの描画領域に対応するクラスです。（livedocs@lab） DisplayObject は Stage のインスタンスの領域上に表示されます。AS2 での Stage はグローバルオブジェクトでしたが、AS3 では DisplayObject.stage プロパティからアクセスします。

Stage にはいくつかの便利なイベントがあり、Flash Player と OS 間のフォーカス情報などを知ることが出来ます。

activate    : Flash Player が OS からフォーカスを貰ったとき  
deactivate  : Flash Player が OS のフォーカスを失くしたとき 
mouseLeave  : マウスポインターが Stage の領域外に移動したとき
resize      : scaleMode=noScale で Stage の大きさが変更されたとき

Stage は DisplayObjectContainer のサブクラスですが、多くのプロパティやメソッドは Stage には適用することが出来ません。（例えば Stage を回転させるとか）これらの機能を誤って使用すると例外が投げられるようになっています。該当するプロパティは alpha, blendMode, cacheAsBitmap, contextMenu, filters などです。一方 Stage 固有のプロパティも存在します。例えば、以下のようなものがあります。

public align : String      // ステージの配置（StageAlign.TOP,StageAlign.LEFT,...）
public quality : String    // 描画クオリティ（StageQuality.LOW,
StageQuality.BEST,...）
public scaleMode : String  // 使用するスケールモード（StageScaleMode.NO_SCALE,...）

DisplayObject.root プロパティについて

DisplayObject の root プロパティは、自身が含まれる SWF の root を指します。Loader により読み込まれた SWF 内の DisplayObject からは、root は読み込まれた SWF のトップの DisplayObject です。（AS3 では、読み込まれた SWF は Loader の子オブジェクトになるのでした。従って、読み込んだ側の Loader.content と読み込まれた SWF の DisplayObject.root は同じオブジェクトを指します。）

Stage も DisplayObject のため root プロパティを持ちますが、これはメインの root を指しています。従って、任意の DisplayObject からは DisplayObject.stage.root のようにして、メインの root を参照することができます。

Posted by ackie at 09:15 PM | Comments (0)

November 04, 2005

Splite クラスと MovieClip クラス

Sprite クラス

Sprite は、基本的には DisplayObjectContainer をそのまま具象クラス化したものと見做せるでしょう。（livedocs@lab）子オブジェクトの管理やユーザーインタラクションの実現など、Flash コンテンツを開発する上でコアになる機能を提供します。（DisplayObjectContainer + InteractiveObject + DisplayObject）

DisplayObjectContainer から追加されている主な機能ははドラッグ＆ドロップ操作への対応くらいです。下記はそのメソッドです。

public startDrag(lockCenter:Boolean = false, bounds:Rectangle = null) : Void
public stopDrag() : Void

Sprite のサブクラスである MovieClip よりも軽いので、AS3 では開発の中心となるクラスと位置づけられています。UIComponent のベースクラスも AS3 からは Sprite に変更されました。（というわけで UIObject クラスも必要なくなりました。）また、なにより new Sprite() と書けるのが嬉しいところです．．．というのは、AS2 を書いたことのない人には関係ない話でしたね。

AS3 での典型的なクラスのコーディングは次のような感じです。

// 1.Sprite (または MovieClip）のインスタンスを生成
   var foo:Sprite = new Sprite();

// 2.必要な DisplayObject を Sprite のディスプレイリストに追加
   var myDo:DisplayObject = new myDisplayObject();
   foo.addChild(myDo);

// 3.イベントに対するコールバック関数を定義する
   myDo.addEventListener(MouseEventType.MOUSE_UP, onMouseUpEvent);

MovieClip クラス

MovieClip は Sprite にタイムラインとシーン機能が追加されたものです。（livedocs@lab）スクリプトのみで Flash コンテンツを制作する場合にはあまり使う機会はないかもしれません。実際、特に理由がない限りは親クラスの Splrte を使用するようにしましょう。

MovieClip もやっと ActionScript オブジェクトになり、普通に new MovieClip() が書けるようになりました。その代わりに MovieClip のインスタンスを生成する方法はコンストラクタのみになりました。createEmptyMovieClip や duplicateMovieClip といったメソッドはありません。

Posted by ackie at 07:13 PM | Comments (0)

November 02, 2005

Loader クラス

Loader クラス（livedocs@lab）は、SWF ファイルを読み込んだり、JPEG, PNG, GIF 等のイメージデータを読み込むのに使います。Loader のメソッドは以下のとおりです。

public load(request:URLRequest) : Void    // 指定された URL からロード
public unload() : Void                     // 読み込んだオブジェクトの削除
public close() : Void                      // 実行中のロードをキャンセル
public loadBytes(bytes:ByteArray) : Void  // 引数からデータをロード

読み込まれたオブジェクトは Loader の子オブジェクトになります。Loader.content プロパティからこれを参照することが出来るようになっています。Loader は DisplayObjectContainer のサブクラスですが、子オブジェクトを一つしか持つことが出来ない特殊なクラスです。このため子オブジェクトを追加/削除する類のメソッドを呼び出すと例外が投げられます。

loadByte メソッドはちょっと面白いメソッドで、メモリ上のバイナリデータから SWF や GIF, JPEG, PNG のオブジェクトを作成することができます。

Loader のイベントとしては、ロードの状況や終了を知らせるイベントがサポートされています。

open           : 処理が開始された
progress       : ロード処理を実行中
complete       : ロードが完了した
init           : ロードした SWF が初期化された

securityError や unload といった新しいイベントも追加されました。

読み込み中のオブジェクトの情報は Loader.loadeeInfo プロパティからも得ることが出来ます。このために LoaderInfo というクラスが専用で提供されています。（livedocs@lab） Loader.loadeeInfo プロパティは読み込まれる側からも共有されていて、読み込まれた SWF からは DisplayObject.root.loaderInfo プロパティ経由でアクセスできます。このとき、読み込まれた SWF は、読み込む際に URL パラーメタが指定されていると loaderInfo.arguments プロパティから取得できるようになっています。

AS1/2 では、MoviClipLoader クラスや MovieClip.loadMovie メソッドが同じ目的に使用されていましたが、AS3 では Loader に置き換えられています。

少し話しは外れますが、AS3 からは LoadVars も Loader のサブクラスの URLLoader （livedocs@lab）で置き換えられました。併せて AS2 の XML は通信機能が省略された上で XMLDocument （livedocs@lab）というクラスに変更されています。（AS3 の XML は新しいクラスです。これについては別途詳しく解説する予定です。）

Posted by ackie at 08:35 PM | Comments (3)

November 01, 2005

DisplayObjectContainer クラス

次は、InteractieObject のサブクラスで「コンテナ」機能が追加された抽象クラスです。

DisplayObjectContainer クラス

DisplayObjectContainer クラス（livedocs@lab）は、その名のとおり DisplayObject のコンテナ、つまり他の DisplayObject を子オブジェクトとして持つことの出来るクラスです。一方 DisplayObjectContainer 自身も DisplayObject ですから子オブジェクトになることができます。つまり DisplayObject のツリー構造を作ることが出来ます。（末端ノード以外は DiplayObjectContainer である必要があります） Flash の経験者であれば MovieClip が入れ子になっているものをイメージするとよいでしょう。

このように、DisplayObectContainer は画面に表示されたオブジェクトをまとめて管理するのに使われます。DisplayObjectContainer （およびそのサブクラス）が子オブジェクトを管理する仕組みをディスプレイリストと呼んでいます。

DisplayObjectContainer に子オブジェクトを追加/削除するには、それぞれ以下のメソッドを使います。

public addChild(child:DisplayObject) : DisplayObject
public removeChild(child:DisplayObject) : DisplayObject

この際、後に追加されたものほど上に表示されます。子オブジェクトはインデックスで管理され、インデックス 0 が最背面のオブジェクトになります。addChild メソッドは子オブジェクトを追加する際、そのオブジェクトのインデックスが最大値になるように設定する訳です。追加された子オブジェクトからは DisplayObject.parent で親のコンテナを参照することができます。

任意のインデックスに子オブジェクトを追加したい場合には、以下のメソッドを使います。

public addChildAt(child:DisplayObject, index:int) : DisplayObject

また、次のメソッドを使うと既存の子オブジェクトのインデックスを変更することが出来ます。

public setChildIndex(child:DisplayObject, index:int) : Void

AS1/2 とは違い、表示の重なりの制御に depth を使用しなくなりました。

Posted by ackie at 08:44 PM | Comments (0)