新しい Edge Animate プロジェクトを作成する方法は 2 つあります。最初のオプションは、ようこそ画面で「新規作成」をクリックすることです。これにより、空白のステージが含まれる新しい Edge Animate プロジェクトが作成されます。新しい Edge Animate プロジェクトを作成する 2 つ目の方法は、ファイルメニューからです。「ファイル」をクリックして「新規作成」をクリックすると、同じことができます。

注意:

または、キーボードショートカットを使用することもできます:Ctrl+N(Windows)または Command+N(Mac)。

どちらの方法を選択しても、Edge Animate 内に新しいプロジェクトが開かれます。このプロジェクトには基本的に 1 つの空白のステージシンボルしかないため、当初は閑散としています。このステージは、次のスクリーンショットにも示されるように、Edge Animate が保存時に作成する HTML ファイル内の単一の HTML エレメントを表しています。

保存

このオプションでは、現在のドキュメントがファイルシステムに既に保存されている場合は保存を実行し、新しいプロジェクトの場合はファイル名とドキュメントの保存場所を提供するようユーザーにプロンプトします。

注意:

このオプションのキーボードショートカットは Ctrl+S(Windows)または Command+S(Mac)です。

名前を付けて保存…

保存オプションと同じ機能ですが、システムダイアログによって必ずファイル名と保存場所をプロンプトします。これは、同じプロジェクトの異なるバージョンを保存するとき、または単にプロジェクトを新しい場所に保存する場合に便利です。

注意:

このオプションのキーボードショートカットは Ctrl+Shift+S(Windows)または Command+Shift+S(Mac)です。

新しいプロジェクトの場合、いずれのオプションでもファイルシステムダイアログが表示されます。前述のスクリーンショットでは、実際に保存されるのは .html ファイルであることが分かります。これは Edge Animate プロジェクトで覚えておくべき重要な点です。Edge Animate オーサリング環境で作業する場合、実際には作成されるコンテンツをリアルタイムで扱っているのです。

レイアウトとガイダンスツール

ステージのエレメントを操作する場合、該当するエレメントのレイアウトと配置に役立ついくつかのツールがあると便利です。Edge Animate にはそうしたタスクを支援する、レイアウトの環境設定ツール、ルーラー、ガイドなどのツールが含まれています。

レイアウトの環境設定ツール

レイアウトの環境設定ツールでは、特定のエレメント タイプを作成またはインポートする際にデフォルトプロパティを指定することができます。ツール自体は、ツールバーのデフォルトカラースウォッチの右側にあります。ツールバーでは小さな定規として表示されており、レイアウトを示しています。

このツールをアクティブ化すると、小さなオーバーレイが表示され、現在のプロジェクトでレイアウトを設定することが可能になります。設定のほとんどは、ピクセルまたはパーセント単位のどちらを使用するかなど、エレメントの測定方法に関係します。

注意:

これらの選択は、コンポジションで新たに作成されるもの、または新たにインポートされるものに影響します。現在確立されたエレメントは、その設定を保持します。

次の表は、Edge Animate コンポジションのレイアウト設定を決める際の選択肢を示しています。水平、垂直、幅、高さの単位の説明は同じように見えますが、実際には固有の値で、これらのパラメーターをステージで調整するときに明らかになります。

環境設定 説明
コーナーの整列 デフォルトでどのコーナーに合わせて整列するかを選択します。
水平方向の位置の単位 新しいエレメント用にピクセルと割合(%)を
切り替えられます。
垂直方向の位置の単位 新しいエレメント用にピクセルと割合(%)を
切り替えられます。
幅の単位 新しいエレメント用にピクセルと割合(%)を
切り替えられます。
高さの単位 新しいエレメント用にピクセルと割合(%)を切り替えられます。
イメージの「img」タグの使用 イメージのインポート時に img タグタイプを使用します。
イメージの幅の「auto」 イメージのインポート時に幅を「auto」に設定します。
イメージの高さの「auto」 イメージのインポート時に高さを「auto」に設定します。

ルーラー

有効な場合、ルーラーは他の Adobe クリエイティブアプリケーションと同様に、プロジェクトステージの上部および左側の軸に沿って設定されます。ルーラーはエレメント間の測定、ステージ登録ポイントとの関係、エレメントの整列などをビジュアル化するのに役立ちます。

ルーラーは、手動のガイドの生成と配置にも役立ち、これは次のセクションで取り上げます。

注意:

ルーラーのオンとオフを切り替えるには、アプリケーションの表示メニューから「ルーラー」オプションを選択するか、キーボードショートカット Ctrl+R(Windows)または Command+R(Mac)を使用します。

ガイド

ガイドは、エレメントをより正確にステージでプロットおよび配置するためにルーラーと共に使用
します。さらに、
長方形ツールまたは角丸長方形ツールなどのツールを使って、エレメントを描画できる範囲を測定するためにも使用できます。

新しいガイドを作成するには、ルーラーがアクティブ化されて、ステージパネルで表示されていることを確認します。ルーラーをクリックして、特定の軸に沿ってガイドをドラッグします。ガイドが希望する位置に配置されると、マウスボタンをリリースしてガイドを所定の位置にドロップします。

ガイドが所定の位置に置かれると、ピクセルベースのガイドのままにすることも、レスポンシブレイアウトツールで使用するためにパーセンテージ(%)ベースのガイドに変換することもできます。ガイドをピクセル単位からパーセンテージ単位に変換するには、マウスをガイドの上に置いて、右クリックします。すると、ガイドをパーセンテージに変換オプションが表示されます。ガイドは、ピクセルベースのガイドと区別するために、通常の紫とは異なる青緑色に表示されます。ステージのサイズを変更するとガイドもシフトします。絶対ピクセル単位ではなくパーセンテージをベースに配置されているからです。

ガイドを削除するには、ガイドをクリックしてルーラーにドラッグします。ガイドは、アプリケーションメニューの表示領域からロックすることができます。吸着も表示メニューから制御できます。

スマートガイド

スマートガイドが有効な場合、エレメントをステージの周りでドラッグすると、一時的なガイドが表示され、エレメントの配置に役立てることができます。これらのガイドは、他のエレメントと整列するため、またはステージ自体の部分と整列するために表示されます。次のスクリーンショットの例では、エレメントをステージの中央にドラッグするとスマートガイドが表示され、この位置にドロップするとオブジェクトを中央に配置できることを示します。

注意:

スマートガイドは、表示/スマートガイドにあるアプリケーションメニューから無効にできます。キーボードショートカットは Ctrl+U(Windows)と Command+U(Mac)です。

外部アセットのインポート

Edge Animate コンポジション内で基本的なベクターやテキスト エレメントを作成する以外にも、
プロジェクトで使用するために外部アセットをインポートできます。
これらのアセットは、Adobe Photoshop、Illustrator、Fireworks など
他のアプリケーションで準備された可能性があります。一般に、Edge Animate で作成した
シンプルなシェイプよりも、インポートされたアセットを使用することが多くなりますが、
これはプロジェクトによって異なります。
Edge Animate にインポートできるファイルの種類には次が含まれます。

  • SVG:Scalable Vector Graphics
  • PNG:Portable Network Graphics
  • JPEG:Joint Photographic Experts Group
  • GIF:Graphics Interchange Format

ビットマップイメージのインポート

イメージファイルが Edge Animate プロジェクトにインポートされると、他のエレメントと同様に操作、アニメーション化、およびスクリプト化することができます。ビットマップイメージファイルを Edge Animate インポートするには、次の操作を行います。

  1. Edge Animate アプリケーションメニューに移動します。
  2. ファイル/インポートを選択します。
  3. システムファイルブラウザーダイアログボックスが表示されます。インポートする
    .png、.gif、または .jpg ファイルに移動します。
  4. ファイルを選択して、開くをクリックします。
  5. するとファイルはステージに配置され、アセットにあるプロジェクトライブラリに追加されます。その後、このアセットの複数のインスタンスをステージに追加できます。

注意:

SVG ファイルと同様に、ステージに配置されるビットマップファイルのインスタンスは、インポートされたファイルそのものと同じサイズが使用されるため、ステージの境界と重なる可能性があるのでご注意ください。これは、プロパティパネルを使ってエレメントを操作することで解決できます。

ビットマップイメージのアセットがインポートされ、このアセットのインスタンスがステージに存在するため、テキストや四角形のエレメントと同様に、選択ツールおよび変換ツールを使ってサイズ変更、拡大/縮小、および傾斜などの操作を行えます。ただし、ベクターベースのエレメントとは異なり、ビットマップオブジェクトでは、目に見えるアーチファクト、ブロック歪み、および他の歪みが発生します。

注意:

また、オペレーティングシステムのファイルエクスプローラーからステージに .jpg、.png、または .gif ファイルをドラッグ&ドロップすることもできます。このアクションは、前述したアプリケーションのインポートコマンドを使用するのと同じ効果がありますが、ドラッグ&ドロップを使用するとインポートされたイメージをステージに正確に配置することができます。

Edge Animate 内でのアニメーション

ユーザーがアニメーションシーケンスを作成するために使用できるアプリケーションはたくさんあります。Adobe Edge Animate のユーザーも、Director、Flash Professional、After Effects、または Photoshop など他のプログラムを使った経験があることでしょう。これらのアプリケーションはどれも少し異なる方法でアニメーションを処理しますが、同時にどれもある程度共通のアニメーションテクニックおよびツールを共有しています。

多くのデジタルアニメーションプログラムと同様に、Edge Animateもキーフレーム間で「トゥイーン」という概念を採用しています。従来のセルベースのアニメーションでは、マスターアニメーターがアニメーションシーケンスの特定のキーフレームを書き出し、それらのキーフレーム間のフレームをアニメーションチームの見習いまたは助手が作成しました。目標は、マスターアニメーターが作成したキーフレームごとのスムーズなトランジションを実現して、
アニメーションシーケンスを完了することでした。

Edge Animate では、このプロセスがプログラム化されています。キーフレームがタイムラインに沿って配置されると、Edge Animate は再生ヘッドの位置(瞬間)でプロパティ値の変更をトランジションとして記録します。作成者は、様々なイージング方程式に基づいた命令セットをトゥイーンエンジンに提供することもできます。これにより、キーフレーム間のより自然な流れが可能となり、伸縮モーションやバウンスモーションなど特定の効果を生み出すためにも使用できます。

Edge Animate のタイムライン

タイムラインでは、Edge Animate コンポジションのすべての動きが調整されます。タイムライン自体の概念や構造は、主に Flash Professional や After Effects など他の Adobe アプリケーションと共有しています。

注意:

Flash Professional のフレームベースのタイムラインとは異なり、Edge Animate は純粋にタイムラインベースとなっています。

再生コントロール

Edge Animate の再生コントロールは、すべて左上隅またはタイムラインパネルにグループ化されています。これらのコントロールでは、タイムラインで利用できる再生オプションの多くに素早くアクセスできます。

時間

Edge Animate の時間は標準的な 10 進数時間コード形式(mm:ss.ddd)で測定され、そのようにタイムコントロールで表示されます。再生ヘッドがタイムラインに沿って移動すると、表示情報もそれに応じて更新されます。ユーザーは現在時刻を調整するためにコントロールを左右にスクラブするか、クリックして編集可能にすることができます。

Edge Animate の時間コントロールは実際にはステージに沿ってグループ化されており、パネル直下からアクセスすることができます。またコントロールは分割されており、再生ヘッド時間(黄)、および有効な場合はピン時間(青)を個別に修正することができます。

タイムラインオプション

これらのオプションは、タイムライン関連の様々な機能を実行するにあたって、現在の必要に応じてオンまたはオフに切り替えることができます。

これらのオプションには次が含まれます。

  • 自動キーフレームモード(K):このオプションを選択すると、Edge Animate はタイムラインに沿って調整される様々なプロパティのために自動でキーフレームを生成することがでます。選択されていない場合、キーフレームは手動で挿入する必要があります。
  • 自動トランジションモード(X):有効にすると、時間に沿ってアニメーション化されるエレメント プロパティの調整の間に即時のトランジションを使用するよう Edge Animate に通知します。
  • ピンの切り替え(P):ピンのオンとオフを切り替えます。ピンの詳細は後ほど取り上げます。

タイムラインの下部には多くのオプションがあります。

  • アニメーションエレメントのみを表示:このオプションを選択すると、プロパティがアニメーション化されたエレメントだけがタイムライン内に表示されます。静的エレメント(背景画像など)は非表示になります。
  • タイムラインの吸着:タイムラインの吸着のオンまたはオフを切り替えます。
  • グリッドの表示:タイムライングリッドのオンまたはオフを切り替え、グリッドの間隔の単位を設定することができます。

グリッドの表示コントロールの詳細

このアイコンのすぐ右側にある小さな矢印をクリックしてオプションの小さなリストにアクセスし、グリッドの間隔を設定することもできます。タイムライン上の様々な測定上にグリッドラインを表示することもできます。

タイムラインコントロール

タイムラインで主に使用するコントロールは基本的に 4 つあります。再生ヘッド、ピン、ズーム、およびグリッドコントロールのセットです。コントロールの機能はそれぞれ大きく異なり、再生やアニメーションで使用されたり、ワークフロー全体の向上のために置かれたりしています。しかし、どれも非常に便利です。

再生ヘッド

再生ヘッドはタイムライン上の 2 つのエレメントのうち大きい方で、赤い実線によって現在時刻を表しています。再生ヘッドをクリックして前後にスクラブして、現在時刻を変更できます。アニメーションが Edge Animate で再生にされている間、再生ヘッドは現在時刻に沿って移動します。

注意:

通常、再生ヘッドとピンは同期されます。同期されていない場合、アプリケーションメニューのタイムライン/ピンの切り替えで再同期できます。

ピン

ピンは、Edge Animate 固有のコントロールです。この方法では、エレメントプロパティの現在の状態を特定の時間に固定し、再生ヘッドを使用してアニメーションが完了する時間を決定します。ピンは再生ヘッドで示される時間の前後に配置することができますが、必ずアニメーションの開始点を示し、再生ヘッドは終了点を示します。ピンが非同期のままエレメントプロパティを変更すると、ピンから開始して再生ヘッドの位置で終了するそれらのプロパティのアニメーションが作成されます。これにより、タイムライン上で厳密に制御されるアニメーションを自由に素早く作成できます。

注意:

ピンを再生ヘッドと迅速に同期または非同期にするには、再生ヘッドをダブルクリックして各状態を切り替えることができます。または、キーボードショートカット(P)を使って同じタスクを行うことができ、タイムラインのコントロールを使ってこのアクションを行うこともできます。

ピンがアクティブ化されると、アニメーションの方向はタイムライン上の色のついた山形のパターンによって示されます。色はモーションの方向によって黄色または青色となります。青色はピンの左側にモーションがあることを示し、黄色はピンの右側にモーションがあることを示します。

ズームコントロール

Edge Animate には 2 つのズームコントロールがあり、タイムラインを拡張または縮小することができます。1 つ目は「タイムラインを画面に合わせて表示」ボタンで、タイムラインの右下隅に二重矢印として表示されます。これは、タイムラインパネルの現在の幅に合わせて、表示されているタイムラインのスパン全体を拡張または縮小します。アニメーション全体の概要をよく見ることができます。

2 つ目のコントロールはすぐ右側に表示されるスライダーで、どの時点でも特定の作業を行うためにタイムラインのズームレベルを手動でコントロールすることができます。

キーフレーム

After Effects での表示と同様に、Edge Animate のキーフレームはタイムラインに沿って小さなダイヤモンドとして表示されます。Flash Professional のキーフレームとは異なり、Edge Animate のキーフレームは、エレメントそのものではなく、変更されるプロパティに直接関連付けられます。これにより、任意のエレメントについてタイムライン全体で詳細なプロパティの調整が可能になります。これは、選択したエレメントプロパティをアニメーション化する非常に柔軟で強力な方法となります。

キーフレームナビゲーション

Edge Animate にはタイムラインのナビゲーション(特にキーフレーム間でジャンプする場合)に役立つ多くのキーボードショートカットがあります。

コマンド ショートカット
前のキーフレームに移動 Ctrl + 左矢印(Windows)、Command + 左矢印(Mac)
次のキーフレームに移動 Ctrl + 右矢印(Windows)、Command + 右矢印
(Mac)

モーションの作成

Edge Animate 内でエレメントプロパティをアニメーション化するのは、比較的直感的です。このセクションでは、Edge Animate タイムラインに沿ってエレメントをアニメーション化するいくつかの基本的な方法について説明します。最初は再生ヘッドのみを使用し、次に再生ヘッドとピンを併用して行います。同じアニメーションを双方で実行することにより、時間に沿ってエレメントプロパティをアニメーション化するときに Edge Animate が提供する異なるワークフロースタイルについて学ぶことができます。

注意:

ほとんどのエレメントは、プロパティが時間に沿って実際に変更されるまでタイムライン内に表示されないことに注意してください。これは、実際にアニメーション化されているものが何もない場合は、タイムラインを混雑させる必要はないという考え方です。

キーフレームの挿入

コンポジションにキーフレームを挿入するメカニズムはいくつかあります。プロパティパネル、アプリケーションメニュー、タイムラインキーフレームボタン、または右クリックメニューを使用して行えます。先に進む前に、それら各メソッドについて簡単に見てみましょう。

プロパティパネルでキーフレームを追加

選択したどのエレメントでも、再生ヘッドをタイムラインに配置して、プロパティパネルでキーフレームを挿入できます。ほとんどのプロパティ値の横に小さなダイヤモンドがあります。このキーフレームコントロールをクリックすると、選択したエレメントの現在の再生ヘッドの位置に、そのプロパティのキーフレームを手動で挿入することができます。

アプリケーションメニューからキーフレームを追加

選択したどのエレメントでも、再生ヘッドをタイムラインに配置して、アプリケーションメニューでキーフレームを挿入できます。メニューに移動し、タイムライン/キーフレームを追加を選択した後、キーフレームに設定するプロパティに基づいて、追加するキーフレームの種類を選択します。

注意:

すべてのプロパティにデフォルトでキーボードショートカットが割り当てられているわけではありませんが、よく使用するプロパティに必要に応じて簡単に割り当てることができます。これはアプリケーションメニューで行えます:編集/キーボードショートカット

タイムラインキーフレームボタンを使用

選択したどのエレメントでも、再生ヘッドをタイムラインに配置して、タイムラインパネルの左側でキーフレームを挿入できます。キーフレームが現在割り当てられているプロパティは、タイムラインのエレメントの下にグループ化されて表示されます。これら既存のプロパティには、プロパティ名の右側に小さなアイコンがあり、その特定のプロパティに新しいキーフレームを追加することができます。

エレメントの下に表示されないプロパティに新しいキーフレームを追加するには、エレメント名を右クリックして、「キーフレームを追加」を選択して挿入します。

キーフレームの挿入に右クリックを使用

選択したどのエレメントでも、再生ヘッドをタイムラインに配置して、ステージ自体でキーフレームを挿入できます。タイムラインの所定の位置でステージにある任意のエレメントを右クリックし、「キーフレームを追加」を選択して、そのエレメントで利用可能な任意のプロパティを挿入します。

再生ヘッドによるアニメーション化

ステージのある側から別の側にエレメントを移動させる簡単なアニメーションを実行し、再生ヘッドとプロパティパネルを使用して回転とカラーの変更も行います。

  1. 新しい Edge Animate プロジェクトを作成して、ローカルディスクに保存します。

  2. プロパティパネルを使用して、次のようにステージを調整します。

    • ステージ:600 px
    • ステージ高さ:350 px
    • 背景色: #000000
    • オーバーフロー:非表示
  3. 四角形ツールを使用して、ステージにエレメントを描画します。次のステップでプロパティを変更するため、サイズや形を気にする必要はありません。

  4. 記載されている各プロパティについて、プロパティパネルで次の調整を行います。

    • 位置X:20 px
    • 位置 Y:230 px
    • サイズ W:100 px
    • サイズ H:100 px
    • 背景色:#c0c0c0
  5. プロパティパネルを引き続き使用して、位置、背景色、回転のプロパティの横にあるキーフレームダイヤモンドをクリックします。これにより、タイムライン内の各プロパティのキーフレームが設定されます。

  6. タイムライン上で自動キーフレームプロパティが選択されている状態であることを確認します。これら各プロパティは既に初期キーフレームとしてマークされているため、時間に沿って行う調整はどれも自動キーフレームになります。

  7. プロジェクトは次のスクリーンショットのように表示されます。次にこの手順の残りの部分に進むことにします。

  8. 0:04 のラベルが付けられたルーラーマーカーに再生ヘッドをドラッグして、リリースします。

  9. その後、選択ツールを使用してエレメントを選択し、プロパティパネルで次のプロパティを変更します。

    • 位置 X:480 px
    • 背景色#900000
    • 回転:480 deg
  10. アニメーションシーケンスの終わりに、タイムラインで別のキーフレームセットと共にトランジションバーが表示されます。

  11. ここで、再生ヘッドを前後にドラッグしてタイムラインをスクラブするか、「再生」ボタンを押してシーケンス全体を表示することができます。再生すると、エレメントはステージに沿って左から右に移動し、灰色から赤に変わります。終了状態が次のスクリーンショットに表示されています。

    注意:

    エレメントのどのプロパティもキーフレームにすることができ、ここで行ったように時間をかけて変更することができます。

ピンによるアニメーション化

次に、前述の演習を行いますが、今回はピンを使って Edge Animate でモーションを作成する別の方法を示します。

  1. 新しい Edge Animate プロジェクトを作成して、ローカルディスクに保存します。

  2. プロパティパネルを使用して、次のようにステージを調整します。

    • ステージ:600 px
    • ステージ高さ:350 px
    • 背景色:#000000
    • オーバーフロー:非表示
  3. 四角形ツールを使用して、ステージにエレメントを描画します。次のステップでプロパティを変更するため、サイズや形を気にする必要はありません。

  4. 記載されている各プロパティについて、プロパティパネルで次の調整を行います。

    • 位置X:20 px
    • 位置 Y:230 px
    • サイズ W:100 px
    • サイズ H:100 px
    • 背景色#c0c0c0
  5. タイムラインで再生ヘッドを 0:04 にドラッグします。

  6. 次に、アプリケーションメニューに移動して、タイムライン/ピンの切り替えを選択します。これにより、ピンは再生ヘッドと非同期になります。ピンが非同期になると、再生ヘッドのすぐ下の小さなコントロールに戻ります。

  7. ピンをつかんで、タイムラインの 0:00 にドラッグします。これで、キーフレームを手動で挿入することなく、エレメントの現在のプロパティを 0:00 にピン留めすることができます。再生ヘッド自体は 0:04 に保ちます。

  8. その後、選択ツールを使用してエレメントを選択し、プロパティパネルで次のプロパティを変更します。

    • 位置 X:480 px
    • 背景色#900000
    • 回転:480 deg

    ここで、キーフレームを設定することなく、タイムラインにトランジションバーが表示されるようになります。

  9. アプリケーションメニューに移動して、タイムライン/ピンの切り替えを選択して、ピンを同期します。この章で前述したように、キーボードショートカットからピンを切り替えることができます。

  10. ここで、再生ヘッドを前後にドラッグしてタイムラインをスクラブするか、「再生」ボタンを押してシーケンス全体を表示することができます。再生すると、エレメントはステージに沿って左から右に移動し、灰色から赤に変わります。

    注意:

    この場合、タイムラインの再生ヘッドよりも前の時間にピンを配置しましたが、そうする必要があるというわけではありません。ピンを再生ヘッドよりも後の時間に配置しても同じビヘイビアーが示されます。現在のプロパティはピンの位置に固定され、調整されたプロパティは再生ヘッドの位置に整列します。

トランジションの編集

トランジションを確立すると、タイムラインを介してマウスとのインタラクションで調整できます。トランジションの遅延、継続時間、および終了を調整するには、タイムライン自体のビジュアルトランジションインジケーターをクリックしてドラッグします。

注意:

トランジションはオブジェクト単位またはプロパティ単位で調整できるため、モーションのビヘイビアーを定義する際に大きな自由度があります。

トランジションの遅延

これはトランジションがいつ始まるかを指定し、全体的なタイムラインの開始位置から測定されます。この値を変更するには、トランジション全体を移動するか、右端をドラッグします。

トランジションの継続時間

これはトランジション全体にかかる時間を表します。トランジションは、右端をドラッグすることによって簡単に拡大または短縮できます。

トランジションの終了

これはトランジションがタイムライン内で完了する時間です。

トランジションに基づいたエレメントプロパティの変更

プロパティパネル内でエレメントプロパティを編集するためにトランジションを選択するには、マウスを使ってタイムライン内でトランジションのブロックを選択します。カーソルが小さな手に変わり、トランジションをクリックすると、トランジションとそのキーフレームがハイライト表示されます。

これでエレメントが選択され、プロパティパネルは再生ヘッドの位置でそのエレメントのプロパティを反映するように調整します。時間に沿ってプロパティを調整するには、再生ヘッドを移動させてプロパティパネルがそれらの変更に調整するのを確認します。

注意:

トランジションのイージングビヘイビアーを変更する場合、エレメントのトランジションブロック全体を選択することも、個別のプロパティトランジションを選択して同じエレメントに多様なトランジションタイプを適用することもできます。非常に柔軟です。

トランジションのイージングコントロール

これまで取り上げた例のモーションは、1 つの値から別の値への単純な線形のトランジションであることにお気付きかもしれません。個別のトランジションによりリアルでダイナミックな特性をもたらすには、トランジションに様々なイージング方程式を割り当てることができます。

Adobe Edge Animate にはイージングに関する多くの選択肢があります。デフォルトは線形で、A から B へのトランジションを完全に線形な方法で表現します。多くの場合、モーションをよりリアルに見せるため、あるいは特定の効果を演出するために、よりダイナミックなイージングアルゴリズムが必要になります。Edge Animate には最低でも 32 種類のイージングの選択肢がバンドルされており、トランジションのイージングで様々なオプションが提供されています。

注意:

Edge Animate で利用可能なトランジションのイージングアルゴリズムは、Flash Professional コンテンツのアニメーション化で使う多くの ActionScript ライブラリに含まれるものと似ています。しかし Flash Professional とは異なり、Edge Animate にはまだこれらのプリセットをカスタマイズする機能はありません。

トランジションのイージングタイプ

Edge Animate では多くのイージングタイプが提供されていますが、ユーザーが一目見ただけではそれがどのような機能を持つのか分からない場合もあります。それら各イージングタイプを単純なトランジションに適用して調整および視覚化するために、Edge Animate プロジェクトを簡単に設定することができます。

注意:

ほとんどすべてのイージングタイプには、イーズイン、イーズアウト、およびイーズインとイーズアウトの両方の 3 つの種類があります。

トランジションのシフト

Edge Animate では、トランジションをタイムライン上で前後にシフトするのが簡単です。マウスカーソルを使ってトランジションをつかみ(クリックしてホールド)、タイムライン上でマウスを前後に移動して、トランジションを所定の位置に配置します。マウスを放すとシフトが完了します。

トランジションの継続時間の変更

トランジションの継続時間を調整するには、トランジションブロックの先頭または末尾にマウスカーソルを置きます。すると、カーソルが変化して調整が可能であることを示します。その後、クリックしてタイムラインに沿ってドラッグし、特定のトランジションの長さを調整します。また、Shift キーを使ってこれと同じ方法で複数のトランジションを選択し、タイムラインに沿って追加の選択をすることができます。

注意:

このようにして拡張できるトランジションの上にカーソルを置くと、カーソルは 2 本の線に変化し、左または左を指す矢印が表れます。

トランジションキーフレームの選択

個別のキーフレームを選択するには、目的のキーフレームをクリックし、必要な変更を実行します。いくつかの可能なオプションには、キーボードの Del キーを押して選択したキーフレームを削除する、または右クリックメニューからトランジションを変更するなどが含まれます。

注意:

キーフレームを選択できる場合、カーソルは指差す小さな手に変化します。当然ですが、ロックされたエレメントキーフレームはどのような形でも操作できません。

複数のトランジションの選択

Shift キーを押しながらキーフレームを選択すると、複数のキーフレームを選択することができます。また、複数のキーフレームにわたって選択範囲の四角形を描画できますが、完全なトランジションも選択されてしまう可能性があるため、正確ではありません。

キーフレームのコピー&ペースト

キーフレームが選択されると、それらのキーフレームをタイムライン上の 1 つの場所から他の場所に簡単にコピー&ペーストできます。ペーストする前に再生ヘッドを移動するだけです。これは、正確なプロパティをコピーしてタイムラインに複製するための優れたメカニズムです。

キーフレームを使用したトランジションの生成

複数のキーフレームを選択した状態で右クリックすると、それらの間でトランジションの削除または作成を行うことができます。これは、自動トランジションモードを使用した後、キーフレームは保持するものの、それらの間のスムーズなトランジションを削除する、または逆にする場合に役立ちます。

Web サイトヘッダーのアニメーション化

Adobe Edge Animate の基本的なユースケースに、簡単にアニメーション化された Web サイトヘッダーの作成があります。ここでは、「An Early Morning Letter, Displaced」という名前のスタジオ録画プロジェクトのコンポジションを作成します。各リリースのイメージをヘッダーそのものでアニメーション化します。ありがたいことに、このアニメーションヘッダーの作成に必要なアセットはすべて提供されています。

注意:

それらのアセットはこの章のファイルの一部として含まれており、banner_assetsという名前のフォルダーにあります。

プロジェクトのセットアップ、アセットのインポート、および一般的なレイアウト

このコンポジションの最初のステップは、Edge Animate プロジェクトをセットアップし、すべてのアセットをインポートし、それらをステージ上に配置することです。まず、再生が完了した時点でのアニメーションの最後の表示になるよう、アセットを最終的な形に配置することから始めます。ピンにより、「後方」にアニメーション化するほうが簡単です。

  1. 新しい Edge Animate プロジェクトを作成して、ローカルディスクに保存します。

  2. プロパティパネルを使用して、次のようにステージを調整します。

    • ステージ:940 px
    • ステージ高さ:198 px
    • 背景色: #000000
    • オーバーフロー:非表示
  3. アプリケーションメニューに移動し、ファイル/インポートを選択してファイルブラウザーを表示します。

  4. 指定されたアセットフォルダー内にあるすべての .png ファイルを選択して、開くをクリックします。選択したファイルがステージに配置され、ライブラリプロジェクトに追加されます。

  5. 背景画像はステージ自体の正確なサイズで、領域全体を埋める必要があります。

  6. アルバムアートは、次のスクリーンショットに見られるように、ステージ下部に均等に配置できます。これらのイメージは、マウスまたはプロパティパネルを使用して配置できます。間隔は均等にします。

  7. 最後に、このヘッダーアニメーションにタイトルを追加する必要があります。テキストツールを使ってヘッダー上部にプロジェクトの名前を作成します。ここでテキストツール(T)を選択します。

  8. ステージに新しいテキストエレメントを追加し、フィールドにAn Early Morning Letter, Displacedというフレーズを入力します。

  9. このテキストエレメントを選択したままプロパティパネルに移動し、
    次の調整を行います。

    • ID:Title
    • 位置 X:16 px
    • 位置 Y:11 px
    • フォント名:Arial Black, Gadget, sans-serif
    • フォントサイズ:40 px
    • フォントカラー:#bbbbbb
  10. 次のスクリーンショットのようなコンポジションが表示されます。

エレメントのアニメーションの実行

次に、再生ヘッド、マーク、およびプロパティパネルを使用してステージ上のすべてのエレメントのアニメーションを行います。

背景のアニメーション化

00:07.000 持続するトランジションを作成します。サイズを微調整しながら背景エレメントがフェードインされます。

  1. 選択ツールを使用して、bg エレメントをクリックしてプロパティを表示します。

  2. タイムラインで、ピンを 00:07.000 に、再生ヘッドを 00:00.000 に移動します。

  3. プロパティパネルを使用して、次のように調整します。

    • 拡大/縮小(リンク):115%
    • 不透明度:25%
  4. タイムラインで、先ほど作成したトランジションをクリックして選択します。

  5. タイムラインで、イージングの選択をイーズアウト/正弦に変更して、再生時にトランジションがどのように実行されるかを確認します。拡大/縮小トランジションは線形のままにします。

カバーアートのアニメーション化(各カバーアートイメージに対して行う)

各イメージについて 00:02. 000 持続するトランジションを作成します。スライドはオフスクリーンからスライドし、楽しくバウンスしながら停止します。後続の各イメージのトランジションは、直前のトランジションの中間から始まるようにずらして行われ、コンポジション内で様々なモーションが進行することになります。

  1. 選択ツールを使用して、fvm001 エレメントをクリックしてプロパティを表示します。

  2. タイムラインで、ピンを 00:02.090 に、再生ヘッドを 00:00.000 に移動します。

  3. プロパティパネルを使用して、次のように調整します。

    • 位置 X:986 px
  4. タイムラインで、先ほど作成した不透明度トランジションをクリックして選択します。

  5. タイムラインで、イージングの選択をイーズアウト/バウンスに変更して、再生時にトランジションがどのように実行されるかを確認します。

  6. 他のアルバムアートイメージごとに前述の手順を繰り返します。

    注意:

    Edge Animate には、トランジションの様々なエレメントを 1 つのオブジェクトから別のオブジェクトに貼り付けるオプションも含まれています。今回のような繰り返し可能なトランジションでは、アプリケーションの編集メニューにあるペーストスペシャル
    コマンドを考慮することができます。

タイトルテキストのアニメーション化

タイトルテキストエレメントがフェードインされる、00:05.500 持続するトランジションを作成します。

  1. 選択ツールを使用して、Title エレメントをクリックしてプロパティを表示します。

  2. タイムラインで、ピンを 00:06.000 に、再生ヘッドを 00:05.000 に移動します。

  3. プロパティパネルを使用して、次のように調整します。

    • 不透明度:0%
  4. タイムラインで、先ほど作成したトランジションをクリックして選択します。

  5. タイムラインで、イージングの選択をイーズイン/立方体に変更して、再生時にトランジションがどのように実行されるかを確認します。

仕上げ

ステージにすべてのエレメントが追加され、正しく配置され、トランジションによって適切にアニメーション化されると、Edge Animate は次のスクリーンショットのように表示されます。

注意:

Edge Animate では、個別のエレメントプロパティに対応する詳細なトランジションインジケーターでも、コンポジションで生じる事柄を正確に把握することができます。

次のスクリーンショットにあるように、アニメーションバナーの結果が Web ブラウザーに表示されます。Edge Animate のコンポジションをブラウザーにパブリッシュするには、アプリケーションメニューからファイル/ブラウザーでプレビューを選択します。

サマリー

この章では、Adobe Edge Animate で、タイムライン、再生ヘッド、ピン、およびプロパティパネルを使ってモーションを作成する方法について取り上げました。Flash Professional または After Effects を使い慣れている人にとって、これらの概念の多くは既によく知っているものであり、Edge Animate アプリケーションインターフェイスに導入されたものがさらに精錬および進化していることに気付くことでしょう。Edge Animate のコンポジションでアニメーションを作成および編集するは非常に簡単なのです。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー