描画の概要

Adobe Animate CC の描画ツールを使用すると、ドキュメントのアートワークの線やシェイプを作成および変更できます。Animate で作成する線およびシェイプは、すべて単純なベクトル画像であり、これにより FLA ファイルのサイズを小さく保つことができます。

Animate で描画やペイントを開始する前に、Animate でのアートワークの作成機能と、シェイプの描画、ペイントおよび修正が同じレイヤー上の他のシェイプに与える影響について理解しておくことが重要です。

ベクターグラフィックとビットマップグラフィック

コンピューター上でグラフィックを表示する形式には、ベクター形式とビットマップ形式があります。2 つの形式の違いを理解すると、より効果的に作業することができます。Animate では、コンパクトなベクターグラフィックを作成およびアニメーション化できます。Animate では、他のアプリケーションで作成されたベクターグラフィックとビットマップグラフィックを読み込んで操作することもできます。

ベクターグラフィック

ベクターグラフィックは、ベクターと呼ばれる線と曲線を使用してイメージを表します。ベクターには、カラーと位置のプロパティもあります。例えば、葉のイメージは点とその間を通る線で表されます。これによって、葉のアウトラインが作成されます。葉のカラーは、アウトラインのカラーとアウトラインで囲まれる領域のカラーによって決まります。

dr_02leafVectorComp
ベクターアートの線

ベクターグラフィックを編集するときには、そのシェイプを表す線と曲線のプロパティを修正します。ベクターグラフィックを移動したり、そのサイズ、シェイプ、およびカラーを変更しても、画質は変わりません。また、ベクターグラフィックは解像度に依存しません。つまり、様々な解像度の出力デバイスで、画質を損なうことなく表示できます。

ビットマップグラフィック

ビットマップグラフィックは、ピクセルと呼ばれるカラードットを使用し、これをグリッド(格子)内で配列してイメージを表します。例えば、葉のイメージは、グリッド内の各ピクセルの位置とカラー値で表されます。これによって、モザイクのようなイメージが作成されます。

dr_02leafBitComp
ビットマップアートのピクセル

ビットマップグラフィックを編集するときには、線や曲線ではなくピクセルを編集します。ビットマップグラフィックの場合は、イメージを記述するデータが特定のサイズのグリッドに固定されるので、解像度に依存します。このため、ビットマップグラフィックを編集すると、その画質が変化します。特に、ビットマップグラフィックのサイズを変更すると、グリッド内でピクセルが再配置されるため、イメージの端がぎざぎざになります。ビットマップグラフィックのイメージより解像度が低い出力デバイスに表示する場合も、画質が劣化します。

パス

Animate で線またはシェイプを描画するたびに、パスと呼ばれる線が作成されます。パスは、直線または曲線のセグメントで構成されます。各セグメントの始まりと終わりには、アンカーポイントが付いており、ワイヤーを固定するピンのような働きをします。パスには、クローズパス(円など)と、オープンパス(端点が離れているもの。波形線など)があります。

パスの形状を変更するには、パスのアンカーポイント、方向点(アンカーポイントに表示される方向線の先端)、またはパスセグメント自体をドラッグします。

dr_06
パスの構成要素

A. 選択されている(黒い正方形)端点 B. 選択されているアンカーポイント C. 選択されていないアンカーポイント D. 曲線のパスセグメント E. 方向点 F. 方向線 

パスのアンカーポイントには、コーナーポイントとスムーズポイントの 2 種類があります。コーナーポイントでは、パスの方向が急激に変わります。スムーズポイントでは、パスセグメントは連続する曲線として連結されます。コーナーポイントとスムーズポイントを自由に組み合わせてパスを作成できます。不適切な種類のポイントを作成した場合は、いつでも変更できます。

dr_07
パス上のポイント

A. 4 つのコーナーポイント B. 4 つのスムーズポイント C. コーナーポイントとスムーズポイントの組み合わせ 

コーナーポイントでは、2 つの直線セグメントまたは曲線セグメントを連結できますが、スムーズポイントでは 2 つの曲線セグメントだけを連結できます。

dr_08
コーナーポイントでは、直線セグメントと曲線セグメントの両方を連結可能

注意:

コーナーポイント、スムーズポイントを直線セグメント、曲線セグメントと混同しないでください。

パスのアウトラインを、と呼びます。内側の領域に適用されるカラーまたはグラデーションは、塗りと呼ばれます。線には、線幅、カラー、および点線パターンを指定できます。線と塗りの特性は、パスやシェイプを作成した後でも変更できます。

方向線と方向点

曲線セグメントを連結するアンカーポイントを選択するか、またはセグメント自体を選択すると、連結するセグメントのアンカーポイントに方向ハンドルが表示されます。方向ハンドルは方向線で構成され、方向線の両端は方向点です。方向線の角度と長さによって、曲線セグメントの形状とサイズが決定します。方向点を移動すると、曲線の形状が変化します。方向線は、最終的な出力には表示されません。

スムーズポイントには、常に 2 本の方向線があります。2 本の方向線は 1 つの直線単位として一緒に移動します。スムーズポイント上で方向線を移動すると、ポイントの両側にある曲線セグメントが同時に調整され、このアンカーポイントでの曲線の連続性が維持されます。

これに対して、コーナーポイントには、結合されている曲線セグメントの数(2 つ、1 つまたはなし)と同じ数の方向線(2 本、1 本またはなし)があります。コーナーポイントの方向線の角度はそれぞれ異なります。コーナーポイントで方向線を移動すると、方向線を調整する側の曲線だけが調整されます。

dr_10
アンカーポイントを選択した状態(左)と、アンカーポイントで連結されている曲線セグメント上に方向線が表示された状態(右)

dr_11
スムーズポイント(左)とコーナーポイント(右)での方向線の調整

方向線は、アンカーポイントの位置で、曲線の半径に対して常に垂直に接しています。各方向線の角度によって曲線の傾きが決定され、長さによって曲線の高さと奥行きが決定されます。

dr_12
方向線を移動したり、サイズを変更したりすると、曲線の傾きが変化します。

描画モードとグラフィックオブジェクト

Animate では、いくつもの描画モードと描画ツールを使用することで様々な種類のグラフィックオブジェクトを作成できます。それぞれの種類に特有のメリットとデメリットがあります。様々なグラフィックオブジェクトタイプの特性を理解することにより、作業にどのタイプのオブジェクトを使用すればよいかを適切に判断することができます。

注意:

Animate では、ステージ上のアイテムをグラフィックオブジェクトと呼びます。グラフィックオブジェクトは、移動、コピー、削除、変形、積み重ね、整列およびグループ化が可能です。Animate の「グラフィックオブジェクト」は、ActionScript® プログラミング言語の一部である「ActionScript オブジェクト」とは異なります。「オブジェクト」という用語の 2 つの用法を混同しないでください。 プログラミング言語におけるオブジェクトについて詳しくは、『ActionScript 2.0 の学習(Adobe Animate)』の「データ型について」または『ActionScript 3.0 開発ガイド』の「データ型」を参照してください。

結合描画モード

デフォルトの描画モードでは、複数のシェイプを重ねて描画すると自動的にシェイプが結合されます。同じレイヤーで、互いに重なり合う複数のシェイプを描画すると、最前面のシェイプによって、下に重なっているシェイプの一部が切り取られます。このように、シェイプの描画は、破壊的描画モードです。例えば、円を描画してから、その上に小さな円を重ね、その小さな円を選択して移動すると、最初の円に重なっていた 2 番目の円の部分が削除されます。

1 つのシェイプに線と塗りの両方が含まれている場合、それらは別々のグラフィックエレメントと見なされるので、個々に選択し、移動することができます。

dr_biteTakenOut
結合描画モードを使用して作成されたシェイプを重ねると結合されます。シェイプを選択して移動すると、重なっているシェイプが変化します。

結合描画モードへの切り替え

  1. ツールパネルで「Merge Drawing」オプションを選択します。

  2. ツールパネルから任意の描画ツールを選択して、ステージ上に描画します。

注意:

Animate では、デフォルトで結合描画モードが使用されます。

オブジェクト描画モード

描画オブジェクトといわれるシェイプを作成します。描画オブジェクトとは、重なったときに自動的に結合することのない独立したグラフィックオブジェクトです。これによって、2 つのシェイプを離したり、再配置しても、外観を変えずにシェイプを重ねることができます。Animate では、シェイプは個別のオブジェクトとして作成され、それぞれ独立して操作できます。

オブジェクト描画モードの描画ツールを使用して作成したシェイプには、データがすべて含まれます。シェイプの線や塗りは別々のエレメントではなく、シェイプが重なり合っても互いに切り取られたりすることはありません。オブジェクト描画モードを使用して作成したシェイプを選択すると、Animate では、そのシェイプの周囲に識別用の境界ボックスが表示されます。

注意:

オブジェクト描画モードを使用して作成されたシェイプを選択する際は、接点の区別を設定することができます。

dr_ObjectDrModel
オブジェクト描画モードで作成されたシェイプは個別のオブジェクトなので、個別に操作できます。

オブジェクト描画モードへの切り替え

オブジェクト描画モードを使用してシェイプを描画するには、オブジェクト描画モードを明示的に有効にする必要があります。

  1. オブジェクト描画モードをサポートする描画ツール(鉛筆、線、ペン、ブラシ、楕円、矩形、および多角形の各ツール)を選択します。

  2. ツールパネルの「オプション」カテゴリから「オブジェクトの描画」ボタン を選択するか、J キーを押して、結合描画モードとオブジェクト描画モードを切り替えます。「オブジェクトの描画」ボタンを選択すると、結合描画モードとオブジェクト描画モードを切り替えることができます。オブジェクト描画モードを使用して作成したシェイプを選択する場合は、接点の区別を設定できます。

  3. ステージ上で描画します。

結合描画モードを使用して作成されたシェイプをオブジェクト描画モードのシェイプに変換する

  1. ステージでシェイプを選択します。

  2. シェイプをオブジェクト描画モードのシェイプに変換するには、修正/オブジェクトを結合/結合を選択します。 変換後のシェイプは、他のシェイプとの干渉によって外観が変化しないベクターベースの描画オブジェクトのように扱われます。

注意:

複数のシェイプを 1 つのオブジェクトベースのシェイプに結合する場合は、「結合」コマンドを使用します。

プリミティブオブジェクト

プリミティブオブジェクトは、プロパティインスペクターで特性を調整できるシェイプです。これにより、シェイプを作成した後に、最初から描画することなく、シェイプのサイズ、角度、その他のプロパティを、いつでも正確に制御できます。

プリミティブには、矩形と楕円の 2 種類があります。

  1. ツールパネルから矩形プリミティブツール  または楕円プリミティブツール  を選択します。

  2. ステージ上で描画します。

重なっているシェイプ

結合描画モードで、他の線またはペイントされたシェイプに交差する線を描く場合、重なる線は交点で別々のセグメントに分けられます。各セグメントを個別に選択、移動、およびシェイプ変更するには、選択ツールを使用します。

dr_03fill_segment
塗り、塗りとその塗りを横切る線、および分割で作成された 3 つの線のセグメント

シェイプや線の上にペイントすると、下の部分が上の部分に置き換えられます。同じカラーでペイントすると、両者は同一になります。異なるカラーでペイントすると、異なるものとして区別されます。マスク、切り抜き、およびその他のイメージのネガを作成するには、これらの機能を使用します。例えば、下の切り抜きは、グループ解除した凧のイメージを緑色のシェイプの上に移動し、凧の選択を解除した後、凧の塗りつぶされた部分を緑色のシェイプから離すことによって作成されています。

dr_03fill_cutout
凧のイメージによる切り抜きの作成

重ねることによってシェイプと線を間違って変更しないように、シェイプをグループ化したり、レイヤーを使用して区別します。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー