现在的位置: 首页 > 综合 > 正文

【原】向html5进军(4)——用flash和wallaby+制作html5动画 第三章

2014年01月28日 ⁄ 综合 ⁄ 共 2335字 ⁄ 字号 评论关闭

鉴于最近有些抓取机器和抄袭者,把标题的【原】字都复制,我不得不声明:本文为 yukon12345原创,转载请注明出处http://blog.csdn.net/yukon12345

第三章 创建高级动画

创建HTML5动画最关键在于你必须确保辛苦制作的flash动画能被wallaby导出。前面提到,wallaby不能支持所有的flash特性。

以下这些是wallaby能够支持的:

Timeline 时间轴

Wallaby支持时间轴,关键帧,动画补间,内嵌于影片剪辑的时间轴也能支持。但建议尽量使用主时间轴。

Layer 层

标准层(standard),引导层(guide),和遮罩层(mask)都能支持。 Wally只支持普通的持续遮罩(就是一遮罩层从开始到自己播放完,这个遮罩层只能有一个关键帧),如果对一个遮罩层分了几个遮罩阶段,这个遮罩将不起作用。同时,还要注意mask会给一些低端设备带来压力,应该尽量避免遮罩过于复杂和数量过多。

ActionScript

Wallaby完全不支持ActionSprit。只有一个例外:stop();把这个指令放在动画的最后一帧可以让动画只播放一次。(yukon12345:插入的方法是,选中最后一帧,按F9,出现一个面板,里面写上stop();即可)。而在通常情况下,动画会循环播放。

原件 symbols

Wallaby支持原件和原件名称的导出。

(yukon12345:文中用了symbol identifiers,实际上as3并不支持原件标识符,我试着导出了一个看了下,保留的应该是原件的名称。即右击原件属性里的。)

原件名称特意被导出为HTML5代码结果(就算没有放在舞台上),为的是能够方面的实现用javascript再修改动画,使其具有交互性。我们在第五章将接触这类例子。

滤镜Filters

只有alpha透明度滤镜被支持导出。

形状Shapes

通常情况下,flash里的矢量图都能够被转化。包括用各种形状工具,以及钢笔铅笔工具绘画出的。

笔触 strokes

支持转换各种尺寸的笔触效果。但样式效果只支持极细线(hairline),实现(solid)和虚线(dash)。

填充 fills

支持渐变填充gradient-based fills,图像填充 image-based fills 和颜色填充 solid colors

Image 图像

 可以转化所有flash能够导入的图像格式。包括图像的透明度。但动画里图片透明度效果取决于你在哪个浏览器中观看。

Buttons 按钮

普通的带鼠标指向(hover) ,点击(active)效果的按钮可以被转换。但是带actionscript代码的相应的按钮,比如点击后打开一个新页面,必须在转换后用javascript手工重新添加。

引导路径 path

可以使用路径来制作引导层动画,可以被wallaby转换(没有这个功能这个工具就没意义了)

文字Text

Wallaby支持标准字体和某些TLF字体。在转换时请先尝试一下是否支持这种TLF字体。

 

补间 tweens

Wallaby支持传统补间,运动补间和形状补间。

在输出时确保你的动画使用以上支持的特性。

性能表现

在你制作复杂拉风的动画之前,有一点必须要重视:对于任何一个项目来说,运行流畅并且能很快看到结果才是第一位的。如果你不良好组织和精简,最终的效果将是让人难以忍受的。

 

因此,性能调优是非常重要的。如果你以前用过一些视觉动画工具来制作web内容或者程序性的代码,你会发现这些工具其实生成了很多不必要的基础代码,远不如手写程序优良。Wallaby也不例外,虽然它创建大多数动画时表现不错,但有些复杂动画的执行效率会不如手写的javascript代码。在转化复杂的动画时必须当心:

 

flash播放器里运行良好的东西并不就是会在某个浏览器里运行良好。

当你建立复杂的动画时要记得优化。

下面是几条建议:

时时导出并测试

不要在你花了数天来制作之后,发现从第11个小时开始制作的动画就在一个浏览器里有问题。回头修补这个漏洞将会变得非常复杂。因此,在较大修改之后,记得时常导出测试。

使用正确的方法

想象以下你希望做一个下雪的动画,每一个雪花都有点不同,总共可能有50个不同的雪花,每一个都是高精度透明图片,然后调整不同的大小和设计每一个动画,让它们一起旋转,掉落。。

这可能是逼真的下雪效果,但这种做法给浏览器带来了极大的压力,每一片雪花都占用内存,

并且每一帧都要计算所有雪花的变形。。。

另一种方法能达到同样目的。做一张布满各种形状大小雪花的大图,只要将它简单的向下运动,就能实现下雪的效果。这种方法高效简单,并且可以在到达浏览器性能极限之前让你添加更多的动画元素。

考虑带宽

如果你想开发通过网络传输的程序,更小的程序将确保更快的载入。Wallaby导出你引入工程项目的所有物件(也包括从来没有作用的。原因之前也说过了)。因此你要妥善的考虑每一个物件大小和压缩格式。比如不要引入没有压缩的图片或者没必要的高质量图。

考虑限制

观看者的硬件配置和浏览器并不相同,比如chorme和safari都支持GPU加速,而chrome的V8 js引擎结合更好的桌面计算机CPU也更具优势。

遗憾的是,我们做动画时要考虑的是动画的复杂度和效果要与最低配置的支持与兼容。

另外,如果你做动画只是为了在特定浏览器和设备上播放,你就可以放手制作了。

Wallaby 特性

使用运动补间

动画补间比逐帧动画效率更高。不管是flash 还是转换成HTML5执行.尽量考虑用补间来制作动画。

少用形状补间

虽然形状补间支持转化成HTML5,但会产生大量的javascript代码,加重浏览器负担。

使用简单的引导路径

使用路径并无大碍,但如果是超复杂的引导层路径会带来负面效果。

抱歉!评论已关闭.