Edge Animate CC 基本機能講座

ステージのプロパティ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
全てのアニメーション要素の土台となるステージに対して、設定できるプロパティについてご説明します!
講師:
12:03

字幕

このレッスンではEdge Animateでアニメーションを制作する中で全てのアニメーションの土台となるステージに対して設定できるプロパティを、「プロパティ」パネルを通して、解説していきますステージに対して設定できるプロパティ項目は「縦横サイズの大きさ」「横幅サイズの最小幅」「横幅サイズの最大幅」「オーバーフロー」「背景色」「自動再生」「コンポジションクラス」「ステージの中央表示」「レスポンシブな拡大/縮小」の計9つです。この内、このレッスンでは「レスポンシブな拡大/縮小」を除く計8つのプロパティについて解説していきます。「レスポンシブな拡大/縮小」については別のレッスンにて詳しくご紹介しますのでそちらをご参照ください。それでは、実際の画面を通して見ていきましょう。まず、今後のプロパティのご説明をしやすいようにステージの背景色を変更しておきましょう。背景色の設定は、こちらにある2つのアイコン部分から行うことができます。背景色は二種類の形式から設定できます。左側のアイコンは単一色での塗り。そして、右側のアイコンはグラデーション色での塗りを設定できます。ここでは、試しにグラデーション塗りに挑戦してみましょう。 まずは、こちらの右側のアイコンをクリックしてみましょう。すると、この様にカラーパレットが表示されます。次にこちらのカラーパレットの左側にあるこれらの矢印をクリックして選択した状態で、こちらから色を選びます。それではまずはこちらの上の矢印をクリックして選択状態にしてからこちらで色を選んでみます。ここではこの様な色にしておきましょうか。次に、同様にこちらの下の矢印もクリックします。選択状態した状態でこちらから色を選択します。ここではこの様な色にしておきましょうか。すると、この様にステージ上にグラデーションがかかりました。ちなみにこの矢印は現在、グラデーションの開始地点と終了地点を表していてそれぞれの色を設定することでグラデーションを作り上げています。また、それぞれの矢印を上下に移動させることでグラデーションの位置の調整を行うことができます。この様にグラデーションの位置が調整されていますね。また、このカラーバーこの上をクリックすることによって別途矢印を追加することができます。そして、追加した矢印にもそれぞれに異なる色を設定することで複雑なグラデーションを再現させることも可能です。それではステージの背景色を設定できましたので次にステージの縦横サイズについて見ていきましょう。 「カラー」パネルを閉じます。ステージの縦横サイズはアニメーション全体の大きさを設定する基本的な項目です。ステージのサイズはプロパティ部分のこの「W」と「H」という箇所で設定します。「W」は横幅「H」は立幅を表します。現在、「W:550px」「H:400px」となっていますね。これは、ステージが現状このサイズであることを表しています。一度サイズを変更してみましょう。ここでは、試しに横幅を「300px」に変更してみます。いま「550」と書かれているところをクリックしてここに「300」と入力します。すると、この様に横幅が狭くなりましたね。また、この「W」と「H」と書かれている左にあるこの「鎖」アイコンこの「鎖」アイコンをクリックしてONにすることでステージサイズの縦横比を維持したままサイズを変更することが可能です。一度ONにしてみます。こちらの「鎖」アイコンをクリックです。この様に「鎖」アイコンが繋がった状態になれば縦横比を維持した状態になります。この状態で、例えば、横幅の値を「500px」にしてみます。いま縦幅が「400px」であることに注目してください。それでは変更してみます。こちらの「300」と書かれているとことをクリックしてこちらに「500」と入力します。 すると、この様に横幅が大きくなったのに合わせて縦幅も大きくなりましたね。ちなみにステージのサイズは、ピクセル単位の他パーセント単位での指定も可能です。パーセント単位ではアニメーションの表示するスクリーンのサイズを基準に設定します。つまり、例えば横幅100%に設定するとアニメーションの横幅もスクリーン幅いっぱいに広がって、表示されます。単位を切り替える場合にはこちらのトグルをクリックします。一度試してみましょう。こちらの横幅の「px」と書かれているトグルをクリックするとこの様に単位が%に変わりましたね。つまりいまこの「W」の値横幅値が「100%」 に設定されていることになります。それでは、一度この状態でブラウザでのプレビューをしてみましょう。ブラウザでプレビューするにはアプリケーションメニューの「ファイル」>「ブラウザでプレビュー」を選択します。するとこの様に横幅いっぱいにステージが表示されていますね。それでは試しに横幅をピクセル単位に戻して比較してみます。アプリケーションに戻ります。そして、同じ様にこちらのトグルをクリックして、「px」単位に戻します。いま「500px」になっていますね。 この状態で、再度ブラウザでプレビューしてみます。プレビューするにはこちらのアプリケーションメニューの「ファイル」>「ブラウザでプレビュー」です。すると、この様に先ほどと違ってスクリーン幅いっぱいに広がることなく横幅が「500px」 に設定されていることがわかります。それではアプリケーションに戻ります。次に、ステージ幅の「最小幅」、「最大幅」について、見ていきましょう。ステージ幅の「最小幅」、「最大幅」はこちらの部分で設定することが可能です。「最小幅」、「最大幅」ともにステージのサイズの単位の設定を「パーセント」に指定した場合にのみ有効となります。パーセント指定をした際にはステージのサイズはスクリーンサイズに合わせて変動しますのでその変動の最小値と最大値を設定することでユーザに最適な状態でアニメーションを閲覧させることが可能です。次にこちらの「オーバーフロー」これは、ステージ上の要素がステージ外にはみ出す場合にどの様に表示するかを指定するものです。ステージ上の要素がステージ外にはみ出す、というのはつまりはこの様な状態ですね。では、この「オーバーフロー」のこちらのメニューを一度クリックしてみましょう。 すると、この様に4つのメニューが出てきます。上から「visible」、「hidden」「scroll」、「auto」といった4つの選択肢がありますね。これらは、CSSで利用する「オーバーフロー」と同じ形で動作します。次に、こちらの「自動再生」について見ていきます。自動再生は、例えば作成したアニメーションをブラウザで開いた際に自動的に再生を始めるかどうかを選択できます。次にこちらの「コンポジションクラス」「コンポジションクラス」とはこのアニメーション全体に付加する任意のIDの様なものです。コンポジションとはEdge Animateで作成した各要素を含めたアニメーション全体の構成物を指す言葉でEdge Animateで制作した一つのアニメーション枠を指すといえばわかりやすいでしょうか。つまりコンポジションクラスとは例えば一つのHTMLファイルの中で複数のコンポジション、つまりアニメーション枠を設置する際にそれらを区別するためのものです。ここでは、そのコンポジションクラスを変更することができます。次に、その下にある「ステージの中央を表示」この「ステージの中央を表示」とは作成したコンテンツをブラウザなどで表示する際に画面の中央に設置するかどうか、またその設置のスタイルを設定する事ができます。 一度、試しにチェックボックスをONにしてメニューの内容を見てみます。こちらのチェックボックスをクリックしてONにします。そしてこちらのメニューを選択します。するとこの様に設定のスタイルとして「垂直方向」、「水平方向」、「両方」というメニューがありますね。これは例えば「垂直方向」を選ぶと表示画面の縦軸の中で、コンポジションつまり、アニメーション枠を中央に表示するという意味です。ここでは、試しに「垂直方向」を選択してブラウザでプレビューしてみましょう。この「垂直方向」をクリックして選択そして、わかりやすい様に、ステージサイズをすこし小さくしておきましょうか。横幅を「200px」くらいに設定しておきます。そして、この状態でブラウザでプレビューしてみます。「ファイル」>「ブラウザでプレビュー」するとこの様にステージがブラウザの表示領域の垂直方向にちょうど中央で表示されているのがわかりますね。アプリケーションに戻ります。以上でレッスンは終了です。アニメーションを制作するにあたり全ての要素の土台となるステージに対してのプロパティ設定について、解説いたしました。

Edge Animate CC 基本機能講座

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

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

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

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

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