首页 > 视觉设计 > 浅谈设计师使用FLASH CC开发酷炫H5

FLASH是设计师都非常熟悉的一款软件,在动画效果的制作上非常便捷高效。但是随着HTML5的崛起和移动端不支持FLASH,已经宣判了FLASH的死刑。但Adobe似乎并未完全放弃FLASH,在最新的FLASH CC版本中,增加了输出HTML5的功能,你没看错,就是用FLASH直接发布HTML5文件。

01

在新建文档里选择HTM5 Canvas,就能新建一个canvas的画布,对于熟悉FLASH的同学来说,一切操作都和FLASH一样,非常容易上手。

现在让我们试着做一个动画吧。例如蜡烛晃动的动画。

 

首先在画面上绘制蜡烛主体:

02

在FLASH中绘制的矢量素材,在输出H5以后,会自动转化成CSS3代码文件,而导入FLASH中的位图素材,在输出以后,仍然是位图素材,不会转化为代码格式。这一特点,可以让一些矢量创作的H5非常小巧。

 

接下来,绘制蜡烛的火苗,并转化为影片剪辑

03

绘制的火苗上可以填充上带颜色和透明度的渐变,其原因是CSS3代码支持透明渐变,所以可以在支持H5的浏览器上很完美的解析出来。在FLASH里,设计师无需花精力思考能否转化成CSS3代码,只用关注创意本身,这大大提高了工作效率。

 

然后,我们开始完成火苗的动画

04  05

01关键帧                                                                        02关键帧

06  07

03关键帧                                                                   04关键帧

08

05关键帧

 

我们做了5个不同的关键帧,并用形状动画将它们连接成为完整的动画,熟悉FLASH的同学,能够非常快的上手。完成以后,我们就能够看到一段完整的火苗飘动动画,在输出的H5文件里,FLASH能够自动的转化成标准的HTML5动画。

 

最后我们再加上光晕的形状动画

09

 

在不依赖前端工程师的情况下,设计师通过FLASH完成了非常复杂和漂亮的HTML5动画,是不是觉得很神奇?

001

 

最后发布完成的动画,在会生成两个文件,一个是HTML格式的页面文件,一个是javascript格式的JS文件。

HTML5里新增加的canvas画布功能,增加了对图形绘制的大量支持,FLASH其实是利用这一功能,将完成的文件生成为canvas可以解析的代码,从而通过canvas画布完美重新了FLASH的动画效果。这一工作方法让设计师可以不依赖前端工程师去尝试开发各种H5动画效果,非常便捷高效。

当然,这只是一个最简单基础的尝试,下一期的讲解中,我们将用FLASH完成更为复杂的交互式H5尝试。

浏览:0 喜爱:
分享到: