(中职）Flash CS3动画设计案例教程项目八课件.ppt

《(中职）Flash CS3动画设计案例教程项目八课件.ppt》由会员分享，可在线阅读，更多相关《(中职）Flash CS3动画设计案例教程项目八课件.ppt（42页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、(中职）Flash CS3动画设计案例教程项目八ppt课件项目八文字效果的制作项目八文字效果的制作 任务一任务一电影海报的制作电影海报的制作 任务二任务二认识按钮的颜色认识按钮的颜色 任务三任务三 登录界面登录界面 任务四任务四 毛笔字毛笔字 任务一电影海报的制作任务一电影海报的制作 教学目标教学目标 掌握文字工具的使用方法，能够制作出静态文本。教学难点教学难点 认识“文本属性”面板中各项参数的功能和作用。教学重点教学重点 1、掌握使用文字工具制作静态文本的方法。2、掌握编辑、修改文字及设置文字基本属性的方法。3、了解字体呈现的各种方式。任务描述任务描述 制作一张图文并茂的电影海报。作品要求以

2、电影剧照作为背景，使用静态文本在画面正中显示电影名、右下角显示上映日期。任务分析任务分析 制作本任务，要求我们首先应该掌握文档的新建和保存、文件属性的设置、导入图片到舞台等基本操作；其次我们要学习使用文本工具制作静态文本，以及在属性面板中调整文本的各参数值。工作步骤工作步骤1.运行Flash CS3，新建一个空白文档。2.在【属性】面板中修改文档属性，设置画面尺寸为800500，其它参数值默认。3.单击“文件/导入/导入到舞台”，将“背景.jpg”图片导入到舞台上。4.选中图片，在【属性】面板中设置图片的大小为800500、位置为（0，0）。5.选择工具箱中的文本工具 ，鼠标指针变为“+A”，

3、在【属性】面板中设置文本类型为“静态文本”，然后移动鼠标指针到舞台的中心位置单击，输入文本“变形金刚3”，如下图。6.选中文本，在【属性】面板中设置文本的字体为“Adobe黑体Std R”、字号为“120”、颜色为“金黄色”（#FFD820），其它参数值默认。7.单击“窗口/对齐”，打开【对齐】面板，按下“相对于舞台”按钮，然后选中文本设置其对齐方式为“垂直居中对齐”、“水平居中对齐”，如下图。8.重复第5步骤的操作，在舞台的右下角位置输入文字“2011.7.21震撼上映”，并在【属性】面板中设置文本的字体为“Adobe楷体Std R魏”、字号为“40”、颜色为“浅蓝色”（#66FFFF），其

4、它参数值默认。9.单击“控制/测试影片”（Ctrl+Enter），查看影片的最终效果，并保存文件为“电影海报.fla”，如下图。相关知识与技能相关知识与技能 1、静态文本的概念静态文本的概念：在动画运行中不可以编辑或改变的一种文本。2、文本的输入方式文本的输入方式：一是通过鼠标单击创建可伸缩的文本框，二是通过鼠标拖拽创建固定的文本框。注：区别可伸缩的文本框 和固定的文本框 3、文本的选取方式文本的选取方式：一是使用选择工具选中文本框，对所有文本编辑操作；二是使用文本工具选取文本框内部文本，进行部分文本的编辑操作。4、设置文本的属性设置文本的属性：认识“文本属性”面板。5、认识、认识“字体呈现方

5、式字体呈现方式”中各选项的作用：中各选项的作用：使用设备字体 位图文本（未消除锯齿）动画消除锯齿 可读性消除锯齿 自定义消除锯齿 6、增加字体：、增加字体：将要增加的字体文件添加到C:WINDOWSFonts目录下。任务二认识按钮的颜色任务二认识按钮的颜色 教学目标教学目标 掌握动态文本的制作方法。教学难点教学难点 理解变量的作用，掌握简单脚本语言（ActionScript 2.0）中应用变量的程序编写。教学重点教学重点 1、理解动态文本、变量的概念。2、掌握动态文本的制作方法。3、认识动态文本属性面板中相应参数的功能和作用。任务描述任务描述 本任务要求制作一个简单的交互动画。当鼠标单击画面中

6、的某个按钮时，在画面正中的文本框中将动态的显示出相应按钮的颜色名称。任务分析任务分析 制作本任务，首先我们应该掌握文档的新建和保存、文件属性的设置、公用库面板和对齐面板的使用等基本操作；其次我们要学习使用文本工具制作动态文本，尤其是要理解变量的作用和设置方法。制作的难点在于编写按钮的单击响应语句，将动态文本的变量值对应到各按钮的颜色名称上，形成最终效果。工作步骤工作步骤1.运行Flash CS3，新建一个空白文档。2.在【属性】面板中修改文档属性，设置画面尺寸为400300，背景色为“浅黄色”（#FFFF66），其它参数值默认。3.选择文本工具，在【属性】面板中设置文本类型为“动态文本”、字体

7、为“宋体”、字号为“40”、对齐方式为“居中对齐”、线条类型为“单行”，移动鼠标指针到舞台的中心位置拖拽，创建一个动态文本区域,如下图。4.选中文本框，在【属性】面板中修改其大小为12044，并按下“在文本周围显示边框”按钮，显示出动态文本区域的边框。5.选中文本框，在【属性】中为其设置变量名称“text”，如下图。6.单击“窗口/公用库/按钮”，打开【公用库按钮】面板。在面板的列表中打开“buttons circle flat”文件夹，选择“circle flat blue”按钮添加到舞台上 7.选中按钮并右键单击，在弹出快捷菜单中选择“动作”命令，打开【动作】面板，输入语句：on(pres

8、s)text=“蓝色”;，如下图。8.重复第6、7步骤，依次添加“circle flat purple”、“circle flat yellow”、“circle flat salmon”按钮到舞台上，并输入相应的动作语句：“circle flat purple”按钮：on(press)text=“紫色”;；“circle flat yellow”按钮：on(press)text=“黄色”;；“circle flat salmon”按钮：on(press)text=“红色”;。单击“窗口/对齐”，打开【对齐】面板，按下“相对于舞台”按钮。9.同时选中“circle flat blue”按钮、动

9、态文本框和“circle flat yellow”按钮，在【对齐】面板中单击“垂直居中对齐”按钮，使三个对象在舞台上垂直居中对齐。10.以动态文本框为中心，适当调整“circle flat blue”按钮、“circle flat yellow”按钮的上下位置，使三个对象垂直平均分布。11.同样选中“circle flat purple”按钮、动态文本框和“circle flat salmon”按钮，在【对齐】面板中单击“水平居中对齐”按钮，使三个对象在舞台上水平居中对齐，并以动态文本框为中心水平平均分布。12.单击“控制/测试影片”（Ctrl+Enter），查看影片的最终效果，保存文件为“认

10、识按钮的颜色.fla”，如下图。相关知识与技能相关知识与技能 1、动态文本的概念动态文本的概念：在动画运行中动态的显示变量值的一种文本，可以用动作脚本控制。注（区别于静态文本）：动态文本的控制手柄出现在文本框的右下角，静态文本的控制手柄出现在文本框的右上角。2、设置文本的属性（动态文本）设置文本的属性（动态文本）：选择文本工具后，可在【属性】面板中设置文本的各项属性。3、响应按钮动作事件的基本脚本语句响应按钮动作事件的基本脚本语句：on Press=function：当按下按钮时调用。on Release=function：当释放按钮时调用。on RollOut=function：当鼠标指针移

11、至按钮区域之外时调用。on RollOver=function：当鼠标指针移过按钮区域时调用。任务三登录界面任务三登录界面 教学目标教学目标 掌握输入文本的制作方法。教学难点教学难点 理解在应用实例中输入文本的作用，并掌握设置密码文本不可读的方法。教学重点教学重点 1、理解输入文本的概念和呈现方式。2、掌握输入文本的制作方法。3、认识输入文本属性面板中相应参数的功能和作用。任务描述任务描述 制作应用软件的模拟登录界面。作品要求以一张位图作为背景，有输入用户名和密码的文本框，有应用登录的按钮。任务分析任务分析 制作本任务，首先我们应该掌握文件属性的设置、图片导入等基本操作；其次我们要应用前面所学

12、的静态文本添加和设置方法，还要学习使用文本工具制作输入文本，以及在属性面板中对文本的各参数进行设置。同样，本任务也要应用Flash软件中公用库的按钮，形成最终效果。工作步骤工作步骤1.运行Flash CS3，新建一个空白文档。2.在【属性】面板中修改文档属性，设置画面尺寸为350250，其它参数值默认。3.单击“文件/导入/导入到舞台”，将“背景.jpg”图片导入到舞台上，并在【属性】面板中设置图片的大小为350250、位置为（0，0）。4.选择文本工具，在【属性】面板中设置文本类型为“静态文本”，在背景图片上输入文本“用户名”。并设置文本的字体为“楷体”、字号为“25”、颜色为“黑色”（#0

13、00000），位置为（50，60），其它参数值默认。5.再选择文本工具，在【属性】面板中设置文本类型为“输入文本”、字体为“宋体”、字号为“20”、线条类型为“单行”，移动鼠标指针到静态文本的后面拖拽，创建一个输入文本区域，如下图。6.选中输入文本框，在【属性】面板中按下“在文本周围显示边框”按钮，并设置位置为（155，60），如下图。7.重复第4步骤，在“用户名”下方创建静态文本“密码”，其属性参数值参考“用户名”属性，位置为（50，120）。8.重复第5、6步骤，在输入文本框下方再创建一个输入文本区域，设置“线条类型”为“密码”，其它属性参数值参考第一个输入文本框属性，位置为（155，12

14、0）。9.单击“窗口/公用库/按钮”，打开【库按钮】面板。在面板的列表中打开“classic buttons/Arcade buttons”文件夹，选择“arcade button-yellow”按钮添加到舞台上，并设置其大小为4040，位置为（70，200）。10.选择文本工具，在【属性】面板中设置文本类型为“静态文本”，在按钮上输入文本“登录”，并在在【属性】面板中设置文本的字体为“黑体”、字号为“14”、颜色为“黑色”（#000000），位置为（53.9，193.5），其它参数值默认。11.单击“控制/测试影片”（ctrl+Enter），查看影片的最终效果，保存文件为“登录界面.fla”

15、，如下图。相关知识与技能相关知识与技能 1、输入文本的概念输入文本的概念：用户可以动画运行中向文本框中输入数据的一种文本。2、设置文本的属性（输入文本）：设置文本的属性（输入文本）：选择文本工具后，可在【属性】面板中设置文本的各项属性。注：输入文本的属性面板中，“线条类型”下拉列表中增加了“密码”选项，当输入文本框用于输入密码或口令时可选择此项。任务四毛笔字 教学目标教学目标 掌握文本动画的制作方法。教学难点教学难点 理解文字对象在组合、一次分离、两次分离中的区别，以及编辑制作的特性和方法。教学重点教学重点 1、掌握文字工具、绘制工具的综合使用。2、掌握将文字转换成图形编辑制作的方法。3、能够

16、综合运用逐帧动画和补间动画制作文字动画。任务描述任务描述 制作毛笔字书写文字的动画。作品要求绘制一支毛笔，仿照书写毛笔字的运动顺序，在“米字格”背景上书写出楷体“中”字。任务分析任务分析 本任务是文字动画的综合制作，作品中的对象有三个：背景“米字格”、文字“中”和毛笔。制作本任务我们要建立三个图层，图层1中需要使用矩形工具、线条工具绘制出“米字格”背景；图层2中我们要应用前面所学的静态文本添加和设置方法，添加楷体“中”字；图层3中要建立一个图形元件来绘制毛笔，通过关键帧的设置和动画补间的添加来实现毛笔的运动动画。本任务的制作难点是制作图层2中文字的逐帧动画，要配合好图层3中毛笔的运动，形成书写

17、毛笔字的最终效果。工作步骤工作步骤 一、制作“米字格”背景1.运行Flash CS3，新建一个空白文档。2.在【属性】面板中修改文档属性，设置画面尺寸为300300，其它参数值默认。3.双击【时间轴】面板中“图层1”名称，重命名为“米字格”。4.选择工具箱中的矩形工具，设置笔触颜色为红色（#FF0000）、填充颜色为无，移动鼠标指针到舞台上，拖拽画出一个矩形。5.选中矩形，在【属性】面板中设置其大小为250250，其它参数值默认。在【对齐】面板中设置其相对于舞台“垂直居中对齐”、“水平居中对齐”。6.选择工具箱中的线条工具，在【属性】面板中设置笔触颜色为红色（#FF0000）、样式为虚线，其它

18、参数值默认，然后分别作矩形的对角线和对边中点的连线，如下图。二、添加文字1.单击【时间轴】面板中“插入图层”按钮，插入“图层2”，并重命名为“字”。2.选择文本工具，在【属性】面板中设置文本类型为“静态文本”，然后在舞台上输入文字“中”，并设置字体为“楷体”、字号为“170”，其它参数值默认。在【对齐】面板中设置其相对于舞台“垂直居中对齐”、“水平居中对齐”。3.选中文字，单击“修改/分离”（Ctrl+B），将文字分离成为可编辑的图形。三、绘制毛笔1.单击【时间轴】面板中“插入图层”按钮，插入“图层3”，也可以重命名为“毛笔”。2.单击“插入/新建元件”，新建名为“毛笔”的图形元件。3.在“毛

19、笔”图形元件编辑区中，建立三个图层，“图层1”绘制笔管，“图层2”绘制笔头，“图层3”绘制吊线。4.单击“笔管”图层的第1关键帧，选择矩形工具，并设置笔触颜色为无、填充颜色为“褐色”（#C4911A）“白色”(#FFFFFF)“褐色”（#C4911A）的渐变色，移动鼠标指针到舞台上，拖拽画出一个矩形作为笔管。5.单击“笔头”图层的第1关键帧，选择铅笔工具，并设置为平滑模式，然后在笔管下方绘制毛笔笔头的轮廓形状。5.选择选择工具，对笔头的轮廓形状进行微调；选择颜料桶工具，为笔头的轮廓形状填充黑色（#000000）。6.单击“吊线”图层的第1关键帧，选择铅笔工具，并设置为平滑模式，在【属性】面板中

20、设置笔触颜色为“褐红色”（#CC3300）、高度为“2.5”，然后在笔管上方绘制出吊线的形状。7.同时选中笔管和吊线，选择任意变形工具，将对象向右旋转一定角度，使毛笔呈倾斜状。8.回到场景中，单击“图层3”图层的第一关键帧，在【库】面板中将“毛笔”图形元件添加到舞台上。四、制作毛笔书写动画四、制作毛笔书写动画1.在【时间轴】面板中，将三个图层的关键帧延长至42帧，并锁定“米字格”图层和“字”图层。2.选择“图层3”图层的第5帧，并右键单击鼠标，在弹出的快捷菜单中选择“转换为关键帧”命令。用同样的方法将第6、15、20、21、30、31、42帧转换为关键帧。3.单击“图层3”图层的第1帧，将舞台

21、上的毛笔移动到“中”字第一笔画的开始处。4.同样依次选择第5、6、15、20、21、30、31、42帧，移动毛笔的位置。具体如下：第5帧，移动到“中”字第一笔画的结束处。第6帧，移动到“中”字第二笔画的开始处。第15帧，移动到“中”字第二笔画的折点处。第20帧，移动到“中”字第二笔画的结束处。第21帧，移动到“中”字第三笔画的开始处。第30帧，移动到“中”字第三笔画的结束处。第31帧，移动到“中”字第四笔画的开始处。第42帧，移动到“中”字第四笔画的结束处。5.为1至5帧、6至15帧、15至20帧、21至30帧、31至42帧添加补间动画，完成毛笔书写的运动动画。5.锁定“图层3”图层，解锁“字

22、”图层，选择2至42帧同时转换为关键帧，制作配合毛笔书写动画的字形变化动画。6.选择“字”图层的第1帧，选择橡皮擦工具，设置为标准擦除模式、形状自定，然后擦除毛笔所在位置以外的笔画。7.按第27步骤方法，依次选择“字”图层的每一帧至第42帧，按照毛笔所在位置和书写顺序擦除“中”字的笔画。8.完成后，单击“控制/测试影片”（Ctrl+Enter）查看影片的最终效果，保存文件为“毛笔字.fla”，如下图。相关知识与技能相关知识与技能 1、分离文本：分离文本：可以对静态文字进行分离操作，将文本转换为可编辑的夭量图形。在动画运行中动态的显示变量值的一种文本，可以用动作脚本控制。一次分离：两次分离：注：

23、文本转换成矢量图形是不可逆转的。2、编辑矢量文本：编辑矢量文本：将文本转换成矢量图形后，可以对其进行任意变形、填充渐变色、路径等操作。任意变形：填充渐变色：添加边框：综合实训八综合实训八 一、使用Flash制作喜报 要求：使用文字工具制作静态文本，结合属性面板中各参数的设置，制作一张喜报，如下图。二、制作奇妙的复制 要求：使用文字工具制作输入文本和动态文本，注意变量名的设置，以形成在输入文本框中输入的内容同样出现在动态文本框中的效果，如下图。三、制作动画文字 要求：将静态文字作一次分离，分别编辑每个字符。将每个字符转换成图形元件，并单独占用一个图层，利用补间动画制作出缩放、旋转、淡入淡出等综合效果，如下图。