Edge Animate CC 基本機能講座

シャドウ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「シャドウ」プロパティは、ステージ上の要素に対してドロップシャドウをつけることができる機能です。使い方次第で、いろいろな表現が可能になるので、是非とも覚えておきましょう!
講師:
07:57

字幕

このレッスンではEdge Animate でステージ上に配置する要素に対して設定できるプロパティのうちシャドウ について解説していきます。それでは、実際に画面を見ながら確認していきましょう。今回、解説用に既にステージ上に図形要素、テキスト要素、画像要素の三つを配置したEdge Animate のプロジェクトファイルを用意しておりますのでダウンロードしてきたファイルからshadow.anをダブルクリックしてEdge Animate で開いてください。これをダブルクリックします。この画面が出れば準備は完了です。シャドウ とはいわゆるドロップシャドウのことでステージ上の要素に対して影を付けることが出来ます。シャドウは対象の要素をクリックして選択した状態にした際に表示されるプロパティパネルの中のこの部分から設定出来ます。今、このシャドウの内容が表示されている状態ですがもし、このように内容が表示されていなかった場合はここの矢印をクリックして内容を表示しておきましょう。シャドウの設定を有効にするには適用したい要素を選択した上でここの「シャドウなし」と書かれているトグルをクリックします。ここではこの図形要素に対して適用してみます。 この図形要素をクリックして選択状態にした状態でこの「シャドウなし」のトグルをクリックします。すると、対象の要素に影がつきました。それと同時に今までグレイアウトされていた「プロパティ」パネル内の設定個所がこのように設定できる状態になります。この設定個所ではドロップシャドウのスタイルを調整することが出来ます。まず、上の二つのボタンですが影を要素の外側につけるか内側につけるかを切り替えることが出来ます。そして、影の色をこの部分で影の位置をこのX、Yの部分でそして、影のぼかし具合や広がり具合をこの部分で設定することが出来ます。試しに、今少し影が見づらいので少し設定を変えて見やすくしておきましょう。まずはX,Yの値をそれぞれ「10px」に変更します。数値部分をクリックして「10」と入力します。Y も同様にクリックして「10」と入力します。次に、ここのぼかし部分をクリックして「30」と入力して次に、広がりを「3」と入力します。すると、このように影のスタイルが変更になり確認しやすくなりました。次に、影を要素の内側に付けてみましょう。影を要素の内側につけるにはここの右のボタンをクリックします。このように、要素の内側に影がつきました。 次に、この左のボタンをクリックして外側に戻しておきましょう。外側に戻りました。また、これらのプロパティ設定をうまく利用することで様々な表現を作ることが可能です。一度やってみましょう。まず、影を要素の内側に設置します。この右側のボタンをクリックします。そして、影の色を選択します。ここをクリックして「カラー」パネルが表示されますのでここでは、例えば少し濃い青色にしておきましょう。これぐらいですかね。そしてX影の横の位置を「0px」にそしてY影の縦の位置も「0px」に設定します。そして、ここのぼかしを「100px」にそして、この広がりを「20px」に変更します。すると、このように少し3Dのボールのような見え方になりました。ちなみに、この状態でぼかしを「0px」にしてみましょう。今「100px」 となっているぼかしを「0」に変更します。すると、今度は円の内側に枠線を付けたような見え方になりました。このように、シャドウは使い方次第では無限大の表現が可能となります。さて、これまではこの図形要素に対して設定してきましたがテキスト要素にもドロップシャドウを付けることが出来ます。やってみましょう。テキスト要素をクリックして選択状態にしたうえで「シャドウなし」と書かれているトグルをクリックします。 すると、このようにシャドウの設定が有効になってテキストにもドロップシャドウがつきました。また、ほかにも画像要素に対してもシャドウを付けることが出来ます。やってみましょう。同じようにこの画像要素をクリックして選択状態にしたうえでここ「シャドウなし」と書かれているトグルをクリックして設定を有効にします。するとどうでしょう。影は付きましたが何だか変な感じです。ちなみに、この画像は透過PNGファイルなのですが画像自体の魚の形に沿った影は付かずにこの青い枠に沿って影がついてしまいました。このように、画像要素にシャドウを付ける場合にはたとえそれが透過PNGファイルであってもこのような形になってしまいますのでご注意下さい。でも、心配はいりません。画像要素の場合は別のフィルタープロパティの中できちんと設定することが出来ます。フィルタープロパティについては別のレッスンで解説いたしますのでそちらも参考にしてみてください。また、一点注意事項としてこのシャドウプロパティは一部のブラウザーでは対応されていない場合がありますのでご注意下さい。詳しい説明はここにある通知パネルをクリックすることで確認することが可能です。 シャドウを利用する際には注意して見ておきましょう。以上で、レッスンは終了です。アニメーションを製作するにあたりステージ上の要素に影を付けることが出来るシャドウプロパティについて解説いたしました。是非、いろいろと設定を変えてみてどのように見えるのかを試してみてください。

Edge Animate CC 基本機能講座

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

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

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

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

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