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

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

第一章 有关Flash的基础知识

Flash是flash系列平台的统称,但我们平时很多时候把flash开发工具(flash tools),flash运行环境(flash player runtime)和flash内容(flash content)都称为flash。下面简单介绍了下三者的概念。

直到现在,flash内容只能在部分支持flash环境的设备上观看。但联合wallaby,你可以创建基于html5的动画。使用Flash Professional来制作动画可以加快工作的完成。

作为老牌动画制作工具,Flash Professional诞生于1996年。当时的名字叫做FutureSplash。但随后便改成现在的名字。其优异的视觉效果远远超过了HTML。随后flash被广泛运用于web设计上。如今,Flash Professional作为Adobe Creative Suite(Adobe公司开发套件)产品的一部分,进化成为丰富web内容的强力工具。

Flash Professional只是flash平台家族中的一个开发工具。还有许多各式制作flash 内容的工具。它们制作的flash内容都是需要运行在名为“flash运行环境”(Flash Player runtime)中。但wallaby能够将Flash Professional的工程文件输出为HTML5,从而不需要安装插件就能运行flash制作的动画。

如果你想建立一个动画,你将遇到以下技术或格式文件:

Flash Professional

如上所述,是一个基于时间轴的动画制作工具。本书里需要CS5版本来生成HTML5。

FLA 文件

FLA文件是Flash Professional生成的工程文件。Wallaby转换就是需要用到这种扩展名为.fla的文件。

Flash Player

是运行所有flash内容的环境,也可以认为是播放器。Flash Player通常以插件形式存在于浏览器中,但也可以是一个单独的文件播放器。

目前主版本为10(10.3)

SWF

SWF文件扩展名为.swf是由Flash Professional发布生成并可以在flash player中播放的文件。但用swf文件并不能生成HTML5,不过我们还是会生成swf预览动画效果。

ActionScript

ActionScript是flash平台的脚本程序语言。AS3功能十分强大,但如果只想制作动画,你只需学几行就够了。我们这里只使用AS3制作一些简单的按钮点击控制和帧导航即可。

Yukon12345:接下来的一堆是对Flash cs5的界面和基础介绍,flash中文入门视频教程遍地,比这本书讲的易懂详细的多的去了,我也懒得翻了。只说说初学者要掌握的知识点和术语吧。具体可以谷歌之。下面文中的flash都是指Flash Professional

库 library

舞台 stage

时间轴 timeline

导入物件 importing assets

绘制形状Drawing shapes

处理图像 working with images

如果你把一张现成的图导入到flash中,无论这张图的格式是PNG,JPG,gif还是别的什么,都会变成位图。位图的是将每一个像素数据都保存,由一个一个像素颜色点来组成一幅图片。(一个像素的颜色用数个bit表示。因此叫位图)而矢量图只是包含了一些向量、颜色等数据,由计算机通过算法来计算显示出的。位图在被改变大小时,会失去原有的精度。把一张位图缩放,由于某些点的图像数据并不确切存在,flash会智能的计算可能的过渡颜色,图片会看起来变模糊。但不管怎样,过度的缩放图片将带来许多问题。

位图和形状使用须知  knowing when to use bitmaps or shapes

使用位图虽然有不少缺点,但并不是说全盘使用矢量图就是最好的。复杂的矢量图会带来较高的性能消耗。例如,如果你把一张人脸部图片转化成高精度的矢量图,可能不但会比使用位图占用字节更大,还会给CPU带来压力。播放时还会造成掉帧,闪烁之类的异常。

因此,如果你想图片效果细腻,高精度,用位图。如果想让物件变换变形什么的,用矢量图形是不错的。

如果你想既能缩放又不损失精度,可以把一张位图转换成矢量图。(flash已经提供了这个功能)但你要自己衡量矢量图的精细程度,确保让它看起来既能让人接受,又不太过复杂。

避免位图不必要的缩放 avoiding undesired scaling in bitmaps

当使用位图时,有件事必须注意。如果你缩放位图,图片的显示质量就会降低(甚至变形)。因此你必须考虑在各种分辨率和显示设备下,位图的缩放效果。

如果你锁定flash内容文件的宽高,你就不会有拉伸位图的顾虑。

如果你不固定,就要多加小心。比如你制作的背景图片分辨率是1024*768。如果在1920*1080分辨率的显示器上看,效果会非常差。因此建议你使用形状作为背景。

把物件转换成元件 converting assets to symbols

实例 instances 把库里的元件拖入舞台会生成一个实例。好比是元件的复制品。你放入多次可以生成多个实例。改变一个元件,那么这个元件的所有实例都会改变。

这样的好处是,就算你放100个实例在舞台上,生成的flash文件大小并不会增加。不过运行时会消耗一些系统资源。转化成HTML5时也是如此。

现在的电脑对处理大量复杂flash内容问题不大。但是手机等移动设备并没有太强的处理能力。如果你为手机开发flash,就必须注意优化。幸运的是,如果你懂得一些基础的计算机资源知识,就不会有这些麻烦。我们将在第三章讨论优化的细节。

关键帧 keyframes

动画补间 tweening

阅读更多
个人分类: 一天一翻译 HTML5
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭