32动态LOGO的制作

东莞联合技工学校教案编号：QD-751b-35B/2流水号：文化理论课教案（首页）2015~2016学年第一学期课程名称：网页美工任课教师：谭荣生共8页科目网页美工第三章二节课题：制作动态LOGO授课日期10.1910.20课时4班级高计1431授课方式演示、上机作业题数1拟用时间30分钟教学目的掌握网站动态LOGO的制作方法与技巧。选用教具挂图多媒体重点绘制星形、填充颜色生成其他不同颜色的星星难点绘制星形、填充颜色生成其他不同颜色的星星制作“星星动画”教学回顾学生对网站动态LOGO的制作掌握不错，但对于部分学生的FLASH需要进一步的熟悉。说明审阅签名：东莞联合技工学校教案编号：QD-751b-35B/2流水号：教学过程第1页第三章二节动态LOG0的制作一、课堂导入上次我们学习了制作静态LOGO为了进一步增加学生的动手能力所以我们今天学习动态LOG0的制作。二、新课讲授本例主要使用FlashCS5软件中的自定义形状工具、变形工具、传统补间动画和形状补间动画等来制作网站标志，动画效果为四个星星由小到大依次闪烁，文字从左到右逐渐显示出来。效果如图3—29所示。1．新建Flash文件(1)启动FlashCS5软件，进入其操作界面，执行“文件”_“新建”菜单命令，打开“新建文档”对话框，在左侧“类型”列表中选择ActionScript2.0，在右侧设置宽度和高度分别为400像素和260像素，帧频为24fps，背景颜色为白色，如图3-30所示，将文件保存为“Flash动态LOGO.fla”。(2)执行“窗口”-“工作区”-“传统”菜单命令，切换到传统的Flash工作模式。2．绘制星形、填充颜色(1)执行“插入”-“薪建元件”菜单命令，打开“创建新元件”对话框，将名称改为“黄星星”，选择类型为“图形”，再单击“确定”按钮，新建一个名为“黄星星”的图形元件，如图3-31所示。东莞联合技工学校教案编号：QD-751b-35B/2流水号：(2)单击工具箱中的“矩形工具”按钮，在其列表工具中选择“多角星形工具”，如图3-32所示。在右侧“多角星形工具”属性面板中单击“笔触颜色”，如图3-33所示，随即在弹出的颜色列表中选择“无色”，如图3-34所示。同理，单击“填充颜色”将填充色设为黄色“#FFFFOO”，如图3-35所示。单击图3-33对话框中的“选项”按钮，在弹出的“工具设置”对话框中，将样式设为“星形”，边数为5，星形顶点大小为0.50，如图3-36所示。至此，五角星形的所有参数均已设置好，按住鼠标左键，拖曳生成一个黄色的五角星。东莞联合技工学校教案编号：QD-751b-35B/2流水号：(3)单击选中刚画好的“黄星星”，在右侧出现相应的“属性”面板，进行如图3-37所示形状设置：位置和大小(X：O.OO;Y:O.OO)，宽和高（宽：40.00;高：40.00）。这样既可以将黄星星摆放至舞台正中央，且是正五角星形。星星变化如图3-38所示。3．生成其他不同颜色的星星(1)按组合键Ctrl+L打开“库”面板，右击选中的“黄星星”图形元件，在弹出的快捷菜单中选择“直接复制”命令，如图3-39所示。在打开的“直接复制元件”对话框中将名称改为“橘星星”，如图3-40所示。东莞联合技工学校教案编号：QD-751b-35B/2流水号：(2)在库中双击“橘星星”，进入“橘星星”元件内修改，将填充色由黄色改为橘色“#FF9900。(3)同理，复制元件，分别生成“红星星”（颜色为“#FF0033”）和“紫星星”(颜色为“#660066)。4．制作“星星动画”(1)按组合键Ctrl+F8，新建一个名为“星星动画”的“影片剪辑”元件。(2)执行“视图”_“标尺”菜单命令，在工具栏中单击“选择工具”，分别拖出四根水平参考线与四根垂直参考线，位置如图3-41所示。(3)将“图层1”重命名为“黄”，再新建三个图层，分别按次序改名为“橘”、“红”、“紫”，按组合键Ctrl+L打开“库”面板，依次将“黄星星”拖人“黄”图层中的第1帧，将“橘星星”拖入“橘”图层中的第1帧，将“红星星”拖入“红”图层中的第1帧，将“紫星星”拖人“紫”图层中的第1帧，时间轴如图3-42所示，星星的位置如图3-43所示。东莞联合技工学校教案编号：QD-751b-35B/2流水号：(4)单击“黄”图层第10帧，按F6键插入关键帧，在右侧面板中单击“对齐”；按钮，在展开的面板中选择“变形”选项卡，单击“锁定比例”戮黉按钮，将宽和高都改为20%，如图3-44所示。单击第20帧，按F6键插入关键帧，将其大小等比例缩放为100u/o，分别右击第1帧、第10帧，在弹出的快捷菜单中选择“创建传统补间”命令，创建两个补间动画。(5)单击选中“橘”图层的第1帧，按住鼠标左键将第1帧的内容拖到第5帧，宽高比例为100010，在第15帧按F6键插入关键帧，宽高比为20%，在第25帧按F6键插入关键帧，宽高比为100%，分别右击第5帧、第15帧创建两个传统补间动画，如图3-45所示。(6)同理，将“红”图层第1帧的内容拖到第10帧，宽高比100u/o，在第20帧按F6键插入关键帧，宽高比为20%，在第30帧按F6键插入关键帧，宽高比为100u/o，分别创建补间动画。将“紫”图层第1帧的内容拖到第15帧，宽高比例为100u/o，在第25帧按F6键插入关键帧，宽高比为20u/o，在第35帧按F6键插入关键帧，宽高比为100%，分别创建补间动画。(7)按住Shift键不放，依次单击选中每个层的第50帧，被选中的帧呈蓝色，然后在帧上右击，选择“插入帧”命令，如图3-46所示，或者直接按F5键也可插入帧。东莞联合技工学校教案编号：QD-751b-35B/2流水号：(8)至此，“星星动画”影片剪辑的动画已全部完成，时间轴如图3-47所示，按Enter键观看影片剪辑动画效果。5．制作文字动画(1)按组合键Ctrl+F8，创建一个名为“文字动画”的影片剪辑元件，单击“文字工具”羹按钮，输入文字“天天服饰”，在图3-48所示属性面板中进行如下设置：字体为方正琥珀简体，字母间距为6.0，第一个“天”字字号为48，颜色为紫色“#660066”，第二个“天”字字号也为48，颜色为橘色“#FF9900”，“服饰”两个字字号为36，颜色为黑色。文字设置效果如图3-49所示。(2)为“天”字创建遮罩层动画效果。①新建图层2，选中第1帧，使用矩形工具在“天”字的左侧画一个矩形，比“天”字略长，如图3-50所示，在第25帧按F6键插入关键帧，单击工具箱中“任意变形工具”按钮，将矩形拉宽，直至将文字完全覆盖，如图3-51所示。②单击选中图层2的第1帧，在其上右击，在弹出的快捷菜单中选择“创建补间形状”命令，如图3-52所示。东莞联合技工学校教案编号：QD-751b-35B/2流水号：③按住Ctrl键不放，依次单击选两个层的第50帧，被选中的帧呈蓝色，然后在帧上右击，选择“插入帧”命令，将内容延长至50帧。④右击时间轴上“图层2”的层名，在弹出的快捷菜单中选择“遮罩层”命令，为文字创建遮罩层，“文字动画”影片剪辑已全部完成，时间轴如图3-53所示。6．完成动画回到“场景”中，单击图层1的第1帧，从“库”面板中分别拖人“星星动画”、“文字动画”元件，放置到图3-54所示位置。至此，整个“Flash动态LOGO.fla”文件已全部完成，按组合键Ctrl+Enter观看效果，同时也将自动生成了一个名为“Flash动态LOGO.swf”的播放文件。东莞联合技工学校教案编号：QD-751b-35B/2流水号：小结：本次讲解了使用FlashCS5软件中的自定义形状工具、变形工具、传统补间动画和形状补间动画等来制作网站标志，动画效果为四个星星由小到大依次闪烁，文字从左到右逐渐显示出来。效果作业：上机操作所讲内容“天天服饰LOGO动画”.