Adobe Edge Animate CC(以下、「Edge Animate」)では、「プリローダー」機能を使って、コンテンツを読み込み中であることを示す画面、いわゆるプリローダーを作成できます。本記事では、プリローダー機能の使い方を紹介します。

Adobe Creative Cloud に登録すれば、無償メンバーシップでもEdge Animate CCの体験版(30日間)を利用できます。

 

プリローダーの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で作成されており、読み込み中を表すようなアニメーションとなっています。これを配置しておくだけでも、読み込み中であることがわかりやすくなります。

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

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

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