第4回　Flex SDK環境における、Progressionを使ったWebサイト構築

第4回目となる今回は番外編です。内容は、Flex SDKの導入からProgressionによるFlashサイトの構築を解説します。

現在、Progression自体はフリーのオープンソースですが、Adobe Flashは有料です。しかし、AdobeがFlashを構築する環境を無料で提供しています。それがFlex SDKです。ここでは、Flashを使用しないでサイトを構成する際の注意点なども踏まえて、制作を行っていきます。

サンプルサイトは、前回作成したサイトと同じものを使用します。Progressionの機能に関しての説明は、第2回と第3回を参照してください。

FlashDevelop 導入

まずは制作を行う環境を導入していきます。主に、FlashDevelop[1]上で設定を行います。

FlashDevelopは、フリー、そしてオープンソース（MIT license）のソースコードエディタです。機能が非常に充実しており、多くのFlasherから支持を受けています。とてもフリーのソフトとは思えない程優秀なエディタで、ActionScriptだけでなく、XMLやHTMLのコーディングにも非常に便利です。

FlashDevelopのサポートサイトとして、「⁠FlashDevelop.jp」があります。FlashDevelop.jpはユーザ有志によって管理、運営されており、FlashDevelopのインストール手順や使用方法などが紹介されています。FlashDevelopへのProgressionの導入手順も掲載されています。

今回、導入や設定手順は FlashDevelop.jpのページを、その都度参照します。FlashDevelopを導入されていない方は、FlashDevelop.jpを見てインストールを行ってください。

Flex SDK 導入

FlashDevelopにFlex SDKを導入しましょう。手順はFlashDevelop.jpの「インストール方法」を参考してください。Flex SDKの設定途中の[Step.4]の中に、プレビューの設定がありますが、どちらの方法を選んでもらっても構いません。

Progression 導入

次に、FlashDevelop内でProgressionを利用できるように設定します。手順は「Progression 用プロジェクトテンプレート」を参考してください。ここでは、プロジェクトの作成まで行います。プロジェクト名は[Project_sdk]としましょう。

プロジェクト設定

プロジェクトを作成したら、その他の設定を行います。ツールバーの[プロジェクト]→[プロパティー]を選択してください。

表示されるプロパティー設定パネルから、[サイズ]を「640px × 480px」に変更します。

プロジェクト[Project_sdk]の設定は完了しました。このプロジェクトを作成した時、もう一つ[Preloader]というプロジェクトが作成されます。プロジェクトパネルから、プロジェクト[Preloader]をダブルクリックし、プロジェクトを変更します。プロジェクト[Preloader]も同様に、ツールバーからサイズを「640px × 480px」に変更します。設定が完了したら、プロジェクトを[Project_sdk]に戻します。

サイト制作

ここまで設定が完了したら、サイトの構成要素となるシーンや、ボタンを作成していきます。サンプルサイトの詳細は、第2回、第3回を参照してください。

通常、Flashを使用してサイトを構築する際は、画像などはFlaファイル（index.fla）の中で、定義されているシンボルとして登録するだけで使用できます。しかし、今回はFlex SDKを使用していますので手順が少し違います。

Flex SDKを使用する場合、すべてのシンボルをクラスとして定義する必要があります。Flashを使用する時は、作成したシンボルに画像を貼り付けるだけで済みましたが、今回は表示される画像データもクラス内に埋め込み、ソースを記述して定義する必要があります。画像を埋め込む際に使用するのは「Embed」タグというものです。また、画像データもプロジェクト内で保持する必要があります。

こちらから画像データを取得してください。そして、プロジェクトの[src]内に「images」という名前のフォルダを作成します。その中にダウンロードした画像データを移動します。

まず、トップページの背景となる「HomeBG」クラスを定義します。Progressionテンプレートを使用しましょう。プロジェクトの[src]で右クリックから[新規作成]→[progression4.0]→[New MyCastSprite]を選択し、ファイル名を「HomeBG」に設定してください。

作成した「HomeBG」クラスを開いてください。Embedタグを使用し、ソースを書きます。これから画像を埋め込む記述はこのようにします。

リスト1　Embedタグを使用したクラス

public class HomeBG extends CastSprite {
  // Embedタグを使用して画像と関連付けます。
  [Embed(source = "images/homeBG.png")]
  private var Emb:Class;
  /**
   * 新しい HomeBG インスタンスを作成します。
   */
  public function HomeBG( initObject:Object = null ) {
    // 親クラスを初期化します。
    super( initObject );

    var img:Bitmap = new Emb() as Bitmap;
    addChild( img );
  }
}

「images」フォルダの中にある、画像「homeBG.png」と関連付けることができます。「⁠source = 」の先はパスを表しますので、パッケージが変わった際などは注意が必要です。「⁠Emb」というクラスを作成し、「⁠Bitmap」型でインスタンス生成を行います。インスタンスを貼り付けると完了です。この設定で、普段Flashで定義しているシンボルと同じような扱い方が可能になります。Bitmapはインポートしておきましょう。

ファイルが多くなるため、プロジェクトの[src]内に「pages」というフォルダを作成し、「⁠HomeBG」ファイルのパッケージ名を修正しましょう。Embedのsourceのパスにも修正が必要です。

リスト2　パスの変更

[Embed(source = "../images/homeBG.png")]

では、今定義した「HomeBG」のインスタンスを表示させましょう。「⁠Index.as」を開いてください。「⁠HomeBG」クラスをインポートし、インスタンスを生成し表示させます。

リスト3　HomeBGの表示設定

public class Index extends CastDocument {
  private var homeBG:HomeBG;
  /**
   * 新しい Index インスタンスを作成します。
   */
  public function Index() {
    // 自動的に作成される Progression インスタンスの初期設定を行います。
    super( "index", IndexScene, new WebConfig() );
   
    homeBG = new HomeBG();
    addChild( homeBG );
  }

記述し終えたら、ムービーを書き出して確認しましょう。

サイト構成シーン作成

続いて、シーンを作成していきます。トップページから遷移する2つの「AboutScene」シーン、「⁠GalleryScene」シーンを作成します。[src]内に「scenes」フォルダを作成します。その中にテンプレートから「MySceneObject」を選択します。それぞれファイル名を「AboutScene⁠」⁠、「⁠GalleryScene」に設定します。「⁠IndexScene」ファイルも「scenes」フォルダに移動し、パッケージ名を変更します。

ファイルを移動したら、「⁠Index.as」内で、「⁠IndexScene」クラスをインポートしてください。「⁠IndexScene」クラス内に、シーンを追加する処理を記述します。

リスト4　シーンの追加

private var aboutScene:AboutScene;
private var galleryScene:GalleryScene;
public function IndexScene() {
  // シーンタイトルを設定します。
  title = "Porject_sdk";
  // インスタンスを生成します。
  aboutScene = new AboutScene();
  aboutScene.name = "about";
  // シーンを追加します。
  addScene( aboutScene );
  
  galleryScene = new GalleryScene();
  galleryScene.name = "gallery";
  addScene( galleryScene );
}

次に、「⁠GalleryScene」シーンから遷移する3つのシーン、「⁠AmericanScene」「⁠FrenchScene」「⁠MameScene」を作成します。先ほどと同じようにテンプレートから「scenes」内にシーンを作成します。

シーンを作成したら、「⁠GalleryScene」ファイルを開き、シーンを追加する処理を設定します。

リスト5　シーンの追加

private var americanScene:AmericanScene;
private var frenchScene:FrenchScene;
private var mameScene:MameScene;
/**
* 新しい GalleryScene インスタンスを作成します。
*/
public function GalleryScene( name:String = null, initObject:Object = null ) {
  // 親クラスを初期化する
  super( name, initObject );
            
  // シーンタイトルを設定します。
  title = "title";
  
  // インスタンスを生成します。
  americanScene = new AmericanScene();
  americanScene.name = "american";
  // シーンを追加します。
  addScene( americanScene );
  
  frenchScene = new FrenchScene();
  frenchScene.name = "french";
  addScene( frenchScene );
  
  mameScene = new MameScene();
  mameScene.name = "mame";
  addScene( mameScene );
}

これで、サイトを構成するシーンの作成と、シーン同士を繋げる設定まで完了しました。

ボタンの作成

次に、シーン同士を移動する為のボタンを作成します。トップページから遷移する部分だけを作成します。まず、トップページから遷移するのは2つのシーンですので、ボタンは2つ必要です。さらに、トップページへ戻るためのボタンも必要です。最後に、外部リンク用のボタンも作成します。

では、[src]内に「ui」フォルダを作成しましょう。「⁠ui」で右クリックから、テンプレートの「MyCastButton」を選択し、ボタン「HomeButton」「⁠AboutButton」「⁠GalleryButton」「⁠ProgressionButton」を作成します。

これで、パッケージ「ui」のボタンクラスが4つ作成できました。

作成したボタンにはそれぞれ、表示させるための画像が用意されています。作成したそれぞれのクラスで、Embedタグを使用し、画像データを埋め込んで下さい。まず、「⁠HomeButton」クラスです。Bitmapを忘れずインポートしましょう。

リスト6　HomeButton画像の埋め込み

public class HomeButton extends CastButton {
// Embedタグを使用して画像と関連付けます。
[Embed(source = "../images/homeButton.png")]
private var Emb:Class;
/**
* 新しい HomeButton インスタンスを作成します。
*/
public function HomeButton( initObject:Object = null ) {
  // 親クラスを初期化します。
  super( initObject );
            
  var img:Bitmap = new Emb() as Bitmap;
  addChild( img );
}

次に「AboutButton」クラスの設定です。

リスト7　AboutButton画像の埋め込み

public class AboutButton extends CastButton {
// Embedタグを使用して画像と関連付けます。
[Embed(source = "../images/aboutButton.png")]
private var Emb:Class;
/**
 * 新しい AboutButton インスタンスを作成します。
 */
public function AboutButton( initObject:Object = null ) {
  // 親クラスを初期化します。
  super( initObject );
            
  var img:Bitmap = new Emb() as Bitmap;
  addChild( img );
}

次に「GalleryButton」クラスの設定です。

リスト8　GalleryButton画像の埋め込み

public class GalleryButton extends CastButton {
// Embedタグを使用して画像と関連付けます。
[Embed(source = "../images/galleryButton.png")]
private var Emb:Class;
/**
 * 新しい GalleryButton インスタンスを作成します。
 */
public function GalleryButton( initObject:Object = null ) {
  // 親クラスを初期化します。
  super( initObject );
            
  var img:Bitmap = new Emb() as Bitmap;
  addChild( img );
}

最後に「ProgressionButton」クラスの設定です。

リスト9　ProgressionButton画像の埋め込み

public class ProgressionButton extends CastButton  {
// Embedタグを使用して画像と関連付けます。
[Embed(source = "../images/progressionButton.png")]
private var Emb:Class;
/**
 * 新しい ProgressionButton インスタンスを作成します。
 */
public function ProgressionButton( initObject:Object = null ) {
  // 親クラスを初期化します。
  super( initObject );
           
  var img:Bitmap = new Emb() as Bitmap;
  addChild( img );
}

画像の埋め込み画完了したら、それぞれのクラスで、遷移先を決定します。遷移先を決定するのは、「⁠sceneId」プロパティです。まず「HomeButton」クラスから設定していきます。コンストラクタ内の「sceneId」を設定するのですが、「⁠HomeButton」ボタンは押した時の遷移先が「IndexScene」シーンなので、デフォルトのままで問題ありません。

リスト10　sceneIdの設定

public function HomeButton( initObject:Object = null ) {
  // 移動先となるシーン識別子を設定します。
  sceneId = new SceneId( "/index" );
}

続いて、「⁠AboutButton」クラスの設定です。さきほど、「⁠AboutScene」シーンの「name」プロパティで「about」と設定しました。「⁠about」は「index」に追加された形なので、「⁠/index/about」を「sceneId」に設定します。

リスト11　sceneIdの設定

public function AboutButton( initObject:Object = null ) {
  // 移動先となるシーン識別子を設定します。
  sceneId = new SceneId( "/index/about" );
}

「GalleryScene」クラスも同様に設定します。

リスト12　sceneIdの設定

public function GalleryButton( initObject:Object = null ) {
  // 移動先となるシーン識別子を設定します。
  sceneId = new SceneId( "/index/gallery" );
}

「ProgressionButton」ボタンは外部リンク用のボタンなので、シーン遷移は行いません。「⁠sceneId」プロパティをコメントアウトし、外部リンク用の「href」プロパティを設定します。リンク先はProgressionの公式サイトに設定します。

リスト13　hrefの設定

public function ProgressionButton( initObject:Object = null ) {
  // コメントアウトします。
  //sceneId = new SceneId( "/index" );
  // 外部リンクの場合には href プロパティに設定します。
  href = "http://progression.jp/";
}

ボタンの設定が完了しました。今作成したボタンはすべてトップページに表示されるので、「⁠IndexScene」クラス内で表示設定を行います。

「IndexScene」ファイルを開いてください。それぞれのインスタンスを生成し、イベント「atSceneLoad」で表示設定を、イベント「atSceneUnload」で削除処理を記述します。それぞれのボタンのインポートを忘れずに行ってください。

リスト14　ボタンの表示設定

// 変数定義
private var homeButton:HomeButton;
private var aboutButton:AboutButton;
private var galleryButton:GalleryButton;
private var progressionButton:ProgressionButton;
public function IndexScene() {
  // インスタンスを生成します。
  homeButton = new HomeButton();
  homeButton.x = 0;
  homeButton.y = 150;
  
  aboutButton = new AboutButton();
  aboutButton.x = 0;
  aboutButton.y = 202;
  
  galleryButton = new GalleryButton();
  galleryButton.x = 0;
  galleryButton.y = 254;
  
  progressionButton = new ProgressionButton();
  progressionButton.x = 10;
  progressionButton.y = 446;
}
override protected function atSceneLoad():void {
  // 表示処理を設定します。
  addCommand(
    new AddChild( container , homeButton ),
    new AddChild( container , aboutButton ),
    new AddChild( container , galleryButton ),
    new AddChild( container , progressionButton )
  );
}
override protected function atSceneUnload():void {
  // 削除処理を設定します。
  addCommand(
    new RemoveChild( container , homeButton ),
    new RemoveChild( container , aboutButton ),
    new RemoveChild( container , galleryButton ),
    new RemoveChild( container , progressionButton )
  );
}

設定が完了したら、ムービーを書き出して確認しましょう。ボタンが表示され、それぞれのボタンを押すとシーンが遷移しているのがログで確認できます。

Aboutページの項目作成

次に、AboutSceneに遷移した際の表示オブジェクトを設定していきます。[src]→[pages]にテンプレートから「MyCastSprite」を選択し、ファイル名を「AboutPage」にしてください。「⁠AboutPage」クラスも画像データを埋め込みます。以下のように記述します。

リスト15　AboutPage画像の埋め込み

public class AboutPage extends CastSprite  {
  // Embedタグを使用して画像と関連付けます。
  [Embed(source = "../images/aboutPage.png")]
  private var Emb:Class;
  /**
   * 新しい AboutPage インスタンスを作成します。
   */
  public function AboutPage( initObject:Object = null ) {
    // 親クラスを初期化します。
    super( initObject );
            
    var img:Bitmap = new Emb() as Bitmap;
    addChild( img );
  }
}

「AboutPage」クラスに画像の埋め込みが完了したら、「⁠AboutScene」シーンで画像を表示させます。「⁠AboutScene」ファイルを開いてください。インポートも忘れず行ってください。

リスト16　aboutPageの表示設定

// 変数定義
private var aboutPage:AboutPage;
public function AboutScene( name:String = null, initObject:Object = null ) {
  // 親クラスを初期化する
  super( name, initObject );
            
  // シーンタイトルを設定します。
  title = "title";
  
  // インスタンスを生成します。
  aboutPage = new AboutPage();
  aboutPage.x = 149;
  aboutPage.y = 134;
}
override protected function atSceneLoad():void {
  // 表示処理を設定します。
  addCommand(
    new AddChild( container , aboutPage )
  );
}
override protected function atSceneUnload():void {
  // 削除処理を設定します。
  addCommand(
    new RemoveChild( container , aboutPage )
  );
}

設定が完了したら、ムービーを書き出して確認しましょう。表示されている「AboutButton」ボタンを押して、「⁠AboutScene」シーンに遷移すると、表示オブジェクトの「AboutPage」が表示されているのが確認できます。

Galleryページの項目作成

続いて、「⁠GalleryScene」シーンに遷移した際に表示されるオブジェクトの設定を行います。「⁠GalleryScene」シーンで表示されるオブジェクトは、「⁠GalleryPage」「⁠AmericanButton」「⁠FrenchButton」「⁠MameButton」の4つです。まずは、表示オブジェクト「GalleryPage」から作成します。

[src]→[pages]内にテンプレートから「MyCastSprite」を選択します。ファイル名は「GalleryPage」に設定します。「⁠GalleryPage」クラスに画像を埋め込みます。

リスト17　GalleryPage画像の埋め込み

public class GalleryPage extends CastSprite {
  // Embedタグを使用して画像と関連付けます。
  [Embed(source = "../images/galleryPage.png")]
  private var Emb:Class;
  /**
   * 新しい GalleryPage インスタンスを作成します。
   */
  public function GalleryPage( initObject:Object = null ) {
    // 親クラスを初期化します。
    super( initObject );
            
    var img:Bitmap = new Emb() as Bitmap;
    addChild( img );
  }
}

次に、ボタン「AmericanButton」「⁠FrenchButton」「⁠MameButton」を作成します。[src]→[ui]にテンプレートから「MyCastButton」を3つ作成します。ファイル名をそれぞれ「AmericanButton」「⁠FrenchButton」「⁠MameButton」に変更します。これらのボタンは、始めに作成したシーン「AmericanScene」「⁠FrenchScene」「⁠MameScene」に遷移するボタンです。それぞれのクラスの「sceneId」を設定しましょう。加えて、それぞれに画像を埋め込みます。まず「AmericanButton」クラスからです。

リスト18　AmericanButton画像の埋め込み

public class AmericanButton extends CastButton {
  // Embedタグを使用して画像と関連付けます。
  [Embed(source = "../images/americanButton.png")]
  private var Emb:Class;
  /**
   * 新しい AmericanButton インスタンスを作成します。
   */
  public function AmericanButton( initObject:Object = null ) {
    // 親クラスを初期化します。
    super( initObject );
            
    // 移動先となるシーン識別子を設定します。
    sceneId = new SceneId( "/index/gallery/american" );
            
    var img:Bitmap = new Emb() as Bitmap;
    addChild( img );
  }

次に、「⁠FrenchButton」の画像を埋め込みます。

リスト19　FrenchButton画像の埋め込み

public class FrenchButton extends CastButton {
  // Embedタグを使用して画像と関連付けます。
  [Embed(source = "../images/frenchButton.png")]
  private var Emb:Class;
  /**
   * 新しい FrenchButton インスタンスを作成します。
   */
  public function FrenchButton ( initObject:Object = null ) {
    // 親クラスを初期化します。
    super( initObject );
            
    // 移動先となるシーン識別子を設定します。
    sceneId = new SceneId( "/index/gallery/french" );
            
    var img:Bitmap = new Emb() as Bitmap;
    addChild( img );
  }

最後に「MameButton」の画像を埋め込みます。

リスト20　MameButton 画像の埋め込み

public class MameButton extends CastButton {
  // Embedタグを使用して画像と関連付けます。
  [Embed(source = "../images/mameButton.png")]
  private var Emb:Class;
  /**
   * 新しい MameButton インスタンスを作成します。
   */
  public function MameButton ( initObject:Object = null ) {
    // 親クラスを初期化します。
    super( initObject );
            
    // 移動先となるシーン識別子を設定します。
    sceneId = new SceneId( "/index/gallery/mame" );
            
    var img:Bitmap = new Emb() as Bitmap;
    addChild( img );
  }

これで、「⁠GalleryScene」シーンを構成する表示オブジェクトの設定が完了しました。実際に表示させましょう。表示の設定は「GaleryScene」クラスで行います。表示オブジェクトのそれぞれのインスタンスを作成し、イベント「atSceneLoad」内で表示設定を、イベント「atSceneUnload」で削除処理を設定しましょう。

リスト21　

// 変数定義
private var galleryPage:GalleryPage;
private var americanButton:AmericanButton;
private var frenchButton:FrenchButton;
private var mameButton:MameButton;
public function GalleryScene( name:String = null, initObject:Object = null ) {
  // インスタンスを生成します。
  galleryPage = new GalleryPage();
  galleryPage.x = 151;
  galleryPage.y = 113;
  
  americanButton = new AmericanButton();
  americanButton.x = 150;
  americanButton.y = 161;
  
  frenchButton = new FrenchButton();
  frenchButton.x = 270;
  frenchButton.y = 161;
  
  mameButton = new MameButton();
  mameButton.x = 390;
  mameButton.y = 161;
}
override protected function atSceneLoad():void {
  // 表示処理を設定します。
  addCommand(
    new AddChild( container , galleryPage ),
    new AddChild( container , americanButton ),
    new AddChild( container , frenchButton ),
    new AddChild( container , mameButton )
  );
}
override protected function atSceneUnload():void {
  // 削除処理を設定します。
  addCommand(
    new RemoveChild( container , galleryPage ),
    new RemoveChild( container , americanButton ),
    new RemoveChild( container , frenchButton ),
    new RemoveChild( container , mameButton )
  );
}

設定が完了したら、ムービーを書き出して確認してみましょう。「⁠GalleryScene」シーンに遷移すると、表示オブジェクト「GalleryPage」と3つのボタンが表示されます。このボタンを押すと、それぞれの対応するシーンに遷移するのがログで確認できます。

詳細ページの項目作成

シーン「AmericanScene」「⁠FrenchScene」「⁠MameScene」の表示オブジェクトを作成していきます。オブジェクトはシーン共通のものが5つ、シーン毎に各2つの計11個です。

シーン共通のものから作成していきます。[src]→[pages]にテンプレートから「MyCastSprite」を2つコピーします。それぞれのファイル名を「PhotoBG⁠」⁠、「⁠PhotoBase」に設定します。ファイルを開き、画像を埋め込みます。まず「PhotoBG」ファイルを開いてください。

リスト22　PhotoBG画像の埋め込み

public class PhotoBG extends CastSprite {
  // Embedタグを使用して画像と関連付けます。
  [Embed(source = "../images/photoBG.png")]
  private var Emb:Class;
  /**
   * 新しい PhotoBG インスタンスを作成します。
   */
  public function PhotoBG( initObject:Object = null ) {
    // 親クラスを初期化します。
    super( initObject );
            
    var img:Bitmap = new Emb() as Bitmap;
    addChild( img );
  }

次に「PhotoBase」ファイルを開いて、以下のように修正して下さい。

リスト23　PhotoBase画像の埋め込み

public class PhotoBase extends CastSprite {
  // Embedタグを使用して画像と関連付けます。
  [Embed(source = "../images/photoBase.png")]
  private var Emb:Class;
  /**
   * 新しい PhotoBaseインスタンスを作成します。
   */
  public function PhotoBase( initObject:Object = null ) {
    // 親クラスを初期化します。
    super( initObject );
            
    var img:Bitmap = new Emb() as Bitmap;
    addChild( img );
  }

次に[src]→[ui]にテンプレートから「MyCastButton」を3つコピーします。それぞれのファイル名を「CloseButton」「⁠BackButton」「⁠NextButton」に設定してください。それぞれの遷移先を「sceneId」プロパティに設定するのですが、「⁠CloseButton」ボタンを押したときは「GalleryScene」シーンに遷移するので、「⁠sceneId」プロパティは「"index/gallery"」になります。「⁠BackButton」ボタンと「NextButton」ボタンは滞在しているシーンによって「sceneId」プロパティの値が変わります。クラスの中では、コメントアウトしておきましょう。同時に画像の埋め込みも行います。まず、「⁠CloseButton」ファイルを開いてください。

リスト24　CloseButton画像の埋め込み

public class CloseButton extends CastButton {
  // Embedタグを使用して画像と関連付けます。
  [Embed(source = "../images/closeButton.png")]
  private var Emb:Class;
  /**
   * 新しい CloseButton インスタンスを作成します。
   */
  public function CloseButton( initObject:Object = null ) {
    // 親クラスを初期化します。
    super( initObject );
            
    // 移動先となるシーン識別子を設定します。
    sceneId = new SceneId( "/index/gallery" );
            
    var img:Bitmap = new Emb() as Bitmap;
    addChild( img );
  }

次に「BackButton」ファイルを開いてください。

リスト25　BackButton画像の埋め込み

public class BackButton extends CastButton {
  // Embedタグを使用して画像と関連付けます。
  [Embed(source = "../images/backButton.png")]
  private var Emb:Class;
  /**
   * 新しい BackButton インスタンスを作成します。
   */
  public function BackButton( initObject:Object = null ) {
    // 親クラスを初期化します。
    super( initObject );
            
    // コメントアウト
    //sceneId = new SceneId( "/index" );
            
    var img:Bitmap = new Emb() as Bitmap;
    addChild( img );
  }

最後に、「⁠NextButton」ファイルを開いてください。

リスト26　NextButton画像の埋め込み

public class NextButton extends CastButton {
  // Embedタグを使用して画像と関連付けます。
  [Embed(source = "../images/nextButton.png")]
  private var Emb:Class;
  /**
   * 新しい NextButton インスタンスを作成します。
   */
  public function NextButton( initObject:Object = null ) {
    // 親クラスを初期化します。
    super( initObject );
            
    // コメントアウト
    // sceneId = new SceneId( "/index" );
            
    var img:Bitmap = new Emb() as Bitmap;
    addChild( img );
  }

続いて、シーン毎の表示オブジェクトを作成していきます。[src]→[pages]にテンプレートから「MyCastSprite」を6つコピーします。それぞれのファイル名を「AmericanPhoto」「⁠AmericanText」「⁠FrenchPhoto」「⁠FrenchText」「⁠MamePhoto」「⁠MameText」に設定します。

次に、それぞれのクラスに画像の埋め込み設定を行います。それぞれのファイルに以下のソースを記述してください。

リスト27　AmericanPhoto画像の埋め込み

public class AmericanPhoto extends CastSprite {
  // Embedタグを使用して画像と関連付けます。
  [Embed(source = "../images/americanPhoto.png")]
  private var Emb:Class;
  /**
   * 新しい AmericanPhoto インスタンスを作成します。
   */
  public function AmericanPhoto( initObject:Object = null ) {
    // 親クラスを初期化します。
    super( initObject );
            
    var img:Bitmap = new Emb() as Bitmap;
    addChild( img );
  }

リスト28　AmericanText画像の埋め込み

public class AmericanText extends CastSprite {
  // Embedタグを使用して画像と関連付けます。
  [Embed(source = "../images/americanText.png")]
  private var Emb:Class;
  /**
   * 新しい AmericanText インスタンスを作成します。
   */
  public function AmericanText( initObject:Object = null ) {
    // 親クラスを初期化します。
    super( initObject );
            
    var img:Bitmap = new Emb() as Bitmap;
    addChild( img );
  }

リスト29　FrenchPhoto画像の埋め込み

public class FrenchPhoto extends CastSprite {
  // Embedタグを使用して画像と関連付けます。
  [Embed(source = "../images/frenchPhoto.png")]
  private var Emb:Class;
  /**
   * 新しい FrenchPhoto インスタンスを作成します。
   */
  public function FrenchPhoto( initObject:Object = null ) {
    // 親クラスを初期化します。
    super( initObject );
            
    var img:Bitmap = new Emb() as Bitmap;
    addChild( img );
  }

リスト30　FrenchText画像の埋め込み

public class FrenchText extends CastSprite {
  // Embedタグを使用して画像と関連付けます。
  [Embed(source = "../images/frenchText.png")]
  private var Emb:Class;
  /**
   * 新しい FrenchText インスタンスを作成します。
   */
  public function FrenchText( initObject:Object = null ) {
    // 親クラスを初期化します。
    super( initObject );
            
    var img:Bitmap = new Emb() as Bitmap;
    addChild( img );
  }

リスト31　MamePhoto画像の埋め込み

public class MamePhoto extends CastSprite {
  // Embedタグを使用して画像と関連付けます。
  [Embed(source = "../images/mamePhoto.png")]
  private var Emb:Class;
  /**
   * 新しい MamePhoto インスタンスを作成します。
   */
  public function MamePhoto( initObject:Object = null ) {
    // 親クラスを初期化します。
    super( initObject );
            
    var img:Bitmap = new Emb() as Bitmap;
    addChild( img );
  }

リスト32　MameText画像の埋め込み

public class MameText extends CastSprite {
  // Embedタグを使用して画像と関連付けます。
  [Embed(source = "../images/mameText.png")]
  private var Emb:Class;
  /**
   * 新しい MameText インスタンスを作成します。
   */
  public function MameText( initObject:Object = null ) {
    // 親クラスを初期化します。
    super( initObject );
            
    var img:Bitmap = new Emb() as Bitmap;
    addChild( img );
  }

これで、表示オブジェクトの設定が完了しました。次に実際に表示の処理を設定するのですが、シーンに共通の部分は親シーンのプロパティとして保持させます。シーン共通の表示オブジェクトは5つです。これらを「GalleryScene」クラスで定義します。シーン「AmericanScene」「⁠FrenchScene」「⁠MameScene」に遷移してきた際は、この5つの表示オブジェクトを表示させます。また、「⁠GalleryScene」シーンに戻った時に、5つの表示オブジェクトの削除処理を行います。つまり、削除処理は「GalleryScene」クラス内で設定します。削除処理の設定はイベント「atSceneInit」に設定します。

では、「⁠GalleryScene」ファイルを開き、プロパティの定義と削除処理を設定します。

リスト33　GalleryScene表示オブジェクトの削除処理設定

public class GalleryScene extends SceneObject {
  public var photoBG:PhotoBG;
  public var photoBase:PhotoBase;
  public var closeButton:CloseButton;
  public var backButton:BackButton;
  public var nextButton:NextButton;
  public function GalleryScene( name:String = null, initObject:Object = null ) {
    // インスタンスを生成します。
    photoBG = new PhotoBG();
    photoBG.x = 0;
    photoBG.y = 0;
    
    photoBase = new PhotoBase();
    photoBase.x = 100;
    photoBase.y = 20;
    
    closeButton = new CloseButton();
    closeButton.x = 507;
    closeButton.y = 30;
    
    backButton = new BackButton();
    backButton.x = 30;
    backButton.y = 220;
    
    nextButton = new NextButton();
    nextButton.x = 570;
    nextButton.y = 220;
  }
  
  override protected function atSceneInit():void {
    // 削除処理を設定します。
    addCommand(
      new RemoveChild( container , photoBG ),
      new RemoveChild( container , photoBase ),
      new RemoveChild( container , closeButton ),
      new RemoveChild( container , backButton ),
      new RemoveChild( container , nextButton )
    );
  }

これで、「⁠GalleryScene」クラスの設定が完了しました。続いてクラス「AmericanScene」「⁠FrenchScene」「⁠MameScene」の設定に移ります。この3つのシーンは遷移してきたときに、シーン共通の表示オブジェクトを表示させます。この設定は「atSceneLoad」イベント内に記述します。「⁠GalleryScene」シーンはこの3つのシーンの親シーンにあたるので、「⁠GalleryScene」クラスのプロパティには「parent」プロパティを使用してアクセスします。さらに、シーン毎によって遷移先が変わる、「⁠BackButton」ボタンと「NextButton」ボタンの「sceneId」プロパティも、イベント「atSceneLoad」内で設定します。また、シーン毎に表示させるオブジェクトの設定も行います。同時に、イベント「atSceneUnload」内に削除処理も設定します。

まず、「⁠AmericanScene」ファイルを開いてください。

リスト34　AmericanSceneの設定

public class AmericanScene extends SceneObject {
  private var americanPhoto:AmericanPhoto;
  private var americanText:AmericanText;
  public function AmericanScene( name:String = null, initObject:Object = null ) {
    // シーン固有のインスタンスを生成します。
    americanPhoto = new AmericanPhoto();
    americanPhoto.x = 120;
    americanPhoto.y = 40;
    
    americanText = new AmericanText();
    americanText.x = 119;
    americanText.y = 354;
  }
  override protected function atSceneLoad():void {
    // parent プロパティを使用して backButton と nextButton の sceneId を設定します。
    GalleryScene(parent).backButton.sceneId = new SceneId( "/index/gallery/mame" );
    GalleryScene(parent).nextButton.sceneId = new SceneId( "/index/gallery/french" );
    
    addCommand(
      // parent プロパティを使用して 親シーンの表示オブジェクトの表示処理を設定します。
      new AddChild( container , GalleryScene(parent).photoBG ),
      new AddChild( container , GalleryScene(parent).closeButton ),
      new AddChild( container , GalleryScene(parent).photoBase ),
      new AddChild( container , GalleryScene(parent).backButton ),
      new AddChild( container , GalleryScene(parent).nextButton ),
      // シーン固有の表示オブジェクトの表示処理を設定します。
      new AddChild( container , americanPhoto ),
      new AddChild( container , americanText )
    );
  }
  override protected function atSceneUnload():void {
    // シーン固有の表示オブジェクトの削除処理を設定します。
    addCommand(
      new RemoveChild( container , americanPhoto ),
      new RemoveChild( container , americanText )
    );
  }
}

同様に、「⁠FrenchScene」クラスと「MameScene」クラスも設定します。

リスト35　FrenchSceneの設定

public class FrenchScene extends SceneObject {
  private var frenchPhoto:FrenchPhoto;
  private var frenchText:FrenchText;
  public function FrenchScene( name:String = null, initObject:Object = null ) {
    // シーン固有のインスタンスを生成します。
    frenchPhoto = new FrenchPhoto();
    frenchPhoto.x = 120;
    frenchPhoto.y = 40;
    
    frenchText = new FrenchText();
    frenchText.x = 119;
    frenchText.y = 354;
  }
  // parent を使用して、親シーンのプロパティにアクセス。
  override protected function atSceneLoad():void {
    // parent プロパティを使用して backButton と nextButton の sceneId を設定します。
    GalleryScene(parent).backButton.sceneId = new SceneId( "/index/gallery/american" );
    GalleryScene(parent).nextButton.sceneId = new SceneId( "/index/gallery/mame" );
    
    addCommand(
      // parent プロパティを使用して 親シーンの表示オブジェクトの表示処理を設定します。
      new AddChild( container , GalleryScene(parent).photoBG ),
      new AddChild( container , GalleryScene(parent).closeButton ),
      new AddChild( container , GalleryScene(parent).photoBase ),
      new AddChild( container , GalleryScene(parent).backButton ),
      new AddChild( container , GalleryScene(parent).nextButton ),
      // シーン固有の表示オブジェクトの表示処理を設定します。
      new AddChild( container , frenchPhoto ),
      new AddChild( container , frenchText)
    );
  }
  override protected function atSceneUnload():void {
    // シーン固有の表示オブジェクトの削除処理を設定します。
    addCommand(
      new RemoveChild( container , frenchPhoto ),
      new RemoveChild( container , frenchText )
    );
  }
}

リスト36　MameSceneの設定

public class MameScene extends SceneObject {
  private var mamePhoto:MamePhoto;
  private var mameText:MameText;
  public function MameScene( name:String = null, initObject:Object = null ) {
    // シーン固有のインスタンスを生成します。
    mamePhoto = new MamePhoto();
    mamePhoto.x = 120;
    mamePhoto.y = 40;
    
    mameText = new MameText();
    mameText.x = 119;
    mameText.y = 354;
  }
  // parent を使用して、親シーンのプロパティにアクセス。
  override protected function atSceneLoad():void {
    // parent プロパティを使用して backButton と nextButton の sceneId を設定します。
    GalleryScene(parent).backButton.sceneId = new SceneId( "/index/gallery/french" );
    GalleryScene(parent).nextButton.sceneId = new SceneId( "/index/gallery/american" );
    
    addCommand(
      // parent プロパティを使用して 親シーンの表示オブジェクトの表示処理を設定します。
      new AddChild( container , GalleryScene(parent).photoBG ),
      new AddChild( container , GalleryScene(parent).closeButton ),
      new AddChild( container , GalleryScene(parent).photoBase ),
      new AddChild( container , GalleryScene(parent).backButton ),
      new AddChild( container , GalleryScene(parent).nextButton ),
      // シーン固有の表示オブジェクトの表示処理を設定します。
      new AddChild( container , mamePhoto ),
      new AddChild( container , mameText)
    );
  }
  override protected function atSceneUnload():void {
    // シーン固有の表示オブジェクトの削除処理を設定します。
    addCommand(
      new RemoveChild( container , mamePhoto ),
      new RemoveChild( container , mameText )
    );
  }
}

以上で設定は完了です。ムービーを書き出して確認してください。それぞれのシーンに遷移した際に表示オブジェクトが表示され、ボタンを押した時も対応のシーンに遷移しているのが確認できます。また、「⁠GalleryScene」シーンに遷移した際は、表示オブジェクトが削除されているのも確認できます。

ロールオーバーアクション

トップページに配置されているボタン「HomeButton」「⁠AboutButton」「⁠GalleryButton」にロールオーバーのアクションを加えましょう。

まず、ロールオーバー時の効果の画像を定義します。[src]→[pages]にテンプレート「MyCastSprite」をコピーし、ファイル名を「Effect」としてください。「⁠Effect」クラスを設定します。

リスト37　Effectの設定

public class Effect extends CastSprite {
  // Embedタグを使用して画像と関連付けます。
  [Embed(source = "../images/effect.png")]
  private var Emb:Class;
  /**
   * 新しい Effect インスタンスを作成します。
   */
  public function Effect( initObject:Object = null ) {
    // 親クラスを初期化します。
    super( initObject );
            
    var img:Bitmap = new Emb() as Bitmap;
    addChild( img );
  }

次に「HomeButton」ファイルを開き、「⁠Effect」クラスのインスタンスを生成し、イベント「atCastRollOver」内に表示処理を設定します。また、イベント「atCastRollOut」内に削除処理を設定します。アニメーションには「DoTweener」コマンドを使用します。

リスト38　ロールオーバー設定

public class HomeButton extends CastButton {
  private var effect:Effect;
  public function HomeButton( initObject:Object = null ) {
    // インスタンスを生成します。
    effect = new Effect();
    effect.x = -70;
    effect.alpha = 0;
  }
  
  override protected function atCastRollOver():void {
    // アニメーションと表示処理を設定します。
    addCommand(
      new AddChild( this , effect ),
      new DoTweener( effect , { alpha:1 , x:0 , time:.2 , transition:"easeOutCirc" } )
    );
  }
  
  override protected function atCastRollOut():void {
    // アニメーションと削除処理を設定します。
    addCommand(
      new DoTweener( effect , { alpha:0 , x: -70 , time:.2 , transition:"easeInCirc" } ),
      new RemoveChild( this , effect )
    );
  }
}

同様の設定を、「⁠AboutButton」クラスと「GalleryButton」クラスにも行ってください。

設定が完了したらムービーを書き出して確認しましょう。ボタンにポイントが合った時に、画像が表示されるはずです。

プリローダーの作成

プリローダーを作成します。プロジェクトを[Project_sdk]から[Preloader]に変更してください。「⁠Preloader.as」を開き、第3回のプリローダーの項目を参照して、作成してください。ソースの中身は全く一緒で構いません。ソースを記述したら、ムービーを書き出して確認しましょう。

リリースビルド書き出し

ここまで完了したら、FlashDevelop.jpの「リリースビルド書き出し」に記載されている方法でリリースビルドを書き出し、「⁠bin」の中にある「index.html」を開き、ブラウザで確認を行ってください。ブラウザでの確認が完了したら、成功です。

まとめ

今回は結構早足で進めましたが、冒頭で言及したように、サンプルサイトやProgressionについての詳しい説明は以前の回を参照してください。

Flashを使用せずに開発を行う際に注意すべきことは、Flashではシンボルとして扱っていたものもすべてクラスで定義する必要があること、画像を埋め込む時はEmbedタグを使用すると便利である、使用する際はパスに気をつける、などが挙げられます。Flex SDK では Flash に付属の機能はもちろん使用できませんが、Flash を導入しなくても Progression を使用できるのは非常に魅力的だと思います。

なお、今回のソースはこちらからダウンロードできます。フォルダ名は[src_sdk]です。

また、今回はアニメーションを使用していませんが、簡単なアニメーション付きのサンプルコードはこちらからダウンロードできます。プロジェクト名は[Project_sample]です。サンプルコードもFlex SDKを利用しています。