Flashのフレームワーク「Progression3」を始めてみよう!

第5回 Progression3でWebサイトを作る(後編)

この記事を読むのに必要な時間:およそ 8.5 分

Galleryシーンの作りこみ

PRML形式のXMLデータからシーンを生成する

さて,informationシーンで一つのクラスファイルでシーンを複数生成してみましたが,写真ギャラリーページ等,増減するコンテンツの場合,いちいちシーン内のクラスファイルを作成しなければならないのが面倒です。

しかし,Progressionには決められた書式のXMLファイルからシーンを作成するという素晴らしい機能が備わっています。

まず,GalleryScene.asの_onLoadメソッドを見てください。

protected override function _onLoad():void 
{
  addCommand(
    // 任意のコマンドを記述してください。
    new Prop(_btn_Close, { x:700, y:0 ,sceneId:progression.root.sceneId} ), 
    new AddChild(_page, _btn_Close),
    new Prop(_page, { x:50, y:100 } ),
    //シーン作成用のXMLファイルを読み込み
    new LoadURL(new URLRequest("scenedata.xml")),
    function():void {					
      //シーンの作成(コマンドクラスのlatestDataプロパティで,直近の読み込みデータを参照可能)
      addSceneFromXML(new XML(this.latestData));

      //コマンド登録用のパラレルリスト
      var pList:ParallelList = new ParallelList();
      //削除用の参照を配列に入れておく
      _arr_Btn_Thumbnail = new Array();
      //ボタンの作成
      for ( var i:int = 0; i < numScenes; i++ ) {
        //シーン固有の値をsceneinfo.dataより取得(シーンオブジェクトのscenesプロパティで子シーンの参照の配列を取得可能)
        var xmlData:XMLList = new XMLList( scenes[i].sceneInfo.data );
        //データ形式がXMLListなので,XMLUtilを利用して変換
        var obj:Object = XMLUtil.xmlToObject( xmlData );
        //画像をボタンとして作成(画像クリックで戻る様にする為),また,ボタンはスプライトに内包する
        var btn_Thumbnail:Btn_Thumbnail_Sprite = new Btn_Thumbnail_Sprite();
        //削除時の為にボタンのインスタンスの参照を保持
        _arr_Btn_Thumbnail.push(btn_Thumbnail);

        //setterへ値をセットする
        btn_Thumbnail.sceneId = scenes[i].sceneId;
        btn_Thumbnail.imageUrl = obj.imageUrl; 
        //位置の決定
        btn_Thumbnail.x = ( 130 * (i % 5) ) + 50;
        btn_Thumbnail.y = (Math.floor(i / 5) * 80) + 30;

        pList.addCommand(
          new AddChild(_page, btn_Thumbnail )
        );
      }
      insertCommand(pList);
    }, 
  new AddChild(progression.container, _page)
  );
}

LoadURLコマンドでxmlファイルを読み込んだ後,シーンを作成する部分が,以下のように1行で済んでいます ※2⁠。

addSceneFromXML(new XML(this.latestData));
※2
コマンドクラスのlatestDataは直近で読み込んだ外部データを保持しています。

指定した書式のXMLファイルを読み込むことによりXMLのデータからシーンを動的に作成してくれるのが,シーンオブジェクトのaddSceneFromXMLメソッドなのです。

XMLファイルの中を見てみましょう。

<?xml version="1.0" encoding="UTF-8" ?>
<prml version="2.0.0" type="text/prml">
  <scene name="image1" cls="myproject.scenes.ImageScene" title="IMAGE1" >
    <imageUrl>images/image1.jpg</imageUrl>
  </scene>
  <scene name="image2" cls="myproject.scenes.ImageScene" title="IMAGE2" >
    <imageUrl>images/image2.jpg</imageUrl>
  </scene>
  <scene name="image3" cls="myproject.scenes.ImageScene" title="IMAGE3" >
    <imageUrl>images/image3.jpg</imageUrl>
  </scene>
  <scene name="image4" cls="myproject.scenes.ImageScene" title="IMAGE4" >
    <imageUrl>images/image4.jpg</imageUrl>
  </scene>
  <scene name="image5" cls="myproject.scenes.ImageScene" title="IMAGE5" >
    <imageUrl>images/image5.jpg</imageUrl>
  </scene>
</prml>

XMLはPRMLと呼ばれる形式で記述します。詳細はProgression公式サイトにリファレンスが掲載されていますので,そちらを参照してくさい。

<scene>タグのnameにはシーン名をclsには追加するシーンクラスを,titleにはブラウザに表示されるタイトルを設定します。<scene>タグ内の要素にはさらに子シーンの構造の追加や,シーン固有のデータを格納できます。

今回は<imageUrl>という画像の場所を設定しています。今回の場合であれば1項目しかないため,そのまま文字列でもかまいませんが,要素が増えた時の事を考慮し,XMLListとして格納しました。

このXMLファイルを読み込み,addSceneFromXMLメソッドを実行するだけで動的にシーンの作成が可能なのです※3⁠。

試しにシーンをもう一つ増やしてみましょう。以下の<scene>タグをXMLに追加します。

<scene name="image6" cls="myproject.scenes.ImageScene" title="IMAGE6" >
  <imageUrl>images/image5.jpg</imageUrl>
</scene>

パブリッシュして動作させてみてください。画像のサムネールが一つ増えています。クリックするとimage6シーンへ遷移することが分かります。

※3
1点注意しなければならない点があります。それはPRML内で指定したシーンクラスの参照を事前に記述しておく必要がある点です。今回はGallerySceneクラスのコンストラクタ内で以下のように記述しています。
//addSceneFromXML用のシーンの参照
ImageScene;

著者プロフィール

楢山哲弘(ならやまのりひろ)

3年前に上京してきた北海道出身のFlasher。

開発スピードを上げるため,Progressionに傾倒中。そのため,ブログではProgressionについての言及が多くなっている。

URLhttp://narayama.heteml.jp/