Flash術
2. より演出効果のある表現を行う
今度は、指定したムービークリップの大きさをロード状況にあわせ、徐々に拡大させるアクションを加えてみる。単純にバーが伸びていくアクションもよいが、それをロゴなどの形をしたマスクを利用することで、オリジナリティのあるローディング画面を作ることも可能だ。
新規シンボルでムービークリップを作り、ロード100%を表した状態のオブジェクトを描き、インスタンス名を「loadingbar」としてムービークリップ「loadingsystem」内に配置する。インスタンス「loadingbar」を状況に応じて変化させるため、ムービークリップ「loadingsystem」の1フレーム目に、パーセントから大きさを変化させるフレームアクションを追加する。

capture02-1
追加したフレームアクション


capture02-2

ローディングバーが数値と同期して徐々に伸びていく


capture02-3

ローディングバーのサイズを変更し、制作した絵でマスクした

次に、パーセント表示を行うためのテキストボックスを用意する。テキストオプションはダイナミックテキストを選択し、値を受け取るための変数「cntloaded 」を設定する。このテキストボックスをムービークリップとしてシンボル化すれば、アルファ値などの効果設定が出来るようになるので、いろいろな表現が可能である。

capture02-4

テキストボックスをムービークリップにし、アルファ値を60%に設定した

3. コンテンツの展開を考えた表現を加える
ローディングが終わり読み込まれたメインコンテンツが表示される時の、画面の切り替わりにも気を使ってみよう。ローディングとメインコンテンツを繋ぐアニメーションを用意するものいいし、それぞれに共通した画像を使ったりしてスムーズで流れのある展開をさせる。ここでは、バックに使用している画像をローディングバーに置き換えて、コンテンツのスタート画面として機能させてみる。
インスタンス「loadingbar」内に作った帯のオブジェクトに変えて、バックに使用している画像を配置する。この時、ロード後の展開に合わせて画像の位置を調整し、ズレが出ないように気をつけよう。メインのタイムラインで、1フレーム目からバックに配置していた画像を、フレームラベル「contents」から表示されるようにキーフレームを移動させておく。

capture03-1
「loadingsystem」のタイムライン

capture03-2
メインのタイムライン

capture03-3

バックの画像が徐々に伸びてローディングバーの役割をはたす
VOL.1 [ Alternative Starting Design : 個性的なローディング画面を ] 終わり