シェイプトゥイーン

  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 は、その間のフレームの中間シェイプを補間し、あるシェイプが別のシェイプに変形するアニメーションを作成します。

Animate を使用すると、均一な実線および均一でない装飾的な線にシェイプトゥイーンを追加できます。また、可変線幅ツールを使用して強調した線にシェイプトゥイーンを追加することもできます。使用するシェイプで試して、結果を判断してください。シェイプヒントを使用して、開始シェイプのどのポイントが終了シェイプの特定のポイントに対応するかを Animate に指示します。

シェイプトゥイーン内のシェイプの位置とカラーもトゥイーンできます。

シェイプトゥイーンをグループ、インスタンス、またはビットマップイメージに適用するには、最初にそのエレメントを分解する必要があります。シェイプトゥイーンをテキストに適用するには、テキストを 2 回分解してオブジェクトに変換します。シンボルインスタンスの分解を参照してください。

シェイプトゥイーンの作成

次の手順に、タイムラインのフレーム 1 からフレーム 30 の間にシェイプを作成する方法を示します。ただし、選択するタイムラインの任意の部分にトゥイーンを作成できます。

  1. フレーム 1 で、矩形ツールを使用して正方形を描画します。
  2. 同じレイヤーのフレーム 30 を選択し、挿入/タイムライン/空白キーフレームを選択するか F7 キーを押して、空白キーフレームを追加します。

  3. ステージで、楕円ツールを使用してフレーム 30 に円を描画します。

    これで、フレーム 1 には正方形で表示されたキーフレームが作成され、フレーム 30 には円で表示されたキーフレームが作成されます。

  4. タイムラインで、2 つのシェイプが含まれるレイヤー内にある 2 つのキーフレーム間のフレームの 1 つを選択します。

  5. 挿入/シェイプトゥイーンを選択します。

    Animate によって、2 つのキーフレーム間にあるすべてのフレーム内のシェイプが補間されます。

  6. トゥイーンをプレビューするには、タイムライン内のフレームに再生ヘッドをスクラブするか、Enter キーを押します。

  7. シェイプに加えてモーションをトゥイーンするには、フレーム 30 のシェイプを、フレーム 1 とは異なる位置に移動します。

    Enter キーを押してアニメーションをプレビューします。

  8. シェイプのカラーをトゥイーンするには、フレーム 1 のシェイプをフレーム 30 のシェイプとは異なるカラーにします。
  9. トゥイーンにイージングを追加するには、フレームの 1 つを選択し、プロパティインスペクターの「イージング」フィールドに値を入力します。

    トゥイーンの先頭にイージングを適用するには、負の値を入力します。トゥイーンの最後にイージングを適用するには、正の値を入力します。

イージングプリセットまたはカスタムイージングの作成

イージングプリセットは、ステージ上のオブジェクトに適用できる設定済みのイージングです。

よく使用される一連のイージングプリセットがシェイプトゥイーン用に用意されています。イージングプリセットのリストからプリセットを選択して、特定のプロパティに適用できます。 また、シェイプトゥイーンにはカスタムイージングを適用することもできます。

  1. Animate のタイムラインでシェイプトゥイーンを含むレイヤーをクリックします。

  2. プロパティパネルで「トゥイーン」カテゴリをクリックしてトゥイーンのプロパティを開きます。

    トゥイーンのプロパティ
    トゥイーンのプロパティ

  3. イージングの種類ポップアップダイアログから、任意のイージングプリセットを選択します。プリセットの種類をダブルクリックして適用します。 

    クラシックイージングを適用する場合は、スライダーを動かしてイージングの強さを変更することもできます。 

    イージングプリセットの種類
    イージングプリセットの種類

  4. カスタムイージングを適用する場合は、「イージング」の横にある編集アイコンをクリックします。

    カスタムイージングダイアログに、時間経過に沿ったモーションの大きさを表すグラフが表示されます。水平軸方向にフレームが表示され、垂直軸方向に変化のパーセンテージが表示されます。最初のキーフレームは 0%、最後のキーフレームは 100% として表されます。

    オブジェクトの変化の割合は、グラフの曲線の傾きによって表されます。曲線が水平である(傾きがない)場合、速度はゼロです。曲線が垂直である場合は、瞬間的な変化の発生を示します。

    速度が一定であることを表すカスタムイージンググラフ
    速度が一定であることを表すカスタムイージンググラフ。このダイアログを開くには、シェイプトゥイーン内のフレームを選択して、プロパティインスペクターの「イージング」セクションにある「編集」ボタンをクリックします。

    カスタムイージングを保存し、カスタムリストからカスタマイズされたイージングを選択して再利用できます。変更をおこなったら、編集モードで「保存して適用」ボタンをクリックします。次のスクリーンショットでは、カスタマイズされたイージングプリセットが「MyEase1」という名前で保存されています。

    カスタマイズされたイージングプリセット
    カスタマイズされたイージングプリセット

    このプリセットイージングをタイムラインの複数のスパンに使用するには、目的のスパンを選択して、プリセットイージングを適用します。

    複数のスパンのイージングプリセット
    複数のスパンのイージングプリセットの適用

シェイプヒントを使用したシェイプ変更の制御

より複雑でわかりにくい形状の変更を操作する場合は、シェイプヒントを使用できます。シェイプヒントを見ると、開始時のシェイプと終了時のシェイプを対応付けるポイントがわかります。例えば、表情が変わるように顔の絵をトゥイーンする場合、シェイプヒントを使用して両方の目にマークを付けます。シェイプヒントを使用すると、トゥイーン時に形状が変化して顔が変わっても、それぞれの目は認識可能で、別々に変化します。

文字のシェイプヒント
文字のシェイプヒント

シェイプヒントには、どのポイントが開始時のシェイプと終了時のシェイプに対応するかを識別するための英字(a ~ z)が含まれます。最大 26 個のシェイプヒントを使用できます。

シェイプヒントは、最初のキーフレームでは黄色、最後のキーフレームでは緑色、曲線上にあるときは赤で表示されます。

次の内容を確認しておくと、シェイプトゥイーンで最良の効果を得ることができます。

  • 複雑なシェイプトゥイーンでは、中間シェイプを作成し、開始時と終了時のシェイプを定義するだけではなく、中間形状もトゥイーンします。

  • シェイプヒントは論理的に定義してください。例えば、3 つのシェイプヒントを使用して 1 つの三角形を表す場合、トゥイーン前の三角形とトゥイーン後の三角形のシェイプヒントは同じ順序である必要があります。最初のキーフレームで a、b、c という順序になっている場合、2 つ目のキーフレームで a、c、b という順序にすることはできません。

  • シェイプヒントを活用するには、シェイプの左上隅から開始して反時計回りに並べます。

シェイプヒントの使用

  1. シェイプのトゥイーンシーケンスで最初のキーフレームを選択します。
  2. 修正/シェイプ/シェイプヒントの追加を選択します。開始時のシェイプヒントが a という文字の付いた赤い円としてシェイプに表示されます。

  3. マークを付ける場所までシェイプヒントを移動します。
  4. トゥイーンシーケンスで最後のキーフレームを選択します。終了時のシェイプヒントが a という文字の付いた緑色の円としてシェイプに表示されます。

  5. 開始時のシェイプヒントと対応する場所に、終了時のシェイプのシェイプヒントを移動します。

  6. アニメーションを再生して、シェイプヒントによるシェイプトゥイーン変更の効果を確認します。シェイプヒントを移動してトゥイーンを細かく調整します。
  7. シェイプヒントをさらに追加するには、この手順を繰り返します。新しいシェイプヒントには、bc... という順で英字が付けられていきます。

すべてのシェイプヒントの表示

  1. 表示/シェイプヒントの表示を選択します。「シェイプヒントの表示」を選択するには、シェイプヒントを含むレイヤーとキーフレームをアクティブにする必要があります。

シェイプヒントの削除

  1. ステージの外へドラッグします。

すべてのシェイプヒントの削除

  1. 修正/シェイプ/すべてのヒントを削除を選択します。

可変線幅を持つ線へのシェイプトゥイーンの追加

Animate を使用すると、可変線幅を持つ線にシェイプトゥイーンを追加できます。以前の Animate では、均一な実線およびシェイプに対するシェイプトゥイーンの作成だけがサポートされていました。そのため、デザイナーが均一でない線(可変線幅ツールを使用して強調した線など)に対してシェイプトゥイーンを作成する処理が制限されていました。可変線幅を持つ線のトゥイーンによって、Animate  におけるデザインの可能性が大幅に広がります。

装飾的な線へのシェイプトゥイーンの追加は、シェイプまたは均一な実線に対するトゥイーンと異なる点はありません。このワークフローでは、トゥイーンの開始と終了のシェイプを定義する必要があります。Animate では、トゥイーンの移行のフレームを作成します。

可変線幅ツールについて

可変線幅ツールを使用すると、均一な実線を強調して、美しく装飾的な線を作成できます。可変線幅ツールを使用した線の強調方法について詳しくは、可変線幅ツールを使用した線とシェイプの強調を参照してください。

可変線幅の線へのシェイプトゥイーンの追加

  1. Animate CC で、ツールを使用して線を描画します。

    線の値を 2 pixel に設定した線
    線ツールを使用してステージに描画した線(線の値を 2 pixel に設定)

  2. 可変線幅ツールを使用して、線の中央部分に幅を追加します(次の図を参照)。可変線幅ツールの使用について詳しくは、可変線幅ツールを使用した線の強調を参照してください。

    値が 68.0 pixel の可変線幅の線
    可変線幅ツールを使用して作成した可変線幅の線(線の値を 68.0 pixel に設定)

  3. タイムライン上の別のフレーム(例えば、フレーム 30)を選択し、トゥイーンの線の終了のシェイプを作成します。

    シェイプトゥイーンの終了キーフレームに追加した終了のシェイプ
    シェイプトゥイーンの終了キーフレームに追加した終了のシェイプ

  4. 1 ~ 30 の任意のフレームを右クリックし、「シェイプトゥイーンを作成」を選択します。

可変線幅プロファイルへのシェイプトゥイーンの追加

Animate を使用すれば、可変線幅プロファイルとして保存した装飾的な線にシェイプトゥイーンを追加することもできます。トゥイーンの開始と終了のシェイプに線幅プロファイルを適用できます。また、スムーズなシェイプトゥイーンを Animate で作成できます。

線幅プロファイルは、可変線幅ツールを使用して作成および保存された装飾的な線であり、簡単に再利用できます。線幅プロファイルについて詳しくは、線幅プロファイルの保存を参照してください。

可変線幅プロファイルにシェイプトゥイーンを追加するには、次の手順を実行します。

  1. Animate で、ツールを使用してステージに線を描画します。

    値が 2 pixel の線
    線ツールを使用してステージに描画した線(線の値を 2 pixel に設定)

  2. プロパティインスペクターで、線幅ドロップダウンから線幅プロファイルを選択して適用します。

    線の値が 68.0 pixel の可変線幅の線
    可変線幅ツールを使用して作成した可変線幅の線(線の値を 68.0 pixel に設定)

  3. タイムライン上の別のフレーム(例えば、フレーム 30)を選択し、プロパティインスペクターの線幅ドロップダウンから目的の線幅プロファイルを選択します。

  4. 選択した線幅プロファイルにシェイプトゥイーンを追加するには、1 ~ 30 の任意のフレームを右クリックし、「シェイプトゥイーンを作成」を選択します。

アドビのロゴ

アカウントにログイン