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

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

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

プリローダーの作成

最後にプリローダーを作成しましょう。[Project_gihyo_tl]の[src]から「preloader.fla」を開いてください。タイムラインを表示すると,既に「Preloader」コンポーネントが配置されているはずです。まず,プロパティからサイズを[640px × 480px]に変更します。

「Preloader」コンポーネントにより,読み込み状態はレイヤーのラベルに相当します。1フレーム目から50フレームまでがロード中です。⁠error」ラベル部分には読み込みに失敗した際の設定が可能です。

読み込み中に表示するテキストをステージに貼り付けましょう。⁠stage」レイヤーの1フレーム目にテキストツールで「Loading...」と記述して下さい。座標は[x:270 , y:200]です。

図22 固定文字の設定

図22 固定文字の設定

「init」ラベルに到達した際はテキストを消しますので、61フレームから70フレーム目まではテキストを削除しましょう。読み込み失敗時にもテキストを使用します。⁠error」ラベルのある71フレーム目にキーフレームを挿入し,テキストの内容を「読み込みに失敗しました。」に修正します。座標は[x:240 , y:200]です。

図23 読み込み失敗時の文言

図23 読み込み失敗時の文言

次に読み込み状態を示す「ProgressBar」シンボルを作成します。Flaファイルのライブラリ内に新しくムービークリップのシンボルを作成し,名前を「ProgressBar」とします。シンボル内に,[width:640 , height:5]の長方形を作成します。

図24 ⁠ProgressBar」の作成

図24 「ProgressBar」の作成

続いて,読み込みのパーセントを示す「ProgressPer」シンボルを作成します。ムービークリップの新規シンボルを作成し,テキストツールで初期値を[0%]と書きましょう。また,プロパティからダイナミックテキストを選択し,読み込み状況に応じてテキストを変更するためにアクセスするので,インスタンス名を「per」としておきます。

図25 ⁠ProgressBar」の作成

図25 「ProgressBar」の作成

作成したシンボルをステージに貼り付けていきましょう。タイムライン上に「progressBar」「progressPer」レイヤーを作成します。⁠progressBar」レイヤーの1フレーム目で「ProgressBar」シンボルを貼り付けます。座標は[x:-640 , y:240]です。

図26 ⁠ProgressBar」の設置

図26 「ProgressBar」の設置

読み込み状態に合わせて,⁠ProgressBar」を移動させたいのでアニメーションの設定を行います。⁠progressBar」レイヤーの51フレーム目にキーフレームを挿入し,⁠ProgressBar」の座標を[x:0 , y:240]にします。この2点間でクラシックトゥイーンを作成してください。

図27 読み込み中アニメーションの設定

図27 読み込み中アニメーションの設定

読み込みが完了すると,⁠init」フラグに到達します。ここでは「ProgressBar」シンボルを表示させないので,削除しておきましょう。⁠error」フラグの場合も同様の設定をしておきます。

図28 ⁠ProgressBar」を表示しない

図28 「ProgressBar」を表示しない

続いて,⁠ProgressPer」の設定に移ります。同じように「progressPer」レイヤーの1フレーム目に「ProgressPer」を設置します。座標は[x:340 , y:200]です。⁠ProgressPer」シンボルは後ほどアクセスするので,プロパティからインスタンス名を「pp」としておきましょう。

「ProgressPer」シンボルも「init」⁠error」時には表示しませんので,削除しておきましょう。

図29 ⁠ProgressPer」の設置

図29 「ProgressPer」の設置

読み込み状態をパーセントで表示するために,アクションを設定します。

読み込み開始から読み込み完了までは,50フレームあります。これを最大100%で表示しますので,毎フレーム現在のフレーム値を取得して2倍にして表示させましょう。⁠action」レイヤーの1フレーム目でアクションを開いて,以下のように設定します。

リスト20 読み込みパーセント表示設定

// フレーム毎にテキストの値を変更します。
addEventListener( Event.ENTER_FRAME , perText );

function perText( e:Event ):void {
  // 現在フレームが50を超えたら,イベントリスナーを削除します。
  if( currentFrame > 50 ) {
    removeEventListener( Event.ENTER_FRAME , perText );
  }
  // ProgressPerにパーセンテージを設定します。
  pp.per.text = String( currentFrame  * 2 - 2 ) + "%";
}

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

図30 プリローダー確認

図30 プリローダー確認

プリローダーの読み込み状態が100%になると,index.swf が呼び出されます。1%単位で読み込みを表示したい場合はフレームを100まで伸ばしましょう。

まとめ

タイムラインスタイルでの制作は以上になります。今回の制作では,サイトの構成を最優先にしましたが,タイムラインでの制作はフレームを使ってのアニメーションも楽しい部分だと思いますので,サンプルサイトの中にアニメーションを組み込んでみましょう。

なお,今回のサンプルソースはこちらからダウンロードできます。

著者プロフィール

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

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

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