Animate でのカメラの使用

Animate のカメラを使用すると、アニメーターは実際のカメラをシミュレートできます。  これまでは、品質も互換性も異なる様々なサードパーティ製拡張機能を利用するか、カメラの動きに似せてアニメーションを修正するしか方法がありませんでした。あらゆる動画に不可欠な以下の機能を使用できます。

• フレームの対象物と一緒にパン
• 劇的な効果を狙った該当オブジェクトの拡大
• 全体像を見せるためのフレームのズームアウト
• あるサブジェクトから別のサブジェクトに注意を引くための焦点の変更
• カメラの回転
• カラーの濃淡またはフィルターを使用した、シーンへのカラー効果の適用

構成にカメラビューを設定すると、レイヤーがそのカメラを通して見ているかのように見えます。カメラレイヤーにトゥイーンやキーフレームを追加することもできます。

カメラツールは Animate に組み込まれているすべてのドキュメントタイプ（HTML Canvas、WebGL および ActionScript）に対して使用できます。

カメラツールを有効にするには、次のいずれかの方法を使用します。

• ツールパネルのカメラアイコンをクリックする。
• タイムラインの「カメラを追加 / 削除」ボタンをクリックする。

カメラが有効になると、ステージ境界がカメラレイヤーと同じ色で表示されます。

ステージがドキュメントのカメラとして動作するようになります。カメラオブジェクトを含む新しいカメラレイヤーがタイムラインパネルに追加されます。カメラツールを選択すると、プロパティインスペクターでカメラアイコンが有効になります。

カメラが有効になると：

• 現在のドキュメントがカメラモードに切り替わります。
• ステージがカメラに切り替わります。
• カメラの境界線がステージ境界内に表示されます。
• カメラレイヤーが選択されます。 

カメラのズーム、回転、パン

カメラのズーム

カメラの回転

カメラののパン

カメラ位置コントロールの使用

オブジェクトを水平方向にパンするには、マウスを x 座標値の上に移動し、スライダーを左右にドラッグします。 

オブジェクトを垂直方向にパンするには、マウスを y 座標値の上に移動し、スライダーを左右にドラッグします。

カメラエフェクトのリセットオプション

カメラのパン、ズーム、回転およびカラー効果に加えた変更を元の設定に戻したいときは、いつでも設定をリセットできます。以前のプロパティ値に戻すには、各プロパティの横にあるリセットアイコンをクリックします。。

カメラレイヤーでの濃淡の適用

カメラレイヤーでのカラーフィルターの調整

カメラとレイヤー深度を使用したパララックスエフェクトの作成

ゲームデザイナーや開発者であれば、ゲームの没入型エクスペリエンスを作成したいと考えることがあるでしょう。前景および背景レイヤーにゲームの様々なオブジェクトを使用することで、これらのオブジェクトの速度と位置を制御できます。一定の焦点にカメラのフォーカスを維持することで、様々な速度でオブジェクトを動かして 3 次元効果を作成できます。Animate では、カメラとレイヤー深度機能を使用することで、2D アニメーションを作成しながら、この効果を実現できます。レイヤー深度パネルを使用してレイヤーの深度を変更することで、オブジェクトのパララックスエフェクトを作成できます。レイヤー深度を使用するには、ウィンドウ／レイヤー深度をクリックします。

レイヤー深度について詳しくは、ここをクリックしてください。

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

• カメラの近くにあるオブジェクトは、カメラから離れた位置にあるオブジェクトより速く移動します。
• カメラレイヤーが 0 値の位置にある場合、カメラに近いオブジェクトは小さい正の数値になります。そして、カメラから離れた位置にあるオブジェクトは大きい正の数値になります。カメラの後ろにあるレイヤーは、負の数値になります。 

パララックスエフェクトとカメラの Z 深度を説明するビデオ

カメラによるレイヤーのロック

アニメーターやゲームデザイナーであれば、アニメーションの一部のオブジェクトをカメラの表示に固定したいと思うことがあるでしょう。例えば、アクションボタン、タイムメーターを表示するゲームのヘッドアップディスプレイ、銃などです。このような場合、カメラの動きに合わせてアセットをロックし続ける必要があります。Animate のカメラに接続機能を使用すると、この効果を実現できます。

レイヤーをカメラに接続すると、そのレイヤーのオブジェクトがカメラに固定され、常にカメラとともに移動します。そのため、出力結果の中では、これらのオブジェクトはカメラの動きに影響されないように見えます。

カメラに接続アイコンの列にある点をクリックすることで、1 つのレイヤーをカメラに接続できます。レイヤーがカメラに接続されている場合は、そのことを示すリンクアイコンがレイヤー名の横に表示されます。  

次の図に、カメラへの接続前後のレイヤーの動作を示します。

レイヤーがカメラに接続されていない場合のアニメーションの図：

レイヤーがカメラに接続されている場合のアニメーションの図：

また、タイムラインのカメラに接続アイコンをクリックすることで、すべてのレイヤーをカメラに接続したり接続解除したりできます。 

実行時のカメラの使用

AS3、WebGL および HTML Canvas ドキュメントタイプでは、カメラ API を使用して、実行時にカメラの導入、アクセス、管理を行うことができます。次に、AS3、WebGL および HTML Canvas ドキュメントタイプで使用できるカメラランタイム API の一覧を示します。

 すべてのメソッドは、AS3 ドキュメントタイプで使用できます。一部のメソッドは、WebGL および HTML Canvas タイプでは使用できません。WebGL および HTML Canvas で使用できるメソッドかどうかは、表の最後の 2 列に示されています。

仮想カメラのメソッド

カメラにムービークリップオブジェクトとしてアクセスします。

実行時のオブジェクトのマスク（AS3 ドキュメント用）

次のカメラ API コードを使用して、実行時にオブジェクトをマスクできます。

import fl.VirtualCamera;
fl.VirtualCamera.getCamera(root).setCameraMask(torch);

楕円形のマスクを使用する場合のアニメーションからのサンプルスクリーンショットは、次のように表示されます。

アクションコードウィザードを使用したインタラクティブカメラアニメーションの作成

インタラクティブカメラを使用したアニメーションのステップバイステップの作成方法を、次のフロー図に示します。HTML Canvas ドキュメントで、アクションコードウィザードを使用できます。 

次のサンプルビデオでは、インタラクティブカメラの使用法を説明しています。実行時にパラシュート、ジェットパックおよび都市の景観へと様々な間隔でフォーカスを変更する方法を確認できます。

実行時のカメラの使用法を説明するビデオ

ステージ上のオブジェクトの切り抜き

Adobe XD を使用すると、別のアートボード上にコンテンツを積み重ねたりオーバーレイしたりして、インタラクティブなスライドエフェクトをシミュレートできます（例：ドロップダウンリスト、スライドアップキーボード、ライトボックスエフェクト）。オーバーレイでは、オーバーレイコンテンツを各アートボードに複製することなく、アートボードを複数回再利用することもできます。 

ステージの外に出たコンテンツを切り抜くには、「ステージ外側のコンテンツをクリップ」ボタンをクリックします。カメラとステージビューを使用すると、カメラ境界内にコンテンツを表示できます。