"Animate CC での線、塗り、グラデーション"

  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. アニメーションのクイック共有とパブリッシュ

グラデーションの塗りの作成または編集

グラデーションは、1 つのカラーから別のカラーへと徐々に変化するマルチカラーの塗りです。Animate CC(旧 Flash Professional CC)では、最大で 15 色を適用してグラデーションを作成できます。グラデーションを作成すると、滑らかなカラーグラデーションを複数のオブジェクトに適用できます。グラデーションをスウォッチとして保存しておくと、複数のオブジェクトに簡単に適用できます。Animate では、次のような 2 種類のグラデーションを作成できます。

線状グラデーションでは、1 つの軸(水平または垂直)に沿ってカラーが変化します。

放射状グラデーションでは、中央の焦点から外側に向かってカラーが変化します。グラデーションの方向、カラー、焦点の場所、その他の様々なグラデーションプロパティを調整できます。

Animate CC には、Flash Player で使用可能な線状および放射状のグラデーションに対する追加のコントロールがあります。これらのコントロール(オーバーフローモードという)を使用すれば、グラデーションを超えてカラーを適用する方法を指定できます。

  1. 既存のアートワークにグラデーションの塗りを適用するには、ステージで 1 つまたは複数のオブジェクトを選択します。

  2. カラーパネルが表示されていない場合は、ウィンドウ/カラーを選択します。

  3. カラー表示モードを選択するには、パネルメニューから「RGB」(デフォルトの設定)または「HSB」を選択します。

  4. タイプメニューからグラデーションの種類を選択します。

    線状

    直線の始点から終端まで陰影を作るグラデーションを作成します。

    放射状

    中央の焦点から外側に向かって放射状にブレンドするグラデーションを作成します。

    注意:Flash Player 8 以降を対象とするパブリッシュの場合、線状または放射状のグラデーションを選択すると、2 つの追加のオプションがカラーパネルに表示されます。1 つは、タイプメニューの下に表示されるオーバーフローメニューです。グラデーションの範囲外のカラーの適用方法を指定するには、オーバーフローメニューを使用します。もう 1 つは、グラデーション定義バーです。バーの下には、グラデーション内のカラーを表すポインターが表示されます。

  5. (オプション)オーバーフローメニューで、グラデーションに適用するオーバーフローモードを、「拡張」(デフォルトのモード)、「反映」、「繰り返し」の中から選択します。

  6. (オプション)SVG(Scalable Vector Graphics)互換の線状または放射状のグラデーションを作成するには、「リニア RGB」チェックボックスをオンにします。これにより、最初に適用された後に異なるサイズに拡大された場合にグラデーションが滑らかに見えるようにします。

  7. グラデーションのカラーを変更するには、グラデーション定義バーの下にあるカラーポインターのいずれかを選択します(選択したカラーポインターの上の三角形が黒色になります)。その後、グラデーションバーの上に表示されるカラースペースペイン内をクリックします。「明度」スライダーをドラッグし、カラーの明度を調整します。

  8. グラデーションにポインターを追加するには、グラデーション定義バーまたはその下をクリックします。前の手順の方法で、新しいポインターのカラーを選択します。

    最大で 15 色までポインターを追加できます。つまり、最大で 15 色のトランジションを持つグラデーションを作成できます。

  9. グラデーションのポインターの位置を変更するには、グラデーション定義バーに沿ってポインターをドラッグします。グラデーション定義バーのポインターを下にドラッグすると、ポインターが削除されます。

  10. グラデーションを保存するには、カラーパネルの右上隅にある三角形をクリックし、メニューから「色見本を追加」を選択します。

    グラデーションが、現在のドキュメントの色見本パネルに追加されます。

  11. グラデーションを変形する(水平のグラデーションを垂直にするなど)には、グラデーション変形ツールを使用します。詳しくは、グラデーションおよびビットマップの塗りの変形を参照してください。

線のカラーと塗りのカラーの調整

ツールパネルの「線のカラー」コントロールまたは「塗りのカラー」コントロール、またはプロパティインスペクターの「線のカラー」コントロールまたは「塗りのカラー」コントロールを使用して、グラフィックオブジェクトとシェイプの線のカラーと塗りのカラーを指定できます。

ツールパネルの「線のカラー」セクションと「塗りのカラー」セクションには、「線のカラー」ボックスと「塗りのカラー」ボックスをアクティブにするためのコントロールがあります。これらのボックスは、選択したオブジェクトの線または塗りがカラー選択の影響を受けるかどうかを決定します。また、「カラー」セクションには、カラーをすばやくデフォルトにリセットするコントロール、線と塗りのカラー設定を「なし」に設定するコントロールおよび塗りと線のカラーをスワップするコントロールがあります。

グラフィックオブジェクトまたはシェイプの線と塗りのカラーを選択することに加え、プロパティインスペクターには、線の幅とスタイルを指定するためのコントロールもあります。

これらのコントロールを使って既存のオブジェクトのペイント属性を変更するには、まずステージでオブジェクトを選択します。

カラーのライブプレビュー」も参照してください。

ツールパネルを使用した線および塗りのカラーの調整

ツールパネルの「線のカラー」および「塗りのカラー」コントロールは、描画ツールやペイントツールを使って作成される新しいオブジェクトのペイント属性を設定します。これらのコントロールを使って既存のオブジェクトのペイント属性を変更するには、まずステージでオブジェクトを選択します。

  • 「線のカラー」または「塗りのカラー」のコントロールをクリックして、色見本を選択します。

  • ポップアップウィンドウの「システムカラーピッカー」ボタンをクリックして、カラーを選択します。様々なカラーの上にマウスポインターを置いて、シェイプでのカラーのエフェクトをプレビューすることもできます。

  • カラーの 16 進値をボックスに入力します。

  • デフォルトのカラー設定(白の塗りと黒の線)に戻るには、ツールパネルの「白黒」ボタンをクリックします。

  • いずれかの線または塗りを削除するには、「カラーなし」ボタンをクリックします。

    注意:「カラーなし」ボタンは、楕円または矩形の作成時にのみ表示されます。線や塗りを使用せずにオブジェクトを作成することはできますが、既存のオブジェクトに対して「カラーなし」ボタンを使用することはできません。代わりに、既存の線または塗りを選択してそれを削除してください。

  • 塗りのカラーと線のカラーを入れ替えるには、ツールパネルの「カラーの入れ替え」ボタンをクリックします。

Animate CC では、色見本から線または塗りのカラーを変更すると、変更の状況をリアルタイムにプレビューできます。詳しくは、「カラーのライブプレビュー」を参照してください。

プロパティインスペクターを使用して単色の塗りを適用する

  1. ステージ上の閉じたオブジェクト選択します。複数のオブジェクトを選択することもできます。
  2. ウィンドウ/プロパティを選択します。
  3. カラーを選択するには、「塗りのカラー」コントロールをクリックし、次のいずれかを行います。

    • パレットからカラーを選択します。
    • カラーの 16 進値をボックスに入力します。

プロパティインスペクターを使用した線のカラー、スタイルおよび太さの選択

選択したオブジェクトの線のカラー、スタイル、および太さを変更するには、プロパティインスペクターの「線のカラー」コントロールを使用します。線のスタイルについては、Animate にあらかじめ組み込まれているスタイルから選択するか、カスタムスタイルを作成することができます。単色の塗りを選択するには、プロパティインスペクターの「塗りのカラー」コントロールを使用します。

  1. ステージ上のオブジェクトを 1 つまたは複数選択します(シンボルの場合は、最初にダブルクリックしてシンボル編集モードに入ります)。
  2. ウィンドウ/プロパティを選択します。
  3. 線のスタイルを選択するには、スタイルメニューをクリックし、オプションを選択します。カスタムスタイルを作成するには、プロパティインスペクターで「カスタム」をクリックし、線のスタイルダイアログボックスの各オプションを選択して「OK」をクリックします。
    注意:

    実線以外のスタイルを選択した場合、ファイルサイズが大きくなる可能性があります。

  4. 線の太さを選択するには、線スライダーを設定するか、テキストボックスに値を入力します。
  5. 線のヒント処理を有効にするには、「線のヒント処理」チェックボックスをオンにします。線のヒント処理を使用すると、線や曲線のアンカーの位置がピクセルと完全に一致するように調整され、水平または垂直の線がぼやけて表示されるのを防ぐことができます。
  6. パスの終端のスタイルを設定するには、「線端」オプションを選択します。

    なし

    線端をパスの終端と同一面に描画します。

    丸型

    線端をパスより線の幅の半分だけはみ出して描画する丸いキャップを追加します。

    四角

    線端をパスより線の幅の半分だけはみ出して描画する四角いキャップを追加します。

  7. (オプション)描画モードを「スムージング」に設定して鉛筆ツールまたはブラシツールで線を描画する場合は、Animate で描画する線を滑らかにする程度を指定するために、「スムージング」スライダーを使用します。

    デフォルトでは、スムージング値は 50 に設定されていますが、0 ~ 100 の値を指定できます。スムージングの値が大きいほど、作成される線は滑らかになります。

    注意:

    描画モードが「ストレート」または「インク」に設定されている場合、「スムージング」スライダーは無効になります。

  8. 2 つのパスセグメントが交わる方法を定義するには、「結合」オプションを選択します。開いているパスまたは閉じているパスに含まれる角を変更するには、パスを選択して他の結合オプションを選択します。
    マイター結合、丸型結合、ベベル結合

  9. マイター結合がべベル処理されるのを避けるには、マイターの限度を入力します。

    この値を超える長さの線は、とがらずに四角になります。例えば、3 ポイントの線に対してマイターの限度が 2 である場合、ポイントの長さが線の幅の 2 倍になると、Animate は限度ポイントを削除します。

    マイターの限度の適用

複数の線またはシェイプの線の調整

線のカラー、幅、および 1 つ以上の線のスタイル、またはシェイプアウトラインを変更するには、インクボトルツールを使用します。線またはシェイプアウトラインには単色だけを適用できます。グラデーションやビットマップは適用できません。

個々の線を選択する代わりに、インクボトルツールを使って複数のオブジェクトの線属性を一度に変更する方が簡単です。

  1. ツールパネルからインクボトルツールを選択します。
  2. 線のカラーを選択します。
  3. プロパティインスペクターから、線のスタイルと太さを選択します。
  4. 線の修正内容を適用するには、ステージ上のオブジェクトをクリックします。

線と塗りのコピー

スポイトツールを使用すれば、1 つのオブジェクトの塗り属性または線属性をコピーし、ただちにそれを別のオブジェクトに適用できます。また、スポイトツールを使用すれば、ビットマップ内のイメージを抽出して、それを塗りに使用することもできます。

  1. 1 つの線または塗り領域の属性を別の線または塗り領域に適用するには、スポイトツールを選択して、適用する属性の線または塗り領域をクリックします。

    線をクリックすると、ツールは自動的にインクボトルツールに変化します。塗り領域をクリックすると、ツールは自動的にバケツツールに変化し、「塗りの固定」ボタンがオンになります。

  2. 新しい属性を適用する線または塗り領域をクリックします。

バケツツールによるペイントされた領域の変更

バケツツールは、閉じている領域をカラーで塗りつぶします。このツールを使用して、次のような処理を行うことができます。

  • 空白の領域を塗りつぶして、既にペイントされた領域のカラーを変更する。

  • 単色、グラデーションおよびビットマップの塗りを使ってペイントする。

  • 完全には閉じていない領域を塗りつぶすためにバケツツールを使用する。

  • バケツツールを使用するとき、Animate によってシェイプアウトラインの隙間を自動的に埋める。

  1. ツールバーからバケツツールを選択します。
  2. 塗りのカラーとスタイルを選択します。
  3. ツールパネルの一番下に表示される隙間の大きさモディファイアをクリックし、隙間の大きさオプションを選択します。
    • シェイプを塗りつぶす前に手作業で隙間を埋める場合は、「隙間を閉じない」を選択します。複雑な描画の場合、手作業で隙間を埋める方が早く処理できるかもしれません。
    • 「閉じる」オプションを選択すると、隙間を持つシェイプが Animate によって自動的に塗りつぶされます。
    注意:

    隙間が大きすぎる場合は、手動で閉じる必要があります。

  4. 塗りつぶすシェイプまたは閉じた領域をクリックします。

バケツツールオプション

バケツツールを使用して、オブジェクトの輪郭をクリックしてドラッグし、選択した色で塗りつぶすことができます。輪郭内の任意の方向にツールをクリックしてドラッグできます。バケツツールは、輪郭内で点がキャプチャされている場所を塗りつぶします。

バケツのプロパティ
バケツのプロパティ

すべての領域を塗りつぶす」チェックボックスをオンにすると、ドラッグ中に、選択したすべての領域がその色で塗りつぶされます。

デフォルトでは、「すべての領域を塗りつぶす」オプションはオフになっています。このモードでは、バケツツールは、特定の色のみを塗りつぶします。

「すべての領域を塗りつぶす」が選択されていない場合(デフォルト)

  • このモードでは、ユーザーがバケツを使用してマウスをクリックすると、置き換えられる色を確認できます。ここでは、緑色が赤で置き換えられる場合を考えてみましょう。
  • このオプションは、ユーザーがアートワークをドラッグするにつれて、緑色で塗りつぶされた輪郭のみを置き換えます。
  • ユーザーが空の閉じた輪郭をドラッグすると、赤で塗りつぶされます。
  • マウスクリック時に基になる輪郭が空だった場合、このオプションは、ユーザーがバケツツールをドラッグすると、空の輪郭を塗りつぶします。

「すべての領域を塗りつぶす」が選択されている場合

すべての領域が選択した色で塗りつぶされます。前述の説明の場合、赤になります。

グラデーションおよびビットマップの塗りの変形

グラデーションまたはビットマップの塗りのサイズ、方向、中央を調整することにより、塗りを変形できます。

  1. ツールパネルからグラデーション変形ツール を選択します。ツールパネルにグラデーション変形ツールが表示されていない場合は、自由変形ツールをクリックしてマウスボタンを押したままにし、表示されるメニューからグラデーション変形ツールを選択します。
  2. グラデーションまたはビットマップで塗りつぶされた領域をクリックします。境界ボックスと編集ハンドルが表示されます。ポインターをいずれかのハンドルの上に重ねると、カーソルの形が変化してハンドルの機能を示します。

    中心点

    中心点ハンドルのロールオーバーアイコンは、4 方向の矢印です。

    焦点

    焦点ハンドルが表示されるのは、放射状のグラデーションを選択した場合のみです。焦点ハンドルのロールオーバーアイコンは、反転した三角形です。

    サイズ

    サイズハンドル(境界ボックスの先端中央にあるハンドルアイコン)のロールオーバーアイコンは、内側に矢印の付いた円です。

    回転

    グラデーションの回転を調整します。回転ハンドル(境界ボックスの先端下にあるハンドルアイコン)のロールオーバーアイコンは、4 つの矢印が円の形をしています。

    グラデーションの幅を調整します。幅ハンドル(四角形のハンドル)のロールオーバーアイコンは、両方向の矢印です。

    Shift キーを押すと、線状グラデーションの塗りの移動方向が 45 度の倍数に制限されます。

    放射状グラデーションのコントロール

    A. 中心点 B. 幅 C. 回転 D. サイズ E. 焦点 

  3. グラデーションまたはビットマップの塗りは、次のような方法で変更できます。
    • グラデーションまたはビットマップの塗りの中心の位置を変更するには、中心点をドラッグします。

    • グラデーションまたはビットマップの塗りの幅を変更するには、境界線の横の四角いハンドルをドラッグします。このオプションは塗りのサイズだけを変更します。塗りを含んでいるオブジェクトのサイズは変更されません。

    • グラデーションまたはビットマップの塗りの高さを変更するには、境界線の下の四角いハンドルをドラッグします。

    • グラデーションまたはビットマップの塗りを回転させるには、隅にある円形の回転ハンドルをドラッグします。放射状のグラデーションまたは塗りの場合も、境界線の下にあるハンドルをドラッグして回転させることができます。

    • 線状のグラデーションまたは塗りを伸縮するには、境界線の中央にある四角形のハンドルをドラッグします。

    • 放射状グラデーションの焦点を変更するには、境界線上の中央にある円形のハンドルをドラッグします。

    • シェイプ内の塗りの形状を歪曲または傾斜させるには、境界線の上側または右側にある円形のハンドルの 1 つをドラッグします。

    • シェイプ内に同じビットマップを複数並べてタイリング表示するには、塗りを伸縮させます。

    注意:

    大きな塗りやステージの端付近の塗りを操作するためにすべてのハンドルを表示するには、表示/ペーストボードを選択します。

ステージを塗りつぶすグラデーションまたはビットマップの固定

グラデーションまたはビットマップの塗りを固定すると、その塗りがステージ全体に広がり、塗りでペイントされたオブジェクトが、下にあるグラデーションやビットマップを示すマスクであるかのような効果を出せます。

ブラシツールまたはバケツツールで「塗りの固定」を選択してペイントすると、ビットマップまたはグラデーションの塗りが、ステージ上の複数のオブジェクトの上に広がります。

「塗りの固定」を使用すると、1 つのグラデーションまたはビットマップの塗りが、ステージ上の個々のオブジェクトに適用されるような外観になります。

グラデーションの塗りの固定の使用

  1. ブラシツールまたはバケツツールを選択し、塗りにグラデーションまたはビットマップを選択します。
  2. カラーパネルのタイプメニューから、「線状」または「放射状」を選択します。
  3. 塗りの固定ボタン をクリックします。
  4. まず、塗りの中心となる領域をペイントした後、他の領域に移動します。

ビットマップの塗りの固定の使用

  1. 使用するビットマップを選択します。
  2. カラーパネルのタイプメニューから、「ビットマップ」を選択します。
  3. ブラシツールまたはバケツツールを選択します。
  4. 塗りの固定ボタン をクリックします。
  5. まず、塗りの中心となる領域をペイントした後、他の領域に移動します。
アドビのロゴ

アカウントにログイン