Flashでサイトを制作する。これが当たり前のようになってきた。最近のブロードバンド化により、通信環境に対する問題が軽減され、今までHTMLベースでやってきたことがFlashにシフトし、より豊かな表現が可能になってきたのだ。表現の幅は確実に広がっている。オリジナリティあふれる表現を見つけだそう。 |
|
|
|
|
■VOL.1
[ Alternative Starting Design : 個性的なローディング画面を
] |
|
|
今回は第一回目、この連載のスタートということもあるので、サイトにアクセスしたときに表示されるスタート画面、
「Now Loading...」に関するテクニックをいくつか紹介する。
Flashは、ベクターデータをもとにした比較的データ容量の軽いムービーを作ることができるのが特徴だが、そのままWeb上に公開した場合、読み込みが終わる前に再生して誤動作を起こすおそれがある。これを防ぐためにデータの読み込み状況をチェックし、読み込みが終わったら再生を行う機能をつけて、その後の展開をスムーズにさせたい。ユーザの環境によってローディングにかかる時間は様々で、「Now
Loading」という文字だけでは、あとどのくらい時間がかかるのか、ユーザは不安になる可能性がでてくる。これを解消するため、ロード状況をパーセント表示したり、ローディングバーを徐々に伸ばしたりして、ユーザに与えるストレスを少しでも軽減させるとよいのではないだろうか。簡単なアニメーションを作成しループさせておくのも、場合によっては効果的な演出になるだろう。
|
|
1.
ロード状況を視覚的に表現する |
ロードされたデータがどのような状況なのかをユーザにアピールするために、ロードされたデータをパーセント表示させる。
まず、新規シンボルでムービークリップを作り、1フレーム目にムービー全体のデータ容量とロード済の容量をチェックするフレームアクションを記述する。続いて、それぞれの容量を比較し、パーセントに変換するためのフレームアクションを記述する。2フレーム目には、1フレーム目に戻るフレームアクションを記述し、ループをさせてロード完了まで処理を行うようにさせる。このムービークリップを、インスタンス名を「loadingsystem」としてメインのタイムライン上に配置する。「loadingsystem」の処理を待つため、1フレーム目にフレームアクション「Stop();」を記述して再生ヘッドを止めておく。 |
|
インスタンス「loadingsystem」のタイムラインに記述した各フレームのアクション
メインのタイムライン
|
|
次に、パーセント表示を行うためのテキストボックスを用意する。テキストオプションはダイナミックテキストを選択し、値を受け取るための変数「cntloaded
」を設定する。このテキストボックスをムービークリップとしてシンボル化すれば、アルファ値などの効果設定が出来るようになるので、いろいろな表現が可能である。
|
|
テキストボックスをムービークリップにし、アルファ値を60%に設定した
|
|
|
|