Animate でのカメラの使用

最終更新日 : 2021年4月28日

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

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

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

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

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

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

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

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

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

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

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

カメラが有効になると：

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

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

カメラのズーム

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

ズームと回転
シーンにズームインするには、ズーム値を変更するか、ステージの下部にあるスライダーバーを選択します。
コンテンツにズームインするには、スライダーを + 側に移動し、コンテンツからズームアウトするには、スライダーを - 側に移動します。
+ 側または - 側の無限レベルのズーム値を有効にするには、スライダーを離して中央の位置にすばやく戻します。

カメラの回転

画面上のズームコントロールを使用してオブジェクトを回転させるか、カメラプロパティパネルで「回転」値を設定します。
各レイヤーで回転効果を指定するには、「回転」値を変更するか、回転スライダーコントロールを使用して回転を操作します。
+ 側または - 側の無限レベルの回転を有効にするには、スライダーを離して静止位置にすばやく戻します。コントロールの中央の数値は、現在適用されている回転の角度を示します。

カメラののパン

カメラのバウンディングボックスをクリックし、ステージのカメラレイヤー内にドラッグします。
選択したオブジェクトをパンするには、上下にスクロールするか、Shift キーを使用して傾きなしで水平方向または垂直方向にパンします。
カメラツールがアクティブな場合、カメラ境界内でドラッグすると、それはパン操作になります。

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

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

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

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

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

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

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

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

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

注意：

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

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

カメラプロパティパネルで、「カラー調整」チェックボックスを使用して、フィルター効果を有効または無効にします。
現在のフレームの「明度」、「コントラスト」、「彩度」、「色相」の値を変更します。指定可能な値の範囲は、「明度」、「コントラスト」、「彩度」が -100％から 100％、「色相」が -180°から 180°です。

注意：

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

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

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

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

Animate で、様々なレイヤーに複数のオブジェクトを作成します。
様々なレイヤー深度を各レイヤーに追加します。
カメラツールをクリックしてカメラレイヤーを追加します。

レイヤー深度のカメラレイヤー

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

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

パララックスエフェクトとカメラの 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);