レイヤー深度の機能を使用すると、アニメーションのパララックスエフェクトを容易に作成できます。

このリリースでは、異なる深度で複数のオブジェクトを含むアニメーションを作成できます。カメラツールを使用して、アニメーションにパララックスエフェクトを追加します。以前、アニメーターは手元にカメラツールがあるかどうかにかかわらず、オブジェクトのサイズを予測してパララックスエフェクトを作成する必要がありました。 

2017 年 6 月のリリースでは、この機能は Animate CC で ActionScript 3.0 と WebGL のプラットフォームで利用できます。 

レイヤー深度

複数のレイヤーをそれぞれ異なる平面に配置して、深度を表現できるようになりました。 以前は、Animate コンポジションを構成するレイヤーはすべて同じ平面上に存在していました。 

レイヤー深度パネルを使用して、レイヤーの深度を動的に変更することができます。レイヤー深度を使用するには、ウィンドウ/レイヤー深度をクリックします。

レイヤー深度パネルを開く
レイヤー深度パネルを開く

上のスクリーンショットに示すように、レイヤー深度値は、特定のフレームの各レイヤー名の横に表示されます。

  • それぞれの値にマウスポインターを合わせ、クリックして、スライダーを右または左にドラッグします。
  • 深度を増やすにはスライダーを左にドラッグし、深度を減らすにはスライダーを右にドラッグします。 
  • 負の値にすると近くにあるオブジェクト、正の値にすると離れた位置にあるオブジェクトを表現できます。
Timeline-view-layers

レイヤー深度ダイアログボックスでは、各レイヤーがそれぞれ異なる色付きの線で表されます。各レイヤーを表す色は、タイムラインウィンドウでも確認できます。

色分けされた線を上下に移動して、各レイヤーのオブジェクトの深度を増減させることもできます。

  • レイヤー上のオブジェクトの深度を増やすには、そのレイヤーの線を上方向に移動します。
  • レイヤー上のオブジェクトの深度を減らすには、そのレイヤーの線を下方向に移動します。

次の図に、レイヤー深度機能を適用した場合と適用していない場合の違いを示します。

Content without Layer Depth
レイヤー深度を適用していない場合

Content with Layer Depth
レイヤー深度を適用した場合

レイヤー深度のサイズを保持

ステージ上のオブジェクトのサイズを変更せずに、オブジェクトのレイヤー深度を変更することができます。この機能を有効にするには、レイヤー深度パネルの右上隅の「サイズを保持」ボタンをクリックします。

「サイズを保持」オプションは、2 つのモードで使用できます。

  • サイズを保持」ボタンをクリックし、目的のレイヤー深度を変更します。「サイズを保持」ボタンは自動で切り替わります。
  • Alt キーを押しながらレイヤー深度の値をドラッグすると、「サイズを保持」オプションが一時的に有効になります。
レイヤー深度のサイズを保持
レイヤー深度のサイズを保持

レイヤー深度の最小値と最大値を -5000 ~ 10000 の範囲内で設定できます。 

カメラの Z 深度を使用したパララックスエフェクト

カメラとレイヤー深度機能を使用して、オブジェクトのパララックスエフェクトを作成できます。

  1. Animate で、様々なレイヤーに複数のオブジェクトを作成します。 

  2. 各オブジェクトに異なるレイヤー深度を追加します。

  3. カメラツールをクリックし、カメラをオブジェクトにパンします。

カメラの近くにあるオブジェクトとカメラから離れた位置にあるオブジェクトは移動スピードが異なり、パララックスエフェクトを生み出します。

このエフェクトによって、オブジェクトの深度と遠近が感じられます。

  • カメラの近くにあるオブジェクトは、カメラから離れた位置にあるオブジェクトより速く移動します。
  • カメラの近くにあるオブジェクトのレイヤー深度は大きな負の値となり、カメラから離れた位置にあるオブジェクトのレイヤー深度は大きな正の値となります。

注意:

オブジェクトのサイズは、深度を変更してもそのまま保持されます。この機能によって、オブジェクトを正しい順に配置してから、カメラのパンを使用して、パララックスエフェクトを再現することができます。

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

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