Edge Animate CC 基本機能講座

非対応の端末に向けた下位ステージの作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
古いバージョンのブラウザなどでは、Edge Animateで作ったアニメーションが正常に表示できない場合があります。そのような場合、下位ステージを作成することによって、別のコンテンツや案内を表示することが可能です!
講師:
09:26

字幕

このレッスンではEdge Animateで制作したコンテンツの表示に対応していない古いブラウザで閲覧された際に本来のアニメーションの代わりとなる画面を表示させる下位ステージの機能について解説していきます。まずは、ダウンロードしてきたファイルの中にある「new_project.an」をダブルクリックしてEdge Animateで開いておいてください。そして、この画面がそのファイルを開いた状態となります。このファイルを使いながら解説を進めていきます。例えば今開いているこのファイルこのファイルには、魚などが動き回るアニメーションなどが実装されていますがEdge Animateで制作するアニメーションなどのコンテンツはHTML5やCSS3などによって生成されているためそれらに対応していない古いブラウザで閲覧された際には正常にアニメーションを表示させることができません。今回解説する下位ステージの機能を使うとこの様な古いブラウザで表示された場合に本来のコンテンツとは異なる画面を表示させてユーザーに最新のブラウザの利用を促したりすることが可能です。それでは実際に下位ステージを設定してみましょう。下位ステージの設定をするにはステージのプロパティの中にある「下位ステージ」と呼ばれるところで行います。 一度こちらの「編集」ボタンをクリックしてみましょう。するとこの様に真っ白なステージが表示されました。このステージは下位レベルのステージで古いブラウザで閲覧された時にしか表示されないステージです。こちらのステージに設置できる要素それらはかなり限られていて例えば、こちらの「テキストツール」テキスト要素ですね。テキスト要素を設置するか若しくは、こちらの「イメージ」画像素材のみしか設置することができません。それでは、一度こちらにテキスト要素を置いてみましょうか。「ツール」パネルから「テキストツール」を選んでこのステージ上にドラッグします。そしてこちらのテキストには「新しいブラウザを利用してください」といった様な旨の案内文を入れてあげると良いでしょう。ここでは例えば「このコンテンツを」「閲覧する為には」「最新のブラウザを利用してください」と入力しておきます。そして、表示させたい位置にドラッグして持っていきます。案内文ですので、テキストを太くしてもいいかもしれませんね。この様に、太くしておいて更に、センターリングをしておきましょう。一応、これでも下位ステージの制作は完了していますがせっかく画像も置けるので画像も置いておきましょう。 「ライブラリ」パネルから画像をドラッグしてきてこちらのステージにドロップします。そして、画像がテキストの上に乗っかってしまったのでテキストが隠れてしまいましたね。「エレメント」パネルからテキストをクリックして画像の上にドラッグしてあげましょう。こうすることでステージ上の重なり順が変わってテキストが前面に表示されてきました。もう少しテキストを目立たしてあげましょう。白色にしてあげましょうか。そして文字も少し大きめにしてあげましょう。あと、せっかくですので魚の画像でも置いてあげましょう。この様にステージ上にドラッグしてきます。そしてレイアウトを整えます。この様な画面を作ってあげることでユーザーに「見たい」と思わせる気持ちを起こすことができますね。この様に、単に、このブラウザ「古いブラウザでは見れませんよ」という案内を入れるだけではなくてその本来のアニメーションのコンテンツの一部をこの様に表示させてあげることによって古いブラウザで閲覧してきた際もおおよそどの様な内容なのか、というのを知らせてあげることができます。ちなみに、この下位ステージに置いた要素に対してはリンクURLを設定してあげることができます。 このリンクURLを設定してあげることによって例えば、そのリンクを設定した要素をクリックすることによってユーザーを新しい最新版のブラウザのダウンロードができるサイトに案内したり若しくは、その他の代替コンテンツのページに飛ばしてあげることが可能になります。ちなみにいまこちらの下位ステージこの下位ステージにはテキスト要素を置いて、画像要素を置いてといった様に自分で画面を作りましたがその他にも、下位ステージに設定するためのポスター機能というものがEdge Animateに搭載されています。ポスターとは本来表示されるはずのコンテンツ例えば、アニメーションといったそういったコンテンツの一部分のスクリーンショットを撮ってそれを下位ステージに張り付けることができます。一度設定してみましょう。いったん下位ステージから抜けてステージに戻ります。戻る時はこちらのステージをクリックします。すると元の画面に戻りました。ポスターの設定はこちらからできます。「ポスター」はステージ上に表示されているコンテンツをそのままスクリーンショットを撮って下位ステージに持っていくための機能です。ですので、まずは、そのスクリーンショットを撮りたい場面をステージ上で再現します。 アニメーションの中での一番いいシーンのところに設定すればよいでしょう。例えば今回は再生ヘッドを動かしてこの魚が大体中央あたりにいるこのシーンを選んでみましょうか。そして、この状態でこちらの「カメラ」ボタンをクリックします。するとこの様なパネルが表示されました。この中で、今現在ステージ上に表示されているスクリーンショットを撮るにはこちらの「キャプチャ」というボタンを押します。押してみます。するとこの様に「ポスターイメージが作成され、ライブラリに保存されました。」と表示されました。それでは次に、このいまスクリーンショットを撮った、ポスターイメージを下位ステージで使ってみましょう。下位ステージを使うにはこちら「下位ステージを編集...」というボタンを押します。すると、先ほど設定した下位ステージが表示されましたね。それではこの下位ステージに先ほどスクリーンショットを撮ったポスターを挿入してみたいと思います。まずは、今現状下位ステージに載っている要素を全て削除します。このテキストは置いておきましょうか。そして背景は削除します。この状態でこちら「ポスター:挿入」ボタンというのがありますね。これをクリックします。 すると、先ほどスクリーンショットを撮ったステージ上の画面の画像が下位ステージに貼り付けられました。そして先ほど削除せずに残しておいたテキストをこちらのポスターの上に持っていきます。そしてこの様に好きな位置に持っていくとこの様な形でアニメーションの一番いいところをスクリーンショットした内容と合わせてこういった案内文を表示させることも可能です。以上でレッスンは終了です。今回は、HTML5やCSS3に対応していない古いブラウザでEdge Animateで作成したコンテンツが表示された場合に本来のアニメーションなどを表示する代わりに別の内容を表示させることができる下位ステージの機能について解説いたしました。

Edge Animate CC 基本機能講座

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

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

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

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

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