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

第3回 フルパフォーマンス!クラススタイル(2)

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

9.プリローダーの作成

最後に,プリローダーを作成します。プロジェクト[Project_gihyo]の「Preloader.fla」「Preloader.as」を開いてください。⁠Preloader.fla」のプロパティを開き,サイズを「640×480」pxに設定します。

「Preloader」クラスの設定を行っていきます。まず,表示させる項目を定義します。

リスト24 表示項目の定義

public class Preloader extends CastPreloader {
  private var _loadedPerField:TextField;
  private var _progressBar:Shape; 

続いて,イベント「atReady」内で表示項目の初期化を行います。

リスト25 表示項目の初期化

override protected function atReady():void { 
  // インスタンスを作成し、座標、領域、自動拡大、初期値を設定します。 
  _loadedPerField = new TextField();
  _loadedPerField.x = 220;
  _loadedPerField.y = -100;
  _loadedPerField.width = 210;
  _loadedPerField.autoSize = TextFieldAutoSize.CENTER;
  _loadedPerField.text = "Loading ... 0%";
            
  // インスタンスを作成し、領域、描画色を設定します。
  _progressBar = new Shape();
  var gr:Graphics = _progressBar.graphics;
  gr.beginFill(0x000000);
  gr.drawRect(0, 240, 640, 5);
  gr.endFill();
  _progressBar.scaleX = 0;
}

イベント「atCastLoadStart」内に,読み込み開始時の処理を設定します。

リスト26 読み込み開始時の処理の設定

override protected function atCastLoadStart():void {
  addCommand(
    new AddChild( foreground , _loadedPerField ),
    new AddChild( foreground , _progressBar ),
    // テキストフィールドを画面内に移動させます。
    new DoTweener( _loadedPerField, { y:200, time:1 } )
  );
}

「foreground」プロパティは,最前面に表示される表示オブジェクトを指します。次に,イベント「atProgress」内に,読み込み中の処理を設定します。

リスト27 読み込み中の処理の設定

override protected function atProgress():void {
  var percent:Number = bytesLoaded / bytesTotal;
  // progressBar の横幅を,読み込み状態に応じて変化させます。
  _progressBar.scaleX = percent;
  // テキストフィールドの表示内容を,読み込み状態に応じて変化させます。
  _loadedPerField.text = "Loading ... " + Math.round( percent * 100 ) + "%";
}

最後に,イベント「atCastLoadComplete」内に,読み込み完了時の処理を設定します。

リスト28 読み込み完了時の処理の設定

override protected function atCastLoadComplete():void {
  addCommand(
    // テキストフィールドを画面から消去します。
    new DoTweener( _loadedPerField, { alpha:0, time:1 } ),
    // progressBar を画面から消去します。
    new DoTweener( _progressBar , { alpha:0 , time:1 } ),
    // テキストフィールドを画面から削除します。
    new RemoveChild( foreground, _loadedPerField ),
    // progressBar を画面から削除します。
    new RemoveChild( foreground , _progressBar )
  );
}

以上の設定が完了したら,⁠Preloader.fla」をコンパイルし,ムービーを書き出してみましょう。

図20 プリローダーの確認

図20 プリローダーの確認

プリローダー画面で,読み込み状況に応じてプログレスバーが伸びているのが確認できます。読み込みが完了すると,サイトのTOPページに遷移します。

10.ブラウザでの確認

完成したサイトをブラウザで確認してみましょう。まず,Progression プロジェクトパネルを開いてください。プロジェクトパネルにある「リリースビルドを書き出す」をクリックします。

図21 リリースビルドの書き出し

図21 リリースビルドの書き出し

プロジェクト[Project_gihyo]内に「bin-release」が作成されます。

図22 ⁠bin-release」の確認

図22 「bin-release」の確認

「bin-release」内のファイルは,webに公開する際,必要になるファイルです。特に変更がなければ「bin-release」内の全ファイルをwebサーバにアップロードすれば,web上で作成したサイトを閲覧できます。そのフォルダ内の「index.html」を開くと,作成したサイトが表示されます。

図23 ファイル一覧

図23 ファイル一覧

まとめ

以上で,クラススタイルでのサイト構築は終了です。始めは戸惑うことがあるかもしれませんが,慣れてしまえば本当に制作が容易になります。今回は初歩的な部分だけでしたが,Progressionにはまだまだ魅力的な機能がたくさんあります。是非,ご自身で探求し,Progressionについて深めてみてください。

なお,サンプルサイト自体にアニメーションがあまりありませんので,コマンドの「DoTweener」クラスなどを使用して,動きを加えてみても面白いでしょう。以下からダウンロードできるソースコードは,多少動きを加えたものになっています。また,今回は表示オブジェクトの大半をシンボルでのみ扱っていましたが,クラスで定義し,⁠キャスト」として扱うことも可能です。ソースコードにはそちらの手法を載せていますので,参考にしてください。

※追記
6月3日にリリースされたProgression ver 4.0.12にあわせ,データをアップデートしました。

次回は,FlexSDKによるProgressionの環境設定です。Adobe FlashがなくてもProgressionを使用できる環境を設定し,今回と同じサンプルサイトを制作していきます。

著者プロフィール

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

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

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