Edge Animate CC 基本機能講座

変形

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ステージ上に配置された要素に対して、変形を行うためのプロパティについて解説致します。特に、実際のアニメーションを作る上でも、様々なことに応用していける、回転や要素の基点については必聴です!
講師:
09:39

字幕

このレッスンではEdge Animate でステージ上に配置する要素に対して設定できるプロパティのうち変形について解説していきます。それでは、実際に画面を見ながら確認していきましょう。まずは、今後の解説のためにあらかじめステージ上に図形要素を置いておきましょう。図形要素は「ツール」パネルから「図形」を選択してそのままステージ上にドラッグして設置します。設置できましたら一応わかりやすいように色を付けておきましょう。色を付けるには要素を選択して「カラープロパティ」から色を選択します。これで色がつきました。色がつきましたら要素をクリックして選択状態にします。これで準備完了です。変形プロパティ は「プロパティ」パネルの中のこの部分で設定できます。設定できる内容は要素の拡大/縮小要素の傾き要素の回転要素の変形の基点の四種類です。ここで、変形の説明に入る前に覚えておいていただきたいことがあります。それは変形の基点についてです。基点の説明を分かりやすくするためにまずは、「ツール」パネルから「変形ツール」を選択してください。すると、黒いバウンディングボックスで要素が囲まれます。この中心にある「丸印」 が基点です。 これから説明する変形はこの基点の位置を中心にして設定されますので覚えておいてください。それでは、変形プロパティの説明に入っていきましょう。まずは、要素の拡大/縮小について見ていきましょう。厳密に言うと要素の縦横の伸縮の設定となります。要素の拡大/縮小の設定はこの部分で設定できます。上にあるのが 「横幅の伸縮率」下にあるのは「縦幅の伸縮率」です。現在「100%」と書かれていますがこれは等倍に表示されているということを表しています。それでは、一度この値を「200%」に変更してみましょう。この部分をクリックして「200%」に変更します。このように、基点を中心として二倍の大きさに変更できました。次に、今度は「50%」に変更してみましょう。この部分をクリックして今度は 「50」と入力します。こうすると、今度は逆に 基点を中心として半分のサイズに変更されました。今ここの鎖のアイコンがつながった状態となっていますので横の値を変更すると縦の値も同じ比率で変更されました。この鎖アイコンをクリックしてこの機能をオフにすると縦横それぞれ個別に値を設定することが可能です。ここでは一度「100%」に戻しておきましょう。 次に、要素の傾きについて見ていきましょう。要素の傾きはこの部分で設定が可能です。上から「横軸での傾き」その下は「縦軸での傾」を設定できます。それでは、一度上の横軸での傾きを設定をしてみましょう。今横軸での傾きが「0°」となっていますので試しに 「20°」に変更してみましょう。この部分をクリックして「20」と入力します。すると、このように基点を中心として対象の要素が傾きました。今度は、試しに「-20°」と入れてみましょう。この部分をクリックして「-20」と入力します。すると今度は基点を中心に逆に傾きました。このように、ここの値にはマイナスの値も設定することが可能です。一度「0°」に戻しておきましょう。次に、要素の回転 について見ていきましょう。要素の回転はこの部分で設定が可能です。要素の回転は基点を中心に 指定した角度分要素を回転させることが可能です。今「0°」となっていますので試しに「30°」と入れてみましょう。ここをクリックして30と入力します。このように、基点を中心にして30度分要素が回転しました。今度は逆に「-30°」と入れてみます。ここをクリックして-30と打ちます。そうすると、今度は逆の方向に基点を中心として30 度分要素が回転しました。 今度は、試しに「360°」と入れてみましょう。ここをクリックして360と打ちます。すると元の 0° と同じ状態に戻りました。「360」と入れると一回転してきて元の状態に戻っているということです。但し、見た目jは同じでもこの回転をアニメーションに取り入れるとき意味が大きく変わってきます。実は、ここの回転のプロパティには360° を越えた値もセットすることができます。例えば 720°とか逆に、-720°とかでもOKです。これらの設定はどれも要素の見た目の状態は同じですがこれらの値をアニメーションの中で使うとき例えば、360°は一回転720°は二回転として扱われます。例えばボールを転がすアニメーションを作るときに一回転分転がしたり、二回転分転がしたりそんな使い方をします。これはアニメーションを作る上でのちょっとしたテクニックですのでしっかり覚えておきましょう。それでは、一旦0°に戻しておきます。クリックして「0」と入力します。見た目は変わりませんが実際は0回転の状態と同じ意味になります。最後に要素の基点についてご説明します。基点の設定はこの部分で行うことが可能です。要素の基点とはこのレッスンの初めにお話しした変形の中心となるものです。 ここでは、その基点の位置を変更することが出来ます。今X、Y共に[50%] となっています。これはこの要素の変形の基準が要素の中心にあることを表しています。例えば、X、Y共に0%を設定してみます。変更するにはまず「X:50」と書いてあるところをクリックして「0」を入力します。次に、「Y:50」と書いてあるところをクリックして「0」を入力します。すると、先ほどまで要素の中心にあった丸印が要素の左上にいきました。少し見づらいですがこれで要素の基点が左上に移りました。この状態で先ほどの回転を試してみましょう。ここでは、試しに「30°」回転させてみましょう。ここをクリックして「30」と入力します。すると、このように要素の左上を中心にして回転されるようになりました。このように、基点の位置を変更するだけで変形の見え方も変わってきます。実は、この起点をしっかりと理解し操れるようになれば精度の高いアニメーションも作れるようになっていきます。しっかりと覚えておきましょう。以上で、レッスンは終了です。アニメーションを製作するにあたり要素の変形を行うためのプロパティ設定について解説いたしました。このレッスンで紹介した回転の考え方や基点については実際のアニメーションを製作するうえでかなり応用していける内容ですのでしっかりと理解しておきましょう。

Edge Animate CC 基本機能講座

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

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

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

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

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