Animate CC的一个月


我从Flash转到Animate CC并以全能HTML5格式创建横幅的经历的描述。剪裁下很多照片

一点历史游览和术语


就我个人而言,我自己已经对Flash熟悉了10多年,对这种技术如何“从内部”工作有点了解。

差不多几年以来,我一直在创建网站,包括使用“现代” HTML5语言创建网站,正如他们所说的那样,它可以完成所有工作。不,确实,有时候顽固的设计师发送了自然界中不存在的此类接口,因此必须将它们发明出来,并隐藏在“您可以用HTML5编写所有内容!”这一短语的后面。

我不假装自己作品的特殊艺术价值,但是我画的横幅数量已经超过一千,而且我几乎每天都在继续画。

在过去的5年中,Flash不仅使懒惰踢了一步,而且还没有真正理解这个问题。就我个人而言,我从未见过任何刹车或破洞,甚至就连史蒂夫·乔布斯(Steve Jobs)的第一句话都说“手指没有磨光”-这完全是荒谬的。苹果反对在iPhone上使用闪光灯的最明显原因在于表面,但现在还不行。

我们正在使用术语。 HTML是一种标记语言,用于文本和页面上元素的布局。他不知道如何独自执行任何动作。通常,它们不是Flash,而是“ HTML5创新”:播放不带Flash的视频,不带Flash的动画,不带Flash的多文件加载以及其他一些功能。

尽管到处都有赞誉,但到目前为止,“全能” HTML5上还没有健全的动画编辑器,而Adobe尚未将Flash CC转换为Animate CC,实际上仅导出为HTML5。

介面


Animate CC界面本身与Flash并无不同,这与Edge Animate不同,后者极为不同寻常。没什么可说的了,而且我没有注意到与我使用了很长时间的CS6的区别。对于标语,不需要AS3,这是支持AS2的最新版本。Google制作的Swiffy转换器只是与AS2的朋友。

* AS2,3是Flash中内置的动作脚本编程语言,它使您能够制作电影的整个非动画组成部分-以便按下按钮,将电影停在正确的帧处,以便可以读取信息,并可以启动与电影进行交互的交互式脚本。实际上,这是一种相当强大的语言,我仅使用其功能的0.000001%。

渲染引擎


自然,物体本身不能在滚筒内移动,因此,有必要使某些引擎移动,显示和隐藏它们。Animate CC对HTML5 Canvas样式的项目使用CreateJS,它会以警告的形式欢迎每一个新项目显然,这是一项不现实的任务-从您要转到的帧中一个接一个地处理。

:
EaselJS 0, 1. , gotoAndStop gotoAndPlay.




时间轴和工作区


因为 界面对我来说没有任何变化,这里的一切都是绝对标准的。没有区别。由于系统是俄语配置的,因此已下载了俄语版本的软件包。这不会打扰我,因为我使用热键,尽管有时我会挂在菜单上需要选择的内容上。



现在让我们继续我经常使用的内容:

Flash中的标准过滤器


过滤器是任何横幅广告中非常常见的组成部分之一,它们使您可以快速获得所需的结果。我将考虑3个我经常使用的过滤器。在Flash中,过滤器是标准的一部分,在我的工作中,过滤器对性能没有任何影响,原则上不会。在下文中,我将使用导出到GIF来了解差异

暗影


阴影是使横幅的各个部分变大并集中在正确的块上的最简单的选择之一。当然,我花了一个过强的阴影来说明差异
比较:
闪光灯创建js

是的,无法进行阴影动画。此外,如果视频比我提交的测试视频更长,那么阴影就会变成未知的东西。
在这里还值得一提的是,在编辑器和完成的html5中,阴影(实际上是所有效果)看起来非常不同。
编辑结果

在跟踪中导出时,您可以看到以下标记:
, , . (4)
嗯,至少要感谢警告...

带阴影的横幅性能尚不理想,但是他们警告说。擦除这些基板上的阴影后,我将负载降低到40%。当然,Flash会用23%的负载以及阴影来绘制所有这些内容



发光


在杂色背景上突出显示文本的最简单方法之一是向其添加笔触,只需使用具有高强度百分比的发光即可完成。
闪光灯创建js

同时,编辑器仍然不变,“可见性为零,我在设备上行走”:



有一个可能的解决方案,如果有必要,我将与大家分享,信纸的使用频率很高,没有它们您将无法生存。

此外,辉光不仅是字母的笔触,而且结果暗示它不会
闪光灯创建js在编辑器中


模糊


暂无评论。模糊仅适用于静态对象,因此无法使用此滤镜显示文本。
闪光灯创建js


随着相同的SVG过滤器和CSS过滤器的广泛普及,上述故障将如何存在-我无法想象。

出口和包装问题


每个人都习惯了闪存中的剪辑是一个独立文件。HTML5导出会生成一堆文件,而不是一个。由Google创造的Swiffy项目将SWF转换为HTML,并将所有内容打包在一个HTML文件中。显然,这项任务对Animate CC的创建者来说是一个巨大的负担。您可以在此处阅读有关将“所有内容”填充到Doubleclick的单个文件中详细文章我即时制作了转换器,阻止了php中一对函数的构造,但这远非理想,甚至是草案。解决我的任务-好的。

橡胶横幅


默认情况下,Animate似乎支持标语的“橡胶性”,但是通常橡胶标语是指水平延伸且不沿两个轴成比例伸展的那些。在导出模板中,这称为响应缩放,在横幅仅沿X轴拉伸的情况下,这会导致有趣的毛刺,直到我将其从模板中切出为止。



通常,您可以完全放弃拉伸横幅的想法,只取横幅位置的最大尺寸,并使用溢出:将片段的宽度指定为横幅位置和裁切部分的最小尺寸:隐藏,然后将CANVAS元素居中(指示其宽度等于横幅位置的最大尺寸),方法是:链接内部的水平线(占宽度的100%)比FLASH中的水平线还要简单一些,并且不需要在视频内添加任何脚本,只需使用CSS。


合计


你可以生活,可以使用,不能忍受刹车。通过转包为我的主要客户引入了限制-每个横幅广告不得超过5个场景,否则在带有大量横幅广告的大型新闻网站上,一切都会开始缓慢放慢。Flash已被任何类型的视频卡迅速且极其快速地绘制,并且到目前为止,以动画缩写形式HTML5和CSS3构成的圣杯在动画和交互元素方面都是由papier-mâché制成的。包括在据称埋有Flash的移动设备上,此类视频的性能引起了严重的怀疑。在闪存最终被埋没之前,不会撕裂任何一个标准。

Source: https://habr.com/ru/post/zh-CN397131/


All Articles