Edge Animateプチリファレンス 第1回:プリローダーを作成しよう

by Adobe Comms

Posted on 05-27-2014

Edge Animateプチリファレンス

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には、プリローダーを作成するための編集画面があらかじめ用意されています。プリローダーを作成する手順は、以下の通りです。

  1. ステージを選択し、[プロパティ]パネルの[プリローダー]欄で[Polite]か[Immediate]のモードを選択します。
  2. その横にある[編集]ボタンをクリックします。すると、画面がプリローダー編集画面に切り替わります。
  3. あとは、プリローダー編集画面のステージ上に、読み込み待ちの間に表示するテキストや画像を配置します。画像は、[ライブラリ]に読み込んだものを配置できるほか、Edge Animateにあらかじめ用意された「プリローダークリップアート」を利用することができます。

プリローダークリップアート

プリローダークリップアートは、アニメーションGIFで作成されており、読み込み中を表すようなアニメーションとなっています。これを配置しておくだけでも、読み込み中であることがわかりやすくなります。

プリローダー編集画面で[プロパティ]パネルにある[プリローダークリップアートを挿入]ボタンをクリックすと、クリップアートの一覧が表示されます。この中から好きなものを選択して、下にある[挿入]ボタンをクリックすると、ステージの中心に配置されます。

下図は、プリローダーの例です(サンプル:sample.an)。

このようにEdge Animateでは、プリロード処理を簡単に作成・カスタマイズできます。

また、JavaScriptを利用してより細かく制御したい場合は、プリローダーの「loadingイベント」を利用して、独自の読み込み待ち処理を付け加えることも可能です。興味のある方は、チャレンジしてみましょう。

Topics: クリエイティブ

Products: