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

下载本文档

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

文档简介

3.1广告条动画3.1.1实例介绍1.打开制作软件并建立文件(1)打开制作软件—flash8(2)建立banner.fla文件我们现在看到的文件叫做“未命名-1”,单击属性设置面板中的【大小】,根据我们的制作广告条的实际尺寸,在文档属性中更改舞台尺寸为宽:556px,高110px。更改好以后,单击【确定】。我们将会看到舞台尺寸己经改变为我们想要的宽556px,高110px。单击【文件】菜单→【另存为】。将弹出另存为窗口,在窗口中的【保存类型】下一页返回3.1广告条动画位置,选取“flash8文档(*.fla)”;在窗口中的“文件名”位置,输入我们要为文件起的名字“banner.fla”;在窗口中的【保存在】位置,选取我们要把该文件保存的位置,在此我们可以在任意盘符下新建一个名为广告条的文件夹来保存我们的文件,单击【确定】。我们将看到名为“未命名-1”的文件己经变成我们想要的“banner.fla”文件。单击【文件】菜单→【导入】→【导入到库】,将弹出【导入到库】窗口,在窗口中的【查找范围】中,选取素材图片所在文件夹“第一部分flash”文件夹中的“所用图片”文件夹,选择“beijing0l.jpg”文件,单击【打开】。在库面板中将会看到名称为“beijing0l.jpg”的位图。在导入上一页下一页返回3.1广告条动画过程中,除了【导入到库】还有【导入到舞台】选项,但是我们一般都会选择【导入到库】选项,这样便于更改和使用素材图片。左键双击【时间轴窗口】中的“图层1”3个字,将图层名称“图层1”更改为“背景”。左键单击【时间轴窗口】中,“背景”图层第1帧,表示要在该帧上填入内容。我们在单击前看到第1帧上有一个空心的圆,表示空白关键帧。帧就是在动画最小时间单出现的画面。Flash8制作的动画是以时间轴为基础的动画,由先后排列的一系列帧组成。帧的数量和帧率决定了动画播放的时间,同时帧还决定上一页下一页返回3.1广告条动画了动画的时间与动作之间的关系。为了帮助大家学习先简单介绍一下“帧”,然后在相关知识中我们再详细介绍。在时间线上,实心圆点表示关键帧,空心圆点表示空白关键帧。创建一个新图层时,每一图层的首帧将自动被设置为关键帧。若帧被设置成关键帧,而该帧又没有任何对象时,它就是一个空白关键帧。拖动“库”面板中的“beijing0l.jpg”到舞台。很多时候我们导入的图片的大小和形状,并不能满足我们的要求,所以我们要调整图片的大小和形状以使图片满足我们制作的要求。当图片拖动到舞台后,我们会看到“背景”图层第1帧由原上一页下一页返回3.1广告条动画来的空心圆圈,变成了黑色实心圆圈,黑色的实心圆圈就表示关键帧,表示己经添加了内容。单击已经拖动到舞台的“beijing01.jpg”,然后单击【窗口】菜单→【对齐】,调用对齐面板。一般对齐面板出现在右侧中间部位,也可以根据自己的习惯放置。单击【对齐】面板中的【相对于舞台】按钮,表示对于“beijing01.jpg”相对于舞台进行对齐调整。依次单击【对齐】面板中的【水平中齐】、【垂直居中分布】、【匹配宽度】、【匹配高度】。相应调整以后,我们会发现,图片“beijing01.jpg”和舞台完全重合。上一页下一页返回3.1广告条动画右键单击“背景”图层第70帧,插入关键帧。随便单击“背景”图层任意两帧,这里我们选取第25帧和第43帧,可以发现这样通过第1帧和第70帧两个关键帧就可以实现,在“背景”图层1~70帧内都有“beijing01.jpg”背景图片。单击“背景”图层后面第2个圆点,圆点会变成锁的形状,这样就锁定图层。当完成一个图层后,我们经常会锁定图层,然后再插入新的图层进行制作,这样就不会在制作新图层时,影响到已经完成的图层。如果还击要再更改已经锁定的图层,只击要在此单击就可以解锁,锁的形状又变成圆点。上一页下一页返回3.1广告条动画3.文字制作及逐帧动画在“背景”图层上右键单击,插入新图层,把新图层改名为“文字”(1)文字制作右键单击“文字”图层第5帧,单击【插入关键帧】单击“文字”图层第5帧,表示我们下面的制作将在“文字”图层第5帧内。单击【工具箱】中的【文本工具】设置属性面板中的相关项:文本类型为静态文字;字体为TimesNewRoman;字体大小为23;文本(填充)颜色为蓝色;对齐方式为左对齐;字母间距为0;字符位置为一般;字体呈上一页下一页返回3.1广告条动画现方法为可读性消除锯齿。并目自动调整字距。左键在舞台区域按下,保持按下状态并拖动出文字输入区域。抬起左键,在拖曳的区域内输入“我们用康达电器,”单击【工具箱】中的【选择工具】,就可以退出文字的输入状态我们还可以在上图的状态下,在【属性面板】中,更改X,Y的值。在这单我们取X:238.1,Y:14.3在更改了文字的一些基本属性的基础上,可以为文字加一些特殊效果,以起到美化文字的作用。我们单击【属上一页下一页返回3.1广告条动画性面板】中【属性】右侧的【滤镜】,打开滤镜面板。单击“+”为文字添加滤镜效果,在滤镜效果中可以根据不同需要添加一种或多种效果。在这单我们添加发光效果,单击【发光】,弹出选项,选择模糊X:5;模糊Y:5;强度:100%;品质:低;颜色:红色。选好以后效果如图3.28所示。(2)逐帧动画制作在文字制作好以后我们在“文字”图层上添加关键帧,单击“文字”图层第10帧,按“F6”功能键插入一个关键帧,然后依次在第15帧、第20帧、第25帧、第30帧、第35帧上插入一个关键帧。上一页下一页返回3.1广告条动画单击“文字”图层第5帧,舞台中显示文字为“我们用康达电器,我们做健康达人!”,在不改变文字位置及样式的情况下,留下第一句中的“我”字,第一句中的“我”字,其他文字删除。单击“文字”图层第10帧,舞台中显示文字为“我们用康达电器,我们做健康达人!”,在不改变文字位置及样式的情况下,留下第一句中的“我们”字,第一句中的“我们”字,其他文字删除。按以此方式大家制作第15帧、第20帧、第25帧、第30帧、第35帧。上一页下一页返回3.1广告条动画单击“文字”图层第70帧,按F6插入一个关键帧。按下回车键,会看到舞台中的文字活动起来了,这就是逐帧动画。通过更改帧中的舞台内容来制作动画,最适合制作复杂的动画。要创建逐帧动画,需要将每个帧都定义为关键帧,然后给每个帧创建不同的图像。每个新关键帧最初包含的内容和它前面的关键帧是一样的,因此可以递增地修改动画中的帧。4.补间动画及引导动画的制作右键单击“文字”图层,选择插入图层,或者单击时间轴面板左边图层区中的【插入图层】。将新建图层改名为“图标移动”,右键单击该图层,在弹出菜单中选择【添上一页下一页返回3.1广告条动画加引导层】,单击【文件】→【导入】→【导入到库】,将“所用文件”文件夹中的“logo.gif”文件导入到库中。单击“引导层:图标移动”第1帧,单击【工具箱】中的【铅笔工具】,选择【工具箱】中【选项】中的【平滑】。在属性面板中选择“笔触颜色”为黑色,“笔触高度”为1,“笔触样式”为实线,“笔触平滑度”为50。在舞台中绘制一条曲线,单击“引导层:图标移动”第35帧,按下F6插入一个关键帧,使曲线的作用范围从第帧到第35帧。上一页下一页返回3.1广告条动画单击“图标移动”第1帧,从库中将“logo.glf”图片移动到舞台上。单击该图片,打开【变形】面板更改该图片大小,在线板中选择水平宽度为30.0%,垂直宽度为30.0%,旋转0.0度。锁定除“图标移动”图层以外的各个图层,单击“图标移动”图层第1帧,单击“logo.gif”图片,并将图片移动到曲线上的靠上位置。单击“图标移动”图层第35帧,按F6插入一个关键帧,单击“logo.gif”图片,并将图片移动到曲线上的水平末端位置。上一页下一页返回3.1广告条动画单击“图标移动”图层第1帧,在属性面板中,选择“补间:动画”将属性面板中的各项进行调整,“缓动”改为50;“旋转”改为顺时针,次数为10;将“调整到路径”、“同步”、“对齐”3项前面的方框中打钩。同时在时间轴“图标移动”图层上,会形成一个从第1帧指向第35帧的箭头,说明补间动画创建成功。单击回车键,会看到“logo.gif”图片,顺时针按所画曲线路径,从上到下运动,说明引导动画创建成功。单击“图标移动”图层上第50帧,按F6插入一个关键帧,制作从第35—第50帧的一个补间动画效果,属性面板参数如图3.53所示。上一页下一页返回3.1广告条动画制作好后的时间轴如图3.54所示。单击“图标移动”图层上第70帧,按F6插入一个关键帧。5.元件及补间形状的制作插入一个新图层,命名为“星星”。单击【插入】→【插入新元件】,或者使用快捷键Ctrl+F8创建一个新的元件将名称改为“星星”,类型为“影片剪辑”,单击【确定】。这时会出现一个新的界面,称为元件编辑界面。左键按住【工具箱】中的【矩形工具】,在【矩形工具】出现选项时,选择【多角星形工具】,选择好以后,更改“属性”面板中的相应设置,如图3.60所示。上一页下一页返回3.1广告条动画更改属性面板中“笔触颜色”为无;“填充颜色”为彩虹色选择属性面板中的【选项】,弹出【工具设置】窗口,将样式设置为星形,边数为8,星形顶点大小为0.20,单击【确定】。在元件编辑界面的舞台中,左键单击并按住进行拖曳,绘制一个适合大小的星星。选中所画星星,单击【工具箱】中的【任意变形工具】在【工具箱】中的【选项】单分别单击【扭曲】和【缩放】,调整星星的形状及大小。在元件界面“图层一”中,分别在第15帧和第30帧上,按上一页下一页返回3.1广告条动画F6各插入一个关键帧。单击第巧帧,用【任意变形工具】调整星星,将星星缩小。在元件界面“图层一”中,单击第1帧,在属性面板中,将“补间:无”改为“补间:形状”:单击第15帧,在属性面板中,将“补间:无”改为“补间:形状”。这时元件界面“图层一”中,第1一第15帧将出现箭头连接,第15一第30帧也出现箭头连接,说明“补间形状”建立成功。“补间形状”和“补间动画”在时间轴中很直观地可以看出,它们的起始帧与终止帧间的颜色是不一样的,“补间形状”两帧之间是绿色的。单击回车键,星星会从大到小又从小到大变化。上一页下一页返回3.1广告条动画单击图层上方的按钮“场景1”,回到主编辑界面。单击“星星”图层第1帧,将“库”中的“星星”元件拖曳到舞台中连续拖曳3个“星星”元件,放入舞台,并调整大小单击“星星”图层,第35帧,按F6插入关键帧,选中舞台中的任意一个“星星”元件,按住Shift键,左键单击另两个“星星”元件,选好后,将星星“元件”移动到图3.72所示的位置。上一页下一页返回3.1广告条动画单击“星星”图层第70帧,按F6插入关键帧。6.测试及导出单击【控制】菜单→【测试影片】命令,或者使用Ctrl+Enter快捷键测试动画。影片测试成功后,单击【文件】菜单→【导出】→【导出影片】命令击【导出影片】命令后,会出现【导出影片】窗口,将文件名命名为“banner.swf”并保存在相应位置。3.1.2相关知识1.逐帧动画上一页下一页返回3.1广告条动画逐帧动画更改每一帧中的舞台内容,它最适合于每一帧中的图像都在更改而不是仅仅简单地在舞台中移动的复杂动画。逐帧动画增加的文件大小的速度比补间动画快得多。在逐帧动画中,Flash会保存每个完整帧的值。要创建逐帧动画,需要将每个帧都定义为关键帧,然后给每个帧创建不同的图像。每个新关键帧最初包含的内容和它前面的关键帧是一样的,因此可以递增地修改动画中的帧。2.补间动画要补间实例、组和类型的属性的更改,可以使用补间动画。Flash可以补间实例、组和类型的位置、大小、旋转上一页下一页返回3.1广告条动画和倾斜。另外,Flash可以补间实例和类型的颜色、创建渐变的颜色切换或使实例淡入或淡出。要补间组或类型的颜色,必须把它们变为元件。要使文本块中的单个字符分别动起来,可以将每个字符放在独立的文本块中。如果应用补间动画,然后改变两个关键帧之间的帧数,或移动任一关键帧中的组或元件,Flash会自动重新补间帧。3.补间形状动画通过补间形状,可以创建类似于形变的效果,使一个形状看起来随着时间变成另一个形状。Flash也可以补间形状的位置、大小、颜色和不透明度。一次补间一个形状上一页下一页返回3.1广告条动画通常可以获得最佳效果。如果一次补间多个形状,则所有的形状必须在同一个图层上。要对组、实例或位图图像应用补间形状,首先必须分离这些元素。要对文本应用补间形状,必须将文本分离两次,从而将文本转换为对象。4.引导层动画基本的动画补间动画只能使对象产生直线方向的移动,而对于一个曲线运动,就必须不断的设置关键帧,为运动指定路线。为此Flash提供了一个自定义运动路径的功能。这个功能可以在运动对象的上方添加一个运动路径的层,然后用户可以在该层中绘制对象的运动路线,让上一页下一页返回3.1广告条动画对象掩盖路线运动。在播放时,该层是隐藏的。运用引导层可以绘制路径,补间实例、组或文本块均可以沿着这些路径运动。也可以将多个层链接到一个运动引导层,使多个对象沿同一路径运动。3.1.3知识拓展1.动画的分类动画大体上可以按照以下方式分类:(1)按照播放的媒体,动画可以分为TV动画、OVA动画、剧场动画、实验动画。(2)按照制作动画的技术和手段,动画可分为以手绘为主的传统动画和以计算机制作为主的计算机动画。上一页下一页返回3.1广告条动画(3)按照空间的视觉效果,动画可分为平面一维动画和二维动画。(4)按照动作的表现形式,动画可分为接近自然动作的完善动画(动画电视)和采用简化、夸张表现手法的局限动画(幻灯片动画)。(5)按照播放效果,动画可分为顺序动画(连续动作)和交互式动画(反复动作)。(6)按照每秒播放的画面幅数,动画可以分为全动画(24幅/s)和半动画(少于24幅/s)。2.动画的创作流程一般动画的创作流程大致分为如下3个阶段。上一页下一页返回3.1广告条动画(1)准备素材(2)设计动画(3)输出动画3.常用的平面动画制作软件(1)Flash(2)Retas(3)Pegs(4)AnimatorStudio上一页返回3.2联系地图动画3.2.1实例介绍1.建立文件打开制作软件一flash8,单击【创建新项目】→【Flash文档】。单击属性设置面板中的【大小】,根据制作广告条的实际尺寸,在文档属性中更改舞台尺寸为:宽120px,高85px。单击【文件】菜单→【另存为】。将弹出另存为窗口,在窗口中的【保存类型】位置,选取“flash8文档(*.fla)”;在窗口中的【文件名】位置,输入我们要为文件起的名字“map.fla”;下一页返回3.2联系地图动画在窗口中的【保存在】位置,选取要把该文件保存的位置,在此可以在任意盘符下新建一个名为地图的文件夹来保存我们的文件,单击【确定】。2.导入素材图片单击【文件】菜单→【导入】→【导入到库】,将弹出【导入到库】窗口,在窗口中的【查找范围】中,选取素材图片所在文件夹“第一部分flash”文件夹中的“所用图片”文件夹,选择“earch.jpg”文件,单击【打开】。在库面板中将会看到名称为“earch.jpg”的位图。左键双击【时间轴窗口】中的,“图层1”3个字,将图层名称“图层1”更改为“地图”。左键单击【时间轴窗口】中,“地图”图层上一页下一页返回3.2联系地图动画第1帧。拖动【库】面板中的“earch.jpg”到舞台当图片拖动到舞台后,我们会看到“地图”图层第1帧由原来的空心圆圈,变成了黑色实心圆圈,黑色的实心圆圈就表示关键帧,表示己经添加了内容。单击己经拖动到舞台的“earch.jpg”,然后单击【窗口】菜单→【对齐】,调用对齐面板。单击【对齐】面板中的【相对于舞台】按钮,表示对于“earch.jpg”相对于舞台进行对齐调整。依次单击【对齐】面板中的【水平中齐】、【垂直居中分布】、【匹配宽度】、【匹配高度】。相应调整以后,我们会发现,图片“earch.jpg”和舞台完全重合。上一页下一页返回3.2联系地图动画右键单击“地图”图层第146帧,插入关键帧。这样就可以实现,在第1~第146帧都有“earch.jpg”为背景。这样“地图”图层就制作完毕了,锁定图层。3.元件及时间轴特效制作插入一个新图层,命名为“红点”。单击【插入】→【插入新元件】,或者使用快捷键Ctrl+F8创建一个新的元件将名称改为“红点”,类型为“影片剪辑”,单击【确定】。这时会出现元件编辑界面。单击【工具箱】中的【椭圆工具】上一页下一页返回3.2联系地图动画选择好以后,更改“属性”面板中的相应设置更改属性面板中“笔触颜色”为无;“填充颜色”为红色。在元件编辑界面的舞台中,按住Shift键,左键单击并按住进行拖曳,绘制一个适合大小的圆形。选中所画红点,单击【窗口】→【变形】,调出【变形】面板。运用“变形”面板中的,百分比变化,更改红点大小。选中己经更改好的“红点”,单击【插入】菜单→【时间轴特效】→【效果】→【模糊】。打开“模糊”窗口,选择“效果持续时间”16帧;“分辨率”15;“缩放比例”0.25;“允许水平模糊”、“允许垂直模糊”;“移动方向”正中,单击【确定】。上一页下一页返回3.2联系地图动画确定后自动返回元件编辑界面,单击回车键,会发现红点出现模糊效果,这样时间轴特效中的模糊效果就制作成功了。单击图层上方的按钮“场景1”,回到主编辑界面。单击“红点”图层第1帧,将【库】中的“红点”元件拖曳到舞台中,可以比对地图再次使用“变形”面板调整红点大小。依次拖曳8个“红点”元件,到“红点”图层第1帧。选中“红点”图层第146帧,插入关键帧。这样就可以实现,在“红点”图层第1~第146帧都有这些“红点”元件了,锁定“红点”图层。4.遮罩层动画制作右键单击“红点”图层,插入一个新的图层。然后右键单击新图层,在弹出菜单中选择遮罩层。上一页下一页返回3.2联系地图动画选择遮罩层后,单击“图层5”的“锁头”按钮,解除图层锁定,在“图层5”第30帧插入关键帧,单击“图层5”第30帧后,在舞台内绘制一个略大于红点的圆形。在“属性”面板中,选择黑色笔触及黑色填充色,将黑色圆形拖曳到一个红点的上方,并完全遮盖住红点,在“图层5”第42帧插入关键帧,在“图层5”第43帧插入关键帧,单击“图层5”第43帧后,将黑色圆形拖曳到另一个红点的上方,并完全遮盖住红点。如图3.103所示。上一页下一页返回3.2联系地图动画在“图层5”第57帧插入关键帧,在“图层5”第58帧插入关键帧,重复上面的步骤,单击“图层5”第58帧后,将黑色圆形拖曳到另一个红点的上方,并完全遮盖住红点。如图3.106所示。在“图层5”第72帧、第73帧、第87帧、第88帧、第102帧、第103帧、第117帧、第118帧、第131帧、第132帧、第146帧分别插入关键帧。重复上面的制作过程。然后将“图层5”锁定。5.文字层的制作右键单击“图层5”,插入一个新的图层,命名为“文字”图层。单击“文字”图层第1帧,选择“文本工具”,更改“属性”上一页下一页返回3.2联系地图动画面板。“文本类型”为静态文本;“字体”为黑体;“字体大小”为12;“文本(填充)颜色”为青绿色;“对齐方式”为居中对齐,并选中“自动调整字距”。调整好“属性”面板后,在下方的舞台区域内输入“康达电器全国联保”。单击“选择工具”,然后单击舞台中的文字区域,选择“对齐”面板中相对于舞台“底部分布”、“匹配宽度”。6.测试及导出单击【控制】菜单→【测试影片】命令,或者使用Ctrl+Enter快捷键测试动画。影片测试成功后,单击【文件】菜单→【导出】→【导出影片】命令,单击【导出影片】命令后,会出现【导出影片】窗口,将文件名命名为“map.swf”并保存在相应位置。上一页下一页返回3.2联系地图动画3.2.2相关知识1.遮罩层动画介绍要获得聚光灯效果以及转变,可以使用遮罩层创建一个孔,通过这个孔可以看到下面的图层。遮罩项目可以是填充的形状、文字对象、图形元件的实例或影片剪辑,可以将多个图层组织在一个遮罩层之下来创建复杂的效果。要创建动态效果,可以让遮罩层动起来。对于用作遮罩的填充形状,可以使用补间形状;对于文字对象、图形实例或影片剪辑,可以使用补间动画。当使用影片剪辑实例作为遮罩时,可以让遮罩沿着运动路径运动。上一页下一页返回3.2联系地图动画要创建遮罩层,可以将遮罩项目放在要用作遮罩的图层上。和填充或笔触不同,遮罩项目像个窗口,透过它可以看到位于它下面的链接层区域。除了透过遮罩项目显示的内容之外,其余的所有内容都被遮罩层的其余部分隐藏起来。一个遮罩层只能包含一个遮罩项目。按钮内部不能有遮罩层,也不能将一个遮罩应用于另一个遮罩。2.时间轴特效介绍Flash8的时间轴特效将Flash动画中一些经常用到的效果制作成简单的命令,使人们只需要选中动画的对象再执行相关命令即可。从而省去了大量重复、机械的操作,提高了动画开发的效率。时间轴特效的应用对象有文本、上一页下一页返回3.2联系地图动画图形(包括矢量图、组合对象和元件)、位图以及按钮元件等。使用Flash内建的时间轴特效,可以快速就创建复杂的动画。每个时间轴特效都以特定的方式来处理图形和元件。可以通过改变特效的各个参数来获得需要的特效。在特效预览窗口,可以修改特效的参数,快速预览修改参数后的变化,选择满意的效果。将时间轴特效应用于影片剪辑时,Flash将把特效嵌套在影片剪辑中。3.元件介绍(1)元件的类型每个元件都有一个唯一的时间轴和舞台,以及儿个层。创建元件时要选择元件类型,这取决于您在文档中如何上一页下一页返回3.2联系地图动画使用该元件。图形元件可用于静态图像,并可用来创建连接到主时间轴的可重用动画片段。使用按钮元件可以创建响应鼠标单击、滑过或其他动作的交互式按钮。可以定义与各种按钮状态关联的图形,然后将动作指定给按钮实例。使用影片剪辑元件可以创建可重用的动画片段。影片剪辑拥有它们自己的独立于主时间轴的多帧时间轴。可以将影片剪辑看作是主时间轴内的嵌套时间轴,它们可以包含交互式控件、声音甚至其他影片剪辑实例。也可以将影片剪辑实例放在按钮元件的时间轴内,以创建动画按钮。(2)若要创建一个新的空元件,可执行以下操作:上一页下一页返回3.2联系地图动画①确保没有选中舞台上的任何内容,然后执行以下操作之一:选择【修改】→【新建元件】;单击【库】面板左下角的【新建元件】按钮;从【库】面板右上角的【库】选项菜单中选择【新建元件】。②在【创建新元件】对话框中,输入元件名称并选择行为(“图像”、“按钮”或“影片剪辑”)。③单击【确定】。④Flash会将该元件添加到库中,并切换到元件编辑模式。在元件编辑模式下,元件的名称将出现在舞台左上角的上面,并由一个十字光标表明该元件的注册点。上一页下一页返回3.2联系地图动画⑤要创建元件内容,可使用时间轴、用绘画工具绘制、导入介质或创建其他元件的实例。⑥创建完元件内容之后,单击舞台上方编辑栏内的场景名称就可以返回到文档编辑模式了。(3)编辑元件编辑元件时,Flash会更新文档中该元件的所有实例。Flash提供了3种方式来编辑元件。可以使用“在当前位置编辑”命令在该元件和其他对象在一起的舞台上编辑它。其他对象以灰显方式出现,从而将它们和正在编辑的元件区别开来。正在编辑的元件名上一页下一页返回3.2联系地图动画称显示在舞台上方的编辑栏内,位于当前场景名称的右侧。3.2.3知识拓展1.导入视频Flash可以导入视频剪辑,根据视频格式和所选导入方法的不同,用户可以将具有视频的影片发布为Flash影片(SWF格式文件)或Quicklime影片(MOV格式文件)。Flash8还提供了一个新的视频导入功能一一视频导入向导。视频导入向导可简化视频编码并提供编码调整及剪接编辑。在向导中还有一个非常简洁的工具提供了整理长度、产生多样的剪辑片断、录制视频剪接片段及输出声频等功能。上一页下一页返回3.2联系地图动画2.导入声音Flash除了动画的表现优异以外,对声音和视频的支持也相当出色。除了可以在Flash中放入各种声音以外,还可以支持Quicktime的影片格式,让我们运用更多样的素材,进而丰富作品。在Flash中有两种类型的声音:一种是时间声音;另一种是音频流(流式声音)。3.影片的发布及预览当测试Flash影片运行无误后,就可以将影片发布了。在默认的情况下,【发布】命令可以创建FlashSWF文件,并将Flash影片插入浏览器窗口中的HTML文档。上一页返回3.3公告栏动画3.3.1实例介绍1.建立文件打开制作软件一flash8,单击【创建新项目】→【Flash文档】。根据制作的广告条的实队、尺寸,在文档属性中更改舞台尺寸为宽:220px,高400px。单击【文件】菜单→【另存为】。将弹出另存为窗口,在窗口中的【保存类型】位置,选取“flash8文档(*.fla)”;在窗口中的【文件名】位置,输入我们要为文件起的名字“bulletinboard.fla”;在窗口中的【保存在】位置,选取要把文件保存的位置,在此可以在任意盘符下新建一个下一页返回3.3公告栏动画名为地图的文件夹来保存文件;单击【确定】。将看到名为“未命名-1”的文件己经变成我们想要的“bulletinboard.fla”文件。2.导入素材图片单击【文件】菜单→【导入】→【导入到库】,将弹出【导入到库】窗口,在窗口中的【查找范围】中,选取素材图片所在文件夹“第一部分flash”文件夹中的“所用图片”文件夹,选择“beijing02.jpg”文件,单击【打开】。在库面板中将会看到名称为“beijing02.jpg”的位图。左键双击【时间轴窗口】中的“图层1”3个字,将图层名称“图层1”更改为“背景”。左键单击【时间轴窗口】中“背景”上一页下一页返回3.3公告栏动画图层第1帧。拖动【库】面板中的“beijing02.jpg”到舞台。单击己经拖动到舞台的“beijing02.jpg”,然后单击【窗口】菜单→【对齐】,调用对齐面板。单击【对齐】面板中的【相对于舞台】按钮,表示对于”beijing02.jpg”相对于舞台进行对齐调整。依次单击【对齐】面板中的【水平中齐】、【垂直居中分布】、【匹配宽度】、【匹配高度】。相应调整以后,我们会发现,图片“beijing02.jpg”和舞台完全重合。这样“背景”图层就制作完毕了,锁定图层。3.绘制表盘插入一个新图层,命名为“表盘”。上一页下一页返回3.3公告栏动画单击【表盘】图层第1帧,在舞台中绘制一个圆形。【属性】面板中,【笔触颜色】为青绿色;【笔触高度】为12.25;【笔触样式】为实线;【填充颜色】为彩虹色。设置好“椭圆工具”的属性以后,在舞台中绘制一个圆形。使用【信息面板】调整,圆形的大小和位置。选中圆形,单击【窗口】菜单一【信息】,调出【信息】面板。调整“信息面板”中“宽”为101.0;“高”为101.0;“X”为101.0;“Y”为184.8,调整好后,用【文本工具】在圆形对应位置中添加3,6,9,12代表时间,文本属性可以尝试调整。制作好以后,选中整个表盘,单击【修改】菜单→【组合】或者使用Ctrl+B快捷键。上一页下一页返回3.3公告栏动画单击【组合】后,表盘将变成一个整体。锁定“表盘”图层。4.绘制时针、分针、秒针在“表盘”图层上方新建3个图层,分别命名为“时针”、“分针”、“秒针”。单击【插入】→【插入新元件】,或者使用快捷键Ctrl+F8创建一个新的元件将名称改为“时针”,类型为“影片剪辑”,单击【确定】。这时会出现元件编辑界面。单击【工具箱】中的【线条工具】,更改【属性】面板上一页下一页返回3.3公告栏动画中的相应设置,【笔触颜色】为黑色;【笔触高度】为6。在元件编辑窗口的舞台中心位置(舞台中“加号”位置)绘制一条直线,并用【信息】面板更改直线:“宽”为0.0;“高”为30.0;“X”为0.0;“Y”为29.0。使用【椭圆工具】在舞台中心位置绘制一个白色的圆形。并用【信息】面板更改圆形:“宽”为8.0;“高”为8.0;“X”为4.0;“Y”为4.0。这样时针就绘制好了,单击“场景一”返回到主界面。再新建一个元件,命名为“分针”,类型为“影片剪辑”。与制作时针过程相同。绘制直线时【属性】面板为【笔触颜色】并为黑色;“笔触高度”为4。在元件编辑窗口的舞台中上一页下一页返回3.3公告栏动画心位置(舞台中“加号”位置)绘制一条直线,并用【信息】面板更改直线:“宽”为0.0;“高”为40.0;“X”为0.0;“Y”为38.0。使用【椭圆工具】,在舞台中心位置绘制一个蓝色的圆形。并用【信息】面板更改圆形:“宽”为8.0;“高”为8.0;“X”为4.0;“Y”为4.0。单击“场景一”返回到主界面。再新建一个元件,命名为“秒针”,类型为“影片剪辑”,与制作时针过程相同。绘制直线时【属性】面板为【笔触颜色】并为黑色;“笔触高度”为20在元件编辑窗口的舞台中心位置(舞台中“加号”位置)绘制一条直线,并用【信息】面板更改直线:“宽”为0.0;“高”为45.0;“X”为0.0;“Y”为42.0。上一页下一页返回3.3公告栏动画使用【椭圆工具】,在舞台中心位置绘制一个红色的圆形。并用【信息】面板更改圆形:“宽”为8.0;“高”为8.0;“X”为4.0;“Y”为4.0。单击“场景一”返回到主界面。单击“时针”图层第1帧,将【库】中的“时针”元件拖曳到表盘中,在【属性】面板中【影片剪辑】下方的“实例名称”设定为“hourhand”;“宽”为8.0;“高”为33.0;“X”为147.6;“Y”为206.4。单击“分针”图层第1帧,将“库”中的“分针”元件拖曳到表盘中。单击【变形】面板,更改“旋转”为30.0度。在【属性】面板中【影片剪辑】下方的“实例名称”设定为“minutehand”;“宽”为27.9;“高”为40.3:“X”为146.1:“Y”为200.4。上一页下一页返回3.3公告栏动画单击“秒针”图层第1帧,将“库”中的“秒针”元件拖曳到表盘中。单击【变形】面板,更改【旋转】为60.0度。在【属性】面板中【影片剪辑】下方的“实例名称”设定为“secondhand”;“宽”为43.8;“高”为29.9;“X”为146.1;“Y”为210.9。锁定“时针”图层、“分针”图层、“秒针”图层。5.编辑帧动作在“秒针”图层上方新建一个图层,命名为“action1”选中“actionl“图层第1帧,按下F9快捷键打开【动作】面板上一页下一页返回3.3公告栏动画在“动作”面板中添加如下代码:FunctionClockFun(){//调用ClockFun函数time=newDate();//声明一个名为时间的对象hour=time.getHours()*30;//时钊每小时旋转30度Minutes=time.getMinutes()*6;//分针每分钟旋转6度seconds=time.getSeconds()*6;上一页下一页返回3.3公告栏动画//秒针每秒旋转6度minutes+=time.getSeconds()/10;//每过10秒钟针度数加1度hour+=time.getMinutes()/2;//每过2分钟时针度数加1度secondhand._rotation=seconds;minutehand._rotation=minutes;hourhand._rotation=hour;//3个指针实例旋转的角度等于seconds,minutes,hour的值setlnterval(ClockFun,1000);上一页下一页返回3.3公告栏动画//每隔1000毫秒执行一次ClockFun函数代码中“rotation“是影片的角度属性,用于控制影片剪辑实例的旋转,这段代码就是设定指针旋转角度的。6.编辑元件动作创建一个新的元件,名称为“time”,类型为“影片剪辑”进入元件编辑界面,选择【文本工具】绘制两个动态文本。在【属性】面板中设置动态文本框,【文本类型】为动态文本;“字体”为华文行楷;“字体大小”为16;“文本(填充)颜色”为黑色;“对齐方式”为居中对齐;“线条类型”为单。然后分别为两个动态文本框设置变量名称为“date1”,“date2”上一页下一页返回3.3公告栏动画单击“场景一”返回到主界面,新建图层,命名为“日期”单击“日期”图层第1帧,将“time”元件拖入到舞台中选中舞台中的“time”元件,按下F9快捷键打开动作面板,添加如下ActionScript代码onClipEvent(enterFrame){//进入影片剪辑帧时hour=timedate.getHours();//获取timedate实例的小时赋值给hourminutes=timedate.getMinutes();//获取timedate实例的分钟赋值给minutes上一页下一页返回3.3公告栏动画seconds=timedate.getSeconds();//获取timedate实例的秒数赋值给secondstodaydate=timedate.getDate();//获取timedate实例的日期赋值给todaydatemonth=timedate.getMonth()+1;//获取timedate实例的月份赋值给monthyear=timedate.getFullYear();//获取timedate实例的年份赋值给yearif(length(minutes)==1){minutes="0"+minutes;}上一页下一页返回3.3公告栏动画//如果minutes的长度等于1,则在minutes前补0if(length(seconds)==1){seconds="0"+seconds;}//如果seconds的长度等于1,则在seconds前补0if(length(month)==1){month="0"+month;}//如果month的长度等于1,则在month前补0if(length(todaydate)==1){上一页下一页返回3.3公告栏动画todaydate=”0"+todaydate;}//如果todaydate的长度等于1,则在todaydate前补0date1=hour+":"+minutes+":"+seconds;//将hour:minutes:seconds赋值给变量date1date2=year+"/"+month+"/"+todaydate;//将year/month/todaydate赋值给变量date2Deletetimedate;//删除timedate对象实例timedate=newDate();上一页下一页返回3.3公告栏动画//新生成的Date日期对象的实例为timedate按下Ctrl+Ente:快捷键测试动画,可以看到3个表针已经分别指向相应的刻度,并且在两个动态文本框中正确地显小出了当前系统的时期和时间。锁定“日期”图层和“actionl”图层。7.编辑使用组件在“日期”图层上方新建一个图层,命名为“公告栏”。单击“公告栏”图层第1帧,使用【文本工具】绘制文字,【属性】面板设置为“文本类型”为静态文本;“字体”为隶属;“字体大小”为27;“文本(填充)颜色”为粉红;“对齐方式”为居中对齐。上一页下一页返回3.3公告栏动画调整好以后输入“公告栏”3个字,并打开【滤镜】面板,添加“投影”效果最后文字效果如下图3.156所示。锁定“公告栏”图层,并在“公告栏”图层上方新建一个图层,命名为“公告栏文字”。单击“公告栏”图层第1帧,使用“文本工具”绘制文字,【属性】面板设置“文本类”为动态文本;“实例名称”为txt;“字体”为隶属;“字体大小”为12;“文本(填充)颜色”为黑红;“对齐方式”为左对齐;“线条类型”为多行,并选中“自动调整字距”。在“公告栏”3个字的下方拖曳出一个矩形文本框。上一页下一页返回3.3公告栏动画单击【窗口】菜单→【组件】或使用Ctrl+F7快捷键,打开【组件】面板。从【组件】面板中,选择“UserInterface”分类,找到“UIScrollBar”组件,将找到的“UIScrollBar”组件拖动到舞台中,放置在动态文本框的右侧,与文本框顶端对齐,单击“UIScrollBar”组件,在其参数面板中,设置"_targetlnstanceName"值为“txt”,表小与其关联的文本字段名为txt,设置"horizontal"值为“false”,说明滚动条的滚动方向为垂直方向。锁定“公告栏文字”图层,并在“公告栏文字”图层上方新建一个图层,命名为“action2”。上一页下一页返回3.3公告栏动画单击“action2”图层第1帧,按下F9快捷键打开动作面板,添加如下ActionScript代码:txt.text="迎新春,欢乐送送送\\r\r1,享受买一件产品,九折的优惠\r2,享受买两件以上产品,八折的优惠\r3、在此次活动中,购买产品后保修期增加一年\r4、详情请参见各销售点详细公告\\r5,活动有效期2009年1月14日—24日\r6,最终解释权归康达公司"所有\\r"//定义名为txt的动态文本框中的内容。锁定"action2"图层,完成公告栏的制作。8.测试及导出上一页下一页返回3.3公告栏动画单击【控制】菜单→【测试影片】命令,或者使用Ctrl+Ente:快捷键测试动画。影片测试成功后,单击【文件】菜单→【导出】→【导出影片】命令,单击【导出影片】命令后,会出现【导出影片】窗口,将文件名命名为“bulletinboard.swf”并保存在相应位置。3.3.2相关知识1.组件介绍Flash8对于常用组件又进行了进一步的扩充,不在仅限于以前那些简单的单选按钮和复选框。新增组件无论是外观还是功能都比前一代有重大的匕跃。特别是新增的媒上一页下一页返回3.3公告栏动画体组件和数据组件,使操作人员能方便地从外部载入电影,并对其进行控制。除此之外,开发者还可以在不同组件之间进行数据绑定等。另外,也可以使用扩展管理器为影片添加新的组件。新的组件一旦被添加到Flash8中,就可以在其他影片中进行重复使用,从而提高了工作效率。组件使任何人都能够创建一个复杂的Flash8应用,即使对脚本语言没有深入研究。向Flash影片中添加组件有多种方法。对于初学者,可以使用组件面板将组建添加到影片中,接着使用属性面板或组件参数面板指定基本参数,最后使用动作面板编写动作脚本来控制组件。中级用户可以使用组件面板将组建添加到Flash影片中,然后使用属性面板、动作脚本方法或两者的组合来上一页下一页返回3.3公告栏动画指定参数。高级用户可以将组件面板和动作脚本结合在一起使用,通过在影片运行时执行相应的动作脚本来添加并设置组件。每个组件都有预定义参数,可以在Flash中创作时来设置这些参数。每个组件还有一组独特的ActionScript方法、属性和事件,它们也称为APl(应用程序编程接口),使用户可以在运行时设置参数和其他选项。使用组件面板向Flash影片中添加组件只需要打开组件面板,双击或向舞台上拖动该组件即可。要从Flash影片中删除己添加的组件实例,可通过删除库中的组件类型图标或者直接选中舞台上的实例按Delete键删除。上一页下一页返回3.3公告栏动画Flash8内置的组件包含了“数据组件”、“媒体组件”、“FLV视频播放组件”、“FLV视频控制界面组件”、“UI组件”等组件类型。“组件检查器”用于编辑组件的参数、绑定或架构,操作时执行【窗口】菜单→【组件检查器】命令,即可以打开“组件检查器”面板。3.3.3知识拓展Flash常见问题解答(1)论坛上常说的MC,FS,AS代表什么意思?MC=MovieClip(动画片断);FS=FSCOMMAND,是Flash的一个非常重要的一个命令集合;AS=ActionScript是Flash的编程语言。上一页下一页返回3.3公告栏动画(2)MC的详细运用,它和一般的层有什么区别,用在什么情况下?MC可以看成一个独立的对象。并A它是一段动画。它的特点就是无限嵌套。层是一个独立的空间,它可以更好地规划制作思路。一个层里有一个事件。(3)MC在场景中是如何播放的?把MC拖到场景中,动画播放时它就会自动播放,如果没有在最后一帧加上Stop,MC会默认为循环。要观看播放的效果须执行Ctrl+Enter。一个很长的MC放入场景中也只占据一帧的位置,如果它是一个很多帧的动画片段,执行时每隔一帧MC都会重放。上一页下一页返回3.3公告栏动画(4)作“沿轨迹运动”的动画的时候,物件为什么总是沿直线运动?首帧或尾帧物件的中心位置没有放在轨迹上。有一个简单的检查办法:把屏幕大小设定为400%或更大,察看图形中间出现的圆圈是否对准了运动轨迹。(5)为什么在作封闭轨迹路径动画的时候,物件总沿着直线运动?把封闭的路径去掉一点点试一试。(6)文字按钮为什么不灵活?在制作按钮的时候,未指定HIT区(HIT区也就是按钮的触发区),特别在做文字按钮的时候,一般定义一个矩形来上一页下一页返回3.3公告栏动画作为HIT区,如果未定义HIT区,系统会将文字作为按钮的触发区,在用的时候自然不是很灵活。HIT区域是隐藏的,在场景中并不会显示出来。(7)如何在Flash中把背景设为自己想要的颜色?选择背景颜色是没有方框让你填写颜色代码,但是我们可以通过别的方法,先在场景中随便画一个方框,用你想要的颜色填充(这时候应该可以选择填写颜色代码了,如#ff9900)然后再选择Ctrl+M用滴管工具选取刚刚画好的颜色就可以了。(8)如何画标准的正圆正方形?按住Shift键配合鼠标同时绘制。上一页下一页返回3.3公告栏动画(9)如何将文字或图镂空?打散字或者图形,先用墨水瓶工具将它的边缘上色,然后再选取中间部分将之删除便可。(10)怎么让一条线一点点延仲出来?一关键帧插入一短短的线段,另一关键帧插入一长长的线段,在前一关键帧上做逐帧动画。(11)如何合并层?从第一层的第一帧拉到最后一层的最后一帧进行复制,再新建一层进行Paste。(12)如何进行多帧选取?上一页下一页返回3.3公告栏动画用Shift+Alt+Ctrl可以选取多帧,也可以在要选的第一帧处单击Ctrl然后按住Shift点结束帧。(13)如何找到放在窗口外边的面板?将Windows下面的状态栏先放最下面,然后缩放Flash的窗口,找仔细点就可以找到面板露出的角,然后拖动就可以了。如果你的显示器分辨率是800×600,那么把它调到1024,然后就可以看到丢失的面板了。上一页下一页返回3.3公告栏动画(14)如何将Swf文件转换为EXE文件?带有控制菜单的Swf文件可以选择文件一一建立项目命令,将文件转换为EXE文件,如果是全屏幕的,可按Ctrl+F调出菜单,用上述方法来生成EXE文件。(15)如何在一个电影里实现不同的背景?不同的背景做在MC中通过帧自动读取或按钮手改变即可。上一页返回3.4商品宣传广告动画3.4.1实例介绍1.建立文件打开制作软件Flash8,单击【创建新项目】→【Flash文档】。我们现在看到的文件叫做“未命名-1”,单击属性设置面板中的【大小】,根据我们的制作广告条的实际尺寸,在文档属性中更改舞台尺寸为:宽550px,高450px。单击【文件】菜单→【另存为】。将弹出另存为窗口,在窗口中的【保存类型】位置,选取“flash8文档(*.fla)”;在窗口中的【文件名】位置,输入我们要为文件起的名下一页返回3.4商品宣传广告动画字"demonstration.fla";在窗口中的【保存在】位置,选取要把该文件保存的位置,可以在任意盘符下新建一个名为地图的文件夹来保存文件;单击【确定】,将看到名为“未命名-1”的文件己经变成想要的“demonstration.fla”文件。2.用ActionScript制作遮罩效果单击【文件】菜单→【导入】→【导入到库】,将弹出【导入到库】窗口,在窗口中的【查找范围】中,选取素材图片所在文件夹“第一部分flash”文件夹中的“所有图片”文件夹,选择“beijing03.jpg”,“beijing04.jpg”文件,单击打开。在库面板中将会看到名称为“beijing03.jpg”,“beijing04.jpg”的位图。上一页下一页返回3.4商品宣传广告动画左键双击【时间轴窗口】中的“图层1”3个字,将图层名称“图层1”更改为“背景”左键单击【时间轴窗口】中“背景”图层第1帧。拖动“库”面板中的“beijing03.jpg”到舞台,单击已经拖动到舞台的“beijing03.jpg”,调用“对齐”面板。单击【对齐】面板中的【相对于舞台】按钮,表小对于"beijing03.jpg”相对于舞台进行对齐调整。依次单击【对齐】面板中的【水平中齐】、【垂直居中分布】、【匹配宽度】、【匹配高度】。相应调整以后,我们会发现,图片“beijing03.jpg”和舞台完全重合。这样“背景”图层就制作完毕了,锁定图层。上一页下一页返回3.4商品宣传广告动画在“背景”图层上方插入一个新图层,命名为“底层背景”。单击“底层背景”图层第1帧。拖动“库”面板中的“beijing04.jpg”到舞台,单击已经拖动到舞台的“beijing04.jpg”,调用“变形”面板,将其高度改为87.5%。调用【对齐面板】,单击【对齐】面板中的【相对于舞台】按钮,表小对于"beijing04.jpg"相对于舞台进行对齐调整。依次单击【对齐】面板中的【水平中齐】、【顶部分布】、【匹配宽度】。调整好以后如图3.172所示。上一页下一页返回3.4商品宣传广告动画选中“底层背景”图层中的“beijing04.jpg”图片,单击F8使图片转换成元件,并命名为“beijing04”,类型为“影片剪辑”,返回“场景一”,并单击将该元件,更改其“属性”面板中的“实例名称”命名为“mc2",锁定该图层,并在该图层上方新建一个图层,命名为“星星”使用Ctrl+F8快捷键,新建一个元件,命名为“star”,类型为“影片剪辑”。进入元件编辑窗口,使用“多角星形工具”绘制一个没有“笔触颜色”的星星,其大小、填充色、变数等属性可以自己去设置。返回“场景一”,并单击“星星”图层第1帧,将“star”元件拖曳到舞台中,更改其【属性】面板中的“实例名称”命上一页下一页返回3.4商品宣传广告动画名为“mcl",锁定“星星”图层,并在其上方新建一个图层命名为“action1”单击“action1"图层第1帧,并使用F9快捷键打开【动作】面板。在【动作】面板中输入以下代码:mc2.setMask(mc1);//设置mc1影片剪辑为遮罩,mc2为被遮罩_root.onEnterFrame=function(){with(mcl){_rotation+=10;_x+=(_root.xmouse_x)*.3;上一页下一页返回3.4商品宣传广告动画_y+=(_root.ymouse_y)*.3;}}//将实例名为mc1的影片剪辑旋转10度,鼠标当前坐标值减去名称mc1影片剪辑坐标值,得到当前位置3.用遮罩层制作遮罩效果锁定"actionl"图层,并在其上方新建一个图层命名为“文字”。使用Ctrl+F8快捷键,新建一个元件,命名为“文字”,类型为“图片”。上一页下一页返回3.4商品宣传广告动画进入元件编辑窗口,使用“文本工具”,编辑文字“生活有我而精彩”的“静态文本”。“属性”面板可以自己去设置。回“场景一”,并单击“文字”图层第1帧,将“文字”元件拖曳到舞台中。锁定“文字”图层,并在其上方新建一个图层命名为“文字2"使用Ctrl+F8快捷键,新建一个元件,命名为“文字2",类型为“图片”。进入元件编辑窗口,还使用“文本工具”,编辑文字“生活有我而精彩”的“静态文本”。【属性

温馨提示

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

评论

0/150

提交评论