サンプルサイト制作

はじめに，今回のサンプルファイルを以下からダウンロードしてください。

• サンプルデータ

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

制作を始める前に

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

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

サンプルサイトに関する説明は以上です。前半の今回は，「⁠トップ」ページと「サイトについての説明」ページまで作成していきます。

それでは制作に移りましょう。

WebConfig コンポーネント

「index.fla」を開いて下さい。画面には、背景画像が設置されており、この画像はタイムライン上の「background」レイヤーに設置されています。「⁠component」レイヤーに設置されている「WebConfig」コンポーネントは、一番初めに初期化を行うコンポーネントです。基本的に設定は必要ありません。

アクションの設定

「index.fla」を開いてください。Flaファイルのタイムラインを確認すると，「⁠actions」というレイヤーの1フレーム目にアクションが設定されているのが確認できます。レイヤー「actions」を改変可能な状態にし，1フレーム目で右クリックからアクションを開いてください。

アクションを開くと，Progressionのデフォルトの設定が記述されています。外部同期機能を有効にするため，29行目のコメントを解除してください。

// 外部同期機能を有効化します。
manager.sync = true;

シーンの作成

始めにサイトの構造を作っていきます。Progressionには「シーン」という概念があります。この「シーン」がWeb上でのページのような役割を担います。先ほどのサイトの構成図で言うと，「⁠サイトについての説明」や「詳細1」など，四角で囲ってあるページの数だけ「シーン」が存在することになります。なので今回のサンプルサイトでは全部で6つの「シーン」を作成します。

「トップ」ページにあたる「シーン」はProgressionインスタンスを生成した際に作成されます。その下に位置する「サイトについての説明」ページにあたる「シーン」を作成しましょう。

「シーン」を作成する際は，「⁠SceneObject」クラスを使用します。「⁠サイトについての説明」ページにあたる「シーン」の名称は「about」に設定します。アクションを開いて以下コードを挿入して下さい。

// シーンタイトルを設定します。
manager.root.title = "TOP";

// シーンを作成します。
var about:SceneObject = new SceneObject();

「シーン」を作成したら，「⁠name」プロパティに「シーン」の名前を設定しましょう。ここで設定する「name」の値がURLのような役割を果たします。

// シーンの名前を設定します。
about.name = "about";

シーンの追加

次に，シーン同士を繋げます。一番上位のシーン（※1）に対して「about」シーンを追加します。シーン同士を繋げる際は，「⁠SceneObject」クラスの「addScene()」メソッドの引数に対して，追加対象のシーンインスタンスを設定します。この場合，追加対象のシーンは「about」シーンですので，以下のように記述します。

※1

一番上位のシーンはルートシーンになります。ルートシーン作成のタイミングは，Progressionインスタンスを生成した時です。

// シーン同士を繋げます。
manager.root.addScene( about );

これで，「⁠トップ」ページと「サイトについての説明」ページの構造ができました。