logo网站设计成都建网站
成都网页设计网站制作建网站
首页 | 网站报价中心 | 网站优化推广 | 网页设计技术 | 行业资讯 | 域名主机常识 | 经典案例欣赏 | 网站建设方案 | 行业网特点 | 常见问题 | 美工设计
您当前的位置:成都网站设计工作室 -> 文章中心 -> 网站建设 -> 网站设计常识 -> 成都flash设计 -> 文章内容  
网站建设套餐

企业模板型 680元
服务内容
标准个人系列Ⅰ型+.国际顶级域名
主机空间:100Masp动态空间
精美页面:模板建站或20页以内静态页面
网站模块:公司介绍、新闻发布、产品展示、在线订购、留言版、人才招聘、计数器
网站特点:网站风格简洁明快,符合中小企业形象要求。功能紧凑实用,可

功能建站型 1480元-1980元
服务内容:200M/ASP空间,企业邮局(5个邮箱自由分配),.COM/.NET/.CN国际域名一个
制作形式:由我们专业技术和美工为您个性设计,使您的网站独一无二!架设栏目,添加非后台更新内,Access数据库,ASP程序,独立空间,强大后台,支持200-500人同时在线
网站功能:公司介绍,公司动态新闻,公司图片栏目,公司产品库,产品在线订购,会员注册功能,公司招聘,客户留言,联系我们,等栏目;提供强大后台可由客户随意制订,修改,添加,删除

高级建站型 2380元-4260元
服务内容:300M-500/ASP空间,企业邮局(5-30个邮箱自由分配), .COM/.NET/.CN/.COM.CN/.NET.CN国际域名一个,SQL(或Access数据库)制作专业高速安全的ASP或ASP.net程序,独立空间,强大后台,支持500-1000人同时在线
简单说明:(房产,家教,大型文章系统,房地产客户信息管理系统,旅游机票,火车票等预定系统,票务在线系统 ,网络办公OA系统 ,CRM客户资源管理系统,企业进销存系统,客户售后服务管理系统跨国公司产品展示系统,政府采购系统,学校考试系统--填空题考试系统,大型公司系统,中型型公司或个人门户型网站等)

开发定制型 4000元以上 (根据要求定制,价格面议)
服务内容:1024M-20G/ASP空间,企业邮局(5-50个邮箱自由分配), .COM/.NET/.CN/.COM.CN/.NET.CN国际域名一个,SQL(或Access数据库)制作专业高速安全的ASP或ASP.net程序,独立空间,强大后台,支持1000-10000人同时在线
简单说明:(大型房产,大型公司动画网站,英文网络办公系统,教育系统办公自动化系统,多功能信息办公平台,电子政务系统,公司或个人大型门户型网站,大型类似阿里巴巴商业贸


热门文章
· [组图] 5个红色调CSS酷站欣...
· 如何用CSS制作横向菜...
· [组图] 韩国楼盘房地产网站...
· [组图] 黑色调网站欣赏
· [组图] 服装网站欣赏
· [组图] flash案例
· [图文] 房产网站
· [图文] 红黑色调网站界面
· 成都私人建站,个人...
· [组图] 蓝色经典
FLASH与WEB动画
作者:本站  来源:www.cdwz8.cn    发布人:admin

减小字体 增大字体

第一节:Flash简介

Internet风行世界,作为展现Internet风采的重要载体,Web页受到了愈来愈多人的重视.好的Web页可以吸引用户频频光顾我们的站点,从而达到宣传我们的目的.因此,制作玄妙的Web页成为众多公司和个人的要求,制作和发布Web页技术和理论也随之迅速发展了起来.Web页是由HTML(Hypertext Markup Language,超级文本标记语言)组织起来的,由浏览器解释显示的一种文件.最初的HTML语言功能极其有限,仅仅能够实现静态文本的显示,人们远远不满足于这样死板的类似纯文本式的Web页,后来增强的HTML语言扩展了对图片,声音,视频影像的支持,这些改进使得人们可以在Web页加入动画,比如gif动画.但是,这些动画仅仅是独立的Web页元素,通常是自己完成自己的那一套已经规定好的动作,机械呆板.为了获得交互功能,Web页设计者开始在Web页中加入JavaScript,VBScript这样的脚本语言以及Java小程序来接受用户的信息并给出具体响应,比如说,当用户把鼠标拖到一个地方,Web页中将给出友好的动画文本提示.这种效果令人兴奋,它大大区别于以前的Web页,具有了人性化的交互功能.但是,组织制作这么一个Web页将是十分困难的,您必须掌握Java,JavaScript这样的编程语言,这种要求使得许多Web动画设计者望而却步.即使能够熟练的使用这些语言,为了获得类似的效果将要耗费大量的时间和精力,使得Web页制作周期大为加长.而利用Flash 3制作的shockwave网页却能让这一切变得轻松简单.

Flash是制作网络交互动画的优秀工具,其最高版本是3.0.它支持动画,声音以及交互,具有强大的多媒体编辑功能,可以直接生成主页代码.它的前身是FutureSplash,是用于完善Macromedia的拳头产品Director.但是由于Director并非针对互联网而设计的,因占用带宽过大而影响了其在互联网中的传输和应用.针对目前网络传输速度的问题,Flash通过使用矢量图形和流式播放技术克服了这一缺点.基于矢量图形的Flash动画在尺寸可以随意调整缩放,而不会影响图形文件的大小和质量,流式技术允许用户在动画文件全部下载完之前播放已下载的部分,而在不知不觉中下载完剩余的动画;Flash提供的透明技术和物体变形技术使创建复杂的功画更容易,给Web动画设计者丰富想象提供了实现手段;交互设计可以让您随心所欲控制功画,赋予用户更多主动权;优化界面设计和强大的工具使Flash 3更简单实用.同时,Flash还具有导出独立运行程序的能力,其优化下载的配置功能更令人为之赞叹.可以说,Flash为制作适合网络传输的Web动画开辟了新的道路.值得强调的是,由于Flash 3记录的只是关键帧和控制功作,所生成的编辑文件(*.fla)尤其是播放文件(*.swf)非常小巧,这些正是无数Web页设计者所孜孜以求的. Macromedia公司随其软件附带了一个小工具--AFTERSHOCK,这个工具能够自动产生HTML文档,使用脚本来控制动画的播放,也就是说,您不用构建程序便可以获得可直接使用的HTML页.但是,Flash动画的播放需要插件(plug-in)的支持,只有当用户的浏览器拥有这样的插件,Flash动画才能被正常的播放,否则,用户就需要下载这么一个插件.令人高兴的是,Flash格式已经作为开放标准发布,并将获得第三方软件的支持.所以,更多用户的浏览器将支持Flash 动画,Flash动画必将获得更加广泛的应用.

Flash在多媒体产品设计方面,网络动画设计及网页组织上显示出了巨大的生命力.愈来愈多的地方使用了Flash动画,应用前景令人鼓舞,具有巨大的潜在的商业价值.

 

第二节:Flash入门

从现在起,我们开始学习使用Flash制作动画,应当首先说明清楚的是:

1.读者应当具有的基础:

本教程讲解了如何使用Flash创建交互的Web动画.读者应该能够熟练使用windows95操作系统,并使用过一般的图形处理软件,比如windows中附带的画笔,Adobe公司的Photoshop专业图形处理软件,由于本教程侧重于Web应用,所以读者还应具有基本的网络知识,应该能够编写简单的Web页面.

2.关于本教程新名词的约定:

由于国内还没有一本关于Flash使用的正式的中文说明,本教程涉及了许多新名词,其中文翻译无从引用,为了国内读者阅读方便,教程作者对这些新名词进行了中文命名,从严谨的角度看,这些命名很可能是不恰当甚至是谬误的,因此,本教程不但给出了新的中文命名,而且在相应中文命名后给出了其英文原版描述,以期准确.

3.关于Flash本身的兼容性:

Flash对以前版本向后兼容,也就是说不可以在Flash2打开Flash3制作的文件,但能用Flash3打开编辑和使用Flash2的生成文件.

4.Flash 软件对系统的要求:

windows95/NT, 推荐使用 IE4.0 和 NETSCAPE 4.0 以上版本的浏览器

我们现在开始学习如何制作Flash动画,当我们安装完了Flash 之后,打开Flash,它的界面大体是这样的:

Flash 提供了简单的方法制作动画,我们先来看一个 Flash动画的例子:

由于我们无法在这里演示动态图形,为了看到这个动画的实际效果,请读者到我的个人13*_b46cu723dk*11z9a4otcl.com/thanks/bnuboy/下查看.这个Flash动画可以响应浏览器事件,当


您把鼠标放在螺旋桨上时,螺旋桨的旋转速度就会发生变化,当用鼠标击中螺旋桨时(按住鼠标左键),螺旋桨的旋转速度将变的更快;注意这个Flash动画的右半部分有my hometown,my home,pcc,my friend的字样,点击这些标志,将可以链接到不同的网页上,细心的读者可以发现,当鼠标指向这些热点(我们把能够响应用户动作的区域叫做热点)时,光标便变成了手的形状.这个动画所包含的功能是普通动画如gif,avi动画所难以做到的,之所以用"难以"一词,是因为随着技术的不断发展,有朝一日,gif,avi格式的动画未必不能响应用户动作,但是,从目前的情况看,我们所演示这些功能仅有Flash动画能够实现.

下面我们来实地制作一个Flash动画:

1.打开Flash,这时Flash自动创建一个新文件,这是一个"空"动画.

2.选取工具栏上的brush(画刷)工具(具体做法是:用鼠标击中工具栏的brush(画刷)工具图标),然后把鼠标移动到工作区域的空白部分,按下鼠标左键,移动鼠标,便可以画下一条曲线.如果一切顺利的话,您的Flash窗口将是下面这个样子:

3.点击工具栏上的arrow(箭头)图标,释放已选定工具,光标呈正常箭形.

4.在时间控制栏(time line)上,可以看见一个小蓝点,紧随其后,按F6键加入另外一个关键帧(keyframe),用鼠标选中新的关键帧,可以在工作区看到此帧与头一帧没有什么区别.拉动我们所创建的图形到另外一个地方,这样,这个动画帧与前一个动画帧便有了一点区别.

6.在两个关键帧中插入几个普通帧(frame),可以点鼠标右键,在弹出的的菜单中选择Insert Frame或者直接按F5添加普通帧(Frame).双击这些普通帧的任何一个,将弹出一个帧属性对话框(Frame Properties),在Tweening舌签的Tweening选项选择shape方式.

好了,我们就创建一个简单的Flash动画,打开modify主菜单,选择test选项,这样便能观察这个动画的实际运行效果.

通过学习本节内容,我们初步认识了Flash以及由Flash所生成的交互动画,如果您遵循上述步骤成功创建了您的第一个Flash动画,那么您已经跨入了Flash动画制作的大门.关于Flash各个具体功能的使用将从下节开始陆续向大家介绍.Flash 软件本身带了一个非常优秀的自学教程,只可惜是全英文版的.汉化版的Flash正在制作当中,希望能够早些问世.您可能没有能够成功创建这个小动画,请不要着急.作为一个强大的工具,我们掌握它需要多花一点工夫.在创建独有的交互动画中,Flash引入了许多新的手段和技巧,在最开始,我们很可能感到不适应,尤其当在面对一大堆晦涩难懂的英文单词的时候,错误百出在所难免,这是初学者必经的阶段,不仅学习Flash如此,就是学习其它的东西,也有类似的情况.但事实上,我只用了一天学习使用Flash然后便投入了Flash动画的制作工作,这样的效率源于两个因素:一是经验,二是压力.和许多其它软件相比,Flash有几乎所有动画软件共有的特征,我们不难由其它软件的使用方法"感觉"出Flash的门路;任务摆在面前,压力促使你全身心的投入,当然效率倍增;幸运的是,还有一位同事给我做了入门性的指导和操作演示,这个也十分重要.我们经常有这样的体验,书上长篇累牍的东西,看得头痛得不得了,实地观看一下别人得操作,可能马上就解决了.如果大家try了很多次还不成功,不妨打开Flash带的例子看一看,动手试一试,相信成功率会直线上升.记得老师给我们上程序设计,他鼓励我们照抄几个程序,调试一下,改动改动,事实证明这种学习方法卓有成效.

好了,这一节我们领大家做了一个简单的动画, 内容不多,但难度可能不小,又讲了一些关于学习方法的问题,希望对大家有所帮助.

另外,北京奥利泰特公司给我们开辟一块网上空间,欢迎大家把自己的学习经验写出来和习作一并寄给我,我们可以在网上彼此交流,共同提高.

Macromedia公司的网址是:http://www.macromedia.com ,读者可以从这里得到关于Macromedia公司产品更详细的信息

第三节:更深入的分析

在开始我们今天的学习之前,我们需要了解一些关于动画的知识,比如:什么是动画 什么是动画的帧和关键帧

利用人眼的视觉暂留特性,在一个图片序列中,可以按顺序插入每一帧图片(当然是静态的),相邻二帧差别很小,连续播放这么多帧图片,你就可以看到动画了,这种动画叫作帧动画,也就是说,还有其它类型的动画,帧动画是极其重要的一种.Flash和许多其它动画制作工具一样,比如3ds,Animator,可以由您给出各个关键帧,然后通过一定的算法生成中间帧.Flash能够生成自然,平滑的中间帧,能够产生细腻的动画效果.Shape-Tweening 方法(本节即将介绍到)是创建一个动画和保持文件大小的有力工具.由于Flash 3的特殊播放格式,当使用Flash动画时,浏览器无须下载动画中的每一帧,只需下载关键帧和控制动作就可以了.使用Flash能大大加快我们Web页的下载速度.

我们在Flash中可以使用进程控制框(timeline)来控制动画的制作进程:

进程控制框(timeline)是Flash中最为重要的一部分.在上面,我们已经接触过它.Flash中,进程控制框和其它许多控制联系在一起.从下图可以看到:进程控制框上给出了各个帧以及帧间动作,集中反映了一个动画的运行过程.为了清晰起见,F
lash允许在进程控制框中对动画的各层(layer)命名,比如上图中从上到下给出的五层分别是:Foreground, Action/lab, Targer, Text, Buttons.在创建复杂的动画时,遵循一定的命名规则对于保持清醒头脑,迅速完成任务有很大好处.同样,您可以在帧动作间加以注释和说明.

Flash提供提供了许多种方式产生和控制动画,Shape-Tweening方法便是其中极为重要的一种.现在我们就来学习使用Shape-Tweening方法操作一个变形动画.

我们常常需要对物体完成诸如移动,形变,缩放和变色操作.Flash的Shape-Tweening可以轻松达到这些效果,让一个物体平滑地由一个状态变化到另一个状态.(严格说来,是由一个物体变化到另一个物体).Flash特殊的动画格式使得生成的动画文件很小.至于为什么,我们已经在前面说明过了.

同使用Motion-Tweening类似(我们下一节将讲到),我们使用Shape-Tweening方法创建Flash动画时,首先创建一个动画序列的首末关键帧,然后修改Frame帧的属性并辅加其他控制.通过修改色彩设置来获得色彩渐变和图像透明效果.

需要注意的是:不可以对已定义的已标志对象操作,也不可以对多个元素的组合进行操作.Flash的Shape-Tweening方法仅对简单对象操作.当您试着操作一个变形动画时,比如把一段曲线拉伸,Flash可能生成了一系列毫无意义的中间帧,甚至弄得一塌糊涂.hint方法可以辅助您对复杂的动作进行有效控制.我们将在下节讨论hint方法.

打开我们上节制作好的那个简单动画,让我们来观察一下它的输出参数(如上图所示):

双击中间帧,弹出帧属性窗口,打开 Tweening 舌签页,在 Tweening 舌签页的最下方有一个小通道, 这个滑块可以调整Flash动画输出参数.拖拉Easing(输出)滑块在in和out之间移动.当把滑块放在靠近in的位置,可以让开始动作运行缓慢而使后面动作运行快速.相反,使滑块靠近out,可以延长后面几帧的运行时间.这样可以让动作看起来有加速度.Flash默认输出在中间位置,也就是以均匀的速率运行动画.此时,动画以相同的速率播放各帧.适当改变滑块位置会让动作看起来更自然,流畅.

使用本节所讲的变形技术自己创建一个Shape-Tweening 的动画,使用帧属性窗口调整帧动作的属性.下一节我们将接触另外一种动画技术 - - Motion-Tweening.

======================================================================

第四节:两种动画技术

上面两节中,我们接触了一种极其重要的动画技术―Shape-Tweening,事实上,Flash提供了两种最基本的方法制作动画,一种是Shape-Tweening,另外一种是Motion-Tweening,在这一节里,我们将详细介绍Motion-Tweening技术.

我们回头看一看上节的那个例子,当时创建了两个关键帧图形,在两个关键帧图形间,指定了Shape-Tweening方法控制动画运行.假如我们指定Motion-Tweening方法,那又会怎么样呢

读者可以实际操作一下,一定会发现:我的动画动不起来了!

我们再修改一下动画:

1,删除第二个关键帧(单击鼠标右键,选择Clear KeyFrame),这时动画序列便消失了.

2,选定第一个关键帧,用鼠标点击我们所绘出的曲线图形,这时图形呈阴影状,表明对象已被选定.打开Insert主菜单,选择第一项Create Symbol ,随之弹出一个主对话框,要求指定创建对象的类型,可以选择的项目有:graphic,symbol , movie clip .选择symbol点ok即可.这样,我们便定义了一个symbol对象,我们称之为已标志对象.

3,像以前一样,我们在这个关键帧的后面再加一个关键帧.此帧中包含了那个symbol对象,拉动它,总之要使它的位置和前面一帧有所差别.

4,双击两个关键帧之间的任何一帧,在弹出的帧属性(Frame Properties)对话框中选择Motion-Tweening方式.

好了,我们可以击回车键播放这个动画,可以看见,这个动画又"动"起来了.它的效果和以前的几乎没有差别.那么,Motion-Tweening和Shape-Tweening到底有什么不一样呢

顾名思意,Motion-Tweening就是产生动作的意思,Shape-Tweening则是产生形变.当使用Motion-Tweening方法时,Flash在你所设置的关键帧次序中完成诸如移动,放大与缩小对象之类的动作.Motion-Tweening操作不会改变对象的整体形状.Flash在一层中支持一个已标志对象(symbol)的Motion-Tweening操作.为了在同一时段完成许多对象的Motion-Tweening操作.可以通过设置多层并且分别加以控制的方法来实现.在使用Shape-Tweening创建一个动画序列的时候,Flash比较首末两帧的图形,通过计算插入一系列的中间帧使首帧图像平滑地过渡到末帧图像.与Motion-Tweening相比,Shape-Tweening能在同一层上许多对象操作.但我们推荐能使用多层来完成多个对象的变形操作.这个思想对于以后的工作十分适用,你不至于感到手忙脚乱,能在复杂的工作下保持清醒的头脑.Flash还可以设置对象的色彩,并通过alpha通道控制色彩的透明度,结合Tweening shape或Tweening motion方法,我们便可以做出变色的效果.但最重要的一点是,Shape-Tweening是由一个图形变换到另一个图形,而Motion-Tweening是基于一个图形或者说是一个已标志对象进行变换操作.

在上面的曲线移动动画中,体现不出来这
两种动画技术的差别,下面的例子会让您更好的理解它们的区别.

我们来具体做一下:

1, 选择动画序列的首关键帧,千万不要忘记把动画序列所在层设为当前层(在控制动画的制作进程中,Flash支持对各个层设置不同的属性,一个层有Current , Normal , Locked ,Hidden等几种属性,Current是指此层为当前操作层,允许用户对它实施操作,对它所包含的每帧图形进行改变;Normal是指正常状态,当我们对一个层操作完了的时候,一般将其设为这个状态;Locked是为了保护已完成的工作而对该层进行锁定;Hidden指隐藏这一层,使其不可见,在制作复杂的动画时,往往需要隐藏某些层,而只显示我们所关心的那几层,这样可以排除别的层的干扰)进行操作.

2, 创建这个动画序列的首关键帧:使用绘图工具来绘制一个图形.

3, 增加第二个关键帧作为动画序列的末帧.同第二步一样,构造这一帧的具体图形.

如果完成了这上步的话,那么我们就拥有了基本的"道剧".这个动画序列拥有首末两个关键帧.中间还有几个空帧.首末关键帧的图形有所差异.

注:这个时候还可以改换首末关键帧中图形的色彩和透明度.

4, 双击这个动画序列的头一帧,在随后弹出的Frame属性对话框中选择Tween标签,在Tween标签页中选择shape方法.

(仔细的读者在这个标签页中还会发现一个小的细节:可以看到有Distributive和Angular选项.这两个选项是一组单选框,它意味着这两种方式是互斥的.Distributive可以让动画变形更平滑,更规则.而Angular则可以使动画变形更"生硬".比如在直线的延伸控制上使用Angular不会让变形过程中直线变曲,变宽.Angular操作是针对有尖锐棱角和平直线段的图形操作.如果您选择的图形元素没有上述特征,Flash自动以Distributive方式变换图形.)

您可以在第一个关键帧上摆上一个点,在第二个关键帧上放置一条直线,那么,这个动画的运行结果将是:一个点渐变到一条直线.如果您对两个图形设置或填充的颜色不一样,那么还可以看到色彩的渐变效果.如果我们用Motion-Tweening的话,这种效果的实现便不大可能了.

======================================================================

第五节: shape hints -- 更细致的控制动画

日常生活中,你是否注意过这样一些事情,当你要到某个地方的时候,既可以走这条路,也可以走那条路;当你早晨6:00起床发现自己的表昨天就停了,可以顺时针拨动表针到6:00也可以逆时针拨动表针到6:00,也就是说,对某些事情的理解和处理有着不同的方法.在我们使用Flash制作动画的时候,也会存在这样的问题.

当我们定出两个关键帧,使用某种方法使图形由首关键帧帧变化到末关键帧帧时,往往出现意料不到的情况.我们认为应该以某种方式变化,而Flash"认为"还有其它的方式,下面来看一个例子:

A C (C’)

A’

方式一:

B

D (D’)

B’

A C (C’)

A’

方式二:

B

D (D’)

B’

在这个例子中,我们想做一个门旋转的动画,ABCD是门,要求它由CD为轴转动到A`B`C`D`的位置,也就是以第一种方法起动.动手做一下,你会发现,Flash竟然把CD轴平动了过去直到A`B`点,而AB则逐渐贴近原来轴的位置,显然,这个动画是失败的.

Flash提供了另一种方法来辅助Shape-Tweening中的变形动作.这种方法称之为hint方法.使用Shape Hint可以控制复杂的Shape形变操作.使用这种方法,允许你标识一些点-――hint,可以控制它们在首帧处于一种排列,而在末帧又是一种排列.所有这些hint仿佛是参照物一般,引导物体变形.

还是回到上面的例子,来看一看hint究竟是如何工作的.

方法一:定义四个hint,在首帧中依次占据A,B,C,D四点,在末帧中让它们占据A’,B ’,C’,D’四点.

方法二:同上,定义四个hint,在首帧中依次占据A,B,C,D四点,在末帧中让它们占据D’,C’,B’,A’四点.

以这两种方式引导动画变形,结果,方式*使动画以"关门"的动作运行.方式*使动画仍像以前那样运作.

到现在为止,我们已经对Shape-Tweening技术有了比较深入的了解,读者可能急于实现这样的动画特技,比如迈克尔・杰克逊音乐电视节目《黑与白》中不同民族,不同性别的人物相互转变的效果,还有飞奔的汽车幻化为一只奔跑的猛虎.这样的效果实在令人叫绝,如果我们在一个动画序列的首帧上放上这个汽车,而末帧上放上一只老虎,并使用Shape-Tweening方法控制中间帧,那么能够达到上述效果吗

从原则上说,我们可以做到这一点,但是您千万不要试图使用Flash完成这样的效果,Flash适用于简单图形的控制,对于过于复杂的自然图形来说,不仅Flash而且几乎包括所有其它的动画软件都不能自动完成这种变形操作.

那么,这些"特技"是怎么实现的呢 如果读者急切想知道该如何制作类似的动画,这里将告诉您这些技术的秘密.

以前,我们也曾看过一些人物变换镜头,它们大多使用了淡入淡出的技术,头一张脸淡入到背景这而后一张淡出于背景色.这种淡入淡出的效果许多软件都能达到.而我们这里所要实现的是不间断的变化.这种变换十分复杂,仅仅
是引入自然图像这一点就让许多程序设计师大伤脑筋,目前只能用手工的方法,首先获得两张脸像,通过一些图形加工软件把脸部加以拉伸,缩放,扭曲,直到十分接近第二幅脸像.通过记录中间变化过程,最后重放所有的操作,或者顺序节取变化过程中的多幅图片,这样看起来便会有那种神奇的效果了.

我们言归正传,Flash支持多达26个hint,用英文字母加以标识,我们叫它为hint a, hint b.shape hint在不同状态下会显示不同的颜色.我们根据下面的例子说明hint的使用方法.

1,首先创建一个动画序列,包括首末关键帧.

2,使用Shape-Tweening控制动作方式.

3,选择首关键帧.

4,选择modify>transform>Add shape hints或使用快捷键ctrl-H来添加一个hint.第一个hint是一个红圈包含一个字母a,移动它到您想标识的地方.

5,选择最后一帧,您同样会看到有这么一个a,移动它到相应位置.使用同样方法添加第二个,第三个hint,它们将分别是hint b,hint c.

运行一下这个动画来观看hint的作用.试着改变hint的位置.

下面列举了一些关于hint的常用操作:

A, 通过选择view>show shape hints来查看所有的shape hint.注意将包含shape hint的层和帧设置为当前层和当前帧.

B, 删除一个hint:直接拖位一个hint直至拉出桌面.

C, 选择modify>transform>Remove all Hint去除所有的shape hint.

我们现在有必要对shape Tweening方法做一个小小的总结.为了获得最佳的效果和最高的工作效率,在您使用Shape-Tweening功能时,遵循下列原则将十分有益:

1在复杂的动画变形中,一帧一帧的创建图形,把一个大的动作尽量分解为多个小的动画序列或片段.

2确信所设置的hint是符合逻辑的,有意义的.举个例子说,在直线的变形中,使用三个hint,这三个hint沿直线顺序排放.那么在动画末帧,这三个点也应该是顺序排放.不可能让它们在首帧按ABC顺序排列而末帧中以ACB排放.Flash将忽略这种逻辑错误.因此,当所设置的hint在动画控制中不起作用时,回头检查一下这些hint是否符合逻辑.许多人会在这个地方犯错误.

3如果将这些hint从被控制物体的左上角开始以顺时针方向(counter-clockwise)排列,shape hint将能更加有效的工作.至于为什么样,读者不必去考虑.

======================================================================

第六节:编辑solid color

前几节的内容很多,大家需要多动手,这样理解的将会更深刻一些.有些朋友来信说,在Flash动画中键入中文时效果不尽人意,会出现连笔的情况,好好的中文给弄得一塌糊涂,相反,英文就没有这个问题.的确,这个问题很让人头痛,幸好Flash的汉化版本就要出来了,这个问题应该是可以解决的.

今天我们讨论轻松一些的话题.这一节我们主要看一看Flash对色彩的处理情况.

当您选定一种绘图工具,比如pen(笔)工具,这时工具属性框中将显示相应工具的各种属性,这些属性可以手工改变.对应于pen(笔)工具的一个设置便是色彩(color),它有一个色彩按钮来表示当前色彩,色彩按钮的颜色便是当前颜色.用鼠标击中这个色彩按钮,将弹出一个配色板(就像图中所表示的那样).观察这个配色板,它共有3个部分组成,主体部分是由二百余个小色彩框所组成的配色板(您看到的配置可能跟我的不一样,不过并不妨碍我们的学习),这些颜色是由Flash为您预先设置好的,基本上可以满足工作的需要.之所以选择这二百多种色彩,Flash自有它的道理.在不同的机器上,以及在不同的浏览器上, 这些色彩基本上可以被正常的显示.

大家可能问,这是为什么呢

在制作和维护一个Web站点时,我们常常为这么一个事情头痛.当我们在图形中使用了高彩时,在我们的机器上,它会光彩夺目,非常的漂亮.当我们在朋友的面前,用他们的计算机和他们的形形色色的浏览器炫耀自己的天才创意时,往往发现自己宝贝作品一塌糊涂.用户的显示器有千差万别,浏览器各不相同,即使同一个浏览器也有设置和版本上的不同,而这些都关系着我们作品的实际效果.低彩色的显示器在显示高彩色制作出来的图形时,有的色彩显示不出来,只能将就着显示与之相近的色彩,这么一将就,可就不得了了.应此,为了使大多数用户能够觉得我们的网站赏心悦目,有必要考虑到这一点.解决的办法是,用尽量低的色彩,低到什么程度呢 低到大多数的计算机可以正常显示.最次的计算机可以显示16种彩色,一般的计算机显示256种色彩是不存在问题的.16位色彩在今天也受到了广泛的支持,当然,愈往上走愈不保险,在不影响效果的前提下,向低彩色靠拢绝对明智,而且,低彩色的图形文件明显小得多,在拥挤得Internet上,小巧就意味着"可爱",试想,假如我们做了一个美妙绝伦的图形,而用户在浏览时左等右等半天不出来,再好再亮的图片也是白搭.毕竟,我们之所以学习Flash,一个极其重要的原因就是:Flash动画很小,很适合网络传输.

当然,在动画制作中为了获得令人惊奇的效果,天才的思想往往会冲破这二百种色彩的束缚.Flash提供了完备的设计,使您能够轻松的修改配色板设置,下面我们就试着动手修改某个小方框中的色彩.

1, 首先要配色板中选定一个色彩框,比如图中的红色色彩框.


点击调色板按钮(color palette button),将弹出一个色彩窗口.也可以打开主菜单window项,选择colors,同样弹出色彩窗口.

3, 观察这个色彩窗口,它有两个舌签页,一个是solid color舌签,一个是gradient color舌签.点击solid标签以显示solid color调色板.

4, 在color space窗口中有一个十字光标,它代表了当前的色彩,拖动它到另一个位置,比如蓝色区域中,不过这时的color previews窗口仍然没有变化.拖动右边的一个辅调节窗口的三角光标,(又叫灰度调节窗口-hue color window)color previews窗口显示的色彩将发生变化,它此时给出的颜色就是您现在正在调置的颜色.

5, 可以看到,在hue灰度调节框中的右边有一个滑块,我们超过这个滑块来设置色彩的透明度,色彩的透明度是以alpha(阿尔法)通道值表示的.拖动这个滑块,将会看到底部的阿尔法(alpha)值发生改变,color previews窗口显示的色彩也随之发生改变.阿尔法(alpha)值是一个百分数,你可以直按在Alpha文本框中键入具体数字来改变色彩的透明度.(读者可能注意到了,用color space选色时,同样可以通过直接设置RGB的值确定色彩.)

6, 您可以试着改变某种色彩的alpha值,在color previews窗口中将能看到改变后的效果.当把alpha值分为100%时,色彩不透明.当把alpha值置为0到100%之间的数时,色彩将允许后面的颜色"透"过来,Flash把color previews窗口背景设为黑色线格,这时可以隐约看到后面的黑色线格.同样,假如您在工作区域的两层分别放置一个被色填充过的物体,让它适当重合,自然,上层的物体会遮住下层物体.假如您把上层物体填充色的Alpha值设为50%(0-99%都可以,这是为了看得更清楚罢了),那么下面的物体被遮挡部分就会隐隐约约的显示出来.相反,若把上层物体的填充色alpha值设为100%,那么下层被遮住的部分将被遮得严严实实.这就是不透明.

仔细观察,我们不难摸索出如何编辑组织solid color窗口:

当完成了色彩的选择:

1) 击change按纽改变原色彩为当前选择色彩.

2) 如果您觉得不太满意,可以"delete",删给色彩窗口中的选中的颜色.

3) 使用"new"来添加一个新的色彩.

通过本节的学习,大家可以对自己的习作加以色彩上的变换,通过改变动画序列首末两个关键帧图形的色彩,就可以实现动画中色彩的渐变了.

======================================================================

第七节:编辑gradient color

上一节,我们认识了调色板,并动手编辑了一个solid color,同样,我们可以利用类似的方法创建或修改渐变色.有的读者问我,什么叫solid color,怎么那么别扭.在汉语中,好象没有与之对应的表达.字面上说,solid的意思是:坚固的,固态的,把solid color捏到一块,那就是坚硬的色彩,好象会让人笑掉大牙,从古到今,没见过谁这样说过,既然在Flash中,solid color和gradient color是两个对应的概念,我们不妨理解为:平稳的,不变的,均匀的,也就是我们一般所说的色彩.至于gradient color(渐变色),这个不说也明白.两个国度的人生活方式不一样,思考方式未必一样,语言中体现出许多差别也是可以理解的.

撇开文字上的讨论,我们回到我们的Flash上.在色彩窗口中,我们注意到渐变色选框下面有个颜色标识块,可以用它来确定渐变色的渐变速度.渐变有两种方式:liner和circle;liner叫线状渐变,circle叫环状渐变,也叫月晖式渐变.在其它图形处理软件中,不难找到类似的功能,比如在Photoshop中,工具栏上就有一个绘制渐变色的工具,当设定由某种颜色渐变到另外一种颜色时,在画布上便可以拉出渐变的色带.在Flash中设定一个渐变色的具体做法为:

打开color对话框,选择gradient舌签.在选键之前,首先确定一个渐变色.通过pointer和circle控制渐变方式.

注意:渐变这是指在两种或更多种色彩之间的颜色.介于两种颜色的渐变很好理解,什么叫介于多种色彩的渐变呢.在FLASH中,你可以最多选取16种色彩来控制渐变,这是通过"color pointer"来实现的.拖动一下"color pointer",你就能理解什么是多色彩渐变了.注:color printer标识了渐变色的变化速度.可以按住pointer well不放,并拖至滑线上以增加一个color pointer,可以想象,当你拖住一个color pointer不放直至拖出滑线,你就完成了对这个 color pointer的删除操作.

我们在上一节曾经提示过读者朋友可以通过色彩的设置实现动画中的变色效果,如果您自己试出来了,证明您在学习中有了很大提高.其它的朋友也不用着急,我们下面将对动画中变色效果做详细的讲解.

有时候,我们要在动画中实现物体颜色的改变.Flash提供了一种方法,使我们能对一个字符实例进行色彩变换的操作,这种方法称之为Tween color方法.首先要注意的是,Tween color方法是对字符symbol类型进行色彩效果控制,而不适用于已标志对象组,文本和图形元素.为了实现色彩渐变的效果,我们先在同一层设置两个关键帧.然后改变两帧中物体的(已标志对象)的颜色,使得两个关键帧的已标志对象存在色彩差别.运用Tween color方法,Flash将在这两帧之间生成具有渐变色彩的中间帧.当然,也可以把首末帧的灰度(alpha通道值)设置不一样,让Flash生成一系列具有不同
灰度的中间帧.Tween color技术能够产生光怪陆离的神奇效果,比如常见的淡入淡出(fade in and fade out)效果.

下面我们按步骤试着做一下:

1.打开主菜单File项,选用new,让我们从头做一个动画.

2.在已存在的仅有的一层中的第一帧中创建一个已标志对象实例.

3.增加八个中间帧(按F5),在末帧按F6,创建一个关键帧.新建的关键帧继承了头一帧(和前一帧几乎一模一样).选定这个已标志对象实例,选取主菜单modify>instance项,随后弹出instance属性对话框,在color effect (色彩效果)框中选择tint选项,点击color舌签,露出color舌签页.在这里,通过十字光标在color space区中选择某种色彩,通过辅调滑块改变色彩,如果需要的话,可以对配置色彩的alpha通道值加以改变.完成这一切之后,点击OK结束.

*双击这个动作次序的首关键帧,弹出Frame(帧)属性对话框,选择Tween舌签并选择motion方法.

然后我们便可以试着播放这一段动画了,您将能看到平滑的色彩渐变效果.当把末帧中色彩alpha值设置很低(如0%),将能够看到淡入的效果(fade in) .

我们按具体步骤做一个淡入的动画,这里仅对上面那个动画做小小的改动:

1, 选择首关键帧,击取操作对象来选中它.

2, 选择主菜单modify>insance.

3, 在随后弹出的instance对话框中选color舌签.

4, 当前色彩的配置信息就显示在这个对话框中,拖动alpha滑块来改变其数值,这里我们把alpha通道值设为0%,点OK.

这个参数(0%)的意义是:在这一帧中所操作对象处于完全透明状态.

如果系统完成上述步骤,试着运行一下这个动画,Flash生成了一系列中间帧,在这一系列中间帧中,对象的透明度不断变化,隐隐约约将"透了"出来,这种效果使称之为淡出(fade out).

同样,改为最后一帧的alpha通道值为0%时,将会产生淡入的(fade in)的效果.

注意:我们同样可以在shape Tweening中实现一个简单对象(尚未定义为组)的色彩渐变.在一个动画序列中的最后一帧重新以不同颜色填充对象,以shape Tweening方法控制同样能够产生色彩渐变的效果,也可以通过为两个对象设置不同的alpha通道值达到淡入淡出的效果.

上面的图例中,我们给出了Flash中的一个例子,令人感到惊奇的是,它不仅有变色的效果,而且它可以让我们通过旁边的按钮对这个动画进行控制,比如,用鼠标点击play,动画开始播放,点击rew,动画倒回到第一帧.这就是我们下一节将要介绍的Flash动画交互.

======================================================================

第八节:创建交互动画

我们说过,Flash中的已标志对象可以细分为三种:按钮对象,图块对象以及movie up对象.

按钮是极其重要的已标志对象,使用按钮是创建交互动画的捷径.

我们学习了那么长时间,你肯定接触过交互的Flash动画,在上一节,我们就给了一个具有交互功能的色彩渐变动画,当我们把鼠标移到某个控制按钮上时,比如其中的play按钮并击中它,是否注意,在这一系列操作过程中,按钮的状态发生的明显的变化,当鼠标远离按钮时,按钮呈黑色,当鼠标移至play钮的上面时,按钮变为蓝色,如果点击的话,按钮又变为黑色,而且原来的尖型播放钮,变成了双杠(||)的暂停钮.可以猜想,这么一个按钮包括了四个部分,分别代表了它的四个状态.为了清楚起见,不妨"解剖"一个按钮看一看.

由windows>Library打开Flash的已标志对象库(symbol library),然后拖出来一个按钮对象(button),用edit symbol切换到已标志对象编辑方式,我们可以仔细观察一下这个按钮的具体结构.

可以精楚的看见,一个按钮包含了四个状态――up,over,down,hit.Flash的进程控制框(timeline)给出了明白的提示.这四个状态以四个关键帧来表示.我们可以一帧一帧的创建一个按钮.

一个按钮的四帧代表着这个按钮的不同工作状态:

*头一帧――mouse up状态.也就是鼠标离开按钮时的状态.

*第二帧――mouse over状态.对应着鼠标指针处于按钮上方那未击下的状态.

*第三帧――mouse down状态.当鼠标击中它的状态.

*第四帧――作用区域,这是最后一帧.它不代表按钮的形态.只是标识了一个区域.这个区域可以响应鼠标事件.这一帧在动画中将不可见.

我们来具体创建一个按钮:

1.首先确信没有要工作区域中选择任何对象.打开主菜单,选择insert>create symbol.

2.在随后弹出的对话框中指定新已标志对象的类型――button,并予以适当命名.

3.紧接着,Flash自动切换到symbol-editing模式,此时显示了这个新字符的中心位置.(用十字光标来表示)相应地,进程控制框(timeline)中给出了四帧的标识,分别为up,down,over,hit.这时仅有一层,在仅有的这一层中也只有头一个关键帧.

4.使用绘图工具来构造up状态的图形.可以任意引入其它元素,包括位图(bitmap).可以在一个按钮上使用动画对象(movie clip)和图形(graphic)对象.但是Flash不允许在一个按钮上叠放另外的按钮,事实上,那样做也没有什么必要.使用动画对象(movie clip)可以创建动态的按钮.为了确认引入的对象,用windows>inspecter打开inspector来检查它们,我们以后将详细介绍inspector的用法,大家提前熟悉
一下也有好处.

5.类似的,我们可以创建第二帧,第三帧,第四帧中需构造一个实心区域就可以了.

(注:选中进程控制框(timeline)上的down状态帧,打开主菜单modify>frame,在随后弹出的frame属性对话框中选中sound(声音)标签页.然后就可以为这个状态加入声音效果.)

当完成这一切之后,选择edit>movie返回movie编辑状态.这时打开Flash的library已标志对象库,可以看见所创建的已标志对象已储存在库中.击中它,拖曳至你的动画中,创建这个按钮的头一个实例.

(注:为了检查一个按钮的工作情况,选择control>Enable button,这个就可以在编辑状态下,让按钮起作用了.把鼠标放上去,看看会出现什么.)

======================================================================

第九节: symbol纵览

通过前几节的学习,我们多次接触到了已标志对象(symbol),我们已经有了足够的经验,在这一节中,我们将对已标志对象做一个总结.

已标志对象是Flash中一类极其特殊而重要的对象.一个已标志对象可以包括许多帧和层,和Flash中一个场景(scene)几乎没有两样.Flash在它自带的库(library)中给出了许多已标志对象,这些已标志对象包括图形对象(graph),按钮对象(button)和动画对象(movie clip),当你在动画中创建定义一个已标志对象,Flash都能够自动把它存储起来.所有的已标志对象都是这样建立的:选定要标志的对象,打开insert>create a symbol,然后在弹出的对话框中对其设置属性和给予命名.我们把通过这种途径获得的图形,按钮,动画都叫做Flash的已标志对象(symbol).打开Flash主采单,选择windows>library,将弹出一个library显示框,就像附图中所给的那样.用鼠标击中所显示的已标志对象,按住鼠标左键不放,一直拖到工作区域,然后放开鼠标左键,这样就创建了一个已标志对象实例(instance of symbol). 我们可以随意地对它操作.但是注意,我们这时所操作的并不是已标志对象(symbol),而是已标志对象的一个实例(instance of symbol).已标志对象的实例与已标志对象之间又是什么关系呢 这个问题很有点意思.与程序设计中类(class)的概念相似.已标志对象代表一个类,它拥有这个类的全部属性.通过已标志对象创建了的一个形体(就像刚才用鼠标把一个已标志对象从库中拖曳出来一样),这个形体(或者说一个可以进行操作的具体对象)叫做instance实例,这个实例继承了相应已标志对象的所有属性,你可以把同一个已标志对象拖来拖去,创建一个又一个实例,对每一个实例进行操作将与其它实例无关,但是Flash将记下每一个实例与相应已标志对象的关系,原来的已标志对象也叫做主控对象(master symbol).举个例子,图中两架飞机都是通过库中的已标志对象Biplane创建的实例,已标志对象Biplane就叫作主控制对象.Flash在记录这些实例时,并非"死板"将记下每一个实例的各种具体信息,而是记下主控制对象和相关实例之间的关系.(比如放大多少倍,转动多少度,色彩被如何改变一类的信息)用这种记录方式记录动画能够有效地减小文件的大小,为您"轻盈"的Web页打下基础.

`为了更好的理解已标志对象对于创建Web动画的重要作用,我们拓展一些,来看看什么是MPEG压缩:

我们所见到的光盘,一般是为600MB左右,如果不加处理,即使是这样的容量仍然不够存储一般录象带存储70多秒的视频信息.一张光盘存储74秒的视频信息是没有多少意义的,而我们现在可以使用两张光盘记录一部电影(135分钟),这其中的奥秘便是使用了MPEG压缩技术.如果割裂的看待电影中的每个图像,"诚实"的记录每一副图像(记录下每一副图像的所有点的信息),所记录信息就会十分庞大.但如果只记录仅是图像的变化部分呢 这样的记录区域只是原来图片很小一部分,记录信息将大大减少.Flash中只记录的动画的原型即已标志对象,一切具体元素都是由相应的已标志对象变换来的.因此,Flash所记录的信息量大为减少.一个Flash动画有15K,相应的avi动画可能要达到600-700K.Flash对Web页设计者的贡献是显而易见的.

为了更清楚地介绍Flash的使用方法,我们有必要用框图的形式给出这些概念的联系概念,在工作中,很多错误都是由于概念不清楚所造成的.

我们把在Flash中的操作对象分为四类,Flash中所有的操作对象(所绘制的一条线,插入的一行文本)都叫做元素(element),元素就是Flash动画中的组成部分,对元素再细分类,可以分出简单对象,已标志对象和复合对象.

Flash中许多操作都是针对已标志对象的,已标志对象是Flash中极其重要而特殊的元素.可以把元素定义为图形对象(graph symbol),按钮字符对象(button symbol),动画对象(movie clip symbol).图中已经给出了明确的指示.

乍一看来,这些概念可能有些烦琐,但是这些概念又极其重要.注意理解这些新名词的概念,注意它们之间的区别与联系.

[] [返回上一页] [打 印] [收 藏]

版权所有 成都网站建设超市
地址:成都洗面桥5号 邮编:610041