(Flash)课件-ch3.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,计算机基础与实训教材系列,中文版,FlashCS3,实训教程,第,3,章,Flash CS3,中的文本应用,学 习 目 标,在,Flash CS3,中可以通过多种方式使用文本。可以创建包含静态文本的文本字段，在创作文档时可以创建静态文本。还可以创建动态文本字段和输入文本字段，前者显示不断更新的文本，如股票报价或头条新闻，后者使用户能够输入表单或调查表的文本。,本章主要讲述文本工具的使用，并通过实例讲述,Flash CS3,中的文本应用技巧。,本 章 重 点,文本类型,各种文本的创建,设置文本样式,文本转换为矢量图,文本使用滤镜效果,3.1 Flash,文本概述,文本具有图形所不可替代的作用。在,Flash,中除了可以设置文本的格式外，还能以编辑图形的方式移动、旋转、倾斜和翻转文本，或者对文字添加滚动、淡入淡出、缩放等动画特技，对文字的处理在,Flash,中可以形成特效。,文本的添加要用到工具箱的文本工具，通过属性面板的“文本类型”下拉列表框，可以在,Flash,中创建三种类型文本字段：静态文本、动态文本和输入文本。如图,3-1,所示。,图,3-1,文本属性设置,这三种文本的特点分别如下：,静态文本：显示不会动态更改的文本。,动态文本：显示动态更改的文本，如日期、时间、体育得分、新闻、股票报价或天气预报等。,输入文本：可以在表单或调查表中输入的文本。,3.2,文本的创建,Flash,文本有两种输入模式，即无宽度限制的文本输入框模式和有宽度限制的文本输入框模式。,1.,在无宽度限制的文本输入框模式下，输入框会随着用户的输入自动扩展，甚至会超出舞台的界限，如果需要换行，可按,【Enter】,键，这种文本输入框是,Flash,默认的输入框模式。,2.,在有宽度限制的文本输入框模式下，输入框将会限定宽度，当输入文本超出限定植时，文本将自动换行。两种不同输入框可以通过单击或拖动输入框右上（或右下）角的手柄，无宽度限制的文本输入框模式呈空心圆形手柄，如图,3-2,所示。而有宽度限制的文本输入框模式呈空心方形手柄，如图,3-3,所示。,图,3-3,有宽度限制的文本输入框,图,3-2,无宽度限制的文本输入框,3.2.1,静态文本,静态文本就是在动画制作过程中创建、在动画播放过程中不能改变的文本。在静态文本框中，可以横排或竖排文本，输入静态文本的效果如图,3-4,所示。,图,3-4,输入静态文本的效果,3.2.2,动态文本,动态文本框用来显示动态可更新的文本，如动态显示日期和时间、天气预报和股票信息等内容。下面通过一个简单的时钟实例来讲述动态文本的创建，如图,3-9,所示。,图,3-9,动态文本效果,【,例,3-2】,创建动态文本,具体操作步骤如下,(1),新建一个空白文档，选择,Flash,文件（,ActionScript,3.0,）。在时间轴面板上单击图层,1,的第,1,帧，向舞台上导入一个背景图像文件。在工具箱中选择“文本”工具，在属性面板中的“文本类型”下拉列表中选择“动态文本”项，如图,3-10,所示。,图,3-10,设置文本类型,(2),在时间轴面板上插入图层,2,，并单击图层,2,的第,1,帧，在文档中单击鼠标左键并拖拽出一个文本输入框，并调整到合适位置。在属性面板上设置字体为“,Times New Roman”,，字号为“,20”,，颜色为“,#FFFF00”,，调整舞台大小与背景图像一致，如图,3-11,所示。,(3),单击属性面板上的“可选”图标，并在“实例名称”文本框中输入变量“,time_txt,”,。,图,3-11,动态文本框的设置,(4),单击时间轴中图层,2,的第一帧，执行,【,窗口,】|【,动作,】,菜单命令，打开“动作”面板，如图,3-12,所示。,图,3-12“,动作”面板,脚本窗口,脚本导航器,动作工具箱,(5),单击“脚本导航器”中的“场景,1|,图层,2,：帧,1”,，在“脚本窗口”中输入以下脚本代码：,addEventListener(Event.ENTER_FRAME,showTime,);,function,showTime(event:Event):void,var,myTime:Date,=new Date();,time_txt.text,=,myTime.toLocaleTimeString,();,(6),关闭“动作”窗口，按,【,Ctrl+Enter,】,组合键，即可测试动态文本的效果，如图,3-9,所示。,3.2.3,输入文本,输入文本是在动画设计中作为一个输入文本框来使用，在动画播放时，输入的文本信息。例如用户输入登录名、登录密码等。,【,例,3-3】,登录窗口。,(1),新建一个空白文档，在舞台上导入一个图像文件，在工具箱中选择“文本”工具，在属性面板中的“文本类型”下拉列表中首先选择“静态文本”项，并在文档中输入静态文本“用户登录名：”，并设置字体为“华文行楷”，字号为“,18”,，颜色为“蓝色”，如图,3-13,所示。,图,3-13,输入并设置文本类型,(2),在属性面板中的“文本类型”下拉列表中再选择“输入文本”项，在“线条类型”下拉列表中选择“单行”项，单击“在文本周围显示边框”图标，并设置字体为“华文行楷”，字号为“,18”,，颜色为“黑色”，实例名称为“输入文本框”。在文档中单击鼠标左键并拖拽出一个文本输入框，如图,3-14,所示。,图,3-14,创建“输入文本”框型,(3),执行,【,控制,】|【,测试影片,】,菜单命令，或按,【,Ctrl+Enter,】,组合键，即可看到影片测试效果，在输入文本框中可以输入用户的登录名。如图,4-15,所示。,图,3-15“,输入文本”效果,3.3,设置文本样式,3.3.1,消除文字锯齿,使用消除锯齿功能可以使屏幕文本的边缘变得平滑。消除锯齿选项对于呈现较小的字体大小尤其有效。启用消除锯齿功能会影响到当前所选内容中的全部文本。对于各种磅值大小的文本，消除锯齿功能以相同的方式工作。,提示：,如果用户使用的是,Flash Player 7,或更高版本，则消除锯齿功能可用于静态文本、动态文本和输入文本。如果用户使用的是,Flash Player,的较早版本，则此选项只能用于静态文本。,【,例,3-4】,消除文本锯齿的具体操作步骤如下。图,3-16,消除文本锯齿,(1),在文档中输入相应的文本，并对文本对象进行相应的编辑。,(2),选中输入的文本，执行,【,视图,】|【,预览模式,】|【,消除文字锯齿,】,菜单命令，即可消除文字锯齿，如图,3-16,所示。,图,3-16,消除文本锯齿,也可以在“属性”检查器中，从“消除锯齿”弹出菜单中选择以下选项之一：,使用设备字体：,指定,SWF,文件使用本地计算机上安装的字体来显示字体。通常，设备字体采用大多数字体大小时都很清晰。尽管此选项不会增加,SWF,文件的大小，但会使字体显示依赖于用户计算机上安装的字体。使用设备字体时，应选择最常安装的字体系列。,位图文本（未消除锯齿）：,关闭消除锯齿功能，不对文本提供平滑处理。用尖锐边缘显示文本，由于在,SWF,文件中嵌入了字体轮廓，因此增加了,SWF,文件的大小。位图文本的大小与导出大小相同时，文本比较清晰，但对位图文本缩放后，文本显示效果比较差。,可读性消除锯齿：,使用,Flash,文本呈现引擎来改进字体的清晰度，特别是较小字体的清晰度。此选项会导致创建的,SWF,文件较大，因为嵌入了字体轮廓。若要使用此选项，必须发布到,Flash Player 8,或更高版本。（如果要对文本设置动画效果，请不要使用此选项，而应使用“动画消除锯齿”。）,自定义消除锯齿：,使您可以修改字体的属性。使用“清晰度”可以指定文本边缘与背景之间的过渡的平滑度。使用“粗细”可以指定字体消除锯齿转变显示的粗细。（较大的值会使字符看上去较粗。）指定“自定义消除锯齿”会导致创建的,SWF,文件较大，因为嵌入了字体轮廓。若要使用此选项，必须发布到,Flash Player 8,或更高版本。,3.3.2,设置文字属性,可以设置文本的字体和段落属性。字体属性包括字体系列、磅值、样式、颜色、字母间距、自动字距微调和字符位置。段落属性包括对齐、边距、缩进和行距。当创建新文本时，文本的属性使用当前文本属性。在创建完毕之后，若要对文本的属性进行修改，就必须首先选中该文本，然后在属性面板中对其进行编辑。执行,【,窗口,】|【,属性,】|【,属性,】,菜单命令，将属性面板打开，在属性面板中显示文本的属性，如图,3-17,所示。,图,3-17,文本属性面板,1,设置字体、大小、样式和颜色,（,1,）使用“选取”工具 选择舞台上的一个或多个文本字段。,（,2,）执行,【,窗口,】|【,属性,】|【,属性,】,菜单命令，在属性检查器中，从“字体”弹出菜单中选择一种字体，或者输入字体名称。,（,3,）单击“大小”值旁的三角形，然后拖动滑块来选择一个值，或者输入字体大小值。,字体大小以磅值设置，而与当前标尺单位无关。,（,4,）要应用粗体或斜体样式，请单击“粗体”或“斜体”。图,3-18,颜色选择器,（,5,）从“消除锯齿”弹出菜单（“粗体”按钮下方）中选择一种字体呈现方法。,2,设置字母间距、字距微调和字符位置,字母间距功能会在字符之间插入统一数量的空格。使用字母间距可以调整选定字符或整个文本块的间距。,字距微调控制字符对之间的距离。许多字符都有内置的字距微调信息。例如，,A,和,V,之间的距离通常比,A,和,D,之间的距离短。,Flash,同时提供水平间距调整和字距微调（对于水平文本）以及垂直间距调整和字距微调（对于垂直文本）功能。,对于垂直文本，可以在“,Flash,首选参数”中禁用默认情况下字距微调。如果您执行此操作并使字距微调选项在“属性”检查器中保持选定状态，那么字距微调将仅仅应用于水平文本，如图,3-21,所示。,3,设置对齐、边距、缩进和行距,对齐方式决定了段落中的每行文本相对于文本字段边缘的位置。水平文本相对于文本字段的左侧和右侧边缘对齐，垂直文本相对于文本字段的顶部和底部边缘对齐。文本可以与文本字段的一侧边缘对齐，或者在文本字段中居中对齐，或者与文本字段的两侧边缘对齐（两端对齐）。,边距决定了文本字段的边框与文本之间的间隔量。缩进决定了段落边界与首行开头之间的距离。,行距决定了段落中相邻行之间的距离。对于垂直文本，行距将调整各个垂直列之间的距离。,3.3.3,创建文字的,URL,链接,在,Flash CS3,中用户可以很容易地为文本添加超链接。选取需要设置,URL,链接的文本或文本字段，然后在属性面板中的“,URL,链接”文本框中输入完整的链接地址即可。,【,例,3-8】,创建文字的,URL,链接，具体操作步骤如下。,(1),选择文本或文本字段：,使用“文本”工具，选择文本字段中的文本。,要链接文本字段中的所有文本，请使用“选取”工具 选择文本字段。,(2),执行,【,窗口,】|【,属性,】|【,属性,】,菜单命令，在属性检查器的“链接”文本字段中，输入文本字段要链接到的,URL,，如图,3-22,所示。,图,3-22,输入文本字,URL,3.4,文本转换,在,Flash CS3,中，可以将文本转换成矢量图，并对文本进行特殊处理。,3.4.1,分离文本,在,Flash CS3,中，如果要对文本进行渐变色填充、绘制边框路径等针对矢量图形的操作或制作形状渐变动画，首先要对文本进行分离操作，将文本转换成可编辑的矢量图形。,【,例,3-9】,分离文本的操作步骤。,(1),选取需要分离的文本，如图,3-23,所示。,(2),执行,【,修改,】|【,分离,】,菜单命令或按,【,Ctrl+B,】,组合键，原来的单个文本框会被拆分成多个文本框，即每一个文字各占一个文本框，如图,3-24,所示。,(3),选取所有的文本，再执行,【,修改,】|【,分离,】,菜单命令或按,【,Ctrl+B,】,组合键，这时所有的文本将会转换成网格状的可编辑矢量图形，如图,3-25,所示。,图,3-2,5,选取文本,图,3-24,选取文本,图,3-23,选取文本,3.4.2,编辑矢量文本,文本转换成矢量图形后，就可以对其进行路径编辑、填充渐变色、添加边框路径和编辑文本形状等操作。,1,为文本填充渐变色,1,为文本填充渐变色,【,例,3-10】,为文本填充渐变色的操作步骤如下。,(1),按照分离文本的方法，将文本转换成矢量图形。,(2),选择需要填充渐变色的文本。,(3),执行,【,窗口,】|【,颜色,】,菜单命令，打开“颜色”面板，在“颜色”面板中，为文本设置渐变色，如“类型”选择“放射状”并分别调整红、蓝、绿的色号。如图,3-26,所示。,(4),选择的文本将自动添加渐变色，如图,3-27,所示。,图,3-26“,颜色”面板调色,图,3-27,文本填充渐变色效果,2,编辑文本路径,【,例,3-11】,编辑文本路径的操作步骤如下。,(1),按照分离文本的方法，将文本转换成矢量图形。,(2),单击工具箱中的“部分选取工具”按钮，选取要编辑文字对象，被选取的文字就显示出文本的路径点，如图,3-28,所示。图,3-28,选取文本路径,(3),用鼠标拖拽某个文本的路径点，就可以改变文本的形状，如图,3-29,所示。,图,3-28,选取文本路径,图,3-29,选取文本路径,3.,为文本添加边框路径,【,例,3-12】,给文本添加边框路径的操作步骤如下。,(1),按照分离文本的方法，将文本转换成矢量图形。,(2),单击工具箱中的“墨水瓶工具”按钮，然后在文档窗口单击每个文字对象，即可给文本添加边框路径。其效果如图,3-30,所示。,图,3-30,为文本添加边框路径,4.,编辑文本形状,【,例,3-13】,编辑文本形状的操作步骤如下。,(1),按照分离文本的方法，将文本转换成矢量图形。,(2),单击工具箱中的“任意变形工具”按钮，然后在文档窗口对文本进行变形操作，其效果如图,3-31,所示。,图,3-31,编辑文本形状,3.5,对文本使用滤镜效果,使用滤镜可以制作出许多以前只能在,Photoshop,或,Fireworks,等软件中才能完成的效果，如投影、模糊、发光、斜角、渐变发光、渐变斜角和调整颜色等。和“属性”面板排列在一起的“滤镜”面板，是管理,Flash,滤镜的主要工具，在此面板中可以完成增加、删除滤镜或者改变滤镜参数等操作，如图,3-32,所示。,图,3-32“,滤镜”面板,图,3-32“,滤镜”面板,【,例,3-14】Flash CS3,中的滤镜有多种，下面以给文本添加“投影”滤镜效果为例，讲述滤镜的使用方法，添加其他滤镜效果方法类同。,图,3-35,文本的投影效果,具体操作步骤如下。,(1),新建一个文档，单击时间轴图层,1,的第,1,帧。执行,【,文件,】|【,导入,】|【,导入到舞台,】,菜单命令，弹出“导入”对话框，选择一个图像文件，然后单击“打开”按钮，将图像导入到舞台中。,(2),在时间轴面板上，添加图层,2,，单击该图层的第,1,帧。选择工具箱中的“文本”工具，在舞台上拖出文本框并输入文本内容，如图,3-33,所示。图,3-33,输入文本,(3),执行,【,窗口,】|【,属性,】|【,滤镜,】,菜单命令，打开“滤镜”面板，选中文本对象，在滤镜面板中单击添加按钮，在弹出的下拉列表中选择“投影”选项，并设置“投影”属性，如图,3-34,所示。图,3-34,滤镜面板上设置“投影”属性,图,3-34,滤镜面板上设置“投影”属性,(4),对文本“投影”属性的设置后，按,【,Ctrl+Enter,】,组合键，对影片进行测试，其效果如图,3-35,所示。图,3-35,文本的投影效果,提示：,滤镜功能只适用于文本、影片剪辑和按钮。当舞台中的对象不适合应用滤镜功能时，滤镜面板中的“添加”按钮将处于灰色不可用状态。,图,3-35,文本的投影效果,3.6,上机练习,在使用,Flash,制作动画、网页特效时，经常用到丰富多彩的文字效果。使用合理的文字效果，可以使动画或网页更加绚丽多彩和富于变换。下面使用前面介绍的,Flash,文本编辑知识制作几种文本效果。,3.6.1,制作空心文字,【,例,3-15】,制作空心文字。本实例配合墨水瓶工具制作空心字效果，实例效果如图,3-41,所示。,图,3-41,空心字效果,3.6.2,制作立体文字,【,例,3-16】,制作立体文字。本实例制作立体字，实例效果如图,3-48,所示。,图,3-48,立体感的文字效果,3.6.3,制作彩虹文字,【,例,3-17】,制作彩虹字。本实例制作彩虹文字效果，实例效果如图,3-56,所示。,图,3-56,设置文本属性,3.7,习 题,1.,简答题,(1)Flash CS3,中的文本有几种类型？它们各有什么特点？,(2),滤镜的功能只能适用于那种文本类型？,(3),文本在什么情况下需要进行分离处理？,2.,上机题,(1),在舞台中输入文本“我喜欢,Flash CS3”,，设置字体为“宋体”，文本颜色为“兰色”，字体大小为“,80”,，并为文本填充渐变色和为文本设置,URL,链接。,(2),对文本“爱我中华”添加滤镜效果。,(3),分别在,Flash CS3,中制作“空心文字”、“立体文字”和“彩虹文字”。,