Adobe Edge Animate入門その2 プリローダーを設定する

日曜日 , 4, 8月 2013 Leave a comment

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

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

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

 

 

プリローダーとは?

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

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

 

001

プリローダーを表示する

 

 

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

 

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

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

 

002

Stageを選択する

 

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

 

003

Stageのプロパティに「プリローダー」がある

 

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

 

004

元の画面に戻りたい場合はこの表示の「Stage」をクリックする

 

 

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

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

 

005

クリップアートを選択して「挿入」ボタン

 

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

 

006

プリローダークリップアートが選択された

 

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

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

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

 

ImmediateとPolite

 

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

 

007

ImmediateとPolite

 

 

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

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

 


Please give us your valuable comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です