マニュアルキャンセル

シェイプトゥイーン

検索

最終更新日 : 2023年5月24日

シェイプトゥイーンでは、タイムラインの特定のフレームでベクターシェイプを描画します。そして、別の特定のフレームでそのシェイプを変更するか、または別のシェイプを描画します。Animate は、その間のフレームの中間シェイプを補間し、あるシェイプが別のシェイプに変形するアニメーションを作成します。

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

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

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

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

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

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

これで、フレーム 1 には正方形で表示されたキーフレームが作成され、フレーム 30 には円で表示されたキーフレームが作成されます。
タイムラインで、2 つのシェイプが含まれるレイヤー内にある 2 つのキーフレーム間のフレームの 1 つを選択します。
挿入／シェイプトゥイーンを選択します。

Animate によって、2 つのキーフレーム間にあるすべてのフレーム内のシェイプが補間されます。
トゥイーンをプレビューするには、タイムライン内のフレームに再生ヘッドをスクラブするか、Enter キーを押します。
シェイプに加えてモーションをトゥイーンするには、フレーム 30 のシェイプを、フレーム 1 とは異なる位置に移動します。

Enter キーを押してアニメーションをプレビューします。
シェイプのカラーをトゥイーンするには、フレーム 1 のシェイプをフレーム 30 のシェイプとは異なるカラーにします。
トゥイーンにイージングを追加するには、フレームの 1 つを選択し、プロパティインスペクターの「イージング」フィールドに値を入力します。

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

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

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

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

Animate のタイムラインでシェイプトゥイーンを含むレイヤーをクリックします。
プロパティパネルで「トゥイーン」カテゴリをクリックしてトゥイーンのプロパティを開きます。

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

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

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

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

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

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

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

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

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

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

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

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

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

複雑なシェイプトゥイーンでは、中間シェイプを作成し、開始時と終了時のシェイプを定義するだけではなく、中間形状もトゥイーンします。
シェイプヒントは論理的に定義してください。例えば、3 つのシェイプヒントを使用して 1 つの三角形を表す場合、トゥイーン前の三角形とトゥイーン後の三角形のシェイプヒントは同じ順序である必要があります。最初のキーフレームで a、b、c という順序になっている場合、2 つ目のキーフレームで a、c、b という順序にすることはできません。
シェイプヒントを活用するには、シェイプの左上隅から開始して反時計回りに並べます。

シェイプヒントの使用

シェイプのトゥイーンシーケンスで最初のキーフレームを選択します。
修正／シェイプ／シェイプヒントの追加を選択します。開始時のシェイプヒントが a という文字の付いた赤い円としてシェイプに表示されます。
マークを付ける場所までシェイプヒントを移動します。
トゥイーンシーケンスで最後のキーフレームを選択します。終了時のシェイプヒントが a という文字の付いた緑色の円としてシェイプに表示されます。
開始時のシェイプヒントと対応する場所に、終了時のシェイプのシェイプヒントを移動します。
アニメーションを再生して、シェイプヒントによるシェイプトゥイーン変更の効果を確認します。シェイプヒントを移動してトゥイーンを細かく調整します。
シェイプヒントをさらに追加するには、この手順を繰り返します。新しいシェイプヒントには、b、c... という順で英字が付けられていきます。

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

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

シェイプヒントの削除

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

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

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

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

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

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

可変線幅ツールについて

可変線幅ツールを使用すると、均一な実線を強調して、美しく装飾的な線を作成できます。

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

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

線ツールを使用してステージに描画した線（線の値を 2 pixel に設定）
可変線幅ツールを使用して、線の中央部分に幅を追加します（次の図を参照）。可変線幅ツールの使用について詳しくは、可変線幅ツールを使用した線の強調を参照してください。

可変線幅ツールを使用して作成した可変線幅の線（線の値を 68.0 pixel に設定）
タイムライン上の別のフレーム（例えば、フレーム 30）を選択し、トゥイーンの線の終了のシェイプを作成します。

シェイプトゥイーンの終了キーフレームに追加した終了のシェイプ
1 ～ 30 の任意のフレームを右クリックし、「シェイプトゥイーンを作成」を選択します。

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

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

線幅プロファイルは、可変線幅ツールを使用して作成および保存された装飾的な線であり、簡単に再利用できます。可変線幅プロファイルにシェイプトゥイーンを追加するには、次の手順を実行します。

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

線ツールを使用してステージに描画した線（線の値を 2 pixel に設定）
プロパティインスペクターで、線幅ドロップダウンから線幅プロファイルを選択して適用します。

可変線幅ツールを使用して作成した可変線幅の線（線の値を 68.0 pixel に設定）
タイムライン上の別のフレーム（例えば、フレーム 30）を選択し、プロパティインスペクターの線幅ドロップダウンから目的の線幅プロファイルを選択します。
選択した線幅プロファイルにシェイプトゥイーンを追加するには、1 ～ 30 の任意のフレームを右クリックし、「シェイプトゥイーンを作成」を選択します。