Edge Animate CC 基本機能講座

プリローダー画面の作成

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
サイズの大きな画像や、たくさんの画像を利用するときは、プリローダーを設定しておきましょう!なんと、プリローダー画面もカスタマイズ可能です!
講師:
07:22

字幕

このレッスンではEdge Animateのプリローダー機能と、そのプリローダー画面について、解説いたします。まずはダウンロードしてきたファイルの中にある「new_project.an」をダブルクリックしてEdge Animateで開いておいてください。そして、この画面がそのファイル開いた状態となります。このファイルを使いながら解説を進めていきます。プリローダー機能とはEdgeAnimateで制作されたコンテンツの中に含まれるプログラムコードや画像素材音声素材などといった各ファイルをアニメーションが始まる前に予め全ての読み込みを完了しておき準備が整った状態で、実際のアニメーションの再生をスムーズに進行させるための機能です。Edge Animateではそれらのファイルの準備をしている間プリローダー機能といって、現在アニメーションの準備中であるといった内容をアニメーションの開始される前に設置することができます。それでは、いまこの現状のファイルでプリローダーが設定されていない状態でどの様にアニメーションが表示されるか一度ブラウザで確認してみたいと思います。アプリケーションメニューの「ファイル」>「ブラウザでプレビュー」を選択します。 するとこの様にすぐにアニメーション開始の画面が表示されましたね。それではプリローダー画面を設定すればどの様になるのか一度確認してみたいと思います。まずは、EdgeA nimateの画面に戻ります。プリローダー画面の設定を行うためにはステージのプロパティの中にある「プリローダー」というところの「編集...」ボタンから行うことができます。それでは、このボタンをクリックしてみましょう。するとこの様に真っ白な画面が出てきました。そして、ここには「プリローダー」と書いていますね。「プロパティ」パネルには「プリローダーのステージ」と書いています。この画面はプリローダーのステージということで本来のアニメーションとは異なるステージでプリロードしている間のみに表示されるステージとなります。このプリローダーのステージメインのステージと異なり設置できる要素が限られています。こちらのテキスト要素そして、こちらのライブラリに登録されている画像素材そしてこちらの「プリローダークリップアート」と呼ばれるものの設置が可能です。この「プリローダークリップアートを挿入...」というボタンですがこのボタンをクリックするとプリロード要するにローディング画面ですねローディング画面に表示する「いま素材を読み込んでいますよ」「準備していますよ」といった内容を表すローディング画像を挿入することができます。 一度クリックしてみましょう。するとこの様に「いまローディングをしているよ」ということを表すローディング画像の一覧が表示されました。例えば今回はこちらをクリックしてこの「挿入」ボタンを押してみます。するとこの様にローディング画像がステージの中央に表示されました。一応、この状態でもプリローダー画面の制作は完了しておりますがせっかくテキスト要素と画像要素をステージ上に設置できるのでそちらも設置してみたいと思います。まずはこのローディング画像の後が真っ白なのでちょっとこちらに画像を置いてみたいと思います。ライブラリから設置したい画像をドラッグしてこちらにドロップ。すると背景画像が表示されましたね。ただ、先ほどのローディング画像が隠れてしまっているので「エレメント」パネルから順番を変えてあげましょう。こうすることによってステージ上の重なりの並び順が変更されてローディング画像が前面に出てきました。もう一つ今度は、テキスト要素を設置してみましょう。「ツール」パネルから「テキストツール」を選択してこのローディング画面の下に今回はわかりやすく「NowLoading...」と打ちましょう。そしてテキストをセンターリングして文字を白色にして少し文字を大きくしましょうか。 この様にしてこのローディング画像の下に置いてあげます。するとこの様に「いま準備しているよ」という状態を表すプリローダー画面の作成が完了しました。ちなみに、このローディング画像実は、クリックするとここの「イメージ」プロパティのところで画像を変更することができます。例えば「自分が作ったローディング画像を使いたい」とか「全く別の画像に差し替えたい」などにも利用できますので覚えておくと良いでしょう。それではこの状態で一旦ステージに戻ります。ステージに戻る為には、こちらの「ステージ」というのをクリックします。メインのステージ画面が表示されましたね。それでは、この状態でブラウザでプレビューしてみましょう。アプリケーションメニューから「ファイル」>「ブラウザでプレビュー」すると先ほど一瞬見えましたがプリローダー画面が表示されたのがお分かりになりましたでしょうか。今回のアニメーションはそれほど画像素材とかは使っていないのでローディング自体早く終わってしまいましたがアニメーションが複雑になって大規模になればなるほど画像素材やプログラムコードのサイズというのは大きくなってきますのでそういった場合には、このプリローダー画面は長く表示されてきます。 以上で今回のレッスンは終了です。今回は、アニメーションの再生をスムーズに行うために予め再生に必要なファイルを先読みしておくためのプリローダー機能とそのプリローダー画面について、解説していきました。大規模なアニメーションになればなるほど利用される画像ファイルなどは増えていきます。このプリローダー機能を積極的に活用してスムーズな再生ができるようにしておきましょう。

Edge Animate CC 基本機能講座

Edge Animateはさまざまなデバイスに対応したアニメーションなどのコンテンツを効率良く作成することができるソフトです。このコースではEdge Animateの基本的な知識や機能について解説していきます。Edge Animateの画面の見方、各パネルの機能や使い方、各要素のプロパティの設定の仕方についても解説します。

3時間19分 (30 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年05月01日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。