Edge Animate CC 基本機能講座

表示

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ステージ上に配置された要素に対して、表示の制御を行うためのプロパティを解説致します。
講師:
06:41

字幕

このレッスンではEdge Animateでステージ上に配置する要素に対して設定できるプロパティの内表示に関わるプロパティについて解説していきます。それでは、実際に画面を見ながら説明していきましょう。まずは、対象となる要素をステージ上に作成しておきます。今回は、例えば円要素を置いておきましょう。「ツール」パネルからこちらをクリックしてステージ上でドラッグします。この様に要素が設置できましたらその要素をクリックして選択状態にしておきます。「プロパティ」パネルの中の表示に関わる設定はこちらの部分にあります。表示に関して設定できる項目は要素の表示と非表示、要素の透過度要素に対するオーバーフローの3つです。それでは順番に見ていきます。まず要素の表示と非表示についてです。要素の表示と非表示はこの「目」のアイコンの箇所で設定できます。一度、「目」のアイコンの隣にある「常時オン」と書かれている部分をクリックしてみましょう。すると選択メニューが表示されます。そして3つの選択肢が並んでいますね。順番に、「常時オン」、「オフ」、「オン」があります。この3つの選択肢の意味ですがまずは「常時オン」これは対象の要素がアニメーションの中で表示になったり、非表示になったりせずにアニメーション中、常に表示するという意味となります。 次にこちらの「オフ」ですがこれは、対象の要素を非表示にするという意味になります。そして、最後の「オン」ですがこれは「オフ」の逆で、対象の要素を表示するという意味になります。「常時オン」と「オン」は一見似ているようにも思えますが「常時オン」を選択した要素はアニメーション中、表示/非表示を一切切り替える事ができない設定となります。一方、こちらの「オン」はその逆でアニメーション中に表示したり、非表示にしたり、という調整が可能になります。ここでは、試しに「オン」と「オフ」を切り替えてみましょう。まずは、いま「常時オン」が選択されている状態ですので一度「オフ」を選択してみます。すると、先ほどまで表示されていたこちらの円要素が非表示になりましたね。それでは、次にこちらを表示させてみましょう。いま「オフ」が選択されているこちらの部分をクリックして次は「オン」を選択します。するとこの様に非表示だった要素が表示されてきて表示の切り替えができました。次に、透過度について見ていきましょう。透過度は、対象となる要素の透明度を設定することができます。透過度はこちらの部分で設定することができます。透過度が「100%」の時要素は完全に表示された状態で「0%」に向かって徐々に透明になっていき最後の「0%」で完全に透明になります。 それでは一度試してみましょう。こちらの摘みをクリックして左右にドラッグします。すると、この様に要素の透明度が変更になっていますね。「0%」に設定すると完全に表示されなくなり「100%」にすると完全に表示された状態となります。この様に要素の透過度を調整できました。この透過度はアニメーションの中でもフェードインやフェードアウトを表現するためなどに利用する機会が多いのでぜひ覚えておきましょう。ちなみに、先ほど紹介した上にある表示設定の「オフ」そして、今回の透明度で「0%」を設定した状態はどちらも要素自体は非表示の状態となります。一見、同じ様な状態の様に見えますが決定的な違いが一つあります。それは表示設定の「オフ」がされた要素は完全に存在しないものとして扱われます。CSSでいうところの「display:non」の状態です。一方、透過度「0%」、つまり完全に透明になって見えない状態の要素は透明で目に見えないが存在はしているという状態での扱いとなります。CSSでいうと「opacity:zero」この考え方の違いは主にアニメーションをプログラムで制御する際に理解しておく必要がありますのでしっかり覚えておきましょう。 最後に、オーバーフローについて見てみます。オーバーフローの設定はこの部分。例でいきます。一度、こちらの「visible」と書かれているところをクリックしてメニューを表示してみましょう。するとこの様に4つの選択肢が出てきましたね。こちらのオーバーフローの設定はCSSの「overflow」と同じ意味を持ちます。例えば、オーバーフローが設定された要素に子要素が存在している時その子要素が親要素の枠からはみ出した位置にある時の子要素の表示のし方を制御します。例えば、この「visible」であればはみ出した部分も表示こちらの「hidden」であればはみ出した部分は非表示といった具合です。以上でレッスンは終了です。アニメーションを制作するにあたり要素の表示の制御を行うプロパティ設定について、解説いたしました。アニメーションを制作する上でよく利用することになる項目ですのでしっかりと理解しておきましょう。

Edge Animate CC 基本機能講座

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

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

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

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

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