《网页设计与制作》第三章 Flash CS6基础教程_第1页
《网页设计与制作》第三章 Flash CS6基础教程_第2页
《网页设计与制作》第三章 Flash CS6基础教程_第3页
《网页设计与制作》第三章 Flash CS6基础教程_第4页
《网页设计与制作》第三章 Flash CS6基础教程_第5页
已阅读5页,还剩43页未读 继续免费阅读

下载本文档

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

文档简介

网页设计与制作/第一章/网页设计与制作基础知识目录/第二章/Photoshop基础教程/第三章/FlashCS6基础教程/第四章/Dreamweaver基础教程/第五章/综合实例:结合之前的实例练习进行网站的综合制作第三章FlashCS6基础教程第一节FlashCS6概述一、FlashCS6简介Flash除了可以制作二维动画外,还可以为网页设计制作按钮、广告等动态元素。AdobeFlashProfessionalCS6软件是用于创建动画和多媒体内容的强大的创作平台。其设计使人身临其境,而且在台式计算机和平板、智能手机和电视等多种设备中都能呈现一致效果和互动体验。二、工作界面FlashCS6的工作界面主要包括菜单栏、文件的标题栏、舞台、时间轴面板、浮动面板和工具箱6个部分(见图3-1)。第一节FlashCS6概述三、文件操作1.新建文件执行【文件】→【新建】命令,即弹出【新建文档】面板(见图3-2)。新建动画文件时,要在新建窗口右侧先设置好文件的尺寸、背景颜色、帧频(每秒播放单幅画面的个数,每秒钟播放的帧数越多,用户看来视频播放就越顺畅。电影的专业帧频是24帧/秒,电视的专业帧频在国内是25帧/秒,美国是30帧/秒)等文档属性。2.打开、保存文件执行【文件】→【打开】或【保存】(见图3-3)命令即可打开或保存文件。保存的Flash文档为*.fla格式,如果需要导出影片,可执行【文件】→【导出】命令,生成*.swf等格式文件(预览动画时会自动生成)。第二节FlashCS6绘图基础一、绘制基本图形1.【线条工具】(1)新建一个影片文档,选择工具箱中的【线条工具】,在属性面板中设置【笔触颜色】,在舞台中绘制一条直线。(2)选择工具箱中的【选择工具】

,鼠标靠近弧线,当光标出现弧形提示时,按住鼠标左键拖动鼠标,使直线变成弧线,画出直线。(3)在工具箱最下方确认选择【贴紧至对象】

,鼠标靠近弧线的一端,按住鼠标左键拖动至弧线的另一端,画出直线。(4)使用步骤2的方法使直线变成弧线。(5)选择工具箱中的【颜料桶工具】

,在属性面板中设置颜色为黄色,将鼠标放置在边线内部,单击左键填充(见图3-4)。第二节FlashCS6绘图基础2.【铅笔工具】铅笔工具也是绘制线条的一种工具。使用时,选择工具箱中的【铅笔工具】

,再选择工具箱最下方的【铅笔模式】(见图3-5),然后设定【属性】面板中的参数,即可在舞台上按住左键拖动绘制线条了。3.刷子工具组刷子工具组包含【刷子工具】

和【喷涂刷工具】

两种工具,是专门用于涂抹或喷洒填充色的。使用时,选择工具箱中的【刷子工具】,再选择工具箱下方的【刷子模式】(见图3-6),设定【属性】面板中的参数,即可在舞台上涂抹色块了。使用【喷涂刷工具】时,在【属性】面板中可选择【编辑】选项,选取相应的元件作为形状进行喷涂;如果没有元件则为默认的墨点喷洒。4.钢笔工具组和部分选取工具(1)选择工具箱中的【钢笔工具】

,设置【属性】面板中的参数,在舞台上单击左键即得到一个锚点,之后在其他位置再次单击,可以绘制出一条直线;随后将光标放置在第一个锚点上,按住左键并拖动鼠标,可以绘制一条曲线,此时线条闭合。(2)将光标放在直线上,当钢笔图标出现“+”提示时,单击左键可以增加一个锚点,切换【部分选区工具】

,可以调整锚点的位置。(3)配合钢笔工具组内的【转换点工具】,可以在该点上按住拖动鼠标,将该点从直角转变为圆角。(4)综合使用前面几个步骤,最终绘制成一个心形的闭合线条(见图3-7)。第二节FlashCS6绘图基础5.【椭圆工具】和【矩形工具】形状工具组内含有多种工具(见图3-8),其中【椭圆工具】和【矩形工具】相对较为常用,可以用于绘制方形或圆形的图形,配合【Shift】键可以绘制正方形或正圆形。选择工具箱中的【椭圆工具】或【矩形工具】,设置【颜色】面板的参数(见图3-9)。其渐变的设置方法与Photoshop基本相同。设置完成后,在舞台上按住左键拖动即可绘制圆形或方形图案(见图3-10)。使用形状工具组绘制一般图形时,需要在属性面板上设置常用参数。【笔触颜色】

即线条的颜色,【填充颜色】

即形状内部的颜色,笔触即线条的粗细。【样式】包括7种笔触样式,分别是【极细线】、【实线】、【虚线】、【点状线】、【锯齿线】、【点刻线】、【斑马线】。第二节FlashCS6绘图基础6.变形工具组变形工具组内含有【任意变形】和【渐变变形工具】两种(见图3-11)。用【选择工具】框选图像或双击图像的填充色,之后使用【任意变形工具】,可以放大、缩小、旋转或变形图像;如果将光标放在任意一个角上,并配合【Shift】键,可以等比例缩放图像(见图3-12)。选定图形时,使用【变形工具】可以改变渐变填充效果(见图3-13)。7.位图与套索工具在FlashCS6中使用位图,只执行【文件】→【导入】命令,其中【导入到舞台】指的是舞台和【库】面板均出现位图图像,而【导入到库】则是指舞台上不会出现该图像,用时需从【库】面板拖到舞台上。假如需要选取舞台中的一部分位图图像,可以右键单击舞台上的位图,选择【分离】,之后可配合工具箱中的【套索工具】

或【选择工具】选取相应的内容。使用【套索工具】时,工具箱最下方还有【魔术棒】和【多边形模式】两种模式可供选择,使用方法与Photoshop基本相同。此外,导入位图后可以在【颜色】面板上设置填充类型,为所绘制的图形填充位图效果。新建一个影片文档,执行【文件】→【导入】→【导入到舞台】命令,从“Flash配套素材”中导入位图“01”,在舞台上右键单击该图像,选择【分离】,选择工具箱中的【套索工具】,在舞台上按住左键拖动,选择一部分图像(见图3-14),将鼠标指针放置在选中的区域上,待光标变成移动符号,按住左键拖动就可以移走选中区域的内容(见图3-15)。第二节FlashCS6绘图基础8.橡皮擦工具【橡皮擦工具】可以擦除分离的图像。选择该工具后,可以配合工具箱下方的【橡皮擦模式】(见图3-16),来擦除线条或填充特定内容。9.文本的输入与调整文本是动画制作中的主要元素之一。单击工具箱中的【文本工具】,在【属性】面板中可以看到有两种文本样式,分别是【TLF文本】和【传统文本】,一般常用选项为【传统文本】,这也是系统默认选项。【属性】面板中还有【系列】(字体)、【样式】、【大小】、【颜色】等选项可供使用(见图3-17)。选择【文本工具】选项,在舞台区单击左键,即可创建一个不固定宽度的单行文本框,输入文本时,文本框会随着用户所输入文本的长度自动扩展,需要换行输入时按【Enter】键即可。如果需要输入段落文本,则需在选择【文本工具】选项后,在舞台上按住鼠标拖拽,创建一个大小适当的矩形文本框,此时输入的文本到最大宽度后会自动换行(见图3-18)。最后在文本框外围单击左键,即可确认输入。第二节FlashCS6绘图基础二、编辑图形1.群组与打散如果需要将绘制的几个图形一起移动或绑定,可以使用【选择工具】,框选多个内容,或者配合【Shift】键、使用左键逐个单击图形选定多个内容,选定后按【Ctrl】+【G】就可以完成群组。群组后,如果需要对其中的某一个图形进行编辑,一种方法是在群组图像上双击左键,进入到组的内部对其进行编辑,完成后单击文件标题栏下方的场景图标(见图3-19)完成编辑;另一种方法是将群组的图像打散后再单独编辑,打散的方法是在群组图像上单击右键,选择【分离】选项。2.绘制对象使用绘图工具时,常配合以工具箱底部的【对象绘制】和【贴紧至对象】选项。选中【对象绘制】后,在舞台上绘制的每一个图形都会作为一个组合对象出现,而不是分离的图形。此时,各个对象之间相互独立且不会相互影响。取消【对象绘制】功能后,由于绘制出的都是分离的图形,所以当绘制两个不同颜色的图形时,重叠的部分会被分割。例如先绘制一个圆形,在改变颜色后再次绘制一个与之重叠的圆形后,移动其中一个圆形时,重叠的部分会随之消失(见图3-20);而选中【对象绘制】时不会出现这种现象。第二节FlashCS6绘图基础3.对齐与变形执行【窗口】→【对齐】命令,打开【对齐】面板(见图3-21),同时选择舞台上的多个图像后,可以根据需要单击面板上的选项做对齐操作。如果勾选面板下方的【与舞台对齐】,则意味着对齐的参照物为舞台本身。执行【窗口】→【变形】命令,打开【变形】面板(见图3-22),可以对选中的图像按照一定的角度或坐标进行变形处理。第三节FlashCS6动画基础一、FlashCS6动画基本概念1.时间轴时间轴(见图3-23)可用于组织和控制一定时间内的图层和帧中的文档内容,通俗地说就是动画编辑面板。Flash的时间单位是“帧”,决定时长和运动节奏的是帧频。图层可以放置不同的运动物体,其层叠顺序是越靠上方的离视线越近。时间轴的主要组件有图层、帧、帧频和播放头等。第三节FlashCS6动画基础3.帧“帧”是动画的基本单位,一帧就是一幅静态的画面。在时间轴上,如果需要持续显示某一图像,可以在该图像所在图层右侧对应的位置单击右键,选择【插入帧】选项。帧在时间轴上显示的是长方形图标(见图3-23)。关键帧可用来调整图像的运动状态。在时间轴上,圆点表示的就是关键帧,其中黑色圆点代表有图像,空白圆点代表无图像(见图3-23)。帧频也叫帧速率,时间轴下方默认设定值为“24fps”,指的是每秒钟播放单幅静态画面的个数。原则上来说,帧频值越大,动画的画面效果越细腻。常用的帧频单位为24/s(电影级别)、25/s(国内电视级别)、30/s(美国电视级别)。当然,在用于互联网平台的动画中,理论上在实际制作时,可以根据需要任意设置。2.场景场景类似影视里的镜头。在制作长时间的动画时,通常要分出多个场景(也可多人分场景制作,最后将场景拼合在一个文档中),在预览或生成动画时,软件会自动按照前后顺序播放及生成一段完整的动画。如果需要插入、删除或调整场景的顺序,则可以执行【窗口】→【其他面板】→【场景】命令,打开【场景】窗口进行设置(见图3-24)。第三节FlashCS6动画基础4.元件、实例与库元件分为【图形】、【影片剪辑】和【按钮】三种(见图3-25),它们是可以重复使用的。创建后的元件被放置在【库】面板中。【库】面板相当于资料库,可以放置动画制作所需的所有素材,使用时将素材从【库】面板拖入到舞台即可。在Flash中,元件只要创建一次,就可以无数次地重复使用,具体方法是直接从【库】面板拖入舞台(拖入舞台的元件被称为“实例”)。进入元件内部编辑后,场景中所有的实例都得到一致的改变,因此,使用元件可以减小劳动量;使用元件另一个好处是有效减小文件的体积,因为同一个元件不论在舞台上使用了多少次,它所占的空间始终只是一个元件的大小。创建元件的方式有两种:一种是执行【插入】→【新建元件】命令(见图3-26),选择一种类型后进入到元件内部绘制,完成后单击文件标题栏左下方的场景图标返回到场景;另一种是直接在舞台上绘制完成后,使用选择工具单击右键转换为元件。如果需要具体编辑动作,则可双击舞台上的实例或者在【库】面板里双击该元件,进入到元件内部进行调整制作,完成后单击文件标题栏左下方的场景图标返回到场景。小技巧

进入到元件内部编辑时,时间轴和舞台、场景无关,不会影响到场景里的其他图像。但是,当我们在一个拥有多个图层、且每个图层的时长不同的场景里运用这些元件时,要考虑到元件本身的时长与场景相对应。第三节FlashCS6动画基础影片剪辑元件影片剪辑元件可以看作是整个动画的一个片段或元素。它可以包含一段完整的动画,有着独立的时间轴和相对主坐标系独立的坐标系,用户可以把它当作一段独立的动画进行制作,其制作方法跟在场景里制作影片是一样的(见图3-27)。其中可以包含一切设计素材,可以是交互控制按钮、声音、图符和其他形片剪辑等,还可以通过添加动作脚本来实现交互或制作一些特殊效果。在没有脚本控制时,它是自动循环播放的。按钮元件按钮的作用主要是实现交互,如播放、暂停等控制图标等,有时也用来制造些特殊效果。按钮元件共有4种状态,分别是【弹起】、【指针经过】、【按下】和【点击】(见图3-28)。其中【弹起】是指预览动画时的效果,【指针经过】是指鼠标滑至按钮的效果,【按下】是指左键单击瞬间的效果,【点击】是指交互的响应范围。图形元件图形元件内部与影片剪辑一样拥有自己的时间轴,但一般情况下它只做一个静态图像,如果需要的话,也可以是一段独立的动画。但图形元件不可以添加滤镜和声音,也不能以添加动作脚本来实现课件的交互。第三节FlashCS6动画基础二、FlashCS6动画类型1.创建逐帧动画由于Flash是二维动画制作软件,如果需要制作类似人物转面动作或其他较为细腻的动作,就需要采取逐帧动画的方式来表现了。下面通过制作一段下雨的效果,来了解逐帧动画以及影片剪辑元件。(1)新建一个动画文档,设置文档大小为550*400像素,帧频为24,背景为白色。(2)执行【插入】→【新建元件】命令,设置参数(见图3-29)并单击【确定】按钮。(3)选择【椭圆工具】,在【属性】面板中单击【笔触颜色】色块,在展开的拾色器中选择黑色;单击【填充颜色】色块、在展开的拾色器中单击右上角的不填充图标

,同时设置其他参数(见图3-30);将舞台右上角的视图显示比例设置为200%。在舞台上方绘制一个较小的圆形。第三节FlashCS6动画基础(4)在时间轴(图层1)的第2帧上单击右键,选择【插入关键帧】,切换【选择工具】,直接将第二帧的图像垂直向下移动(在实际操作时,也可以根据需要使用键盘的上下左右键移动图像)。此时由于无法观察整个动画的运动过程,不便于我们确定第二帧的位置,因此需要打开时间轴下方的【绘图纸外观】选项来观察动画的运动过程(见图3-31)。【绘图纸外观】打开后,时间轴上沿会出现“【】”符号,代表显示的范围,拖动可随时调整显示的范围。(5)继续在第3帧上插入关键帧,扩大向下移动的幅度,并稍微改变圆形的形状(见图3-32)。(6)以此类推继续绘制4~6帧(见图3-33),第7帧(见图3-34)和8帧(见图3-35)需要认真绘制,它们是雨滴落在地面的状态,决定着动画的最终效果。第三节FlashCS6动画基础(7)单击文件标题栏左下方的场景图标返回到场景1,将雨滴元件拖入到场景中,使用【任意变形工具】改变元件大小及位置,在图层1的第8帧处单击右键,选择【插入帧】(见图3-36)。(8)在时间轴的左下角单击【新建图层】图标,在图层2的第3帧处插入关键帧,将图层1上面的雨滴实例复制过来,并设置位置,在第10帧处插入帧。使用同样的方法制作图层3,完成动画的编辑(见图3-37)。按【Ctrl】+【Enter】快捷键预览动画。2.动作补间动画补间动画可以理解为补齐中间画,制作时只要控制两端关键帧的状态,中间的运动过程可以由软件自动生成。在FlashCS6的时间轴上单击右键创建补间动画时,菜单中会出现三个选项,分别是【创建补间动画】、【创建补间形状】、【创建传统补间】。其中,创建补间形状的操作方法与旧版本相同。传统补间动画的制作顺序是,先在时间轴上的开始点和结束点上插入关键帧(同一个物体),之后在关键帧之间选择【创建传统补间】,中间的动画就自动形成了。这相当于点对点匀速平移,没有速度变化,没有路径偏移,一切效果都需要通过后续的其他方式(如引导线、动画曲线)去调整(见图3-38)。第三节FlashCS6动画基础创建补间动画是在舞台上制作一个影片剪辑元件后,不需要在时间轴的其他地方再插入关键帧,而是直接在该层的时间轴上右键选择创建补间动画,之后只需要先在有普通帧的时间轴上选择某一帧,然后在舞台上直接拖动该元件,就可以自动形成一个补间动画。拖动舞台上的原件后,软件会自动生成一条运动路径,可以直接调整路径的形状来改变运动的状态(见图3-39)。小技巧

一般情况下,做Flash项目时,传统补间动画的使用频率较高,因为它更容易把控,而且产生的文件相对小,在网页里可以更快速地加载。第三节FlashCS6动画基础下面通过制作“电子相册”的实例来演示传统动作补间的使用方法。(1)新建一个动画文档,创建一个命名为“边框”的图形元件,并在元件的舞台上绘制一个笔触颜色为黑色、笔触大小为2、无填充色的正方形边框(见图3-40)。(2)返回到场景1,在图层1的第1帧上,将“边框”元件拖入到舞台的左侧,调整大小和位置后,使用【选择工具】,配合【Alt】键拖动复制出三个边框,并横向排列匀称(见图3-41),排列时可以打开【视图】菜单里的【标尺】选项,在舞台拖出上辅助线作为参考。之后,在图层1的第100帧处插入帧。(3)在时间轴上新建图层2,使用【选择工具】右键单击第二个边框的边线,选择【剪切】,在图层2的第20帧上插入关键帧,将光标放置在舞台上,单击右键选择【粘贴到当前位置】(见图3-42)。第三节FlashCS6动画基础(4)按照步骤3的方法,分别建立图层3和图层4,并以20帧的间隔,按顺序剪切另两个边框。此时,【时间轴】面板不能完全显示所有帧,只要单击【时间轴】面板右上角的显示选项,选择【很小】,就能缩小时间轴的视图比例,方便观察更多的帧(见图3-43)。(5)在图层1的第20帧处插入关键帧,并在该层的两个关键帧之间的任何一帧处单击右键,选择【创建传统补间】;然后单击第1帧(关键帧),再将舞台中的边框选中(见图3-44),在【属性】面板上设置不透明度(见图3-45)。第三节FlashCS6动画基础(6)在图层2的第40帧处插入关键帧,并在该层的两个关键帧之间的任何一帧处单击右键,选择【创建传统补间】选项;然后单击第20帧(关键帧),再将舞台中的边框选中,并向左平移至与图层1边框完全重叠的位置(见图3-46),最后在【属性】面板上设置不透明度。(7)运用步骤6的方法,在图层3、图层4分别创建传统补间,设置方框的不透明度(见图3-47),并预览动画。(8)执行【文件】→【导入】→【导入到库】命令,将配套素材“02”、“03”、“04”、“05”导入。第三节FlashCS6动画基础(6)在图层2的第40帧处插入关键帧,并在该层的两个关键帧之间的任何一帧处单击右键,选择【创建传统补间】选项;然后单击第20帧(关键帧),再将舞台中的边框选中,并向左平移至与图层1边框完全重叠的位置(见图3-46),最后在【属性】面板上设置不透明度。(7)运用步骤6的方法,在图层3、图层4分别创建传统补间,设置方框的不透明度(见图3-47),并预览动画。(8)执行【文件】→【导入】→【导入到库】命令,将配套素材“02”、“03”、“04”、“05”导入。第三节FlashCS6动画基础(9)新建图层5,对应第一个边框运动点,在图层5的第20帧处插入关键帧,从【库】面板将“02”拖到舞台上,并放置在方框内(见图3-48);在图层5的第30帧处插入关键帧,并创建传统补间动画;单击图层5的第20帧处,再将舞台中的该帧的边框选中,在【属性】面板上设置不透明度为0(见图3-49)。(10)按照步骤9的方法,依次创建图层6、图层7和图层8,并分别放置其他几张图像,创建传统补间,设置不透明度(见图3-50)。预览最终效果。第三节FlashCS6动画基础3.形状补间动画(1)新建一个动画文档,选择【椭圆工具】,设置笔触和填充色,在舞台的左侧绘制一个圆。在时间轴上图层1的第20帧处插入空白关键帧(见图3-51)。(2)选择【矩形工具】,在舞台右侧绘制一个方形。在两个关键帧之间右键选择【创建补间形状】,此时时间轴上的图层显示为绿色。打开时间轴面板下方的【绘图纸外观】选项,即可观察整个变形过程(见图3-52)。(3)此时如果想对动画中的某一位置进行特定变形,可以选中第一帧,执行【修改】→【形状】→【添加形状提示】命令,此时在舞台上会出现按字母顺序标注的红色圆点,按住圆点并拖动鼠标可以定义位置(见图3-53)。确定后,在时间轴上单击第20帧,同样对舞台的圆点进行定位(见图3-54)。最后在时间轴面板下方将帧频调整为12。预览动画会发现,无论动画怎么变化,第1帧的提示点最终一定会变换到第20帧的提示点处。利用这种特性,可以自定义变形过程,也可以对出错部位进行修订。第三节FlashCS6动画基础4.引导层动画引导层动画就是给一个运动的物体添加一个特定的路径。(1)新建一个动画文档,创建一个图形元件。选择【多角星形工具】,在【属性】面板中设置基本参数(见图3-55),单击面板下方的【选项】,进一步设置参数(见图3-56)。(2)在舞台上绘制一个五角星,并使用【渐变变形工具】改变填充样式(见图3-57)。返回到场景1,在图层1的第1帧处拖入五角星元件,调整大小及位置。(3)添加引导层。创建引导层动画的方式是,单击图层下方的【新建图层】图标,在新建的图层2上单击右键,选择【引导层】选项。在【图层】面板上按住图层1向上稍稍拖动(见图3-58),释放鼠标后即为图层1创建了一个引导层(见图3-59)。第三节FlashCS6动画基础(4)单击图层2的第1帧,使用【线条工具】等在舞台上绘制一条曲线段(见图3-60),然后在图层2的第80帧插入帧;在图层1的第80帧插入关键帧,创建传统补间,使用【选择工具】将图层1的第1帧和第80帧的图像的中心点分别对齐到线段两端,并调整大小(见图3-61)。此时,在时间轴的图层1上单击1~79帧之间的任何一帧,在【属性】面板上调整【旋转】为顺时针1次、【缓动值】为-56。其中【缓动值】是负值时为加速,是正值时为减速。完成编辑,预览动画。下面撤销步骤3、步骤4,返回到步骤2的动画效果,通过直接创建补间动画的形式制作包含引导线的补间动画:使用【选择工具】,在图层1的第80帧插入帧,单击该帧,右键选择创建补间动画,在舞台上将五角星拖动后就会自动生成一条引导线,拖动引导线可以改变路径的形状(见图3-62)。按照步骤4的方法,同样设置【旋转】和【缓动参数】。完成后预览动画。第三节FlashCS6动画基础5.遮罩层动画遮罩层动画实际上是靠填充色块来确立动画显示的区域。(1)新建一个动画文档(背景为黑色),将配套素材“06”导入到舞台,调整大小及位置,在图层1的第80帧处插入帧。创建一个影片剪辑元件“光”(见图3-63),返回到场景1,新建图层2,将“光”元件拖入到场景,设置大小及位置,使用【任意变形工具】将元件的中心点拖至右上角(见图3-64)。(2)在【属性】面板左下角单击【添加滤镜】,设置参数(见图3-65)。在图层2的80帧处插入关键帧,并创建传统补间。单击舞台上第1帧的元件,调整角度(见图3-66);单击舞台上第80帧的元件,调整角度(见图3-67)。在【属性】面板中设置【色彩效果】中的不透明度为50%。(3)在图层2上方创建图层3,在剑身处绘制无边框的色块(见图3-68),在【图层】面板右键单击图层3,选择【遮罩层】(见图3-69)。完成并预览动画。第四节在FlashCS6中添加声音和视频一、在动画中添加声音1.导入声音在Flash中可以使用WAV、MP3等类型的音频文件。使用时,需执行【导入】→【导入到库】命令,将音频文件先导入到库中。导入后,在【库】面板中可以选择该音频文件,单击【播放】按钮确认音乐效果(见图3-70)。2.添加声音在场景中新建图层,在相应的时间点上插入并选中关键帧,将音频文件直接拖到舞台的任何位置,释放鼠标后可以看到时间轴上该层出现了蓝色的音频振幅提示。此外,也可以单独在影片剪辑元件内部添加音频文件。3.编辑声音选择声音图层,【属性】面板中即出现与声音有关的编辑选项(见图3-71)。下面介绍【属性】面板中的常用编辑选项。第四节在FlashCS6中添加声音和视频在【属性】面板中,单击【效果】弹出菜单(见图3-72),可根据需要选择相应的选项:【无】不对声音文件应用效果,选择此选项将删除以前应用的效果。【左声道】/【右声道】只在左声道或右声道中播放声音。【向右淡出】/【向左淡出】会将声音从一个声道切换到另一个声道。【淡入】在声音的持续时间内逐渐增加音量。【淡出】在声音的持续时间内逐渐减小音量。【自定义】允许使用【编辑封套】创建自定义的声音淡入和淡出点。在【属性】面板中,单击【同步】弹出菜单(见图3-73),可根据需要选择相应的选项:【事件】将声音和一个事件的发生过程同步起来。事件声音在显示起始关键帧时开始播放,并独立于时间轴完整播放,即使文件停止播放也会继续。当播放发布的文件时,如果声音的时间比动画时间长,那么在循环播放动画时,会出现声音混合、重叠的效果。【开始】与【事件】选项的功能相近,但是如果声音已经在播放,新声音实例不会播放。【停止】使指定的声音静音。【数据流】设置【编辑封套】以后选择该项,可以使声音同步画面,以便在Web站点上播放。与事件声音不同,它强制动画和音频流同步,音频流会随着SWF文件的停止而停止。【重复】输入一个数值,指定声音应循环的次数。【循环】连续重复播放声音。第四节在FlashCS6中添加声音和视频在【效果】弹出菜单的右侧单击【编辑声音封套】按钮,打开窗口(见图3-74)。1

为视图显示控制按钮组,用于控制放大、缩小省道和时间轴的显示比例。时间轴上显示的时间单位有秒和帧两种模式,为了对应场景中的时间轴,通常选择显示帧的模式。2

在声道的上边缘各有一条横线,线条上的方形控制点类似场景里的关键帧,可以在线上单击左键添加多个控制点对声音进行调整,也可以按住控制点拖动至上边缘以上、松开后删除。上下调整其位置可以调整音量大小。3

的时间轴左侧声音文件的开始点和最右侧的结束点各有一个控制图标,拖动可以重新确定声音的开始点和结束点。如果将【属性】面板中的【同步】选择为【数据流】,拖动前的开始点到拖动后的结束点区间的音频文件将被删除。注意,此举不会真正影响到【库】面板的声音文件。二、添加视频文件1.FlashCS6支持的视频类型一般情况下,Flash支持MOV和FLV格式的视频文件。2.导入视频执行【文件】→【导入】→【导入视频】命令,选择文件路径,即可使用格式与Flash相兼容的外部视频素材(见图3-75)。3.编辑视频当模式为【使用播放组件加载外部视频】时,导入视频后,在场景里新建图层,从【库】面板将视频元件拖入到场景中,就可以按照元件的操作方式编辑视频。另一种常用的编辑视频的方法是,在场景里新建图层,选择相应的关键帧,在导入时选择模式为【在SWF中嵌入FLV并时间轴上播放】,导入后可以看到时间轴上出现逐帧动画的效果。使用该模式前,需要将视频的尺寸、帧频和Flash文档统一。第四节在FlashCS6中添加声音和视频第五节使用动作面板添加脚本一、动作和脚本语言在动画场景里或元件内部添加脚本语言,可以为元件和时间轴上的关键帧设定一些特定的交互式动作。执行【窗口】→【动作】命令,弹出【动作】面板(见图3-76),拖动其标题栏组合到软件界面的其他面板组中即可添加。在【动作】面板的右上角单击【通过从“动作”工具箱选择项目来编写脚本】图标,可以展开脚本助手选项,在实际的操作中,它可以为我们自动生成脚本输入的格式及换行,也可以设置特定的鼠标事件。FlashCS6为我们提供了两种脚本语言的版本,一种是“ActionScript3.0”,另外一种是“ActionScript2.0”(见图3-77)。一般情况下选择“ActionScript2.0”版本,因为这是大部分人之前经常使用的版本,“ActionScript3.0”是在Adobe公司收购Flash后重新开发的脚本语言,目前使用的范围比较有限。第五节使用动作面板添加脚本二、使用脚本语言控制动画下面通过为动画添加暂停、播放动作控制,来了解常用的“ActionScript2.0”版本的脚本语言。(1)新建动画文档,插入影片剪辑元件“飞机”(见图3-78)、在图层1使用该元件,并在第100帧处插入帧,选择时间轴上的第100帧,单击右键创建补间动画,并调整运动路径和状态(见图3-79)。(2)分别插入【播放】、【暂停】两个按钮原件,新建图层2,将两个按钮放置在相应的位置上(见图3-80)。第五节使用动作面板添加脚本(3)选择【播放】按钮,在【动作】面板左侧双击【时间轴控制】里的【play】,为其添加脚本控制(见图3-81)。(4)选择【暂停】按钮,在【动作】面板左侧双击【时间轴控制】里的【stop】,为其添加脚本控制(见图3-82)。(5)新建图层2,选择第1帧,在【动作】面板左侧双击【时间轴控制】里的【stop】,为场景里的时间轴添加脚本控制(见图3-83)。预览并单击按钮控制动画(见图3-84)。第六节作品发布与输出一、导出FlashCS6影片1.导出图像FlashCS6可以导出不同格式的图像,具体方法是执行【文件】→【导出】→【导出图像】命令,输入文件名,选择保存的目录地址,选择相应的文件格式(见图3-85),单击【确定】,继续设置相应的参数即可。2.导出声音FlashCS6可以导出WAV格式的声音文件,具体方法是执行【文件】→【导出】→【导出影片】命令,输入文件名,选择保存的目录地址,选择WAV格式(见图3-86),单击【确定】按钮,继续设置相应的参数即可。3.导出影片FlashCS6可以导出多种格式的影片,具体方法是执行【文件】→【导出】→【导出影片】命令,输入文件名,选择保存的目录地址,选择相应格式,单击【确定】按钮,继续设置相应的参数即可。一般常用于web上的影片格式为SWF影片。第六节作品发布与输出二、发布FlashCS6作品1.优化设置优化的目的是在不损坏和影响影片的质量和播放效果的前提下,缩短影片的下载时间。优化元件和动画的常用方法如下:(1)将常用的对象做成元件。(2)由于关键帧使用越多,影片文件就越大,因此尽量精简关键帧。(3)删除图层上的无用帧,优化时间轴。(4)多用矢量图形,少用位图图像,使用位图时坚持“尺寸和精度够用就行”的原则。(5)导入音频、视频素材时提前压缩好素材。优化图形、文本及颜色的常用方法如下:(1)多用实线,少用虚线。(2)多用构图简单的矢量图形。矢量图形越复杂,CPU运算起来就越费力。可执行【修改】→【曲线】→【优化】命令,将矢量图形中不必要的线条删除,从而减小文件。另外,也要尽可能多地使用群组元素。(3)尽量不要使用太多不同的字体,因为使用字体越多,影片文件就越大。另外,尽可能使用Flash内定的字体,嵌入字体会使文件增大。(4)尽量不要将字体打散。字体打散后就变成图形了,这样会使文件增大。(5)尽量少使用过渡填充颜色。使用过渡填充颜色填充一个区域比使用纯色填充要多占50字节左右。第六节作品发布与输出2.预览与发布执行【文件】→【发布设置】命令,可以对发布的文件类型进行设置(见图3-87)。一般情况下,保持默认级别即可。默认的、也是常用的发布格式是Flash(.SWF),其参数包括:【JPEG品质】该选项用来控制位图压缩的品质。选项后面的数值越小,图像的品质就越低,生成的文件就越小;相反,数值越大,图像的品质就越高,压缩比就越小,文件就越大。【启用JPEG解块】该选项可以使高度压缩的JPEG图像显得更为平滑,减少JPEG压缩导致的典型失真。【音频流】/【音频事件】分别单击这两个选项右边的相关内容,在弹出的对话框中进行相应设置,可以为SWF中的所有声音流或事件声音设置采样率和压缩。【覆盖声音设置】选定“覆盖声音设置”,可以创建一个较小的低保真版本的SWF文件,若取消该选项,则Flash会扫描文档中的所有音频流(包括导入视频中的声音),然后按照各个设置中最高的设置发布所有音频流。如果一个或多个音频流具有较高的导出设置,则可能增加文件大小。【导出设备声音】可以导出适合于设备(包括移动设备)的声音,而不是原始库声音。第六节作品发布与输出第七节综合实例:结合PS模板设计制作网页动态元素综合实例:制作网站主页Banner动画(1)新建动画文档(见图3-88),导入配套素材中的“07”、“08”、“09”、“10”四个文件到【库】面板,从【库】面板将“08”的图像拖入舞台作为背景(见图3-89)。(2)新建图层2,将“09”素材拖入到舞台(见图3-90);新建图层3,将“10”素材拖入到舞台并适当放大(见图3-91)。(3)隐藏图层3,在图层1的第200帧处插入帧;选择图层2,在第200帧处插入关键帧,并创建传统补间;单击图层2的第200帧,使用【选择工具】将图像向左稍稍移动(见图3-92)。(4)显示图层3,在图层3的第200帧处插入关键帧,并创建传统补间动画;单击图层3的第200帧,使用【选择工具】将图像向右稍稍移动(见图3-93)。(5)在图层3上方新建图层4,将“07”鸟瞰图图像拖入到舞台的空白处,在图像上单击右键选择【分离】选项,然后使用【套索工具】,在工具箱下方选择【魔术棒】,设置值为10,在分离的鸟瞰图图像外围透明区域单击左键选中(见图3-94),按【Delete】键删除所选图像。第七节综合实例:结

温馨提示

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

评论

0/150

提交评论