Animate でのクラシックトゥイーンアニメーションの操作

クラシックトゥイーンは、Animate でアニメーションを作成する従来の方法です。このトゥイーンは、新しい方法のモーショントゥイーンと似ていますが、モーショントゥイーンよりも作成方法が複雑で、柔軟性に劣ります。ただし、クラシックトゥイーンでは、モーショントゥイーンではできないようなアニメーションの制御を行うことができます。大部分のユーザーは新しいモーショントゥイーンの利用を選択しますが、クラシックトゥイーンの使用を必要とするユーザーもいます。両者の違いについて詳しくは、モーショントゥイーンとクラシックトゥイーンの違いを参照してください。

始める前に:

クラシックトゥイーンの操作を開始する前に、以下の点に留意してください。

• クラシックトゥイーンは、Animate でトゥイーンアニメーションを作成する従来の方法です。新しくより簡単な方法として、モーショントゥイーンを使用する方法があります。モーショントゥイーンアニメーションを参照してください。

• クラシックトゥイーンでは 3D プロパティをトゥイーンすることはできません。

クラシックトゥイーンアニメーションのサンプルについては、Animate サンプルページ（www.adobe.com/go/learn_fl_samples_jp）を参照してください。次のサンプルを利用できます。

• ドロップシャドウのアニメーション：サンプルを使用するには、サンプル zip ファイルをダウンロードして解凍し、Graphics¥AnimatedDropShadow フォルダーに移動します。

• アニメーションとグラデーション：サンプルを使用するには、サンプル ZIP ファイルをダウンロードして解凍し、Graphics¥AnimationAndGradients フォルダーに移動します。

 Animate のほとんどの作業と同じように、アニメーションに ActionScript は必要ありません。ただし、アニメーションの作成に ActionScript を使用することもできます。

クラシックトゥイーンアニメーションでの変更はキーフレームに定義されます。トゥイーンアニメーションでは、アニメーションの重要な箇所にだけキーフレームを定義します。キーフレーム間のフレームのコンテンツは Animate によって自動的に作成されます。トゥイーンアニメーションの補間フレームは、明るい青で表示され、キーフレーム間には矢印が示されます。Animate ドキュメントでは各キーフレームでシェイプが保存されるので、キーフレームは、アートワーク内で何らかの変更が必要な箇所についてのみ作成するようにしてください。

キーフレームはタイムラインで示されます。コンテンツのあるキーフレームは塗りつぶされた円で表され、空のキーフレームは空の円で表されます。同じレイヤーに続きのフレームを追加すると、それらのフレームのコンテンツはキーフレームと同じになります。

クラシックトゥイーンで編集できるのはキーフレームのみです。トゥイーンフレームは表示できますが、直接編集することはできません。トゥイーンフレームを編集するには、開始キーフレームまたは終了キーフレームを変更するか、両キーフレーム間に新しいキーフレームを挿入します。アイテムをライブラリパネルからステージまでドラッグして、そのアイテムを現在のキーフレームに追加する

一度に複数のフレームの表示や編集を行うには、オニオンスキン機能の使用を参照してください。

 この機能は、従来のクラシックトゥイーンのキーフレームの作成に関するものです。新しいモーショントゥイーンのプロパティキーフレームについて詳しくは、トゥイーンアニメーションの作成を参照してください。

キーフレームの作成

タイムラインでのフレームの挿入

• 新しいフレームを挿入するには、挿入／タイムライン／フレームを選択します。

• キーフレームを作成するには、挿入／タイムライン／キーフレームを選択するか、キーフレームを配置するフレームを右クリック（Windows）または Control キーを押しながらクリック（Mac OS）して、「キーフレームの挿入」を選択します。

• 空白キーフレームを作成するには、挿入／タイムライン／空白キーフレームを選択するか、キーフレームを配置するフレームを右クリック（Windows）または Control キーを押しながらクリック（Mac OS）して、「空白キーフレームを挿入」を選択します。

フレームまたはキーフレームの削除または変更

• フレーム、キーフレーム、またはフレームシーケンスを削除するには、対象のフレーム、キーフレーム、またはフレームシーケンスを選択し、右クリック（Windows）または Control キーを押しながらクリック（Mac OS）し、「フレームの削除」を選択します。削除したフレームの周囲のフレームは変更されません。

• キーフレームまたはフレームシーケンスとそのコンテンツを移動するには、対象のキーフレームまたはフレームシーケンスを必要な場所にドラッグします。

• キーフレームの継続時間を延長するには、Alt キー（Windows）または Option キー（Mac OS）を押しながら、そのキーフレームを新しいシーケンスの最終フレームまでドラッグします。

• フレームまたはフレームシーケンスをコピーしてペーストするには、対象のフレームまたはフレームシーケンスを選択して、編集／タイムライン／フレームのコピーを選択します。フレームまたはフレームシーケンスを選択して、編集／タイムライン／フレームのペーストを選択します。コピーしたフレームとまったく同じ数のフレームをターゲットのタイムラインにペーストして置き換えるには、「フレームをペーストして上書き」オプションを使用します。

• キーフレームをフレームに変換するには、対象のキーフレームを選択し、修正／タイムライン／キーフレームを削除を選択するか、対象のキーフレームを右クリック（Windows）または Control キーを押しながらクリック（Mac OS）し、「キーフレームを削除」を選択します。削除したキーフレームと、その次のキーフレームまでのフレームすべてが、削除したキーフレームの直前にあるフレームのコンテンツで置き換えられます。

• キーフレームまたはフレームシーケンスをドラッグによってコピーするには、対象のキーフレームあるいはフレームシーケンスを選択し、Alt キー（Windows）または Option キー（Mac OS）を押しながら、新しい位置までドラッグします。

• トゥイーンシーケンスの長さを変更するには、開始キーフレームまたは終了キーフレームを左右のいずれかの方向にドラッグします。

• ライブラリアイテムを現在のキーフレームに追加するには、そのアイテムをライブラリパネルからステージ上にドラッグします。

• アニメーションシーケンスを反転させるには、1 つまたは複数のレイヤー上で適切なフレームを選択して、修正／タイムライン／フレームの反転を選択します。この場合、シーケンスの最初と最後にキーフレームが必要です。

インスタンス、グループまたはテキストへのクラシックトゥイーンアニメーションの追加

 この機能は、従来のクラシックトゥイーンの作成に関するものです。新しいモーショントゥイーンの作成について詳しくは、トゥイーンアニメーションの作成を参照してください。

インスタンス、グループおよびタイプのプロパティの変化をトゥイーンするには、クラシックトゥイーンを使用します。Animate では、インスタンス、グループおよびタイプの位置、サイズ、回転、傾斜をトゥイーンできます。また、Animate のインスタンスとタイプのカラーをトゥイーンして、カラーのグラデーションを作成したり、インスタンスをフェードインまたはフェードアウトさせることもできます。

グループやタイプのカラーをトゥイーンするには、それらをシンボルに変換します。テキストブロック内の個々の文字を独立にアニメーション処理するには、各文字を個別のテキストブロックに配置する必要があります。

クラシックトゥイーンを適用して 2 つのキーフレーム間のフレームの数を変更する場合、Animate は自動的にもう一度フレームをトゥイーンします。または、どちらかのキーフレームのグループまたはシンボルを移動する場合、Animate は自動的にもう一度フレームをトゥイーンします。

クラシックトゥイーンアニメーションの作成

クラシックトゥイーンを使用してキャラクターに活気を与える

クラシックトゥイーンでキャラクターを活性化させます。アニメーションに命を吹き込みたい場合は、この例の最後にあるチュートリアルをご覧になり、次の手順に従ってください。

クラシックトゥイーンを使用してキャラクターに活気を与える方法

XML ファイルとして保存したクラシックトゥイーンの操作

Animate では、クラシックトゥイーンを XML ファイルとして操作できます。Animate ではネイティブで、任意のクラシックトゥイーンに対して次のコマンドを適用できます。

• XML 形式でモーションをコピー

• XML 形式でモーションを書き出し

• XML 形式でモーションを読み込み

XML 形式でモーションをコピー

ステージ上の指定したフレームにある任意のオブジェクトに適用されているモーションのプロパティをコピーできます。 

1. クラシックトゥイーンを作成します。

2. タイムライン上でキーフレームを選択します。

3. コマンド／XML 形式でモーションをコピーを選択します。

モーションのプロパティが XML データとしてクリップボードにコピーされます。任意のテキストエディターを使用して、XML ファイルを操作できます。

XML 形式でモーションを書き出し

ステージ上の任意のオブジェクトに適用されているモーションのプロパティを、保存可能な XML ファイルに書き出すことができます。

XML 形式でモーションを読み込み

モーションのプロパティが定義された既存の XML ファイルを読み込むことができます。

モーションガイドレイヤーの作成

クラシックトゥイーンアニメーションのオブジェクトの動きを制御するには、モーションガイドレイヤーを作成します。

モーショントゥイーンレイヤーまたはインバースキネマティックポーズレイヤーをガイドレイヤーにドラッグすることはできません。

パスに沿ったクラシックトゥイーンアニメーションの作成

 この機能は、従来のクラシックトゥイーンの操作に関するものです。モーションパスを利用した新しいモーショントゥイーンの使用について詳しくは、トゥイーンアニメーションのモーションパスの編集を参照してください。

モーションガイドレイヤーを使用すると、トゥイーンしたインスタンス、グループ、またはテキストブロックをアニメーション化するときのパスを描画できます。複数のレイヤーをモーションガイドにリンクして、複数のオブジェクトを同じパスに沿って移動できます。モーションガイドレイヤーにリンクされた標準レイヤーは、ガイド対象レイヤーになります。

クラシックトゥイーンアニメーションのモーションパスの作成

可変線幅と可変線カラーに基づいたアニメーションガイドについて詳しくは、アニメーションガイドを参照してください。

レイヤーのモーションガイドレイヤーへのリンク

モーションガイドレイヤーからのレイヤーのリンク解除

クラシックトゥイーンアニメーションのプロパティのペースト

 この機能は、従来のクラシックトゥイーンのプロパティのペーストに関するものです。新しいモーショントゥイーンのプロパティのペーストについて詳しくは、モーショントゥイーンプロパティのコピーとペーストを参照してください。

「モーションをペースト」コマンドを使用すると、クラシックトゥイーンがコピーされ、特定のプロパティだけが別のオブジェクトにペーストされます。

イージングプリセットの作成

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

頻繁に使用する一連のイージングプリセットがクラシックトゥイーン用に用意されています。イージングプリセットのリストからプリセットを選択して、特定のプロパティに適用できます。

HTML5 Canvas ドキュメントタイプを使用している場合は、イージングプリセット用に最適化された js 出力ファイルを取得できます。HTML5 Canvas では出力の作成時に Tween JS のイージング関数が使用されます。 

カスタムイージングのクラシックトゥイーンアニメーションへの適用

 この機能は、従来のクラシックトゥイーンへのイージングの追加に関するものです。新しいモーショントゥイーンへのイージングの追加について詳しくは、トゥイーンアニメーションのイージングを参照してください。

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

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

カスタムイージングの保存

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

 カスタマイズされたイージングプリセットは、同じドキュメントタイプでのみ再利用できます。

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

CustomEase ダイアログボックスのその他のコントロール

これらのボタンを使用すると、カスタムイージングダイアログボックスで定義した、現在のすべての速度曲線を使用して、ステージ上のアニメーションをプレビューできます。

現在のカスタムイージングを削除します。 

イージングプリセットに対して行った変更を保存して適用します。 

このボタンを使用すると、速度曲線をデフォルトの直線の状態にリセットします。

ダイアログボックスの右下隅に表示された数値は、選択したコントロールポイントのキーフレームと位置を示します。コントロールポイントを選択していない場合、値は表示されません。

線にコントロールポイントを追加するには、対角線を 1 回クリックします。コントロールポイントの位置をドラッグすると、オブジェクトのモーションを正確に制御することができます。

四角形のハンドルによって表されるフレームインジケーターを使って、オブジェクトの速度を上げるか下げる位置をクリックします。コントロールポイントの四角形のハンドルをクリックすると、そのコントロールポイントが選択され、どちらかの側に方向点が表示されます。方向点は白丸で表されます。それらを配置するには、コントロールポイントまたはその方向点をマウスでドラッグするか、キーボードの矢印キーを使用します。

ヒント：デフォルトでは、コントロールポイントはグリッドに吸着します。X キーを押しながらコントロールポイントをドラッグすると、吸着をオフにすることができます。

任意のコントロールポイント以外の場所で曲線の領域をクリックすると、その場所に曲線のコントロールポイントが追加されます。この操作では、曲線のシェイプは変更されません。曲線およびコントロールポイント以外の場所をクリックすると、現在選択されているコントロールポイントの選択が解除されます。

カスタムイージングの追加

 カスタムイージングダイアログボックスを使用する場合、編集フィールドに -- が表示されます。編集またはポップアップスライダーを使用する場合、カスタムイージンググラフは同等の曲線に設定され、「すべてのプロパティに対して同じ設定を使用する」チェックボックスが選択されます。

イージング曲線のコピーとペースト

• 現在のイージング曲線をコピーするには、Ctrl + C キー（Windows）または Command + C キー（Mac OS）を押します。

• コピーした曲線を別のイージング曲線に配置するには、Ctrl + V キー（Windows）または Command + V キー（Mac OS）を押します。

  イージング曲線をコピー＆ペーストできます。コピーされた曲線は、Animate アプリケーションを終了するまで使用できます。

サポートされないイージング曲線

特定のタイプのイージング曲線はサポートされません。グラフのいずれの部分も、直線的でない曲線（円など）を表すことはできません。

カスタムイージングダイアログボックスを使用すると、無効な曲線を描画する位置にコントロールポイントまたはコントロールハンドルが移動するのを避けることができます。

• すべてのポイントはグラフ上に存在する必要があります。グラフの境界を越えてコントロールポイントを移動することはできません。

• 曲線のすべてのセグメントは、グラフ内に存在する必要があります。グラフの境界からはみ出さないようにするため、曲線のシェイプは統合されます。