Web设计师对Adobe Animate CC的介绍

最新推荐文章于 2024-06-18 18:18:15 发布

daique1908

最新推荐文章于 2024-06-18 18:18:15 发布

阅读量1.1k

点赞数 1

文章标签：网络 java python 大数据人工智能

有什么比静态更好？在运动中，我的好朋友。从简单的界面交互到更复杂的场景和原型，Web的运动正在兴起。在本文中，我们将向您介绍Adobe Animate，它是什么，它不是什么以及它如何帮助您作为Web设计师。

Adobe Animate被描述为Flash Professional的演进；史蒂夫·乔布斯（Steve Jobs）付诸实践的那一刻，该产品的专有性注定要载入历史。

“为更准确地表示其作为网络及其他领域首要动画工具的地位，Flash Professional将更名为Adobe Animate CC” – Rich Lee ，2015年

因此，时代在变化，因此Adobe改变了他们的网络方式。

无论您是不熟悉运动的新手，还是认为自己是寻找原型制作替代产品的资深人士，Adobe Animate CC都适合您。与所有工具一样，其目的特定于使用它的人。这不是每个人都必须使用的工具，但是要知道它的存在符合您的利益。

借助Adobe Animate，可以将卡通，广告，游戏和其他交互式内容等创作内容发布到熟悉的平台，例如HTML5 Canvas，Flash Player和Air，WebGL甚至是Snap SVG。

为了帮助理解Adobe Animate的功能，我认为最好列出一些我个人感兴趣的关键功能。关于Adobe Animate的最好的事情当然是网络标准的拥抱。紧随其后的是大量的导出/发布选项，然后是矢量画笔，HiDPI支持，第三方JavaScript集成等等。

所有动画均按顺序发生，通常称为时间轴。 Flash开发人员将非常了解这些概念。通过此UI，开发人员可以通过获取整个序列如何组合在一起的直观视角来管理时间轴中的动画。这是Adobe讨论时间轴基础的简短介绍。

时间轴可以包括基于帧的上下文中的细粒度动画。这意味着艺术家可以单独创建动画，并将这些孤立的动作整合到更大的主时间轴中。

随着Animate CC最终接受开放的Web标准，开发人员必须仍然意识到他们导出到的格式的技术限制。如果需要，开发人员可以选择将SWF文件导出到Flash Player。还可以以多种分辨率导出，从而使位图工作变得无价。您甚至可以基于关键帧生成精灵表，并使用CSS对其进行动画处理！

毫无疑问，导出和发布选项使现代化项目效率更高。通过启用“缩放内容”选项，可以发布同一项目的不同版本，而无需从头开始重新创建原始源文件。使用正确的object并通过“发布设置”对话框embed标签，为ActionsScript项目生成HTML文档。

锦上添花的是，您还可以输出到SVG 。

Animate CC引入了新的矢量绘图工具，其中包括不需要转换为形状即可进行编辑的矢量画笔。在Animate CC中，您还可以使用Illustrator中有关画笔和绘图的所有内容。它允许您通过设置画笔的参数（例如形状和角度）来自定义画笔。如果您关心质量和清晰的艺术品，那就超级滑。

Flash开发人员将可以使用骨骼工具在家中使用线性链接或分支成亲子关系的“骨骼”为对象设置动画。想像一下手臂弯曲，蛇滑行或腿踢等动作。这些类型的动作可能要花费大量的时间来编写代码原型，但是使用Animate CC可以非常Swift地进行，从而可以使坏主意的成本降低，并可以更快地培育好主意。

基于电枢的运动序列也可以包含在符号或所谓的“实例”中，可以在整个项目中重复使用。

骨骼工具还带有其他技巧。通过将动态物理学整合到骨骼中来获得逼真的物理运动，例如弹性，使运动对物理世界更加逼真。

因此，您制作了很棒的动画作品，但是想使用例如GreenSock的第三方助手？好消息！您可以做到这一点。现在，通过Animate UI，开发人员可以在没有外界帮助的情况下，拥有自己所希望的灵活性，而又不会感觉自己住在有围墙的花园中。使用最新JavaScript库供您使用，并获得动画帧所需的灵活性。

动画师可以完全控制舞台（即画布）的放置方式。从您选择的任何点（例如从中心到舞台，甚至从角落），都可以使用选项以任何方式旋转舞台。您的动画也可以包含更多的动态效果，例如添加摄影机效果（例如平移，缩放或旋转），使您的项目更具真实感。提防詹姆斯·卡梅隆。

工具很酷，但不能统治世界。明智地选择，但选择适合您的方法。有一些工具可以帮助您不要支配您的工作流程。如果您在项目中使用Animate，请告诉我们有关此应用程序的经验，并在示例下方提供评论和链接。动画愉快！

翻译自: https://webdesign.tutsplus.com/tutorials/a-web-designers-guide-to-adobe-animate-cc--cms-28240

关注