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

第2回  フルパフォーマンス!クラススタイル(1)

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

プロジェクト制作

今回のサンプルは以下のものになります。ダウンロードして下さい。

※追記
6月3日にリリースされたProgression ver 4.0.12にあわせ,データをアップデートしました。

まず,サンプルサイト用のフォルダからFlaファイル「index.fla」を,作成したプロジェクト[Project_gihyo]フォルダのFlaファイルに移動(上書き)してください。サンプル用のFlaファイルには,今回のサンプルサイト作成のために必要な画像データやシンボルが用意されています。

図6 index.fla のコピー

図6 index.fla のコピー

それでは,先ほど作成したFlashDevelopプロジェクトを開いてください。

図7 プロジェクトを開く

図7 プロジェクトを開く

制作を始める前に

実際に制作を始める前に,今回制作するサンプルサイトの概要について説明します。

今回用意したサンプルサイトは「PET GALLERY」という動物の閲覧サイトです。閲覧サイトやギャラリーサイトといったときに,どういったイメージをお持ちでしょうか。様々あると思いますが,今回は画像のスライドコンテンツをサイト内に盛り込んでいます。サイトの構成は,⁠TOPページ」から「サイトについての説明ページ⁠⁠,⁠動物の写真一覧のページ」に遷移できます。⁠動物の写真一覧のページ」から写真を選択すると拡大表示され,⁠動物の詳細ページ」が表示されます。⁠動物の詳細ページ」では,左右に遷移でき,写真がスライドショーのように表示されます。

図8 サンプルサイトの構成図

図8 サンプルサイトの構成図

サンプルサイトの概要は以上にして,さっそくサイトを制作していきます。段階的にProgressionの重要な機能が登場しますので,1つ1つ覚えていきましょう。

1.Index.asの設定

まず,プロジェクト[Project_gihyo]から,Index.asファイルを開いてください。デフォルトの状態では,コメントやその他の記述がされています。文字化けしている場合はツールバーの[File]→[Encoding]→[Open Files In]→[UTF-8]でファイルを開いて下さい※2⁠。

※2
日本語版FlashDevelopの場合、[ファイル]→[文字コード]→[開く]→[UTF-8]になります。

このファイルでは,TOPページの背景に配置する画像を設定します。

用意されているTOPページの背景画像用のシンボル「HomeBG」の型で変数を宣言します。そして,Index.asのコンストラクタ内で,インスタンスを生成します。最後にaddChildしたら終了です。その他の設定に関しては変更しなくて大丈夫です。

リスト1 TOPページ背景画像の設定(Index.as)

public class Index extends CastDocument {
  public var homeBG:HomeBG;
  public function Index() {
// 最初に移動するシーンはIndexSceneになります。
    super( "index", IndexScene, new WebConfig() );
    homeBG = new HomeBG();
    addChild( homeBG );
  }

ここで,ムービーを書き出して見ると,画像が表示されているのが確認できます。表示されているのがTOPページになります。

図9 TOPページ背景画像

図9 TOPページ背景画像

2.「シーン」の作成

次にProgressionの核ともいえる「シーン」を作成していきます。⁠シーン」についての考え方は簡単です。⁠シーン」とは,URLのようなものだと考えてください。

Progressionで構築されたサイトは,この「シーン」で構成されます。先ほどサンプルサイトの概要でも説明しましたが,その時に出てきた「TOPページ」「サイトについての説明ページ」「シーン」です。もちろんURLのようなものですから,ブラウザについている「戻る」⁠進む」ボタンにも対応しています。そしてこの「シーン」同士は繋げることができ,それがページのようになり,サイトを構成します。これがProgressionでサイトを制作するときの構造体です。

現在ソースの中にシーンとして存在するのはIndexScene.asのみです。このシーンが最初に遷移するシーンで,ルートシーンと呼ばれます。サンプルサイトでの「TOPページ」にあたります。

では,他にもう1つシーンを作成してルートシーンに繋げていきましょう。

最初に作成するシーンはサンプルサイトでの「サイトについての説明のページ」にあたるシーンです。シーンを作成する時は既に用意されている「テンプレート」を使用すると便利です。テンプレートを利用しましょう。作成したプロジェクト[Project_gihyo]の中に「template」というフォルダがあります。その中にある,⁠MySceneObject.as」というファイルをコピーします。コピーしたファイルを「src」フォルダの中に貼り付けます。そして,貼り付けた「MySceneObject.as」のファイル名を「AboutScene.as」に変更します。

図10 シーンの作成

図10 シーンの作成

その後,名前を変更したファイルを開き,クラス名とコンストラクタの部分をそれぞれ「AboutScene」に変更します。後ほどシーン数に伴って「シーン」のファイル数が多くなるため,ここでパッケージに分けておきましょう。今作成した「AboutScene.as」「IndexScene.as」「scenes」というパッケージ名のフォルダを作成してその中に移動してください。それと同時に,両ファイルのパッケージ名も「scenes」に修正します。

図11 シーンをパッケージに分ける

図11 シーンをパッケージに分ける

ファイルを移動させたので,⁠Index.as」内で「IndexScene.as」をインポートしてください。

これで,シーンが2つになりました。サイトとしては「TOPページ」「サイトについての説明のページ」の枠ができたところです。しかし,この2つのシーンはまだ繋がってはいないので,互いに遷移することができません。通常のサイトならそれぞれのページに遷移できるようにリンクが張られていたりします。そこで,これから「シーン」同士を繋げる設定をしていきます。

「シーン」同士を繋げる際は「addScene()」メソッドを使います。⁠addScene()」メソッドを「IndexScene」で呼び出して,⁠AboutScene.as」「IndexScene.as」の下に加えるイメージです。

「IndexScene.as」を開いてください。⁠AboutScene」の型で変数を宣言します。変数名は任意ですが,ここでは「aboutScene」としておきます。その後,コンストラクタ内でその変数をインスタンス化します。そして,このインスタンスの持つプロパティ「name」に名前をつけてあげます。この「name」プロパティの値を「about」とします。ここで指定した値「about」が,このシーンの名前になります。そしてこれが,いわゆるURLのような役割を果たします。最後に「aboutScene」インスタンスを引数に設定し「addScene()」メソッドで,⁠IndexScene」に繋げてあげれば完了です。

リスト2 シーンを繋げる(IndexScene.as)

public class IndexScene extends SceneObject {
  public var aboutScene:AboutScene;
  public function IndexScene() {
    title = "Project_gihyo";
    aboutScene = new AboutScene();
    aboutScene.name = "about";
    // 呼び出し元のIndexSceneに引数で設定したAboutSceneが繋がる
    addScene( aboutScene );
  }

これでシーン同士が繋がりました。基本的にシーンはこのようにして繋げていきます。

著者プロフィール

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

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

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