Edge Animateプチリファレンス 第1回：プリローダーを作成しよう
Edge Animate CC（以下、Edge Animate）では、「プリローダー」機能を使って、コンテンツの読み込み中であることを示す画面、いわゆるプリローダーを作成できます。本記事では、プリローダー機能の使い方を紹介します。Edge Animateの基本操作については、Edge Animate入門をご覧ください。
Edge Animate CC の体験版をダウンロード サンプルファイルをダウンロード
プリローダーの2種類のモード
Edge Animate で作成できるプリローダーには、読み込み待ち方式として、［Polite］と［Immediate］の2種類のモードがあります。
モード 説明 Polite 画像なども含めて、Edge Animateコンテンツの全データの読み込みが完了するまでプリローダーを表示する。つまり、全データの読み込み完了後に、プリローダーからEdge Animateコンテンツに切り替わる。 Immediate HTMLと基本的なJavaScriptコードの読み込みが完了するまでプリローダーを表示する。その状態でEdge Animateコンテンツに切り替わり、画像などは、読み込み完了したものを逐次表示していく。
プリローダーを作成する
Edge Animateには、プリローダーを作成するための編集画面があらかじめ用意されています。プリローダーを作成する手順は、以下の通りです。
- ステージを選択し、［プロパティ］パネルの［プリローダー］欄で［Polite］か［Immediate］のモードを選択します。
- その横にある［編集］ボタンをクリックします。すると、画面がプリローダー編集画面に切り替わります。
- あとは、プリローダー編集画面のステージ上に、読み込み待ちの間に表示するテキストや画像を配置します。画像は、［ライブラリ］に読み込んだものを配置できるほか、Edge Animateにあらかじめ用意された「プリローダークリップアート」を利用することができます。
プリローダークリップアート
プリローダークリップアートは、アニメーションGIFで作成されており、読み込み中を表すようなアニメーションとなっています。これを配置しておくだけでも、読み込み中であることがわかりやすくなります。
プリローダー編集画面で［プロパティ］パネルにある［プリローダークリップアートを挿入］ボタンをクリックすと、クリップアートの一覧が表示されます。この中から好きなものを選択して、下にある［挿入］ボタンをクリックすると、ステージの中心に配置されます。
下図は、プリローダーの例です（サンプル：sample.an）。
このようにEdge Animateでは、プリロード処理を簡単に作成・カスタマイズできます。
また、JavaScriptを利用してより細かく制御したい場合は、プリローダーの「loadingイベント」を利用して、独自の読み込み待ち処理を付け加えることも可能です。興味のある方は、チャレンジしてみましょう。