Edge Animate 基本ワークフロー講座

デザイン要素の配置

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは実際のアニメーション制作の前段階である、Edge Animateのステージ上でのデザイン要素の配置について解説していきます!
講師:
12:59

字幕

このレッスンではEdge Animateでアニメーションを制作していくにあたり実際のアニメーション制作の前段階であるデザイン要素の配置について解説していきます。目標となるアニメーションを制作していく時ほとんどの場合、その画面デザインというものがあります。アニメーション制作の基本的な流れとしてまずはその画面デザインに合わせてPhotoshopやイラストレーターなどで制作し出力した画像素材いわば、デザインパーツをステージ上の適切な位置に配置していくとことから始めます。そしてその後それらの配置したデザイン要素に対してアニメーションを実装していくわけですね。このレッスンではこの真ん中の部分サンプルで用意した目標となる画面デザインに合わせてステージ上にデザイン要素を配置していく流れを実際の画面を通して解説していきます。今回目標とする画面デザインはダウンロードしたファイルに入っている「完成デザイン.png」となります。この画面デザインをEdge Animateのステージ上で組み立てていきますので随時確認しながらレッスンを進めていきましょう。それでは始めていきましょう。まず、ダウンロードしたファイルの「new_project」フォルダにある「new_project.an」をダブルクリックしてEdge Animateで開きましょう。 開きましたね。このファイルは、別のレッスンで作成した新規プロジェクトファイルです。ここのプロジェクトタイトルが設定されてる以外は全く新規で作成したプロジェクトと同じものです。まずはアニメーションの土台となるステージの縦横サイズの設定を行っておきましょう。完成デザインの縦横サイズはいくつになっていますでしょうか。「W:1136px」「H:640px」ですね。ステージの縦横サイズはここの「W」と「H」で設定します。ここでは「W:1136px」と入力「H:640px」と入力します。すると、「ステージ」パネルの中にステージが収まらなくなってしまったのでパネル内でのステージの表示倍率を変更しておきましょう。ここの「100%」と書いてあるところを「50%」ぐらいに設定します。こうするとステージ全体が確認できますね。ステージのサイズ設定が終わったら早速デザインパーツ、つまり画像素材をライブラリに登録していきましょう。ダウンロードしたファイルの中に完成デザインの各デザインパーツをスライスした、画像素材が入っていますのでそれらを利用します。今回は、画像素材を一つずつ確認しながらステージ上にドラッグして画像を取り込んでいきたいと思います。 それでは順番にやっていきましょう。ちなみに、完成デザインと全く同じ位置にする必要はありません。おおよそで再現できていればOKです。それでは置いていきましょう。まずはこちらの画像からこれをステージにドラッグして、設置します。そして、これは背景になりますのでステージとぴったり合わせる様な形で設置してください。次はこちらの魚の画像ですね。これもステージ上にドラッグします。おおよそこの辺りですかね。もう一つ、こちらの魚の素材が完成デザインでは使われているのでもう一度ドラッグしてステージ上に配置します。大体この辺りなのですが向きが逆になっているので向きを変えてみましょう。今回は横の向きを変えたいのでこちらを変える時はこの「プロパティ」パネルの中の「変形」のこの部分を「-100%」に変更します。その際、この「鎖」のアイコンがONになっていると縦も一緒に「-100%」になってしまうのでここのチェックはこの様に外しておきましょう。それでは「-100%」に変えます。この様に横の向きが変わりました。大きさが少し小さいのでこの様に「変形ツール」でドラッグして、縮めておいて少し回転もしてる様ですのでこちらも「変形ツール」でこの、回転しているアイコンを出した状態でドラッグします。 大体これぐらいですかね。この辺りこれで設置できましたね。次はこちらの画像です。設置しましょう。ステージ上にドラッグして大体この辺りですね。設置できました。次はこちらの紫の画像ですね。これもステージ上にドラッグしてこの様に表示されましたのでおおよそこの辺りですかね。設置しておきましょう。完成デザインを見るともう一つ紫が設定されていますね。もう一度これをドラッグして設置します。おおよそこの辺りなのですがこちらも左右向きが逆転しているので先ほどと同じやり方で左右向きを変えてみましょう。同じ様に、ここの「100%」と書かれているところを、「-100%」に変えます。「-100%」そして、完成デザインではもう少しサイズが小さいのでこちらも「変形ツール」を使ってドラッグしてサイズを縮めて大体この辺りですかね設置しておきましょう。そして次の素材を置いていきます。次はこちらですね。同じ様にステージ上にドラッグしてこちらの方まで持ってきます。大体これぐらいですかね。いま、微妙に端から右にずれているのでぴったり左端につけておきましょう。厳密な位置を指定したい場合はこちらの位置とサイズのプロパティからいま「4px」と書いてあるところを「0」にしておくとこの様に左端に吸着した状態で設置されます。 次は、こちらの画像これもステージ上にドラッグします。そしてこちらはというと今度は右端なので右端につけておきましょう。そすると 先ほど設置した紫の画像が後に隠れてしまいましたね。この様な場合「エレメント」パネルから対象の要素の順番を変えることでステージ上の重なり順を変えることができます。やってみましょう。まず、こちらの画像をここまで持ってきていまこの画像は「img_06」という画像ですね。こちらの紫の画像は「img_04」なので「img_06」の上に「img_04」をドラッグして持っていってあげれば大丈夫です。もう一つ紫の画像がありますのでこちらは「img_042」ですね。こちらも同様に、「img_06」の上にドラッグして持っていってあげましょう。そしてこの状態で下まで降ろしてくるとこの様に、きちんと重なり順が設定されて、表示できましたね。次の画像はこちらの青い画像こちらも設置します。そして、これをおおよそこの辺りに持っていってあげましょう。いま、画像がステージ上からはみ出してしまっていますがいまのステージ上の設定ははみ出した画像は表示されないはみ出した部分だけですね表示されない設定になっていますのでこの置き方で大丈夫です。 次の画像はこちらの魚の画像ですね。ドラッグしてステージ上に設置します。おおよそこの辺りですね。これで全ての要素の設置が完了しました。一度この状態でプロジェクトファイルを保存してブラウザでプレビューしてみましょう。まずはプロジェクトファイルを保存します。保存は、アプリケーションメニューの「ファイル」>「保存」を選びます。すると、この様に上書き保存がされますのでこの状態でブラウザでプレビューしてみましょう。ブラウザでプレビューは、同様にアプリケーションメニューの「ファイル」>「ブラウザでプレビュー」を選択します。この様に、しっかりと完成デザインを再現できてますね。これでデザイン要素の配置は完了なのですが一応ここで注目しておきたい部分があります。まずは、「エレメント」、設置した要素がこの様に並んでいますよね。そして同じ様に「タイムライン」こちらも設置した要素がこの様に並んでいます。アニメーションを実際に制作していく際にはこのタイムラインの中でそれぞれの要素に対して実装していきますのでこの様に要素がタイムラインの中で並んでいるということをまずは、覚えておいてください。また、こちらの「エレメント」パネルを見てみますとこの様に、いま、画像の名前がそのまま入っていますね。 「img_04」とか「img_042」とか、入ってますね。この状態ですとちょっとこの要素が何を表しているのか、というのがパッと見た状態でわかり辛いので名前を付けてあげましょう。各エレメントの名前を変更するためにはこちらの名前、いま「img_07」と書いてあるところをダブルクリックします。すると、この様に入力できる様になりますのでこちらで名前を変えてあげます。例えば、この魚は「img_08」となっていますのでこの状態だとわかり辛いです。ですのでこちらをダブルクリックして例えば「fish」と入力しておきましょう。この様にすることで「エレメント」パネルを見た時にこの要素が何を表しているのかというのが、わかりやすくなりますね。ここで名前を変えた場合こちらのタイムラインでも同じ様に名前が変っていますので同様に確認しておいてください。以上でレッスンは終了です。今回は、アニメーションの実装の前段階であるステージ上へのデザイン要素の配置の手順を実際の画面デザインに基づきながら解説していきました。今回配置したデザイン要素に対するアニメーションの実装はまた別のレッスンで取り上げますのでそちらも参考にしてみてください。

Edge Animate 基本ワークフロー講座

このコースではEdge Animateでアニメーションを制作していくさいの基本的なワークフローを実際に作りながら学習していきます。新規プロジェクトの作成からタイムラインアニメーションの制作、シンボルの使い方やオーディオの利用、各種デバイスに対応させる方法などについて解説します。

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

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

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

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