用户指南 取消(C)

在 Animate 中使用摄像头

  1. Adobe Animate 用户指南
  2. Animate 简介
    1. Animate 新增功能
    2. 图示术语表
    3. Animate 系统要求
    4. Animate 键盘快捷键
    5. 在 Animate 中使用多种文件类型
  3. 动画
    1. Animate 动画基础知识
    2. 如何在 Animate 中使用帧和关键帧
    3. 在 Animate 中使用逐帧动画
    4. 如何在 Animate 中使用传统补间动画
    5. 画笔工具
    6. 运动辅助线
    7. 补间动画和 ActionScript 3.0
    8. 关于补间动画
    9. 补间动画
    10. 创建补间动画
    11. 使用属性关键帧
    12. 用补间对位置进行动画处理
    13. 如何使用动画编辑器编辑补间动画
    14. 编辑补间动画的运动路径
    15. 处理补间动画
    16. 添加自定义缓动
    17. 创建和应用动画预设
    18. 设置动画的补间范围
    19. 处理另存为 XML 文件的补间动画
    20. 补间动画与传统补间
    21. 形状补间
    22. 在 Animate 中使用骨骼工具动画
    23. 在 Animate 中处理角色 Rig
    24. 如何在 Adobe Animate 中使用遮罩层
    25. 如何在 Animate 中使用场景
  4. 交互性
    1. 如何使用 Animate 创建按钮
    2. 将 Animate 项目转换为其它文档类型格式
    3. 在 Animate 中创建和发布 HTML5 Canvas 文档
    4. 在 Animate 中通过代码片段添加交互性
    5. 创建自定义 HTML5 组件
    6. 使用 HTML5 Canvas 中的组件
    7. 创建自定义组件:示例
    8. 自定义组件的代码片段
    9. 最佳做法 - 使用 Animate 制作广告
    10. 虚拟现实创作和发布
  5. 工作区和工作流
    1. 创建和管理画笔
    2. 在 HTML5 Canvas 文档中使用 Google 字体
    3. 使用 Creative Cloud Libraries 和 Adobe Animate
    4. 使用 Animate 的舞台和工具面板
    5. Animate 工作流程和工作区
    6. 在 HTML5 Canvas 文档中使用 Web 字体
    7. 时间轴和 ActionScript
    8. 使用多个时间轴
    9. 设置首选参数
    10. 使用 Animate 创作面板
    11. 使用 Animate 创建时间轴图层
    12. 导出移动应用程序和游戏引擎的动画
    13. 移动和复制对象
    14. 模板
    15. 在 Animate 中查找和替换
    16. 撤消、重做和历史记录面板
    17. 键盘快捷键
    18. 如何在 Animate 中使用时间轴
    19. 创建 HTML 扩展
    20. 图像和动画 GIF 的优化选项
    21. 图像和 GIF 的导出设置
    22. Animate 中的资源面板
  6. 多媒体与视频
    1. 在 Animate 中变形和合并图形对象
    2. 在 Animate 中创建并使用元件实例
    3. 图像描摹
    4. 如何在 Adobe Animate 中使用声音
    5. 导出 SVG 文件
    6. 创建用于 Animate 中的视频文件
    7. 如何在 Animate 中添加视频
    8. 使用视频提示点
    9. 使用 Animate 绘制和创建对象
    10. 改变线条和形状
    11. Animate CC 中的笔触、填充和渐变
    12. 使用 Adobe Premiere Pro 和 After Effects
    13. Animate CC 中的颜色面板
    14. 使用 Animate 打开 Flash CS6 文件
    15. 在 Animate 中使用传统文本
    16. 向 Animate 中置入图稿
    17. 在 Animate 中导入的位图
    18. 3D 图形
    19. 在 Animate 中使用元件
    20. 使用 Adobe Animate 绘制线条和形状
    21. 在 Animate 中使用库
    22. 导出声音
    23. 在 Animate CC 中选择对象
    24. 在 Animate 中使用 Illustrator AI 文件
    25. 使用喷涂刷工具应用图案
    26. 应用混合模式
    27. 排列对象
    28. 使用“命令”菜单自动处理任务
    29. 多语言文本
    30. 在 Animate 中使用摄像头
    31. 将 Animate 与 Adobe Scout 一起使用
    32. 使用 Fireworks 文件
    33. 图形滤镜
    34. 声音和 ActionScript
    35. 绘制首选参数
    36. 用钢笔工具绘图
  7. 平台
    1. 将 Animate 项目转换为其它文档类型格式
    2. 自定义平台支持
    3. 在 Animate 中创建和发布 HTML5 Canvas 文档
    4. 创建和发布 WebGL 文档
    5. 如何打包 AIR for iOS 应用程序
    6. 发布 AIR for Android 应用程序
    7. 发布用于桌面的 Adobe AIR
    8. ActionScript 发布设置
    9. 最佳做法 - 管理应用程序中的 ActionScript
    10. 如何在 Animate 中使用 ActionScript
    11. 最佳做法 - 辅助功能指南
    12. Animate 工作区中的辅助功能
    13. 编写和管理脚本
    14. 启用自定义平台支持
    15. 自定义平台支持概述
    16. 创建辅助内容
    17. 使用自定义平台支持插件
    18. 调试 ActionScript 3.0
    19. 启用自定义平台支持
  8. 导出和发布
    1. 如何从 Animate CC 导出文件
    2. OAM 发布
    3. 导出 SVG 文件
    4. 使用 Animate 导出图形和视频
    5. 发布 AS3 文档
    6. 导出移动应用程序和游戏引擎的动画
    7. 导出声音
    8. 导出 QuickTime 视频文件
    9. 使用 ActionScript 控制外部视频播放
    10. 最佳做法 - 移动设备内容创建技巧
    11. 最佳做法 - 视频惯例
    12. 最佳做法 - SWF 应用程序创作指南
    13. 最佳做法 - 构造 FLA 文件
    14. 在 Animate 中优化 FLA 文件的最佳做法
    15. ActionScript 发布设置
    16. 指定 Animate 的发布设置
    17. 导出放映文件
    18. 导出图像和动画 GIF
    19. HTML 发布模板
    20. 使用 Adobe Premiere Pro 和 After Effects
    21. 快速分享和发布动画

阅读本文可了解如何在 Animate 中使用摄像头。

利用“Animate 中的摄像头”,动画制作人员可模拟真实的摄像机。  以前,动画制作人员需要依赖具有各种品质和兼容性的第三方扩展,或者更改自己的动画来模仿摄像头的移动。动画制作人员将可以使用以下功能,它们对任何动画电影都是必不可少的。

  • 随帧主题平移
  • 放大感兴趣的对象以获得逼真效果
  • 缩小帧,使查看者可以看到更大范围的图片
  • 修改焦点,将查看者的注意力从一个主题转移到另一个主题
  • 旋转摄像头
  • 使用色调或滤镜对场景应用色彩效果

在摄像头视图下查看作品时,看到的图层会像正透过摄像头来看一样。您还可以对摄像头图层添加补间或关键帧。

摄像头工具适用于 Animate 中的所有内置文档类型:HTML Canvas、WebGL 和 Actionscript。

启用或禁用摄像头

可以通过以下任一选项来启用摄像头工具:

  • 单击“工具”面板中的“摄像头”图标。
  • 单击“时间轴”中的“添加/删除摄像头”按钮。

启用摄像头后,舞台边界的颜色将与摄像头图层的颜色相同。

摄像头工作区

A. 舞台轮廓 B. 摄像头图标 C. 摄像头属性 D. 摄像头色彩效果 E. 摄像头工具 F. 摄像头图标 G. 摄像头图层 

舞台现在就像对文档使用摄像头一样。将带有摄像头对象的新摄像头图层添加到“时间轴”面板。选择摄像头工具后,将在属性检查器中启用摄像头图标。

当摄像头启用后:

  • 将当前文档置于摄像头模式。
  • 舞台变为摄像头。
  • 舞台边界中可看到摄像头边框。
  • 摄像头图层处于选中状态 

缩放、旋转或平移摄像头

缩放摄像头

  1. 使用屏幕上的缩放控件可缩放对象,或设置摄像头属性面板中的“缩放”值。

    缩放和旋转
    缩放和旋转

  2. 要放大场景,请修改“缩放”值或选择舞台底部的滑动条。

  3. 要放大内容,请将滑块向 + 侧移动,要缩小内容,请将滑块向 - 侧移动。

  4. 要想朝两边能无限缩放,可松开滑块,使其迅速回至中间位置。 

旋转摄像头

  1. 使用屏幕上的旋转控件可旋转对象,或设置摄像头属性面板中的“旋转”值。

  2. 要指定每个图层上的旋转效果,请修改旋转值,或使用旋转滑块控件操作旋转。

  3. 要想朝两边能无限旋转,可松开滑块,使其迅速回至停驻位置。控件中间的数字表示当前应用的旋转角度。

平移摄像头

  1. 在舞台摄像头图层中的任意位置,单击摄像头定界框并拖动。

  2. 要平移所选对象,请向上或向下滚动或使用 Shift 键水平或垂直平移,无需任何倾斜。

  3. 摄像头工具处于活动状态时,在摄像头边界内的任何拖动动作都是平移操作。

使用相机平移控件

您可以使用摄像头属性检查器的“摄像头属性”中的摄像头坐标 XY 来精确平移摄像头。
相机平移控件
相机平移控件

要在水平方向平移对象,请在 x 坐标值上方移动鼠标指针,然后向右或向左拖动滑块。 

要在垂直方向平移对象,请在 y 坐标值上方移动鼠标指针,然后向右或向左拖动滑块。

摄像头效果的重置选项

当您要返回到原始设置时,您都可以重置使用摄像头对平移、缩放、旋转和色彩效果所做的更改。要保留您先前的属性值,请单击每个属性旁边的重置图标。

摄像头属性
摄像头属性

对摄像头图层应用色调

  1. 选择“摄像头”>“属性”面板。要启用或禁用色调效果,请选择“色调”复选框。

    摄像头色彩效果
    摄像头色彩效果

  2. 修改当前帧的色调值(百分比)和 RGB 色调颜色。

    AS3 和 WebGL 文档类型支持此功能。

在摄像头图层上调整颜色滤镜

  1. 在“摄像头属性”面板中,选择“调整颜色”复选框以启用或禁用滤镜效果。

  2. 修改当前帧的亮度、对比度、饱和度和色相值。亮度、对比度、饱和度的可接受范围为 -100% 到 100%,色相范围为 -180° 到 180°。

    仅 AS3 文档类型支持此功能。

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

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

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

  1. 在 Animate 中的不同图层上创建多个对象。

  2. 向每个图层添加不同的图层深度。

  3. 通过单击“摄像头”工具添加摄像头图层。

    摄像头图层的图层深度
    摄像头图层的图层深度

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

  • 更接近摄像头的对象比远离摄像头的对象移动速度更快。
  • 当摄像头图层值为 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():对象

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()

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 文档中使用操作码向导。 

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

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

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

裁切舞台上的对象

利用 Adobe XD,可在另一个画板上堆叠或叠加内容,以模拟交互式幻灯片效果。例如,下拉列表、滑出键盘或灯箱效果。通过叠加,您还可以多次重复使用画板,而无需复制每个画板的叠加内容。 

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

Adobe 徽标

登录到您的帐户