网页设计与制作 第16章:动画元件制作和外部素材的导入_第1页
网页设计与制作 第16章:动画元件制作和外部素材的导入_第2页
网页设计与制作 第16章:动画元件制作和外部素材的导入_第3页
网页设计与制作 第16章:动画元件制作和外部素材的导入_第4页
网页设计与制作 第16章:动画元件制作和外部素材的导入_第5页
已阅读5页,还剩49页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

1、第第16章:动画元件制作和外部素材的导入章:动画元件制作和外部素材的导入网页设计与制作北京师范大学出版北京师范大学出版第第16章:动画元件制作和外部素材的导入章:动画元件制作和外部素材的导入 本章知识要点本章知识要点 Flash CS4图层及图层中对象基本操作图层及图层中对象基本操作 Flash CS4 动画元件的制作动画元件的制作 各种外部素材的导入各种外部素材的导入 声音素材的编辑声音素材的编辑网页设计与制作网页设计与制作16.1 flash CS4中的图层中的图层网页设计与制作网页设计与制作Flash中的图层就好比一张张透明的纸。如果我们在制作动画时,所有的对象都放在一起,就很难控制和修

2、改各个动画对象,而利用不同对象放到不同图层中,就好像我们在张张透明的纸上分别绘制对象,对象在不同的图层中进行操作,然后再将它们按一定的顺序进行叠加,各图层的操作相互独立,互不影响。这样就能更加灵活的制作动画,例如只要修改背景层或者动画中的任意一层的对象,就可能做出完全不同的动画效果来。还有,可以把图像和声音放到不同的图层中,这样在编辑时也可以很容易的找到它们。要Flash中,当新建动画时,默认只有一个图层,Flash允许根据动画的需要新建多个图层,同时还有删除层、锁定层、隐藏层等操作。Flash图层位于时间轴面板的左侧,如图16-1所示。在最顶层的对象将始终显示在最上方,图层的排列顺序决定了舞

3、台中对象的显示情况。如果图层过多,可以通运上下拖动滑动条来查看被隐藏了的层。 图16-1 “图层”面板 16.1.1图层的创建与删除图层的创建与删除网页设计与制作网页设计与制作默认情况下,Flash文档仅有一个图层,默认图层名为“图层1”,在动画的制件过程中,用户可以根据需要创建和删除图层。注:Flash图层面板左下角按钮中有一个“文件夹”按钮,其功能是将图层按树形进行组织,可以将多个图层像window中的目录树那样放到同一个图层文件夹中,文件夹也可以进行嵌套。(1). 创建图层创建图层图层的创建方法有三个:按钮创建:在Flash图层面板左下角按钮中单击“新建图层”或者“文件夹”,即可插入一个

4、新的图层。菜单命令:选择“插入时间轴图层(文件夹)”命令,即可插入一个新的图层。通过在右键菜单:在时间轴左边的“图层”面板处单击右键,从弹出的快捷菜单中选择“插入图层(文件夹)”即可。(2). 删除图层删除图层图层的删除方法很简单,首先选中要删除的图层,在Flash图层面板左下角按钮中单击“删除图层”,或者选中要删除的图层,单击右键,从弹出的快捷菜单中选择“删除图层”即可。16.1.2图层的基本操作图层的基本操作网页设计与制作网页设计与制作(1).图层重命名图层重命名在新建图层和文件夹是软件会自动为其命名,为了方便管理,用户可以根据动画的需要对图层和文件夹进行重命名,方法很简单,选中想要重命名

5、的图层或文件夹,快速双击,即进入编辑状态可以输入新的名字,然后按回车或在其它单击鼠标即可完成重命名操作。(2).图层选择图层选择选择图层或文件夹是编辑的基本操作,其作用就是激活该层,方法如下。在图层面板上单击该层即可。在时间轴上单击某一帧也会选中一个层。在工作区中选中某一对象,也会选中该对象所在的层。对于选择多个连续或不连续的对象时,需要借助辅助键。按Shift键单击第一个图层和最后一个图层,将选中两个图层之间所有的连续图层按Ctrl键同时单击要选择的图层,就可以选中不连续的图层。(3).图层顺序的调整图层顺序的调整在时间轴上,图层是自上而下的顺序进行添加的,有时需要根据动画的需要调整图层的顺

6、序,用户可以通过拖动的方法更改图层 的顺序。16.1.2图层的基本操作图层的基本操作网页设计与制作网页设计与制作(4).显示或隐藏图层显示或隐藏图层在默认情况下,图层里的对象是显示状态,有时根据制作动画过程中需要暂时隐藏某个图层里的对象,此时就可以将某个或某些图层进行隐藏,同时在发布的时候,也可以选择是否要选择隐藏层。方法是单击“图层”面板右上角的显示或隐藏图层按钮,就可以显示或隐藏全部图层里的内容,此时所有图层的右侧都有一个按钮,表示该层内容被隐藏,如果要显示该层的内容,只需要单击该按钮,按钮变为,即可显示该层的内容,如图16-2。如果要隐藏某一层的内容,只需要单击按钮, 按钮变为,就可以隐

7、藏该层的内容。 图16-2 显示/隐藏层16.1.2图层的基本操作图层的基本操作网页设计与制作网页设计与制作(5).锁定图层锁定图层默认情况下,Flash图层是处于解锁状态的。锁定一个层,目的是当编辑某一个层时,不影响到其它层对象的设置,如当两个层中的对象在舞台上有部分重叠时,就可以锁定其它层,对未锁定的层进行编辑。同隐藏层一样,当单击“层面”板右上角的 锁定按钮时,就将所有的图层都锁定,如上图16-3所示。如果要解锁某个层,只要单击该层的右侧的 按钮,变为 ,即解锁成功,可以对该层进行编辑了,如上图16-4所示。图16-3 锁定图层 图16-4 解锁当前层 16.2 图层中对象的基本操作图层

8、中对象的基本操作网页设计与制作网页设计与制作在Flash中绘制对象时,当选中任意一个绘制工具时,在工具箱的下面都有一个选项【对象绘制】按钮 ,选择了【对象绘制】 按钮绘制的图形都会自动转换为一个“组”,而不是矢量图形的点阵式图,此时绘制的每个对象就是一个“组”对象,对象相互独立,不会被同层的相互重叠的对象剪裁掉,但仍然是一个给制的对象,如图16-5和16-6效果所示。图16-5 没有选定“对象绘制”按钮绘制并移动对象 图15-6 选定“对象绘制”按钮绘制并移动对象 16.2 图层中对象的基本操作图层中对象的基本操作网页设计与制作网页设计与制作在Flash中绘制对象时,当选中任意一个绘制工具时,

9、在工具箱的下面都有一个选项【对象绘制】按钮 ,选择了【对象绘制】 按钮绘制的图形都会自动转换为一个“组”,而不是矢量图形的点阵式图,此时绘制的每个对象就是一个“组”对象,对象相互独立,不会被同层的相互重叠的对象剪裁掉,但仍然是一个给制的对象,如图16-5和16-6效果所示。图16-5 没有选定“对象绘制”按钮绘制并移动对象 图15-6 选定“对象绘制”按钮绘制并移动对象16.2.1 对象的组合与合并对象的组合与合并网页设计与制作网页设计与制作16.2.1 对象的组合与合并对象的组合与合并(1). (1). 组合对象与取消组合组合对象与取消组合对象的组合是为了方便操作,将多个对象组合成一个整体,

10、形成一个组,就可以对这个组合体一起进行调整等操作,同时可以根据动画制作的需要,将组合取消,使组合对象变为个体,如图16-5所示 。组合的方法:首先选中要组合的对象。选择“修改组合”或者是按下Ctrl+G键对象组合的取消:选中要取消的组合对象 选择“修改取消组合”或是按下Ctrl+Shift+G图16-7 对象的组合与取消 图16-8 “合并对象”菜单项 16.2.1 对象的组合与合并对象的组合与合并网页设计与制作网页设计与制作(2). (2). 合并对象合并对象当在同一图层中绘制对象时,选中工具箱下面的选项【对象绘制】按钮 进行绘制的对象,还可以使用“修改合并对象”菜单项如上图16-8,来对选

11、中的对象进行合并,效果如下图16-9所示。联合:可以将舞台中的图形进行组合。交集:合并对象重叠的部分。打孔:类似与咬合,当图形对象重叠时,以下方的对象为主,利用上方的对象的形状在下方对象上“打孔”,保留下方图形对象的其它部分。裁切:与“交集”类似,也是将重叠对象相交的地方保留下来,不同的地方是,“裁切”以下方的对象为主,保留的是下方的图形对象,而“交集”保留的是上方的图形对象图16-9 原图 联合 交集 打孔 裁切 16.2.2 对象的叠放及合并对象的叠放及合并网页设计与制作网页设计与制作在同一个图层中,在绘制对象时选中【对象绘制】按钮 进行图形的绘制,会看到,当绘制的图形出现重叠时,后绘制的

12、对象会出现在先绘制的对象的上面,也就是说,在同一个层中,当若干对象堆叠在一起时,它们的排列顺序是根据创建的先后顺序排列的,即后绘制的对象会排在先绘制的对象的前面,而位于上面的对象会遮挡住后面的其它对象。对于使用【对象绘制】按钮 选项绘制的对象,可能通过“修改排列”菜单中的命令项来调整每个组合对象的排列位置,如图16-10所示。移至顶层:将选中的对象放到所有对象的最上面上移一层:将选中的对象在重叠的对象中向上挪一层下移一层:将选中的对象在重叠的对象中向下挪一层移至底层:将选中的对象放到所有对象的最下面 图16-10 “排列”菜单 16.2.3 对象的对齐对象的对齐网页设计与制作网页设计与制作在制

13、作动画时,有时需要对舞台中的对象按照一定的顺序进行排列和对齐,此时可以用鼠标去调整,但是不能做到精度很高排序,如居中等。此时就可以使用系统的【对齐工具】来完成。选择“窗口对齐”命令,打开【对齐工具】面板,如图16-11所示对齐:分别从水平和垂直上进行了对齐,即左、中、右和顶、中和底分布:按照对象的中心间距或者是边缘间距进行分布,包括:顶部分布、水平中间分布、底部分布、左侧分布、垂直中间分布、右侧分布匹配大小:三个按钮,指将选中的对象在大小上对高度或宽度进行统一尺寸,也可以高度和宽度同时统一尺寸。间隔:两个按钮使对象在水平或者垂直方向上保持相等的间距图16-11 “对齐”面板及选项 16.2.3

14、 对象的对齐对象的对齐网页设计与制作网页设计与制作图16-12 “顶部对齐 “垂直居中分布” “高度”匹配大小 16.2.4 对象的分离对象的分离网页设计与制作网页设计与制作Flash中对象的分离与取消组合不同,分离对象是指将整体的图形对象打散,然后将打散的图形对象作为一个可编辑的图形进行编辑,如文本框、实例、位图等,这样做可以将减少该对象的大小,分离不同的对象将产生不同的作用。其操作方法就是:选择菜单“修改分离”命令项,或者按Ctrl+B。(1)分离位图当从外部导入位图时,不能用绘制工具对其进行修改,使用了分离命令后,就可以对该位图使用行绘图工具进行操作。(2)分离实例当在舞台中分离是图形元

15、件实例时,软件会切断该实例与库中元件的联系,即库中对元件的修改将不再影响舞台中的该实例。如果在舞台上分离的是一个影片剪辑实例时,软件以当前帧为主,将当前帧中的对象保留为一个静态图形。16.3 flash cs4 中元件与实例中元件与实例网页设计与制作网页设计与制作Flash CS4中的元件,有的书中也叫符号,指可以重复使用的声音、图像、按钮、动画,所有元件都被保存在【库】中。实例是指在舞台中或者在另一个元件中的一个拷贝,实例的颜色、大小、以及功能可以在舞台或嵌套的元件中从新设置。在Flash中,元件被分为三类,图形元件、影片剪辑、按钮。在Flash中创建元件,会自动被保存到库中,当编辑修改元件

16、时,则所有该元件相关的实例都会受到影响,但是修改实例,不会影响元件。在制作动画时,尽量使用元件,这样不但可以减少文件的大小,同时也方便对实例进行修改,同时也可以加快动画的在网页中的播放速度,因为元件只需要通过浏览器下载一次。16.3.1 库面板库面板网页设计与制作网页设计与制作Flash的库面板中,存放着所有的项目元件,同时在“库”面板可以实现对元件的管理,如下图16-13所示,在库面板的左下角有四个按钮 ,分别是:“新建元件按钮”:可以新建任何一种类型的元件。“新建文件夹”按钮:可以建立文件夹,用文件夹来组织库里的文件,就像windows目录树管理一样。“属性”按钮:单击可以修改元件的类型“

17、删除”按钮:单击可以删除选中的元件。图16-13 “库”面板 图16-14 “创建新元件”对话框 16.3.2 创建新元件创建新元件网页设计与制作网页设计与制作新建Flash文档,进到入舞台,就可以新建元件了,具体的方法有:(1)选择“插入新建元件”,弹出如上图16-14所示,选择新建元件的类型,就可以进入元件的编辑模式下,此时就可创建所需要的元件内容,如图16-15所示 。(2)也可打开“库”面板中,单击面板左下角的“新建元件”按钮,来创建新的元件。其中类型有:图形元件:使用静态图像的图形元件,其内容可能是单副矢量图形或是图像等,也可以能重复使用的动画片段,这些动画和图像可以在主时间轴上同步

18、工作,交互式控件和声音将不能在图形元件的动画序列中工作;影片剪辑:则是一段动画。影片剪辑有自己的多帧时间轴,这个时间轴同主影片的时间轴是相互独立的。就像大的影片里有从小的影片,每个小的影片又是一个影片,可以包含自己的交互式动画,声音及其它的影片元件,你可把影片剪辑理解为一段动画影片。16.3.2 创建新元件创建新元件网页设计与制作网页设计与制作按钮:就是在交互作品中用来激发某一事件。这些按钮可以响应鼠标的单击、经过等操作,并激发该鼠标操作的某些事件。按钮包括弹起、指针经过、按下、点击四个状态。图16-15 元件编辑16.3.3 转换元件转换元件网页设计与制作网页设计与制作16.3.3 转换为元

19、件转换为元件在Flash中,除了可以创建新元件外,还可以将现有的舞台对象转换为元件,例如将第15章中的房子转换为一个元件,如图所示。(1)先在舞台中选中该房子对象。(2)选择“修改转换为元件”,取名字为“房子”,就可以“库”中看到该元件。如下图16-16所示 。图16-16 “转换为元件” 16.4 时间轴与帧时间轴与帧网页设计与制作网页设计与制作16.4.1 时间轴时间轴在Flash中,时间轴是实现动画的关键部分,时间轴控制了着Flash中动画的播放顺序及影片中元件的变化范围,Flash中动画的制作是通过时间轴面板进行操作的。在前面讲解图层时提到,图层在时间轴窗口的左侧,而时间轴及帧则在时间

20、轴窗口的右侧,时间轴面板如图16-17所示 。可以通过菜单“窗口时间轴”命令项来显示或隐藏时间轴。图16-17 “时间轴”面板16.4 时间轴与帧时间轴与帧网页设计与制作网页设计与制作在时间轴上面的红色小矩形块就是播放头,可以用鼠标移动播放头到时间轴上的任一帧开始播放动画。时间轴的下方则是帧的状态信息,通过这里,可以看到当前播放头所在帧、播放帧的频率、及播放到当前帧所需要的时间。16.2 帧帧网页设计与制作网页设计与制作16.4.2 帧帧帧是组成动画的最基本的元素,动画就是由一个个帧组成的,通过帧的连续播放就可以创建Flash动画,其中每一帧代表了一个画面。也可以这么说,制作Flash动画的过

21、程就是对每一帧进行操作的过程,通过时间轴窗口的右侧的可以对帧进行各作操作,最终制作出各种动画。(1)帧的创建与删除在Flash动画中帧分为三种类型:普通帧、关键帧和空白关键帧,如图16-18。默认情况下,一个新Flash文档有一个图层,一个空白关键帧。用户可以根据动画的实际需要创建各种类型的帧。关键帧:Flash动画是在两个帧之间创建软件提供的动画方式,这两个生成图像的帧就是关键帧普通帧:普通帧是不能编辑元件的,是指在由软件创建动画过程中由计算机自动生成的。空白关键帧:指的没有内容的关键帧。16.4 帧帧网页设计与制作网页设计与制作图16-18 各种帧各种显示状态 图 16-19 插入帧帧的创

22、建方法非常简单,在需要新建帧的图层右侧的帧面板中单击鼠标:选择“插入时间轴”。在下拉的菜单也可新建各咱类型的帧,如图16-19所示。单击鼠标右键,在弹出的下拉菜单中可以创建所需要的类型的帧,如图16-20所示按快捷键F5(普通帧),或者F6(关键帧)。删除帧时只需要选中该帧右键单击,选“删除帧”,如果只是要清除帧里的内容,而不删除帧,则右键单击,选“清除帧”即可。16.5 综合案例综合案例网页设计与制作网页设计与制作16.5.1 图形元件制作图形元件制作本案例以制作一个花朵为示例,来示范在舞台中图形元件的使用。1、插入新建图形元件名为花、插入新建图形元件名为花1(1)图层1(改名为“花”)图层

23、,用椭圆工具,笔触颜色禁止,填充色随意,画一椭圆。用选择工具调整成漏斗状花瓣,然后用放射状填充,填充色:左色标#FFFFF,右色标#FC2EAA。然后用渐变工具进行调整,如下图16-20所示。(2)用任意变形工具选中花辨把注册点移至花瓣的中心,选择“窗口变形工具”,在弹出的变形面板选择“旋转”并选择约束按钮,旋转角度设为60 度,鼠标单击变形面板右下角的“复制选区和变形”按钮,复制并变形2 次,如图所示16-21所示。图16-20 调整椭圆为花瓣 图16-21 复制花瓣为花朵 16.5 综合案例综合案例网页设计与制作网页设计与制作2)单击新建图层增加图层2,改名花蕊,再用椭圆工具画一花蕊,放射

24、状填充,左色标:#A2D580,中色标:#E3E260,右色标:#F196DF,用笔刷工具颜色选 #FFFF66 随意点些小点,如图16-22所示,花朵元件就制作好了:图16-22花蕊的制作 2.2.插入新建元件花插入新建元件花2 2(1)图层1第1帧,用椭圆工具,无笔触,填充随意,在场景里画个大小合适椭圆,进行调整如扇形,进行放射性填充,颜色从左至右依次是, #FFFF66, #EE98DC, #E45FCA,用填充变形工具进行调整。如图16-23所示。16.5 综合案例综合案例网页设计与制作网页设计与制作图16-23 花瓣的制作(2)用任意变形工具,选中花瓣,把注册点移到花瓣的下面,然后选

25、择“窗口变形”,弹出变形面板,选择旋转,输入 72 度,在复制并应用变形按钮上点 4 下.现在就有了 5 个花瓣,再对这 5 个花瓣稍微调整一下,全选中5个花瓣,对其进行组合,如图16-24所示。16.5 综合案例综合案例网页设计与制作网页设计与制作(3)、插入图层2,在时间轴的第一层中选中当前帧,点右键“复制帧”,然后到刚才插入的图层2中,点右键,选“粘贴帧”,将花瓣复制到当前位置,将图层2拖动到图层1的下方,然后用“选择工具”选中第二层的花朵,将其向下向左微调,然后利用任变形工具对其进行缩放并进行旋转,根据花的样子调整到合适的位置。然后用同样的办法,制作其它层如花 3层,花 4层,花5层等

26、,可以根据情况,选择新建多少个层。然后对各花图层进行调整,颜色由里至外,由深到浅.如图16-25图所示。注:在调整下层的花朵时,可以将上层叠 的对象锁定 图 16-25 共朵的调整 16.5 综合案例综合案例网页设计与制作网页设计与制作(4)、新插入一层,利用刷子工具,绘制花蕊,本例中花蕊的颜色是:#FFCC99,花蕊上的点的颜色是:#CC3399在花的中间没有颜色的地方,放射填充,两边的颜块颜色不变,用小号笔刷画出花蕊,再画些小点在花蕊上,如图16-26所示,花朵元件就制作好了。图 16-26 花朵的效果16.4.2 影片剪辑元件制作影片剪辑元件制作影片剪辑元件就是一段动画,一个小影片。本案

27、例制作一个蝴蝶影片剪辑元件。(1)新建图形元件,命名蝶身,画轮廓,并进行线性填充,颜色从左至右依次为:#444444,#1F2669。如图16-27所示。16.5 综合案例综合案例网页设计与制作网页设计与制作图16-27 蝴蝶身体的绘制及填充2)新建图形元件,命名左翅,用【钢笔工具】画翅膀的轮廓,用【选择工具】对其进行修改,将其调整为下图所示16-28所示。填充颜色为左翅的上半部分为线性填充,填充颜色从左至右依次为:#FF9900,#FFCC00,#FEFE45,#FFFF99;左翅的下半部分的填充为放射性的填充,颜色从左至右依次为:#FDD32D,#FFCC00,#FEFE45,#32320

28、1,填充色板如图16-所示,用工具调整颜色填充,其效果如图16-28所示。16.5 综合案例综合案例网页设计与制作网页设计与制作左翅上线性填充色板 左翅下放射状填充色板 图16-28 左翅元件的制作16.5 综合案例综合案例网页设计与制作网页设计与制作3)在左翅元件上插入图层2,用【线条工具】在左翅的上部绘制若干线段,线条的个数根据需要,这里绘制三条,并用【选择工具】进行调整,线条的颜色为:#FF9900,在“颜色”面板中设置其透明度为80%,然后用椭圆工具绘制小圆形,填充设置为系统调色板中的 红色球形填充,然后放置到如图16-29所示的位置,最后将笔触删除,效果如图。图16-29 左翅斑点的

29、制作16.5 综合案例综合案例网页设计与制作网页设计与制作4)新建图形元件,命名蝴蝶,从库中拖入蝶身和左翅元件,把左翅复制,选择“修改变形水平翻转”,将左翅变为右翅,组装成蝴蝶如下图16-30所示。图 16-30 制作蝴蝶元件 (5)新建一个影片剪辑元件,取名为蝴蝶动画。从库中将刚才做好的蝴蝶元件拖动到该动画元件中,此时在时间轴的第一个关键帧上,调整蝴蝶元件该剪辑的中心,然后选中第2帧,新建一个关键帧,且【任意变形工具】将蝴蝶元件压扁一些,依次逐步增加关键帧,每一帧调整的越细腻,将来的动画的流畅性越好,在这个案例中做5帧,如图16-31所示。16.5 综合案例综合案例网页设计与制作网页设计与制

30、作注:在压扁的时候一定要将变形中心移动到正中间,这样两个翅膀的缩进才会一致。图16-31 制作蝴蝶动画 图16-32 蝴蝶动画剪辑 (6)然后继续插入第6个关键帧,此时将第4帧的内容复制到第6帧,第3帧的复制到第7帧,依次类推,最终复制完成。也可选中第1到第4帧,复制并从第6帧开始粘贴,然后选中第6帧到第9帧,对其进行翻转帧操作,如图16-32。至此一个蝴蝶扇动翅膀人影片剪辑动画就做好了,你可以将做好的蝴蝶影片剪辑动画元件放到在上一个案例中制作的花朵元件中,就可以制作出一个蝴蝶在花上飞动的动画了 第第16章:动画元件制作和外部素材的导入章:动画元件制作和外部素材的导入网页设计与制作网页设计与制

31、作16.4.3 按钮元件制作按钮元件制作在flash中元件中,另一种类型就是按钮,当鼠标指针移动到按钮之上或单击按钮时,将产生按钮事件,或改变按钮的外观。要使一个按钮在影片中具有交互性,需要先制作按钮元件,再由按钮元件在场景中的实例去为它分配相应的交互式的动作。在Flash中,按钮有4个状态,分别如下:(1)“弹起”即UP状态,鼠标指针没有移动到按钮上的状态;(2)“指针经过”即Over状态,鼠标移动到按钮上,但没有单击该按钮;(3)“按下”即Down状态,鼠标移动到按钮并单击该按钮;(4)“点击”即Hit状态,此状态可以定义鼠标事件响应的热点区域,即鼠标事件在按钮上的响应范围和鼠标事件的动作

32、。当没有设置“点击状态”的区域,鼠标事件的响应区域为“弹起”状态时我区域大小。同时“点击”帧的内影片中不显示。第第16章:动画元件制作和外部素材的导入章:动画元件制作和外部素材的导入网页设计与制作网页设计与制作本案例以制作一个闪烁的星星按钮为例,当鼠标移动到按钮上时,显示一个闪烁的星星,具体的步骤发下。(1)新建一个Flash文档,550*450,背景是黑色。(2)新建一个闪烁星星的影片剪辑star,即利用图形的绘制工具绘制一个五角星,将其转换为图形元件,然后将该图形工具拖到star影片剪辑的第1个关键帧,并利用透明度设置其的闪烁效果,共30帧,第5帧一个关键帧,如图16-33所示。图16-3

33、3 “闪烁的星星”影片剪辑元件第第16章:动画元件制作和外部素材的导入章:动画元件制作和外部素材的导入网页设计与制作网页设计与制作(3)单击“插入新建元件”,名称为“star1”,类型为“按钮”,如图16-34所示。图16-34 “star1”按钮(4)在打开的star1按钮窗口的时间轴下,“弹起”状态为空白帧,选择“指针经过”状态,并插入关键帧,将刚才制作好的star闪烁的星星的影片剪辑拖动到当前帧下,然后再选择“按下”状态,将其转换为关键帧,将“点击”状态转换为关键帧,如图16-35所示。图16-35 “star1”按钮的状态第第16章:动画元件制作和外部素材的导入章:动画元件制作和外部素

34、材的导入网页设计与制作网页设计与制作(5)回到主场景,将刚才制作好的星星按钮star1放到当前第1个关键帧的任意位置,然后调整小一些,同时,将多个star1的实例放到当前场景中,尽量摆满整个场景,就形成了当鼠标移动到当前场景上时,看到满天的小星星在闪烁。16.6 外部素材的导入外部素材的导入在前面所讲的Flash 中,我们主要讲的矢量动画对象的绘制与处理,但是Flash 还可以导入外部的位图和声音视频文件作为特殊的动画对象来使用,并且导入的外部位图还可以转换为矢量图形,和声音视频一起在Flash中创建更丰富多彩的动画。16.6.1 导入外部素材的基本方法导入外部素材的基本方法在Flash CS

35、4可以识别多种不同的位图、矢量图以及任意的影像序列,如BMP位图、GIF动画、PDF文件等。我们可以通过 “导入”的方式将素材导入到Flash中。第第16章:动画元件制作和外部素材的导入章:动画元件制作和外部素材的导入网页设计与制作网页设计与制作选择菜单“文件导入”命令,打开下一级菜单项,其中可以将外部素材导入到:“导入到舞台”、“导入到库”、“打开外部库”和“导入视频”,此时若要使用导入到文档中的库项目,直接将它从库中拖到舞台即可。导入到舞台:将图形图像导入到当前场景中导入到库:导入到库便于进行编辑,同时可以方便多次被动画使用。打开外部库:可调用外部已有的库(如其它Flash源文件中的素材)

36、导入视频:从外部导入视频影响资料注:Flash 中还可导入外部素材的影像序列,此时被导入的序列会在当前层的连续帧中被存放,行成逐帧动画的效果。第第16章:动画元件制作和外部素材的导入章:动画元件制作和外部素材的导入网页设计与制作网页设计与制作16.6.2 导入位图导入位图位图是制作影片时常用的图像元素,在Flash CS4中默认支持的位图格式包括BMP、JPEG、GIF等。要导入位图图像,可以选择【文件】|【导入】|【导入到舞台】命令,打开【导入】对话框,选择所需导入的图形文件,单击【打开】按钮即可导入到当前的Flash文档中,在导入位图文件后,就可以利用Flash CS4的工具进行各种编辑操

37、作,例如消除锯齿、平滑图像的边缘;也可以设置压缩、修改位图属性等以减小位图文件的大小、将位图分离或者将位图转换为矢量图等。也可以通过位图粘贴命令来将位图放到Flash文档中,方法就是将其它软件中的图像利用“复制”命令复制到剪切板上,然后执行“编辑粘贴到中心位置(或者是粘贴到当前位置)”命令第第16章:动画元件制作和外部素材的导入章:动画元件制作和外部素材的导入网页设计与制作网页设计与制作16.6.3 编辑导入的位图图像编辑导入的位图图像(1 1)使用属性面板编辑位图)使用属性面板编辑位图在舞台上选中导入的位图后,打开位图“属性”面板,如图16-36所示,显示了位图图像的名称,图像的尺寸以及在舞

38、台上的位置,用户可以单击“编辑”按钮,系统会用默认的系统已安装编辑图像的软件来编辑该位图,还可以在库中选中该位图,右键单击在下拉菜单中选择“属性”命令,打开“位图属性”对话框,如图16-37所示。图16-36 “属性”面板 图16-37 “位图属性”面板 第第16章:动画元件制作和外部素材的导入章:动画元件制作和外部素材的导入网页设计与制作网页设计与制作注:“属性”面板中的“交换”按钮是可以将当前文档中的其它位图对象替换为该实例。“位图属性”对话框中:“允许平滑”复选框是指可以削除图像的锯齿并平滑图像边缘 “压缩”有两种: ,无损是指使用无损压缩格式压缩图像,不会丢失图像中的任何数据。JPEG

39、是以JPEG格式压缩图像,建议使用默认压缩品质。“自定义”是1-100之间,数值越大效果越好相应的文件也越大。“测试”则是查看文件压缩的结果注:对于颜色复杂的压缩建议使用“照片(JPEG)”方式,对于简单形状和颜色较少的图像则建议用无损压缩方式。(2 2)使用位图填充)使用位图填充位图导入到 Flash文档中,在工具箱面板中打开【调色板】工具,如图16-38,其中就会出现刚才导入的位图图案,此时就可以使用位图进行填充了,当使用位图填充时,会平铺该位图,以填充对象,如图16-39所示。第第16章:动画元件制作和外部素材的导入章:动画元件制作和外部素材的导入网页设计与制作网页设计与制作图16-38

40、 “调色板” 图16-39 位图填充 (3 3)分离位图)分离位图分离位图会将图像中的像素分散到相应的区域中,可以分别选中这些区域并进行修改。其方法是选择“修改分离”菜单,当分离时,就可以使用flash的绘图和涂色工具对位图进行修改。(4 4)将位图转换为矢量图形)将位图转换为矢量图形位图转换为矢量图形的方法是:选择“修改位图转换位图为矢量图”命令,打开如图16-40所示的对话框。执行此命令,将位图转换为具有可编辑的离散区域的矢量图形进行编辑和处理。 第第16章:动画元件制作和外部素材的导入章:动画元件制作和外部素材的导入网页设计与制作网页设计与制作颜色阈值:当压缩时两个像素颜色色差小于阈值就

41、认为是一种颜色,当阈值越大就将减少颜色的数量。最小区域:为某个像素指定颜色时,需要考虑的周围像素的数量。曲线拟合:绘制轮廓所用的平滑程度转角阈值:保留锐边或者进行平滑处理图16-40 “转换位图为矢量图”对话框 图16-41 “导入视频”向导 第第16章:动画元件制作和外部素材的导入章:动画元件制作和外部素材的导入网页设计与制作网页设计与制作16.6.4 16.6.4 导入视频素材导入视频素材我们可以将外部的视频文件导入到Flash中进行编辑,选择“文件导入导入视频”,打开“导入视频”向导,如上图16-41所示 ,根据向导就可以导入相应的视频文件。使用回放组件加载外部视频:导入视频创建FLVP

42、layback组件的实例以控制视频回放。当Flash文档作为SWF发布并将其上传到WEB服务器上时,还必须将视频文件一起上传到WEB服务器或Flash Media Server,并按照已上载视频文件的位置FLVPlayback组件。在SWF中嵌入到FLV并在时间轴中播放:这种方式导入视频时,该视频被放置于时间轴中可以看到时间轴帧所表示的各个视频帧的位置。嵌入的FLV文件成为了Flash的一部分。但是当把视频文件嵌入到SWF文件中会显著增加发布文件的大小,因此仅适合于小的视频文件。此外当嵌入的视频较长时,音频和视频可能会出现不同步。作为捆绑在SWF移动设备视频导入:这个选项是将视频绑定到Flas

43、h Lite文档中以部署到移动设备。第第16章:动画元件制作和外部素材的导入章:动画元件制作和外部素材的导入网页设计与制作网页设计与制作注:FLV是FLASH VIDEO的简称,是随着Flash 发展起来的一咱视频格式。它的特点是形成文件小,加载速度较快,使得网络观看视频更加快速,它解决了视频文件导入Flash后,在导出为SWF文件时大小 会变大,会影响网络的播放速度的问题,是现在优酷、土豆、酷6等视频网站普遍采用的视频格式,同时FLV可以比较方便快速的导入到Flash中。在Flash中,可以导入的视频文件格式如下表(16-1): 注:如果导入的视频格式系统不支持,会显示警告信息。文件类型扩展

44、名文件类型扩展名音频视频交叉.avi数字视频.dv运动图像专家组.mpg或 .mpegWindows媒体文件.wmv 或 .asfFlash视频文件.flvQuickTime影片.mov第第16章:动画元件制作和外部素材的导入章:动画元件制作和外部素材的导入网页设计与制作网页设计与制作16.6.516.6.5导入声音素材导入声音素材Flash一个突出的特点就是在动画中可以插入声音,而且可以选择在不同的情况下播放不同的声音。同时Flash提供了压缩声音文件的方法,这样大大的减少了导入声音的大小,保障了Flash文件的大小。Flash在导入声音时,可以给按钮添加音效,也可以将声音导入到时间轴上,也

45、可以让声音独立于时间轴连续播放,作为整个动画的背景音乐,也可用ActionScript来控制声音的播放。在Flash CS4中,可以导入外部的声音文件到动画中,也可以使用共享库中的声音文件。Flash支持的声音格式有:文件类型扩展名文件类型扩展名Adobe Soundbooth.asndWindows音频格式.wavMp3音频格式.mp3SUN音频格式.au只有声音的QuickTime影片.aiff第第16章:动画元件制作和外部素材的导入章:动画元件制作和外部素材的导入网页设计与制作网页设计与制作Flash 中有两种声音类型:中有两种声音类型:事件声音:事件声音必须完全下载后才能开始播放,除非

46、明确停止,否则它将一直连续播放;音频流:音频流与动画息息相关,随动画的播放而播放,随动画的停止而停止;只要前几帧下载了足够的数据就开始播放;音频流要与时间轴同步以便在网站上播放。(1 1)声音的导入)声音的导入导入声音的方法就是选择“文件导入导入到库(导入到舞台)”,然后“库”面板,可以看到预览窗口通过“播放”和“停止”按钮进行试听,如图16-42所示。 同时在动画中可使用全部声音也可将其中的一部分重复放入影片的不同位置,这样不会显著影响文件的大小,多个声音也可放在同一个图层上,也可以放在包含其他对象的图层上,但是为了便于操作,最好第个声音放到一个新的图层中。Flash CS4提供了公共的声音库,选择“窗口公用库声音”,将打开系统声音库,如图16-43所示。当要使用当前库中的声音时,只需要将“声音”库中的声音文件用鼠标拖动到舞台,声音会自动被添加到默认选中的图层中。第第16章:动画元件制作和外部素材的导入章:动画元件制作和外部素材的导入网页设计与制作网页设计与制作图16-42 库面板 图16-43 公用声音库 (2 2)声音的编辑)声音的编辑选中舞台的时间轴的声音图

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论