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

第6回 タイムラインスタイル(2)

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

前回は,シーンの構成や外部リンクなどのサイトの一部を作成しました。後半となる今回で,サイトを完成させます。

シーンの作成

まず,⁠動物の写真一覧」ページにあたるシーンを作成しましょう。前回作成した「about」シーンと全く同じ作成方法になります。シーンの名前は「gallery」とします。それでは,⁠index.fla」のアクションを開いて設定を行っていきましょう。

リスト1 ⁠gallery」シーンの作成

// シーンを作成します。
var gallery:SceneObject = new SceneObject();
// シーンに名前を設定します。
gallery.name = "gallery";
// シーンをルートに追加します。
manager.root.addScene( gallery );

子シーンの作成

続いて,⁠動物の詳細」ページにあたるシーンを作成していきます。⁠動物の詳細」ページは3ページありますが,これらは「gallery」シーンの下に追加されるシーンになりますので,⁠gallery」インスタンスで「addScene()」メソッドを使用しシーンを追加します。

作成するシーンは,それぞれ「american」⁠french」⁠mame」シーンとなります。

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

// americanシーンを作成します。
var american:SceneObject = new SceneObject();
// シーンの名前を設定します。
american.name = "american";   
// シーンをgalleryに追加します。
gallery.addScene( american );

リスト3 ⁠french」シーンの作成

// frenchシーンを作成します。
var french:SceneObject = new SceneObject();
// シーンの名前を設定します。
french.name = "french";   
// シーンをgalleryに追加します。
gallery.addScene( french);

リスト4 ⁠mame」シーンの作成

// mameシーンを作成します。
var mame:SceneObject = new SceneObject();
// シーンの名前を設定します。
mame.name = "mame";   
// シーンをgalleryに追加します。
gallery.addScene( mame);

これで,サンプルサイトを構成するシーンはすべて完成です。

ボタンの作成

それでは,作成した「gallery」シーンに遷移するボタンの設定を行います。シンボル内にある「GalleryButton」を選択してください。前回の「AboutButton」と同じように設定を行っていきます。タイムラインに「component」レイヤーを作成し,⁠RollOverButton」コンポーネントを設置します。コンポーネントインスペクタから「scenePath」の値を[/index/gallery]に設定します。

図1 シーンパスの設定

図1 シーンパスの設定

ロールオーバーの設定

「GalleryButton」「トップ」ページのボタンですので「AboutButton」と同様にロールオーバーのエフェクトを設定しましょう。タイムライン上で「effect」レイヤーを作成し,シンボルから「Effect」を設置します。⁠effect」レイヤーの1フレーム目で「Effect」のアルファ値を0に,座標を[x:-70 , y:0]に設定します。8フレーム目にキーフレームを挿入し,⁠Effect」のアルファ値を100に,座標を[x:0 , y:0]に設定しましょう。

図2 ロールオーバーの設定

図2 ロールオーバーの設定

ボタンの表示

ボタンの設定が完了したら,ステージに配置しましょう。タイムラインの「stage」レイヤー1フレーム目で「GalleryButton」を設置します。座標は[x:0 , y:284]です。

図3 ⁠GalleryButton」ボタンの設置

図3 「GalleryButton」ボタンの設置

設置が完了したら,ムービーを書き出して確認しましょう。

図4 ボタン表示確認

図4 ボタン表示確認

表示されている「GalleryButton」をクリックすると,Flash のログ上でシーン遷移しているのが確認できます。

図5 シーン遷移確認

図5 シーン遷移確認

著者プロフィール

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

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

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

コメント

コメントの記入