Edge Animate CC 基本機能講座

位置とサイズ

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

ぜひご覧ください。

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

字幕

このレッスンではEdge Animateでステージ上に配置する要素に対して設定できるプロパティの内位置とサイズに関わるプロパティについて解説していきます。それでは、実際の画面を見ながら説明していきましょう。まず、最初に解説のために予めステージ上に図形要素を設置しておきましょう。図形要素を設置するためには「ツール」パネルから図形を選択してステージ上でドラッグします。この様に、設置できましたら、要素をクリックして、選択状態にしておきます。「プロパティ」パネルの中で位置とサイズを設定できる箇所はこの部分となります。設定できる内容は「トランジション」、「要素の位置」「要素のサイズ」の3つです。それでは、「トランジション」から順番に見ていきます。「トランジション」は、要素の位置移動のアニメーションに対してそのスタイルを設定できます。「トランジション」は、「プロパティ」パネル内のこの部分で設定できます。「トランジション」には2種類あります。「XおよびYモーション」そして、「モーションパス」です。「XおよびYモーション」とは「移動元と移動先の要素のX座標・Y座標を指定することで」「その間を直線的に移動させるスタイル」です。 一方の「モーションパス」は「移動元と移動先の要素のX座標・Y座標を指定し」「その間をステージ上に描いたパスの上に沿って移動させる」「曲線的な動きも可能なスタイル」です。「トランジション」では、これら2つのスタイルから、要素ごとに選択できます。それでは画面を戻します。ちなみにここで「モーションパス」を選択すると隣にある「自動回転」という項目が選択できる様になります。クリックしてみましょう。この様に、「自動回転」がチェックできる様になりましたね。これは、モーションパスで曲線的な動きをさせる場合にそのパスに沿って要素自体を回転させるかどうかの設定を行うことができます。それぞれの詳しいアニメーションのし方は別のレッスンで取り上げますので今回は、その種類のみを覚えておいてください。今回は、一度「XおよびYモーション」に戻しておきます。次に、要素の位置の設定について見ていきましょう。位置の設定は、「プロパティ」パネルのこの部分にあります。位置の設定は、通常ステージの左上を基準にしてピクセル単位で「X座標」/「Y座標」を指定します。ちなみにいま「X」/「Y」に入っている値はステージ上にあるこの要素がステージの左上から「X:153px」「Y:90px」 の位置にあることを表しています。 また、位置の単位はピクセル指定の他に、パーセント指定で行うことも可能となっております。パーセント指定への切り替えはこの「トグル」部分をクリックすることで行えます。一度パーセントに切り替えてみましょう。この様にパーセント単位での表記に変わりましたね。いまステージ上のこの要素はステージの左上を基準に「X:27.8%」「Y:22.5%」の位置にあることがわかります。ちなみに、ピクセル指定からパーセント指定に 切り替えることは位置の単位が変わるだけでなくピクセル指定では、ステージの左上からの絶対位置指定だったのがパーセント指定では、ステージ左上からの相対位置指定に変わることになります。つまり簡単に言い換えるとパーセントでの位置指定はステージの大きさによってその位置は固定ではなく流動的になる、ということになります。現在、この要素の位置は、ステージ上の左上の位置を基準としていますが他にも右上、右下、左下へ基準点を変更することも可能です。変更する場合は「プロパティ」パネルのこの部分の該当する基準点をクリックすることで変更できます。例えば、ステージ上の右上を基準にしたい場合はこちらも同様に右上のマスをクリックします。 また、この要素が仮に別の要素の子要素だった場合基準にする位置をステージではなく親要素に設定することも可能です。その場合は、ここにある「適用」と書かれたボタンをクリックしてください。ちなみに「グローバル」を設定するとステージを基準とした位置取りになります。次に、要素のサイズのプロパティを見ていきましょう。要素のサイズは、「プロパティ」パネルのこの部分で設定します。「W」が横幅で「H」が縦幅ですね。試しに変更してみましょう。例えば、今回「W:300」と入力してみましょう。こちらの「220」と書いているところをクリックして、「300」と入力します。この様にサイズが変わりましたね。ちなみに、この「W」と「H」の隣にある「鎖」アイコンをONにしていると縦横比を維持したままサイズを変更することが可能です。いま「300」に変えた時に縦幅も大きくなったのは、その為です。またサイズも位置と同様にステージや親要素を基準としたパーセント単位での相対的な指定も可能です。その場合は、同じ様に、こちらのトグルをクリックして 切り替えます。最後に、このサイズ設定の上にあるこのボタンですがこのボタンをクリックすることで「レイアウトプリセット」パネルを開くことができます。 クリックしてみましょう。この様に「レイアウトプリセット」パネルが表示されました。ここには、予め要素に対するレイアウト指定の雛形が登録されておりそれぞれクリックするとそのレイアウト設定の説明が表示されます。そしてこの中の「適用」ボタンを押すことで自動的にその要素にその設定を適用することができます。以上でレッスンは終了です。アニメーションを制作するにあたり要素の位置やサイズの制御を行うプロパティ設定について、解説いたしました。特に、位置やサイズのパーセント単位での相対指定は別のレッスンでご紹介する「レスポンシブレイアウト」でも詳しく説明いたしますのでそちらも参考にしてみてください。

Edge Animate CC 基本機能講座

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

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

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

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

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