この記事では、Animate CC でのカメラの使用方法について説明します。

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

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

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

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

カメラの有効化または無効化

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

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

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

カメラ
カメラ ワークスペース

A. ステージアウトライン B. カメラアイコン C. カメラのプロパティ D. カメラのカラー効果 E. カメラツール F. カメラアイコン G. カメラレイヤー 

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

カメラが有効になると:

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

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

カメラのズーム

  1. 画面上のズームコントロールを使用してオブジェクトをズームするか、カメラプロパティパネルで「ズーム」値を設定します。

    zoom_rotate
    ズームと回転

  2. シーンにズームインするには、ズーム値を変更するか、ステージの下部にあるスライダーバーを選択します。

  3. コンテンツにズームインするには、スライダーを + 側に移動し、コンテンツからズームアウトするには、スライダーを - 側に移動します。

  4. + 側または - 側の無限レベルのズーム値を有効にするには、スライダーを離して中央の位置にすばやく戻します。 

カメラの回転

  1. 画面上のズームコントロールを使用してオブジェクトを回転させるか、カメラプロパティパネルで「回転」値を設定します。

  2. 各レイヤーで回転効果を指定するには、「回転」値を変更するか、回転スライダーコントロールを使用して回転を操作します。

  3. + 側または - 側の無限レベルの回転を有効にするには、スライダーを離して静止位置にすばやく戻します。コントロールの中央の数値は、現在適用されている回転の角度を示します。

カメラののパン

  1. カメラのバウンディングボックスをクリックし、ステージのカメラレイヤー内にドラッグします。

  2. 選択したオブジェクトをパンするには、上下にスクロールするか、Shift キーを使用して傾きなしで水平方向または垂直方向にパンします。

  3. カメラツールがアクティブな場合、カメラ境界内でドラッグすると、それはパン操作になります。

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

カメラのプロパティインスペクターの「カメラのプロパティ」にあるカメラのX 座標と Y 座標を使用すると、カメラを正確にパンすることができます。
カメラ位置コントロール
カメラ位置コントロール

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

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

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

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

カメラのプロパティ
カメラのプロパティ

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

  1. カメラ/プロパティパネルを選択します。濃淡効果を有効または無効にするには、「濃淡」チェックボックスをオンまたはオフにします。

    カメラのカラー効果
    カメラのカラー効果
  2. 現在のフレームの濃淡値(パーセンテージ)および RGB 濃淡色を変更します。

    注意:

    この機能は AS3 および WebGL ドキュメントタイプでサポートされています。 

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

  1. カメラプロパティパネルで、「カラー調整」チェックボックスを使用して、フィルター効果を有効または無効にします。

  2. 現在のフレームの「明度」、「コントラスト」、「彩度」、「色相」の値を変更します。指定可能な値の範囲は、「明度」、「コントラスト」、「彩度」が -100%から 100%、「色相」が -180°から 180°です。

    注意:

    この機能は、AS3 ドキュメントタイプでのみサポートされています。 

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

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

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

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

  2. 様々なレイヤー深度を各レイヤーに追加します。

  3. カメラツールをクリックしてカメラレイヤーを追加します。

    camera-layer
    レイヤー深度のカメラレイヤー

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

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

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

パララックスエフェクトとカメラの Z 深度を説明するビデオ
このビデオでは、パララックスエフェクトに続いてカメラのズームを確認できます。

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

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

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

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

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

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

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

カメラがロックされていないレイヤー
カメラがロックされていないレイヤー

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

カメラがロックされているレイヤー
カメラがロックされているレイヤー

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

すべてのレイヤーをカメラに接続
レイヤーがカメラに接続されている場合のすべてのレイヤーを示す図

実行時のカメラの使用

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

タイプ クラス 説明
AS3 VirtualCamera

import fl.VirtualCamera;

var cameraObj = VirtualCamera.getCamera(root);

カメラオブジェクトを取得します。実行時にカメラのプロパティを取得または設定するために使用します。
HTML Canvas VirtualCamera var cameraObj = AdobeAn.VirtualCamera.getCamera(exportRoot); カメラオブジェクトを取得します。コンテンツの作成中にカメラが有効になっていることを確認します。
WebGL VirtualCamera var cameraObj = flwebgl.VirtualCamera.getCamera(stage.getPlayer()); カメラオブジェクトを取得します。コンテンツの作成中にカメラが有効になっていることを確認します。

注意:

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

仮想カメラのメソッド

通し番号

メソッド

プロトタイプ

説明

HTML Canvas

WebGL

1

getPosition

getPosition(): Object

trace(cameraObj.getPosition().x, cameraObj.getPosition().y,
cameraObj.getPosition().z);
カメラの現在位置を示す x、y、z のプロパティを持つオブジェクトを返します。

2

setPosition

setPosition(posX: Number, posY: Number, posZ: Number = 0): void

cameraObj.setPosition(100,100,100);

入力パラメーターで指定された絶対位置にカメラを移動します。デフォルト値は 0 です。

3

moveBy

moveBy(tx: Number, ty: Number, tz: Number = 0): void

cameraObj.moveBy(100,100,100);

現在位置を基準として、tx、ty、tz だけカメラを移動します。
注意:「tz」は、レイヤー深度が有効になっている場合にのみ意味があります。デフォルト値は 0 です。


4

resetPosition

resetPosition(): void

cameraObj.resetPosition();

カメラ位置を元の位置 (0,0,0) にリセットします。


5

getZoom

getZoom(): Number

trace(cameraObj.getZoom());

カメラの現在のズーム値を返します。デフォルトは 100%です。


6

setZoom

setZoom(zoom: Number): void

cameraObj.setZoom(120);

パーセント単位の入力パラメーターで指定された絶対値にカメラをズームします。


7

zoomBy

zoomBy(zoom: Number): void

cameraObj.zoomBy(100);

現在のズーム値を基準として、カメラをズームします(単位は%)。


8

resetZoom

resetZoom(): void

cameraObj.resetZoom();

カメラズームをデフォルトのズーム値(100%)にリセットします。


9

getRotation

getRotation(): Number

trace(cameraObj.getRotation());

カメラの現在の角度を返します。 

10

setRotation

setRotation(angle: Number): void

cameraObj.setRotation(45);

入力パラメーターで指定された絶対角度でカメラを回転させます。

11

rotateBy

rotateBy(angle: Number): void

cameraObj.rotateBy(60);

現在の角度を基準として、入力パラメーターで指定された角度でカメラを回転させます。

12

resetRotation

resetRotation(): void

cameraObj.resetRotation();

カメラの角度を 0 にリセットします。

13

setTint

setTint(tintColor: uint, tintPercent: Number): void

cameraObj.setTint(0x56FFFF, 68);

tintColor(RGB)と tintPercent(濃淡の%)を使用してカメラの濃淡を設定します。

×

14

setTintRGB

setTintRGB(red: uint, green: uint, blue: uint, tintPercent: Number): void

cameraObj.setTintRGB(0xff, 0, 0, 50);

分解されたカラー値 R、G、B と tintPercent(濃淡のパーセント)を使用してカメラの濃淡を設定します。

×

15

getTint()

getTint(): Object

var tint=cameraObj.getTint();
trace("color:",tint.color,
"percentage:",tint.percent);

「percent」と「color」の 2 つのプロパティを持つオブジェクトを返します。

×

16

getTintRGB

getTintRGB(): Object

var tint = cameraObj.getTintRGB();
trace("tint color red:", tint.red,"green:",
tint.green," blue:",tint.blue,"tint percent: ",tint.percent);

「percent」、「red」、「green」、「blue」の 4 つのプロパティを持つオブジェクトを返します。

×

17

resetTint

resetTint()

cameraObj.resetTint();

カメラの濃淡を削除します。

×

18

setColorFilter

setColorFilter(brightness: Number, contrast: Number, saturation: Number, hue: Number): void

cameraObj.setColorFilter(100,-50,
50,-100);

カメラのカラーフィルターを、明度、コントラスト、彩度、色相に分解された値を使用して設定します。

×

×

19

resetColorFilter

resetColorFilter()

cameraObj.resetColorFilter();

カラーフィルターを削除します。

×

×

20

reset

reset()

cameraObj.reset();

すべてのカメラプロパティをデフォルト値にリセットします。

21

setZDepth

setZDepth(zDepth: Number): void

cameraObj.setZDepth(200);

カメラの Z 深度値を設定します。

×

22

getZDepth

getZDepth(): Number

trace(cameraObj.getZDepth());

カメラの現在の Z 深度値を返します。

×

23

pinCameraToObject

pinCameraToObject(object:DisplayObject, offsetX:Number=0,offsetY:Number=0, offsetZ=0)

cameraObj.pinCameraToObject
(getChildByName("InstanceName"), 200,50);

実行時に入力パラメーターで与えられたオブジェクトをカメラが追うようにします。offsetX、offsetY および offsetZ が指定された場合、カメラは (x+offsetX,y+offsetY, z+offsetZ) を追跡します。

24

setPinOffset

setPinOffset(offsetX:Number, offsetY:Number,offsetZ:Number)

cameraObj.setPinOffset(-60,0);

オブジェクトに対するカメラ固定のオフセット offsetX および offsetY を変更します。実行時にカメラは (x+offsetX, y+offsetY, zDepth+z) の点のオブジェクトを追います。

25

unpinCamera

unpinCamera()

cameraObj.unpinCamera();

オブジェクトに対するカメラの固定を解除します。

26

setCameraMask

setCameraMask(maskObj:DisplayObject)

cameraObj.setCameraMask(maskObj);

カメラに maskObj をマスクとして設定します。

×

×

27

removeCameraMask

removeCameraMask()

cameraObj.removeCameraMask();

カメラからマスクを削除します。

×

×

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

タイプ メソッド プロトタイプ
AS3 getCameraAsMovieClip

getCameraAsMovieClip(container:DisplayObject):MovieClip

var cameraObj=fl.VirtualCamera.getCameraAsMovieClip(root);
HTML Canvas getCameraAsMovieClip
getCameraAsMovieClip(container:DisplayObject):MovieClip var cameraObj=AdobeAn.VirtualCamera.getCamera(exportRoot);
WebGL getCameraAsMovieClip
getCameraAsMovieClip(container:DisplayObject):MovieClip var cameraObj=flwebgl.VirtualCamera.getCameraAsMovieClip(this);

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

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

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

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

camera-mask

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

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

using-runtime-updated-1

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

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

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

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

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

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

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