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

第5回 タイムラインスタイル(1)

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

サンプルサイト制作

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

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

図5 index.fla のコピー

図5 index.fla のコピー

制作を始める前に

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

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

図6 サンプルサイト構成図

図6 サンプルサイト構成図

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

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

WebConfig コンポーネント

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

アクションの設定

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

図7 アクションを開く

図7 アクションを開く

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

リスト1 外部同期機能の有効化

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

シーンの作成

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

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

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

リスト2 ⁠about」シーンの作成

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

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

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

リスト3 シーンの名前を設定

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

シーンの追加

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

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

リスト4 シーン同士を繋げる

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

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

著者プロフィール

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

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

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