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

第8回 コンポーネントスタイル(2)

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

プリローダーの作成

サイトはほぼ完成したので,最後にプリローダーを作成しましょう。⁠index.fla」を閉じ,⁠preloader.fla」を開いて下さい。最初にプロパティからサイズを[640px , 480px]に変更しておきましょう。タイムライン上の「component」レイヤーには既に「Preloader」コンポーネントが設置されているのが確認できます。

まず,読み込み状況を示すシンボルを作成します。ライブラリに「ProgressBar」と名前をつけたシンボルを作成し,矩形ツールを使用して[w:640 , h:5]の長方形を作成してください。

図33 ⁠ProgressBar」の作成

図33 「ProgressBar」の作成

メインのタイムライン上に「progressBar」レイヤーを作成し,1フレーム目に「ProgressBar」シンボルを設置します。座標は[x:-640 , y:240]です。

図34 ⁠ProgressBar」の設置

図34 

ここで,⁠label」レイヤーを見ると,⁠load」⁠complete」⁠init」⁠error」とラベルの名前が設定されています。これはそれぞれ読み込み状態を示しており,対応した処理をフレーム内に設定する必要があります。読み込みが「complete」の状態で,⁠ProgressBar」シンボルを右端まで伸ばしきり,⁠init」に達したら「ProgressBar」を画面から消去します。⁠error」の時も「ProgressBar」は表示させません。

それでは,⁠progressBar」レイヤーの51フレーム目,61フレーム目,71フレーム目にキーフレームを挿入しましょう。51フレーム目で「ProgressBar」シンボルの座標を[x:0 , y:240]に設定し,1フレーム目と51フレーム間でクラシックトゥイーンを作成します。また,61フレーム目と71フレーム目では「ProgressBar」を削除しておきましょう。

図35 ⁠progressBar」の設定

図35 「progressBar」の設定

次に「stage」レイヤーにテキストツールで「loading...」と記述したテキストを設置しましょう。座標は[x:270 , y:200]です。

図36 ⁠stage」の設定

図36 「stage」の設定

「stage」レイヤーでも61フレーム目と,71フレーム目にキーフレームを挿入し,61フレーム目ではテキストを削除します。71フレーム目の「error」では,テキストの内容を「読み込みに失敗しました」に修正し,座標も[x:240 , y:200]に設定します。

図37 ⁠stage」の設定

図37 「stage」の設定

最後に読み込み状態をパーセントで表示するレイヤーを作成します。タイムライン上に「progressPer」というレイヤーを作成し,1フレーム目にテキストツールで「0%」という内容のテキストを作成し,設置しましょう。座標は[x:330 , y:200]です。

図38 ⁠progressPer」の作成

図38 「progressPer」の作成

後は,読み込みに応じたパーセンテージをテキストに設定していきます。今回は50フレーム目で読み込みが完了するので,1フレームから51フレームすべてにキーフレームを挿入し,2づつ加算した数字を毎フレームのテキストに設定していきます。1フレーム目では「0%」⁠10フレーム目では「18%」⁠51フレーム目で「100%」という流れです※1)⁠また,61フレーム目と71フレーム目にもキーフレームを挿入し,テキストを削除しておきましょう。

図39 ⁠progressPer」の設定

図39 「progressPer」の設定

設定が完了したら,ムービーを書き出して確認しましょう。ロードが完了し,⁠100%」まで表示されると,サンプルサイトが表示されるのが確認できます。

図40 実行確認

図40 実行確認

※1
フレーム1つずつでテキストを改変するのは非常に労力を使います。スクリプトを使用すればほんの数行の記述でこの作業が完了しますので,この機会にぜひスクリプトを習得してみましょう。詳しくはタイムラインスタイルのプリローダーの欄をご覧ください。

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

ここまででサイトが完成しましたので,リリースビルドを書き出してみましょう。⁠Progressionプロジェクト」パネルの上部にある「リリースビルドを書き出す」ボタンをクリックします。

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

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

[Project_gihyo_comp]内に[bin-release]というフォルダが作成されます。あとはサーバにこの中身を全部アップすれば,ブラウザで確認することができます。

まとめ

これで今回のコンポーネント編は終了です。コンポーネントスタイルを利用すれば,フラッシュサイトを素早く簡単に作ることができるようになるはずです。

これまで,クラススタイル,タイムラインスタイル,コンポーネントスタイルを扱ってきましたが,それぞれに長所があるので,1つのスタイルで作成するよりも,いいとこ取りのスタンスでやっていった方が良いかもしれません。

もちろん今回ご紹介できなかった素敵なコンポーネントもたくさんありますので,色々と試してみてください。

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

最後までお読みいただき,ありがとうございました。

何かご意見などありましたら twitter にてお願いします。

著者プロフィール

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

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

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

コメント

コメントの記入