眠るシーラカンスと水底のプログラマー

　本記事はAdobe Edge Animateの入門記事第2回です。

　今回は画像やJSファイルといったすべての素材を読み込んでからアニメーションを開始するためのプリローダーの設定方法を紹介します。

　Edge Animateではプリローダーが簡単に設定できるようになっています。

 

 

プリローダーとは？

　アニメーションを開始する際に、画像などの読み込みが完了していないと、アニメーションに表示されない部分が発生したりと、不完全な状態になります。

　そのため、すべての読み込みが完了してからアニメーションを開始するためのローディング中表示を行います。

 

 

 

プリローダーを設置する方法

 

　プリローダーはプロジェクトを作成した直後の状態ないし、Stage(画面の最上位要素)を選択した状態のプロパティウィンドウで設定可能です。

　Stageは「エレメント」ウィンドウのStage要素をクリックすることで選択することができます。

 

 

　Stageを選択した状態のプロパティウィンドウの下部に「プリローダー」項目があります。

 

 

　編集をクリックすると、プリローダーの編集画面に遷移します。

 

 

 

　まずは、あらかじめ用意されているクリップアートを挿入してみましょう。

　プロパティの「プリローダークリップアートを挿入」をクリックします。

 

 

　使いたいクリップアートを選択して「挿入」ボタンをクリックします。

 

 

　これで簡単なプリローダーの設定は完了です。

　ブラウザで実行してみると一瞬だけページを開いた際にプリローダーが表示されます。

　ある程度時間をかけてプリローダーを確認したい場合はアセットにサイズの大きい画像を配置して見るとよいでしょう。

 

ImmediateとPolite

 

　プリローダーの設定時にImmediateというプルダウン表示がありました。

 

 

 

　Immediateは読み込み可能タイミングで画像などの読み込みを開始しますが、Politeはonloadイベントを待ってから読み込みを開始します。

　読み込み完了時間はImmediateの方が早くなりますが、ページがEdge Animateプロジェクト以外の画像ファイルやJSファイルを読み込み利用しているような場合は、Politeに設定してほかの素材の読み込みが終わってから処理を開始する必要があるケースもあるでしょう。