プリローダーの作成

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

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

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

ここで，「⁠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」を削除しておきましょう。

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

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

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

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

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

※1

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

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

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

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

まとめ

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

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

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

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

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

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