在 Animate 中使用摄像头

上次更新日期： 2021年4月29日

Animate

打开应用程序

阅读本文可了解如何在 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 文档类型支持此功能。

使用摄像头和图层深度创造视差效果

作为一名游戏设计人员或开发人员，您需要为游戏创造身临其境的体验。通过在前景和背景图层中使用游戏的不同对象，您可以控制这些对象的速度和位置。通过将摄像头聚焦在一个恒定的焦点上，您可以在不同速度下移动对象以创建三维效果。在 Animate 中创建 2D 动画时，可通过使用摄像头和图层深度功能实现此效果。通过使用“图层深度”面板更改图层深度，您可以为对象创建视差效果。要使用图层深度，请单击“窗口”>“图层深度”。

单击此处可了解有关图层深度的更多信息。

在 Animate 中的不同图层上创建多个对象。
向每个图层添加不同的图层深度。
通过单击“摄像头”工具添加摄像头图层。

摄像头图层的图层深度

您可以使用此效果查看对象的深度和角度。

更接近摄像头的对象比远离摄像头的对象移动速度更快。
当摄像头图层值为 0 时，更接近摄像头的对象具有较低的正数。而远离摄像头的对象具有较高的正数。摄像头后面的图层拥有负值。

一段说明视差效果和摄像头 z 深度的视频

在此视频中，您可以看到视差效果，其次是摄像头变焦。

使用摄像头锁定图层

作为一名动画师或游戏设计人员，您需要让动画的一些对象保持在摄像头的视图中。例如，游戏中显示时间表的动作按钮和平视显示器。在这种情况下，您必须使该资源在摄像头移动时保持锁定。Animate 中的“附加到摄像头”功能让您能够获得此效果。

当您将图层附加到摄像头时，该图层上的对象将固定到摄像头并且总是和摄像头一起移动。因此，这些对象在输出中似乎并未受到摄像头移动的影响。

您可以通过单击附加摄像头图标栏中的点来将单个图层附加到摄像头。如果将图层附加到摄像头，则一个代表性图标将显示在该图层名称旁。

以下图示说明在将图层附加到摄像头前后该图层的行为：

描述图层没有附加到摄像头时动画的图示：

描述图层附加到摄像头时的动画的图示：

您还可以通过单击时间轴中的“附加摄像头”图标，来附加或分离摄像头中的所有图层。

在运行时使用摄像头

您可以使用 Camera APIs for AS3、WebGL 和 HTML Canvas 文档类型，在运行时引入、访问或管理摄像头。摄像头运行时 APIs for AS3、WebGL 和 HTML 画布文档类型的列表如下所示：

类型	类	示例	描述
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 的方法在表的最后两列中指明。

虚拟摄像头方法

S.No	方法	原型	示例	描述	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 移动摄像头。注意：仅当启用“图层深度”，默认值为 0 时，“tz”才有意义。	是	是
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): v	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();	将摄像头角度重置为零.	是	是
13	setTint	setTint(tintColor: uint, tintPercent: Number): void	cameraObj.setTint(0x56FFFF, 68);	使用色调 color(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);	返回对象与两个属性：“百分比”和“颜色”。	否	是
16	getTintRGB	getTintRGB(): Object	var tint = cameraObj.getTintRGB(); trace("tint color red:", tint.red,"green:",tint.green," blue:",tint.blue,"tint percent: ",tint.percent);	将返回具有四个属性“百分比”、“红色”、“绿色”和“蓝色”的对象。	否	是
17	resetTint	resetTint()	cameraObj.resetTint();	删除摄像头色调。	否	是
18	setColorFilter	setColorFilter(brightness: Number, contrast: Number, saturation: Number, hue: Number): void	cameraObj.setColorFilter(100,-50, 50,-100);	使用 (Brightness,Contrast,saturation,hue) 的分解值设置摄像头颜色滤镜。	否	否
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);

当使用椭圆形遮罩时，动画的一个示例屏幕快照显示如下：

使用操作码向导创建交互式摄像头动画

以下流程图中介绍了一种使用交互式摄像头创建动画的分步方法。可以在 HTML Canvas 文档中使用操作码向导。

您可以找到以下示例视频，以显示交互式摄像头的使用情况。您可以在各种时间间隔查看如何更改降落伞、喷气发动机组件和城市景观的运行时焦点。

显示运行时摄像头使用情况的视频

显示运行时摄像头使用情况的示例视频

裁切舞台上的对象

要裁切流出舞台外的内容，请单击“剪辑舞台外的内容”按钮。使用摄像头和舞台视图，您可以查看摄像头边框内的内容。

更快、更轻松地获得帮助

新用户？