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

比率によるレイアウト

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
スマートフォンやタブレット端末、もちろんパソコンにおいても、さまざまな解像度をもつスクリーンが存在しています。このレッスンでは、それら幅広い解像度に合わせて、比率による細かなアニメーション表示制御を行う方法を勉強します!
講師:
10:26

字幕

このレッスンではEdge Animateで製作した一つのアニメーションをスマートフォンやタブレット端末PCなどといった様々な解像度に対応させるための比率によるレイアウト設定について解説致します。まずは、ダウンロードしてきたファイルの中にあるNew Project.anをダブルクリックしてEdge Animateで開いてください。そして、これがそのファイルを開いた状態です。このファイルを使いながら解説を進めていきます。Edge Animateでは要素の位置やサイズなどをステージなどに対してパーセント単位の相対指定で設定することが可能です。その様に設定することで一つのアニメーションファイルで様々な解像度での表示に対応させることが可能です。今回は、表示領域の横幅の変動に対してこちらのアニメーションもそれに連動してサイズが変動していくといった設定をしてみます。まずは、今のこのファイルの状態でブラウザーでプレビューしてみましょう。「ファイル」>「ブラウザーでプレビュー」を選択します。すると、この様に表示されますね。この状態で、一度ブラウザーの横幅を変動させて見ましょう。この様に、表示領域がアニメーションにより小さくなればその部分アニメーションが隠れてしまっているそしてアニメーションより大きくなった場合はこの様に、余白ができてしまっているという点に注目してください。 それでは、早速設定していてみましょう。Edge Animateの画面に戻りましてまずは、分かりやすいようにステージの背景色に色を塗っていきます。ステージの色の背景色の設定はこちらの「stage」プロパティのこちらのアイコンをクリックすることによって行うことができます。今回は分かりやすいように赤色にしておきましょう。そして、この状態でまずはステージサイズを表示領域の幅にツイツイするようにしましょう。同じように、「stage」のプロパティのこちらの横幅こちらをパーセント単位に切り替えます。そして、「100%」になっていることを確認してください。この状態で一度プレビューしてみましょう。先ほどはブラウザーからプレビューしましたがこちらの設定をパーセント単位に切り替えることでステージ上で、表示領域の幅をシミレーションすることができます。こちらに出てくるこの抓みを左右にドラッグしてその確認ができます。やっていみましょう。こちらをクリックしてまずは、アニメーションより小さい場合左ですね左にドラッグして見ましょう。この様に、表示領域がアニメーションより小さくなるとこちらが隠れてしまいますね。こちらのみがまだ表示されています。 そして、逆にアニメーションより大きくなった場合この様にステージが100%になっているので表示領域にツイツイする形でステージが表示されていますね。それでは、次はステージだけでなくこの中の画像要素に対しても同じように表示領域のサイズにツイツイするように設定してみたいと思います。一旦元に戻します。まずは、こちらの海の背景画像こちらに対してもステージと同じように100%の設定をしてみます。設定するにはこの画像ファイルを選択してこちらのW横幅ですね。横幅の値をパーセントに変えておきます。そして、「100%」となっていることを確認してください。この状態で、同じように表示領域を調整してみます。小さくなると先ほどと違って海の画像も一緒に小さくなってますね。逆に、表示領域が大きくなると同じように、ツイツイして海の画像も大きくなっていますね。次は、こちらのボタンに注目してください。表示領域が小さくなるとこの様に、ボタンが隠れてしまいますね。これを表示領域が小さくなってもボタンが隠れないようにしてみます。まずは、ボタンを選択した状態で「プロパティ」のこちらX、横軸の位置ですねXの値をまずはパーセント単位に切り替えます。 そして、このボタンはこちらの右の横幅にツイツイしたいのでこちらの位置の基準をこちらの右下に設定しておきます。このボタンはこのアニメーション中で右下に位置しているので右下に設定していると覚えておいていただければ大丈夫です。この状態でサイズを動かしてみましょう。この様に右の表示領域の端が動くことによってそれにツイツイしてボタンも動いていますね。次に、同じようにこの様に、サイズが小さくなると隠れてしまっているこれらの要素に対してもパーセントとして仕上げましょう。一度元に戻しまして設定したい要素を選択します。設定したい要素を選択する時にキーボートのShiftを押しながら選択していくことによって複数同時に選択することが可能です。この状態でXがこちらのプロパティですね。こちらをパーセントに変えてあげます。そして、これらの要素はアニメーションの右下に位置しているので位置の基準を「右下」に設定してあげます。そして、この中でもこちらの要素は右上にありますのでこちらの要素だけ「右上」の位置基準にしてあげます。この状態でサイズを変更してみましょう。この様に、ツイツイしていきますね。同じように、こちらの左側にある要素に対してもパーセント指定してあげましょう。 同じように、設定したいこれらの画像をShiftを押しながら選択していきます。その上でXの位置指定をパーセントに変えてあげます。そして、位置の基準を今はどちらかというと左下にありますね。「左下」に設定しておきましょう。場合によってはこちらの魚だけは、どちらかというと左上にありますので「左上」を基準に位置を設定しておくのもよいでしょう。それでは、この状態で確認してみます。サイズが変更になるとこの様に、左の素材もそれに合わせて連動するようになりました。この状態でブラウザーでプレビューしてみましょう。こちらの「ブラウザーでプレビュー」を押します。すると、この様に表示されました。では、まず横幅を縮めてみましょう。この様に、横幅のサイズが変わると中の要素に位置もそれに連動して変わっていますね。逆に、大きくした時もこの様に、それにツイツイしていきますね。では、実際にアニメーションをスタートさせて見ましょう。こちらの「スタート」ボタンを押してみます。この様に、アニメーション自体もこの表示領域のサイズに連動して変動していますね。さて、こういったパーセントでの指定を利用することによって便利な機能がもう一つあります。 例えば、表示領域の横幅のサイズが極端に小さくなった時にアニメーションやレイアウトに不具合が起きる可能性があります。一度、ブラウザーでプレビューして試してみましょう。例えば、この様に極端小さくなってしまった場合表示もそうですがアニメーションにもう少し画面からはみ出してしまったりとかそういった現象が起こってしまいます。これを防ぐためにEdge Animateではステージのサイズの最小値そして、最大値を設定していくことが可能です。これを設定しておくことによって抑止なアニメーションの表示や動作濫りを制御することができます。それでは、試しに設定してみましょう。ステージサイズの最小値/最大値はこの部分で設定することが可能です。今回は試しに最小幅を700PXとしてみましょう。こちらを選択して「700」と入力します。この状態でブラウザーでプレビューしてみましょう。すると、どうでしょう。この様に、ステージ幅にはツイツイしてサイズは変更されるのですが700PXを基準としてサイズが小さくならなくなります。こうすることによって意図しないアニメーションのサイズの変動によるレイアウトの崩れやアニメーションの不具合を防止することができます。 以上で、レッスンは終了です。今回は、Edge Animateで製作した一つのアニメーションで様々な解像度の表示に対応させるための比率によるレイアウトの設定方法について解説しました。この様な本の少しの手間を掛けるだけで様々な端末での表示に対応させることができるのは本当に素晴らしい機能ですね。是非、活用していきましょう。

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

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

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

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

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

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