Home > チュートリアル > 制作スタイルガイド > クラスベースでの制作スタイル

---

クラスベースでの制作スタイル

では、さっそく Progression Framework を使った制作をはじめましょう！
この章では、クラスを主体とした制作スタイルについてご紹介します。

今回の解説で使用した完成プロジェクトは以下になります。
解説で分からない点があった場合や、実際の動作の確認などにご利用ください。

• 完成プロジェクト一式をダウンロードする

1. プロジェクトファイルを確認しよう

前項の「プロジェクトを作ろう」の内容を元に、まずは「種類にクラスと設定したプロジェクト」を作成してください。
作成が完了すると、Flash の画面上に index.fla と Index.as というファイルが開いた状態になります。

index.fla
制作に使用するメインの fla ファイルです。
作成時に指定したサイズにリサイズされ、ドキュメントクラスに Index.as が設定されています。
プロジェクトを出力する場合には、このファイルをパブリッシュしてください。

Index.as
制作に使用するメインの ActionScript クラスファイルです。
あらかじめ必要なコードの一部が、すでにコーディングされた状態で作成されます。

では、初期状態のままで一度プレビューをしてみましょう。
以下のような文字列が出力ウィンドウに出力されていれば、プロジェクトの書き出しは正常に行われています。

Progression Framework 2.0.1
Copyright (c) 2008 taka:nium.jp, supported by Spark project.

※ Windows Vista や Macintosh で使用されている場合には、正しく作成できない場合があります。
詳しくは「よくある質問」をご確認ください。

2. 初期化コードを書いてみよう

Progression Framework を使用するには、まず Progression クラスのインスタンスを作成する必要があります。
先ほど作成した Index.as では、49 行目にすでに Progression インスタンスを作成する記述がありますので、以後はここで作成されたインスタンスに対して、さまざまな設定を行ってください。

では、Progression クラスに用意されている代表的な機能を紹介しましょう。

root プロパティ
Progression Framework 最大のポイントである「シーン機能」にアクセスするためのプロパティです。
※シーン機能についての詳しい説明は後述します。

container プロパティ
Progression インスタンスに用意されたディスプレイオブジェクトです。
Progression インスタンスの参照が取得できれば、どこからでもディスプレイリストにアクセスすることができる、とても便利なプロパティです。

sync プロパティ
作成した Web サイトをオンライン上にアップロードした際に、ディープリンクを発行する機能を有効/無効化するプロパティです。

verbose プロパティ
制作中に Progression Framework の処理がどのように動いているかを出力するデバッグ機能について、さまざまな設定を行うプロパティです。
出力を有効化する場合には、verbose.enable プロパティを true にしてください。

goto() メソッド
「シーン機能」で設定したシーンに対して、シーンの移動命令を行うメソッドです。
※シーン機能についての詳しい説明は後述します。

一部の設定はコメントアウトされた形でコーディングされていますので、必要に応じてコメントを外してください。

3. シーンを作ろう

Progression Framework には、Web サイトのページ制作を簡単に行えるようにする「シーン機能」が用意されています。
これは HTML サイトにおける各ページに相当する要素で、HTML サイトでリンクをクリックして順々にページを巡回するように、Progression Framework では、シーンを巡回することでコンテンツを閲覧することになります。

では、実際にシーンを作成してみましょう。
シーンを作成するには、まず SceneObject クラスを継承したサブクラスを作成します。

package {
  import jp.progression.scenes.SceneObject;
  
  public class MyScene extends SceneObject {
    public function MyScene( name:String ) {
      super( name );
    }
  }
}

クラスが作成できたら、Progression インスタンスと関連付けましょう。
この関連付けを行うことで、Progression がシーンを制御できるようになり、シーン移動ができるようになります。

関連付けを行うには、Progression インスタンスの root プロパティにある addChild() メソッドを使用します。
メソッド名が示すように、ActionScript 3.0 で登場した DisplayObject で構成される表示リストと同じように扱うことができるようになっています。

では、以下のコードを Index クラスの 59 行目にある「～処理内容を記述します～」の部分に追記してください。

// MyScene インスタンスを作成します。
var myscene:MyScene = new MyScene( "myscene" );

// myscene シーンを root の子シーンとして登録します。
prog.root.addChild( myscene );

同じような形で、root に対して好きなシーンを好きな数だけ追加することができます。
もちろん、子シーンに対して孫シーン、孫シーンに対してひ孫シーンというように、次々と設定することができるので、お好みのサイト構造を作成することができます。

4. シーンを移動しよう

前項でシーン構造が作成できました。
しかし、目で見える形でシーンを確認することができないので、まだイメージが湧かない状態ではないでしょうか？
今回は実際にシーンを移動させて、シーンの動きを確認してみましょう。

シーンを移動するには、Progression インスタンスの goto() メソッドを使用します。
移動先の指定には、SceneId インスタンスを使用し、HTML の URL のようなスラッシュ・シンタックスで移動先シーンを指定します。

64 行目の goto() メソッドを、以下のコードに変更してください。

// myscene シーンを示す SceneId インスタンスを作成します。
var sceneId:SceneId = new SceneId( "/index/myscene" );

// myscene シーンに移動します。
prog.goto( sceneId );

これで移動処理は完成しましたが、まだ表示を作成していないので、目で見て確認することができません。
そこで先ほど紹介した Progression クラスに用意されている verbose プロパティを使用して、処理内容を確認することにしましょう。

verbose プロパティへの設定は 46 行目にすでにコーディングされていますので、コメントを外してプレビューしてください。
以下のような出力がされたら成功です。

PROG: シーン移動を開始, 目的地=/index/myscene
PROG: /index シーンの load イベントを実行
PROG: /index シーンの descend イベントを実行
PROG: /index/myscene シーンに移動
PROG: /index/myscene シーンの load イベントを実行
PROG: /index/myscene シーンの init イベントを実行
PROG: シーン移動を完了

5. イベントを設定しよう

シーン機能の基本的な仕組みが分かったところで、いよいよ各シーンで画面表示をするコードを設定してみましょう。

画面表示をさせるためには、シーン移動が完了したタイミングで表示命令を実行する必要があります。
SceneObject クラスには、画面表示を制御するのに最適なタイミングでイベントを発行する機能が用意されていますので、それを使用して作成していきましょう。

SceneObject クラスの代表的なイベントは、次の 6 種類です。

init イベント
目的地のシーンに到達した瞬間に発生します。
主に、目的地のシーンでのみ表示したい画面の構築処理などで使用します。

goto イベント
現在のシーンから移動を開始した瞬間に発生します。
主に、表示した画面の削除処理などで使用します。

load イベント
目的地のシーンが、自身もしくは子シーンを示している場合、階層が変更された瞬間に発生します。
主に、子シーン以降も常に表示したい画面要素を追加するなどで使用します。

unload イベント
目的地のシーンが、自身もしくは親シーンを示している場合、階層が変更された瞬間に発生します。
主に、子シーン以降も常に表示したい画面要素を削除するなどで使用します。

descend イベント
目的地が現在のシーンの子シーンだった場合に、移動を中継した瞬間に発生します。
主に、中継した場合の特別なエフェクトを実行したい場合などで使用します。

ascend イベント
目的地が現在のシーンの親シーンだった場合に、移動を中継した瞬間に発生します。
主に、中継した場合の特別なエフェクトを実行したい場合などで使用します。

今回は簡単な表示をするだけなので、もっとも分かりやすい init イベントと goto イベントを使用します。
それぞれ移動を開始した時と、目的地に到着した時に発生するイベントなので、そのタイミングで表示したいディスプレイオブジェクトを addChild() または removeChild() すれば、画面の切り替え処理を作ることができるはずです。

表示に使用するクラスですが、Progression Framework には便利な表示用の基本クラス（総称してキャストと呼びます）が用意されています。
今回はもっともベーシックな Sprite クラスを拡張した CastSprite クラスを使用してみましょう。
キャストについての詳しく知りたい方は、以下のチュートリアルをご覧ください。

• キャストクラスを使ってみよう

さて、実際にイベントを登録してみましょう。
イベントを登録する方法は、さまざまなスタイルに対応するために 3 種類が用意されていますが、今回はクラスベースなのでオーバーライド・イベントハンドラメソッド方式で設定します。

先ほど作成した MyScene クラスを以下のように書き換えてください。

package {
  import jp.progression.casts.CastSprite;
  import jp.progression.scenes.SceneObject;
  
  public class MyScene extends SceneObject {
    public var cast:CastSprite;
    
    public function MyScene( name:String ) {
      super( name );
      
      // 表示用の Sprite を作成して四角形を描画する
      cast= new CastSprite();
      cast.graphics.beginFill( 0x000000 );
      cast.graphics.drawRect( 0, 30, 200, 100 );
      cast.graphics.endFill();
    }
    
    // init イベントを受け取る
    protected override function _onInit():void {
      progression.container.addChild( cast );
    }
    
    // goto イベントを受け取る
    protected override function _onGoto():void {
      progression.container.removeChild( cast );
    }
  }
}

これで MyScene シーンに移動した際に cast が表示され、MyScene から移動した場合には消去されるようになりました。
前章ですでに myscene に移動するコードは記述してありますので、このままプレビューして正しく画面に表示されるかどうかを確認しましょう。
正しく表示できていれば成功です。

6. ボタンを作ろう

さて、画面の表示まで作ることができるようになりました。
しかしせっかく画面を作っても、自由にシーンを行き来することができなければ Web サイトとは呼べません。

そこで今回はシーンを移動するためのボタンを作成してみましょう。

通常の Flash コンテンツと同じようにボタンを作成して、クリック時に先ほど紹介した Progression インスタンスの goto() メソッドを使用することでも実現できますが、Progression Framework にはボタン作成に便利な CastButton クラスが用意されています。

CastButton クラスを使うには、まず CastButton クラスを継承したサブクラスを作成します。

package {
  import jp.progression.casts.CastButton;
  
  public class MySceneButton extends CastButton {
    public function MySceneButton() {
      // ヒットエリアとなる四角形を描画する
      graphics.beginFill( 0xFF0000 );
      graphics.drawRect( 100, 0, 100, 30 );
      graphics.endFill();
    }
  }
}

次に、CastButton クラスに用意されている sceneId プロパティにクリックした際に移動したいシーンを示す SceneId インスタンスを設定します。
設定はいつでも行えますが、特に理由がない限りコンストラクタで設定する方法がオススメです。

public function MySceneButton() {
  // ヒットエリアとなる赤い四角形を描画する
  graphics.beginFill( 0xFF0000 );
  graphics.drawRect( 100, 0, 100, 30 );
  graphics.endFill();
  
  // クリックした際の移動先シーンを設定する
  sceneId = new SceneId( "/index/myscene" );
}

同じ要領でトップシーンに移動するボタンも作りましょう。

package {
  import jp.progression.casts.CastButton;
  import jp.progression.scenes.SceneId;
  
  public class IndexButton extends CastButton {
    public function IndexButton() {
      // ヒットエリアとなる青い四角形を描画する
      graphics.beginFill( 0x0000FF );
      graphics.drawRect( 0, 0, 100, 30 );
      graphics.endFill();
      
      // クリックした際の移動先シーンを設定する
      sceneId = new SceneId( "/index" );
    }
  }
}

これでボタンの作成は完了しました。

7. ルートシーンを作ろう

最後にルートシーンの作り方をご紹介します。
まず初めに、ルートシーンとして使用したいクラスを、先ほどと同様の方法で作成します。

package {
  import jp.progression.scenes.SceneObject;
  
  public class IndexScene extends SceneObject {
    public function IndexScene( name:String ) {
      super( name );
    }
  }
}

次に、このシーンをルートシーンとして設定しましょう。
あらかじめコーディングされている 49 行目の Progression インスタンスを作成する命令では第 3 引数は設定されていませんでした。
ルートシーンに好きなクラスを使用したい際には、この第 3 引数に使用したいクラスの参照、または String のクラスパスを指定します。

// Progression インスタンスを作成します。
_prog = new Progression( "index", stage, IndexScene );

これで設定は完了です。
以降で _prog.root を参照した場合には、IndexScene インスタンスが呼ばれることになります。

あとは前章で作成したボタンをルートシーンの load イベントで画面に設置すれば完成です。

package {
  import jp.progression.scenes.SceneObject;
  
  public class IndexScene extends SceneObject {
    
    public function IndexScene( name:String ) {
      super( name );
    }
    
    // load イベントを受け取る
    protected override function _onLoad():void {
      progression.container.addChild( new IndexButton() );
      progression.container.addChild( new MySceneButton() );
    }
  }
}

以上で、この章は終了です。
その他の便利な機能について知りたい方は、以下の項目をご覧ください。

• コマンドクラスを使ってみよう
• キャストクラスを使ってみよう
• ユーザビリティに対応しよう