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

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

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

コマンドの設定

画像を表示させるために「onSceneInit」イベントハンドラメソッドに設定する内容ですが,通常通り「addChild()」メソッドを使用しても構いませんが,Progressionの便利な機能を使用しましょう。それが「コマンド」と呼ばれるものです。

コマンドとは,頻繁に使用する機能を1つのクラスとしてまとめて,インタフェースを統一させることによって,ある程度決まったやり方で使用できる便利なクラスです。

それでは,アクションを開いて設定を行っていきます。⁠AboutPage」シンボルのインスタンスを作成してください。座標は[x:149 , y:114] です。

リスト7 AboutPageのインスタンス作成

「onSceneInit」イベントハンドラメソッド内でコマンドを使用します。使用するコマンドは「AddChild」クラスです。名前の通り,表示リストに画像を追加します。

// ルートにシーンを追加
manager.root.addScene( about );

// インスタンスを作成します。
var aboutPage:AboutPage = new AboutPage();
aboutPage.x = 149;
aboutPage.y = 114;

リスト8 AboutPage の表示

// AboutPage を表示します。
about.onSceneInit = function():void {
  this.addCommand(
    new AddChild( this.container , aboutPage )※
  );
}
脚注※:
通常,アクションパネル上で設定した「this」キーワードは,そのアクションが書かれた対象(今回の場合は「CastTimeline」インスタンス)を指します。しかし,Progression に関係するイベントハンドラメソッド内に書かれた「this」キーワードは,そのイベントハンドラメソッドが定義された対象のインスタンスを指すようになっています。そのため,例えば「about」という名前の「SceneObject」インスタンスの「onSceneLoad」イベントハンドラメソッド内で「thisキーワードを使った場合には「about」シーンインスタンスが返されます。

ここでは「addCommand」メソッド内に処理を登録しています。登録した処理は自動に実行されます。⁠AddChild」クラスでは,第1引数に指定した場所に第2引数で指定したものを表示します。⁠container」プロパティは「SceneObject」が持つプロパティです。

これで,⁠AboutPage」シンボルの表示設定が完了しました。削除処理も設定しましょう。⁠AboutPage」シンボルを削除するタイミングはシーンを移動した時なので,⁠onSceneGoto」イベントハンドラメソッドを使用します。⁠RemoveChild」クラスを使用し,シンボルを削除します。

リスト8 ムービーを書き出して確認して下さい。

// AboutPage を削除します。
about.onSceneGoto = function():void {
    this.addCommand(
        new RemoveChild( this.container , aboutPage )
    );
}

画像表示の確認

シーンを遷移すると,⁠AboutPage」が表示されたり,削除されるのが確認できます。

AnchorButton コンポーネント

最後に外部リンクボタンを実装しましょう。シンボルの「home」フォルダ内にある,⁠ProgressionButton」を開いて下さい。タイムライン上に「component」というレイヤーを作成し,そこに「コンポーネント」「AnchorButton」を設置して下さい。⁠AnchorButton」コンポーネントは主に外部リンクを実現したい時に使用します。

「AnchorButton」コンポーネントを選択した状態で,⁠コンポーネントインスペクタ」を開いて下さい。パラメータに「href」を設定する欄があります。外部リンクさせたいURLをそこに記述することで遷移先を設定できます。今回はProgression 公式サイトhttp://progression.jp/ 」を設定しましょう。

href の設定

設定が完了したら,ステージの「stage」レイヤー2フレーム目に「ProgressionButton」シンボルを設置しましょう。座標は[x:10 , y:446] です。

progressionButtonの設置

設置が完了したら,ムービーを書き出して確認してみましょう。表示された「ProgressionButton」を押した時,Progression公式サイトが表示されれば成功です。

外部リンクボタンの確認

まとめ

ここまでで,タイムラインスタイルの制作の前半部分を終了します。今回はシーン間の遷移や,オブジェクトの表示,外部リンクなどを取り扱いました。後半の次回は残りのシーンも全て実装し,サイトを完成させます。なお,今回までのソースのサンプルはこちらからダウンロードできます。

それでは,次回もよろしくお願いします。

著者プロフィール

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

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

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