Edge Animate入門 第2回：エレメントの配置、位置やサイズの指定

本記事では、Adobe Edge Animate CC（以下、Edge Animate）でエレメントを配置する方法を紹介します。

Edge Animate CC の体験版をダウンロード サンプルファイルをダウンロード

エレメントを配置する

Edge Animateでは、基本的な図形、画像、テキストなどのエレメント（要素）をステージ上に配置し、アニメーションを作成していきます。

基本図形の描画

矩 形や楕円は、Edge Animate上で直接描画できます。画面左上にある［長方形ツール］［角丸長方形ツール］［楕円形ツール］のいずれかを選択し、ステージ上をドラッグし てエレメントを描画します。テキストを作成する場合は、［テキストツール］を選択し、ステージ上をドラッグして、Text入力ボックスに入力します。

図1 基本的な図形やテキストを描画するには、ツールを選んでステージ上でドラッグします（サンプル：sample.an）

配置したエレメントの色や、角の丸め具合などのスタイルは、画面左側の［プロパティ］パネルから変更できます。

画像の読み込みと配置

画像を読み込むには、以下の2通りがあります。

ステージ上に配置した画像は、Edge Animateのファイルと同じディレクトリ内に自動作成される「images」フォルダー内にコピーされ、［アセット］パネルに登録されます。同じ画像 を再利用したい場合は、［アセット］パネルからステージへドラッグ＆ドロップします。

図2 ステージ上に配置した画像は［アセット］パネルに登録されます（サンプル：sample.an）

また、［アセット］パネルの右側にある［+］ボタンを押して画像を選択すると、［アセット］パネルに登録できます。この登録した画像をステージ上にドラッグ＆ドロップして配置できます。

エレメントの階層構造を作成する

画面右上の［エレメント］パネルでは、エレメントの階層構造を確認／変更できます。ステージ上に配置したエレメントは、「Stage」エレメントの子エレメントとし配置されていることが確認できますね。

階層構造の作成

新たに階層構造を作成する場合には、［エレメント］パネル上で、子としたいエレメントを、親としたいエレメントへとドラッグ＆ドロップします。

図3 ［エレメント］パネル上でエレメントをドラッグ＆ドロップして、エレメントの階層構造を作成できます（サンプル：sample2.an）

階層構造を設定したエレメント群は、親エレメントの位置を移動すると、それに追随して子エレメントの位置も変更されます。逆に、子エレメントだけを選択して位置を移動しても、親エレメントの位置は変更されません。

階層構造の解除

階層構造を解除するには、以下の方法でできます。

エレメントの位置やサイズを指定する

配置したエレメントの位置や大きさは、ステージ上で直接変更したり、［プロパティ］パネル上で数値を指定することで変更できます。位置やサイズを指定する際には、2種類の単位が用意されています。

図4 子エレメントの位置をpx単位と％単位で設定した例。親エレメントのサイズを変更した場合、px単位だと子エレメントの位置は変わりませんが、％単位だと相対的に変化します

この単位は、個々のエレメントを選択し、［プロパティ］パネルの［位置とサイズ］欄で、いつでも切り替えできます。［左］［上］［W］［H］欄は、それぞ れエレメントの「左端の位置」「上端の位置」「幅」「高さ」の数値です。その右側のトグルスイッチを押すと、単位が「px」あるいは「%」に切り替わりま す。

図5 各数値の右側にあるトグルスイッチを押すと、単位が切り替わります

座標の基準を変更する

エレメントの座標位置は［プロパティ］パネルの［位置とサイズ］欄に表示されますが、その表示には［グローバル］と［適用］という2種類のモードがあります。

さらに［適用］では、親エレメントのどこの位置を基準にするかを、左横にあるアイコンで選ぶことができます。選べるのは、「左上」「左下」「右上」「右下」の4種類です。デフォルトでは親エレメントの左上の位置が基準となります。

［グローバル］では、常にステージの左上が基準位置となり、エレメントの位置を示す項目は［X］［Y］で表示されます。［適用］では、選択している基準位置に応じて［左］［上］、［右］［下］などのように項目表示が切り替わります。

図6 ［適用］モードで基準位置を変更するには、アイコンの四隅をクリックします

例えば、基準位置を「右下」にした場合には、横方向の座標は、親エレメントの右端から自分の右端までの距離となり、縦方向の座標は、親エレメントの下端から自分の下端までの距離となります。

図7 2つの子エレメントを用意して、それぞれ、基準位置を「左上」／［左］座標を0／［上］座標を0、基準位置を「右下」／［右］座標を0／［下］座標を0と指定し、親エレメントのサイズを変更したところ。基準位置を「右下」に指定した場合は、親エレメントのサイズ変更に応じて、位置が移動しています（サンプル：sample3.an）

それぞれの基準位置は、下記のCSSプロパティに対応しています。

基準位置 対応するCSSプロパティ 左上 親要素の左端と上端からの距離。leftプロパティとtopプロパティ。 右上 親要素の右端と上端からの距離。rightプロパティとtopプロパティ。 左下 親要素の左端と下端からの距離。leftプロパティとbottomプロパティ。 右下 親要素の右端と下端からの距離。rightプロパティとbottomプロパティ。

※「左上」以外の基準位置を指定した場合、そのエレメントをモーションパス機能を使ってアニメーションさせることができなくなります。モーションパス機能を利用したい場合には、基準点は「左上」のままで配置しておきましょう。

このように、Edge Animate上に配置するエレメントには、様々な種類の配置方法が用意されています。いわゆるレスポンシブなコンテンツを作成したい場合には、ステージ自体の幅や高さを％指定し、コンテナとなるエレメントの位置も％指定するのがよいでしょう。

また、コンテナ内のエレメントは、個別にpx単位と％単位を使い分けて配置することも可能です。作成するコンテンツに応じて、好みの配置方法を選択してください。