ペンツールを使用した描画

  1. Adobe Animate ユーザーガイド
  2. Animate の概要
    1. Animate の新機能
    2. ビジュアル用語集
    3. Animate の必要システム構成
    4. Animate キーボードショートカット
    5. Animate での複数のファイルタイプの取り扱い
  3. アニメーション
    1. Animate のアニメーションの基本
    2. Animate でフレームとキーフレームを使用する方法
    3. Animate でのフレームアニメーション
    4. Animate でのクラシックトゥイーンアニメーションの操作
    5. ブラシツール
    6. モーションガイド
    7. モーショントゥイーンと ActionScript 3.0
    8. モーショントゥイーンアニメーションについて
    9. モーショントゥイーンアニメーション
    10. モーショントゥイーンアニメーションの作成
    11. プロパティキーフレームの使用
    12. トゥイーンを使用した位置のアニメーション化
    13. モーションエディターを使用したモーショントゥイーンの編集
    14. トゥイーンアニメーションのモーションパスの編集
    15. モーショントゥイーンの操作
    16. カスタムイージングの追加
    17. モーションプリセットの作成と適用
    18. アニメーションのトゥイーンスパンの設定
    19. XML ファイルとして保存したモーショントゥイーンの操作
    20. モーショントゥイーンとクラシックトゥイーン
    21. シェイプトゥイーン
    22. Animate のボーンツールアニメーションの使用
    23. Animate でのキャラクターリグの操作
    24. Adobe Animate でのマスクレイヤーの使用
    25. Animate でのシーンの操作
  4. インタラクティブ機能
    1. Animate でのボタンの作成
    2. 他のドキュメントタイプ形式への Animate プロジェクトの変換
    3. Animate での HTML5 Canvas ドキュメントの作成およびパブリッシュ
    4. Animate のコードスニペットを使用したインタラクティブ機能の追加
    5. カスタム HTML5 コンポーネントの作成
    6. HTML5 Canvas でのコンポーネントの使用
    7. カスタムコンポーネントの作成例
    8. カスタムコンポーネントのコードスニペット
    9. ベストプラクティス - Animate を使用した広告
    10. バーチャルリアリティの作成と公開
  5. ワークスペースとワークフロー
    1. ペイントブラシの作成と管理
    2. HTML5 Canvas ドキュメントでの Google フォントの使用
    3. Creative Cloud ライブラリと Adobe Animate の使用
    4. Animate のステージとツールパネルの使用
    5. Animate ワークフローとワークスペース
    6. HTML5 Canvas ドキュメントでの Web フォントの使用
    7. タイムラインと ActionScript
    8. 複数のタイムラインの操作
    9. 環境設定
    10. Animate オーサリングパネルの使用
    11. Animate でのタイムラインレイヤーの作成
    12. モバイルアプリおよびゲームエンジン用アニメーションの書き出し
    13. オブジェクトの移動とコピー
    14. テンプレート
    15. Animate での検索と置換
    16. 取り消し、やり直し、ヒストリーパネル
    17. キーボードショートカット
    18. Animate でのタイムラインの使用
    19. HTML 拡張機能の作成
    20. 画像とアニメーション GIF の最適化オプション
    21. 画像および GIF の書き出し設定
    22. Animate のアセットパネル
  6. マルチメディアとビデオ
    1. Animate のグラフィックオブイジェクトの変形と組み合わせ
    2. Animate でのシンボルインスタンスの作成と操作
    3. 画像トレース
    4. Adobe Animate でのサウンドの使用方法
    5. SVG ファイルの書き出し
    6. Animate で使用するビデオファイルの作成
    7. Animate にビデオを追加する方法
    8. ビデオのキューポイントの操作
    9. Animate でのオブジェクトの描画および作成
    10. 線とシェイプの変更
    11. Animate CC での線、塗り、グラデーション
    12. Adobe Premiere Pro と After Effects の使用
    13. Animate CC のカラーパネル
    14. Animate で Flash CS6 ファイルを開く
    15. Animate でのクラシックテキストの操作
    16. Animate へのアートワークの挿入
    17. Animate に読み込まれたビットマップ
    18. 3D グラフィック
    19. Animate でのシンボルの操作
    20. Adobe Animate での線とシェイプの描画
    21. Animate でのライブラリの使用
    22. サウンドの書き出し
    23. Animate CC でのオブジェクトの選択
    24. Animate での Illustrator AI ファイルの操作
    25. スプレーブラシツールでのパターンの適用
    26. ブレンドモードの適用
    27. オブジェクトの配置
    28. コマンドメニューを使用したタスクの自動化
    29. 多言語テキスト
    30. Animate でのカメラの使用
    31. Adobe Scout での Animate の使用
    32. Fireworks ファイルの作業
    33. グラフィックフィルター
    34. サウンドと ActionScript
    35. 描画の環境設定
    36. ペンツールを使用した描画
  7. プラットフォーム
    1. 他のドキュメントタイプ形式への Animate プロジェクトの変換
    2. カスタムプラットフォームサポート
    3. Animate での HTML5 Canvas ドキュメントの作成およびパブリッシュ
    4. WebGL ドキュメントの作成とパブリッシュ
    5. AIR for iOS 用アプリケーションのパッケージ化
    6. AIR for Android アプリケーションのパブリッシュ
    7. デスクトップ用 Adobe AIR のパブリッシュ
    8. ActionScript パブリッシュ設定
    9. ベストプラクティス - アプリケーションでの ActionScript の整理
    10. Animate での ActionScript の使用
    11. ベストプラクティス - アクセシビリティガイドライン
    12. Animate ワークスペースのアクセシビリティ
    13. スクリプトの記述と管理
    14. カスタムプラットフォームサポートの有効化
    15. カスタムプラットフォームサポートの概要
    16. アクセシビリティコンテンツの作成
    17. カスタムプラットフォームサポートプラグインの操作
    18. ActionScript 3.0 のデバッグ
    19. カスタムプラットフォームサポートの有効化
  8. 書き出しとパブリッシュ
    1. Animate CC からファイルを書き出す方法
    2. OAM パブリッシング
    3. SVG ファイルの書き出し
    4. Animate によるグラフィックとビデオの書き出し
    5. AS3 ドキュメントのパブリッシュ
    6. モバイルアプリおよびゲームエンジン用アニメーションの書き出し
    7. サウンドの書き出し
    8. QuickTime ビデオファイルの書き出し
    9. ActionScript を使用した外部ビデオ再生の制御
    10. ベストプラクティス - モバイルデバイス向けのコンテンツ作成のヒント
    11. ベストプラクティス - ビデオ規則
    12. ベストプラクティス - SWF アプリケーションのオーサリングガイドライン
    13. ベストプラクティス - FLA ファイルの構造化
    14. FLA ファイルを Animate 向けに最適化するベストプラクティス
    15. ActionScript パブリッシュ設定
    16. Animate のパブリッシュ設定の指定
    17. プロジェクターファイルの書き出し
    18. 画像とアニメーション GIF の書き出し
    19. HTML パブリッシュ用テンプレート
    20. Adobe Premiere Pro と After Effects の使用
    21. アニメーションのクイック共有とパブリッシュ

精度の高いパスを直線または滑らかな流れる曲線として描くには、ペンツールを使用します。ペンツールで描くときは、クリックで直線のセグメント上にポイントを作成し、ドラッグで曲線のセグメント上のポイントを作成します。線上のポイントを調整して、直線と曲線のセグメントを調整します。

次のビデオチュートリアルは、Animate のペンツールの使用方法を示しています。

ペンツールでの描画状態

ペンツールは、ポインターを変化させて現在の描画状態を示します。描画状態を示すポインターには、次のものがあります。

初期アンカーポイントポインター 

ペンツールを選択すると最初に表示されるポインターです。ステージで次にマウスボタンをクリックすると、最初のアンカーポイントが作成されることを示します。これは新しいパスの開始を意味し、新しいパスはすべて初期アンカーポイントで始まります。既存の描画パスは終了します。


シーケンシャルアンカーポイントポインター 

次にマウスボタンをクリックすると、前のアンカーポイントから線で連結されたアンカーポイントが作成されることを示します。このポインターは、パスの初期アンカーポイントを除いて、ユーザーが作成したすべてのアンカーポイントに対して表示されます。

アンカーポイントを追加ポインター 

次にマウスボタンをクリックすると、既存のパスにアンカーポイントが追加されることを示します。アンカーポイントを追加する場合は、パスを選択しておいてください。また、ペンツールを作成済みのアンカーポイントに置かないでください。既存のパスは、追加されたアンカーポイントに基づいて再描画されます。一度に追加できるアンカーポイントは 1 つだけです。

アンカーポイントを削除ポインター

次に既存のパスでマウスボタンをクリックすると、アンカーポイントが削除されることを示します。アンカーポイントを削除する場合は、選択ツールを使用してパスを選択しておいてください。また、ポインターを既存のアンカーポイントに置いておく必要があります。既存のパスは、削除されたアンカーポイントに基づいて再描画されます。一度に削除できるアンカーポイントは 1 つだけです。

パスを継続ポインター 

既存のアンカーポイントから新しいパスを延長します。このポインターをアクティブにするには、ポインターをパスの既存のアンカーポイントの上に置く必要があります。このポインターは、パスの描画中には使用できません。アンカーポイントは、パスの終端のアンカーポイントである必要はなく、任意のアンカーポイントをパスを継続する場所にできます。

パスを閉じるポインター 

パスの開始ポイントで描画しているパスを閉じます。閉じることができるのは描画中のパスだけで、既存のアンカーポイントは同じパスの開始アンカーポイントである必要があります。作成されるパスでは、閉じたシェイプに塗りカラーは適用されていません。カラーは個別に適用してください。

パスを結合ポインター 

パスを閉じるツールに似ていますが、マウスカーソルを同じパスの初期アンカーポイントに置くことはできません。ポインターは、一意のパスのいずれかの終端ポイントに置く必要があります。セグメントを選択しておく必要はありません。

注意:パスを結合すると、閉じたシェイプにならない場合があります。

ベジェハンドルを閉じるポインター 

ベジェハンドルが表示されているアンカーポイントにマウスカーソルを置くと表示されます。マウスをクリックするとベジェハンドルが閉じ、アンカーポイント上の曲線パスがまっすぐなセグメントに戻ります。

アンカーポイント変換ポインター 

方向線がないコーナーポイントを独立した方向線があるコーナーポイントに変換します。アンカーポイント変換ポインターを有効にするには、Shift + C キーモディファイアを押して、ペンツールを切り替えます。

ペンツールに関するビデオチュートリアルについては、www.adobe.com/go/vid0120_jp を参照してください。

ペンツールによる直線の描画

ペンツールを使用して作成できる最も単純なパスは直線です。ペンツールをクリックして 2 つのアンカーポイントを作成すると、それらのアンカーポイントを結ぶ直線が作成されます。クリックを続けると、コーナーポイントで連結された直線セグメントから成るパスが作成されます。

  1. ペンツール を選択します。
  2. ペンツールのポインターを直線セグメントの描画を開始する地点に移動し、クリックして最初のアンカーポイントを定義します。方向線が表示される場合は、ペンツールを誤ってドラッグしています。編集/取り消しを選択して、クリックし直してください。
    注意:

    環境設定ダイアログボックスの「描画」カテゴリで「ペンプレビューを表示」を選択していない場合、最初に描画するセグメントは、2 番目のアンカーポイントをクリックするまで表示されません。

  3. セグメントを終了する位置でもう一度クリックします。セグメントの角度を 45 度単位に固定する場合は、Shift キーを押しながらクリックします。
  4. クリックを続けて、追加の直線セグメントのアンカーポイントを設定します。
    ペンツールをクリックして直線セグメントを作成

  5. 開いたシェイプまたは閉じたシェイプとしてパスを作成するには、次のいずれかの操作をします。
    • 開いたパスを作成するには、最後のポイントでダブルクリックするか、ツールボックスでペンツールをクリックします。また、パスから離れた任意の場所を Ctrl キーを押しながらクリック(Windows)または Command キーを押しながらクリック(Mac OS)することもできます。

    • クローズパスにする場合は、最初に作成した(白抜きの)アンカーポイントの上にペンツールを置きます。ペンツールを正しい位置に置くと、ペンツールポインター の横に小さい円が表示されます。クリックまたはドラッグしてパスを閉じます。

    • シェイプをその状態で完成するには、編集/すべての選択を解除を選択するか、ツールボックスで他のツールを選択します。

ペンツールを使用した曲線の描画

カーブを作成するには、カーブの方向が変化する位置にアンカーポイントを追加し、カーブを形成する方向線をドラッグします。方向線の長さと傾きにより、曲線セグメントの形状が決定されます。

アンカーポイントの数を少なくすると、曲線を編集しやすくなり、曲線の表示やプリントがより快適になります。ポイント数が多すぎると、曲線がでこぼこになることがあります。アンカーポイントの間隔を広く取り、方向線の長さと角度を調整して曲線を描くようにします。

  1. ペンツール を選択します。
  2. ペンツールを曲線の開始点に移動し、マウスボタンを押したままにします。

    始点のアンカーポイントが表示され、ペンツールのポインターが矢印に変わります。Photoshop では、ドラッグを開始した後にポインターが変化します。

  3. 次にドラッグして、作成中の曲線セグメントの勾配を設定し、マウスボタンを離します。

    一般に、次に作成するアンカーポイントに向けて約 1/3 の距離まで方向線を引きます。方向線の一辺または二辺を後で調整できます。

    Shift キーを押しながらドラッグすると、ものさしツールの動きを 45 度単位に固定できます。

    最初のポイントの描画

    A. ペンツールを置く B. マウスボタンを押したままドラッグを開始 C. ドラッグして方向線を伸ばす 

  4. 曲線セグメントの終点にペンツールを置いてから、次のいずれかの操作を行います。
    • C 字曲線を作成する場合は、前の方向線とは逆の方向にドラッグしてからマウスボタンを離します。

    2 番目のポイントの描画

    • S 字曲線を作成する場合は、前の方向線と同じ方向にドラッグしてからマウスボタンを離します。

    S 字曲線の描画

  5. 連続した滑らかな曲線を作成するには、異なる位置から連続的にペンツールをドラッグします。アンカーポイントは、曲線の頂点ではなく各曲線の始点と終点に配置します。
    注意:

    アンカーポイントの方向線を分離するには、Alt キー(Windows)または Option キー(Mac OS)を押しながらドラッグします。

  6. パスを完了するには、次のいずれかの操作を行います。
    • クローズパスにする場合は、最初に作成した(白抜きの)アンカーポイントの上にペンツールを置きます。ペンツールを正しい位置に置くと、ペンツールポインター の横に小さい円が表示されます。クリックまたはドラッグしてパスを閉じます。

    • パスを開いたままにするには、すべてのオブジェクトから離れた場所で Ctrl キー(Windows)または Command キー(Mac OS)を押しながらクリックし、別のツールを選択するか、または編集/すべての選択を解除を選択します。

アンカーポイントの追加または削除

アンカーポイントを追加すると、パスを細かく調整したり、オープンパスを延長したりできます。ただし、必要以上にアンカーポイントを追加することはお勧めしません。パスのアンカーポイントが少なければ少ないほど、編集、表示および印刷が容易になります。パスの複雑さを軽減するには、不要なポイントを削除します。

ツールパネルには、ペンツール 、アンカーポイントの追加ツール およびアンカーポイントの削除ツール という、アンカーポイントを追加または削除するための 3 つのツールが用意されています。

初期設定で、ペンツールは、選択したパスの上に置くとアンカーポイントを追加ツールに変わり、アンカーポイントの上に置くとアンカーポイントを削除ツールに変わります。

注意:

アンカーポイントを削除するために、Delete キー、Backspace キー、Clear キー、または編集/カットコマンド、編集/消去コマンドを使用しないでください。これらのキーやコマンドを使用すると、アンカーポイントだけでなく、アンカーポイントを接続する直線セグメントも削除されます。

  1. 変更するパスを選択します。
  2. ペンツール をクリックしてマウスボタンを押したままにし、ペンツール 、アンカーポイントを追加ツール 、またはアンカーポイントを削除ツール を選択します。
  3. アンカーポイントを追加するには、パスセグメントにポインターを置いてからクリックします。アンカーポイントを削除するには、パスセグメントにポインターを置いてからクリックします。

パス上のアンカーポイントの調整

ペンツールで曲線を描画する場合は、連続する曲線のパス上のアンカーポイントであるスムーズポイントを作成します。直線のセグメント、または曲線のセグメントにつながっている直線を描画する場合は、直線のパス上のアンカーポイントまたは直線のパスと曲線のパスの結合点に置かれるアンカーポイントであるコーナーポイントを作成します。

デフォルトでは、選択したスムーズポイントが白丸で表示され、選択したコーナーポイントが白抜きの正方形で表示されます。

方向点をコーナーポイントの外にドラッグしてスムーズポイントを作成

アンカーポイントの移動または追加

  • アンカーポイントを移動するには、ダイレクト選択ツール  を使用してポイントをドラッグします。

  • アンカーポイントを微調整するには、ダイレクト選択ツールを使用してポイントを選択し、矢印キーを使用して移動します。複数のポイントを選択するには、Shift キーを押しながらポイントをクリックします。

  • アンカーポイントを追加するには、ペンツールで線セグメントをクリックします。アンカーポイントを選択した線セグメントに追加できる場合は、ペンツール の横にプラス記号(+)が表示されます。線セグメントが選択されていない場合は、ペンツールでクリックして選択してからアンカーポイントを追加します。

アンカーポイントの削除

曲線のパス上の不要なアンカーポイントを削除すると、曲線が最適化され、生成される SWF ファイルサイズも小さくなります。

  • コーナーポイントを削除するには、ペンツールでポイントを 1 回クリックします。選択した線セグメントからアンカーポイントを削除できる場合は、ペンツールの横にマイナス記号(-)が表示されます。線セグメントが選択されていない場合は、ペンツールでクリックして選択してからアンカーポイントを削除します。

  • スムーズポイントを削除するには、ペンツールでポイントを 1 回クリックします。選択した線セグメントからアンカーポイントを削除できる場合は、ペンツールの横にマイナス記号(-)が表示されます。線セグメントが選択されていない場合は、ペンツールでクリックして選択してからコーナーポイントを削除します。ポイントをコーナーポイントに変換するには 1 回だけクリックし、ポイントを削除するにはもう 1 回クリックします。

直線セグメントと曲線セグメント間の変換

線のセグメントを直線セグメントから曲線セグメントに変換するには、コーナーポイントをスムーズポイントに変換します。この逆を行うこともできます。

  • コーナーポイントをスムーズポイントに変換するには、ダイレクト選択ツールでコーナーポイントを選択し、Alt キーを押しながら(Windows)または Option キーを押しながら(Mac OS)コントロールハンドルまでドラッグします。

  • スムーズポイントをコーナーポイントに変換するには、ペンツールでスムーズポイントをクリックします。ポインター  の横のカレット記号(^)は、カーソルがスムーズポイント上にあることを示します。

セグメントの調整

セグメントの角度や長さを変えたり、曲線のセグメントを調整して曲線の傾きや方向を変えるには、直線のセグメントを調整します。

スムーズポイント上でコントロールハンドルを移動すると、ポイントの両側の曲線が調整されます。コーナーポイント上でコントロールハンドルを移動すると、コントロールハンドルと同じ側の曲線だけが調整されます。

  • 直線のセグメントを調整するには、ダイレクト選択ツール を選択し、直線のセグメントを選択します。ダイレクト選択ツールを使用して、セグメント上のアンカーポイントを新しい場所までドラッグします。

  • カーブセグメントを調整するには、ダイレクト選択ツールを選択し、セグメントをドラッグします。

    注意:パスをクリックすると、Animate ではアンカーポイントが表示されます。また、ダイレクト選択ツールでセグメントを調整すると、ポイントがパスに追加されることがあります。

  • カーブでポイントまたはコントロールハンドルを調整するには、ダイレクト選択ツールを選択し、カーブセグメントのアンカーポイントを選択します。

  • アンカーポイントのいずれかの側の曲線のシェイプを調整するには、アンカーポイントをドラッグするか、コントロールハンドルをドラッグします。カーブを 45 度単位に固定するには、Shift キーを押しながらドラッグします。コントロールハンドルを個別にドラッグする場合は、Alt キー(Windows)または Option キー(Mac OS)を押しながらドラッグします。

 

アンカーポイントをドラッグするか、または方向点をドラッグ

ペンツール環境設定

ペンツールポインターを表示したり、描画時にセグメントをプレビューしたり、選択したアンカーポイントを表示するための環境を設定することができます。選択したセグメントとアンカーポイントは、線とポイントが表示されるレイヤーのアウトラインカラーを使用します。

  1. ペンツール を選択してから、編集/環境設定(Windows)または Animate/環境設定(Mac OS)を選択します。

  2. 「カテゴリ」リストで「描画」を選択します。
  3. 以下のペンツールのオプションを設定します。

    ペンプレビューを表示

    描画時に線セグメントのプレビューを表示します。ステージでポインターを移動すると、クリックしてセグメントの端点を作成する前でも、セグメントのプレビューが表示されます。このオプションを選択しない場合、線セグメントはセグメントの端点を作成するまで表示されません。

    ポイントを表示

    選択されたアンカーポイントは白丸で、選択されていないアンカーポイントは黒丸で表示されます。このオプションを選択しない場合、選択されたアンカーポイントは黒丸で、選択されていないアンカーポイントは白丸で表示されます。

    精密カーソルを表示

    さらに精密に線を配置するために、ペンツールのポインターをデフォルトのペンツールアイコンではなく十字ポインターで表示します。デフォルトのペンツールアイコンを表示するには、このオプションの選択を解除します。

    注意:十字ポインターとデフォルトのペンツールアイコンを切り替えるには、Caps Lock キーを押します。

  4. 「OK」をクリックします。
アドビのロゴ

アカウントにログイン