Flash画面遷移フレームワーク「Progression 4」公式ガイド

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

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

サイト制作

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

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

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

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

図4 画像データ保持

図4 画像データ保持

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

図5 Progressionテンプレート

図5 Progressionテンプレート

図6 HomeBGの作成

図6 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のパスにも修正が必要です。

図7 pagesフォルダの作成

図7 pagesフォルダの作成

リスト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 );
  }

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

図8 HomeBGの表示確認

図8 HomeBGの表示確認

サイト構成シーン作成

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

図9 scenesフォルダの作成

図9 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」内にシーンを作成します。

図10 シーンの作成

図10 シーンの作成

シーンを作成したら,⁠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」を作成します。

図11 ボタンの作成

図11 ボタンの作成

これで,パッケージ「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 )
  );
}

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

図12 ボタンの表示確認

図12 ボタンの表示確認

図13 シーン遷移の確認

図13 シーン遷移の確認

著者プロフィール

青木健至(あおきたけし)

株式会社CLOQUE. 所属。Flash歴半年。Progression歴半年。Progression無しでのFlash制作は不可。2009年にFlashの技術を会得するために上京し,Progressionプロダクトマネージャーの阿部氏に師事。日々精進中。

http://twitter.com/ichikaku1
URL株式会社CLOQUE