Edge Animate CC 基本機能講座

イメージ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ステージ上に配置された画像要素に対して、位置やサイズ、イメージソースの設定を行う為のプロパティについて解説致します。
講師:
07:31

字幕

このレッスンではEdge Animate でステージ上に配置する要素に対して設定できるプロパティのうちイメージ、即ち画像に関わるプロパティについて解説していきます。イメージプロパティはその名の通りステージ上の画像要素に対して設定できます。それでは確認していきましょう。まずは、今後の解説の為にあらかじめステージ上に画像要素を置いておきましょう。ダウンロードしたファイルの中に「Image 1」「Image 2」というpng ファイルが入っていますのでそれをライブラリーに取り込んでください。ライブラリに取り込むためには「ライブラリ」パネルの「イメージ」の「+」ボタンを押します。するとファイルを選択する画面になりますので先ほどのImage1.pngImage2.pngの二つのファイルを選択して「開く」を押してください。複数のファイルを同時に取り込むにはShiftを押しながらファイル名をクリックします。この状態で「開く」を押します。この様に、ライブラリに二つの画像の取り込みが完了しましたのでまずは、Image1.pngのみをステージ上にドラッグして設置します。このように、設置できましたらそれをクリックして選択状態にしておきます。 これで準備完了です。イメージプロパティは「プロパティ」パネルの中のこの部分で設定できます。設定できる内容は背景イメージの位置背景イメージの大きさイメージソースの三種類です。まずは背景イメージの位置について見ていきます。背景イメージの位置の設定はこの部分で行うことが出来ます。ここで、背景イメージという言葉が出てきますが要するにこの魚の画像のことです。この背景イメージの位置とはこの魚の周りに表示されている青い枠の中での魚の画像の位置という意味です。ステージ上での画像要素の位置のことではないことに注意してください。今背景イメージの「X:0」「Y:0]」となっています。試しにこの値を変更してみましょう。たとえばここで「X:100px」そして「Y:20px」もう少し行ってみましょうか。「50px」このように、青い枠自体は動かずに中の魚の位置のみが動きました。ちなみに、背景位置のイメージは今はピクセル単位ですがこのとぐろをクリックすることでパーセント単位の青い枠の中での相対位置指定にすることも可能です。一度背景イメージを元に戻しておきましょう。「0 px」と「0 px]」でしたね。次に、背景イメージの大きさについて見ていきましょう。 背景イメージの大きさはこの部分で設定します。こちらも青い枠内での魚のサイズのことを指していて青い枠自体のサイズのことではないことに注意してください。今「W 横幅」、「H 縦幅」両方とも「100%」になっていますね。Wの隣にパーセントと記載はないですが背景イメージのサイズは縦横統一された単位を利用する必要がある為Hのほうに単位の表記が求められています。それでは「W:50 %」に変更してみます。このように、青い枠のサイズは変わらずにその中の魚の画像のみのサイズが変わりました。今、横幅の値を変えたのと同時に縦幅の値も同じ比率で変更されたのはこのWとHの隣にある鎖アイコンがオンになっていたためです。この鎖アイコンがオンになっていると縦横比率を維持したままの変更となります。ちなみに、サイズの単位をpx単位に変更することも可能です。切り替えるにはこの「トグル」をクリックします。そうすることで青い枠のサイズに連動しない絶対指定でサイズを固定化することが可能です。一度試してみましょう。ここでは分かりやすいようにサイズを100% に戻します。まずはパーセント指定の場合です。このまま青い枠をドラッグしてサイズを変更すると魚の画像自体もそれに合わせて変化します。 次に、ピクセル単位に変更して試してみましょう。ここの「トグル」をクリックします。ピクセル単位に変更されました。この状態で青い枠をドラッグしてサイズを変更してみましょう。この様に、魚の画像のサイズは変更されず青い枠のサイズだけが変更されていることに注目しましょう。最後に、イメージソースの設定について見ていきます。イメージソースの設定はこの部分から行うことが出来ます。左の部分には魚の画像ファイルのプロジェクトファイル内でのパスが記載されています。そして、右にあるボタンをクリックすると別の画像に差し替えることが可能です。試してみましょう。まずはこのボタンをクリックします。すると、「ライブラリアセット」パネル が開きます。ここにはライブラリに取り込まれている画像素材が表示されているので今回は、先ほど取り込んだもう一枚の画像Image2.pngを選択します。そして、Image2.pngの上でダブルクリックをします。するとステージに表示されている魚の画像がImage 2.pngの画像に差し替わりました。この機能は大規模なアニメーションを作る時など意外に便利だったりする機能ですので覚えておくとよいでしょう。 以上で、レッスンは終了です。アニメーションを製作するにあたり画像要素の制御を行うためのプロパティ設定について解説致しました。実際のアニメーション制作では画像を利用する機会がとても多くありますのでしっかりと理解しておきましょう。

Edge Animate CC 基本機能講座

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

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

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

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

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