1、UI设计基础教案全套UI设计基础教案 2019年02月第一周 Flash概述课程内容模块1 初识Flash教案序号1教学时间第一周计划课时 3 课时+实训3课时教学目标1、确定课程目标、讲述学习内容、教给学习方法。2、熟悉Flash cs3的界面。3、熟悉FLASH的工作环境, 3、熟悉Flash动画的制作原理教学重点培养他们对于本课程以及本专业的热爱;了解什么是flash,熟悉flash工作界面。教学难点掌握动画原理以及Flash动画的制作原理。教学方法讲授演示法,任务驱动学习法和协作学习法教学资源多媒体机房、投影仪、电子教学平台、视频演示教程、案例源文件、素材、ppt等。教学过程备注导入:
2、教师给学生演示经典动画和教材中部分的案例动画由此引入课题。讲述新课(讲授法、PPT演示)一、Flash课程介绍1、课程性质2、课程目标和课程内容3、学习方法(1)小组学习法(2)任务驱动法(3)互帮互补法(4)课堂勤记笔记、勤操作(5)课外勤练习、勤看书1.1 初识Flash1什么是Flash2Flash的历史与发展3Flash的特点1.2 Flash应用领域1.3 Flash动画原理1动画原理2Flash动画制作原理1.4 Flash工作环境1、舞台就是工作区,最主要的可编辑区域。在这里可以直接绘图,或者导入外部图形文件进行安排编辑,再把各个独立的帧合成在一起,以生成电影作品。2、时间轴窗口
3、 用它可以调整电影的播放速度,并把不同的图形作品放在不同图层的相应帧里,以安排电影内容播放的顺序。3、绘图工具栏 放置了可供图形和文本编辑的各种工具,用这些工具可以绘图,选取,喷涂,修改以及编排文字,还有些工具可以改变查看工作区的方式。在选择了某一工具时,其所对应的修改器(Modifier)也会在工具条下面的位置出现,修改器的作用是改变相应工具对图形处理的效果。4、标准工具栏 列出了大部分最常用的文件操作,打印,剪贴板,撤消和重做,修改器以及控制舞台放大比例的图标和选项,便于进行更为快捷的操作。5、图库窗口 用以存放可以重复使用的称为符号的元素。符号的类型包括有图片(Graphics),按钮(
4、Button)和电影片断(Movie Clip)。其调用的快捷键为Ctrl-L。6、控制器面板 控制电影的播放操作的工具集合,一般不大常用,处于隐藏状态。例1:使用工具制作一个“小孩微笑头像”思考:如何让“哭脸”变成“笑脸”?引入层的概念,将“嘴”放在新建的图层上引入简单动画制作步骤: a、绘制动作的开始状态与结束状态,即绘制两个关键帧,并注意两个关键帧在时间线上的位置。 b、选择所有帧,创建动画。例2:小球的直线运动。步骤1:在舞台上画出小球。步骤2:在第20 帧上插入关键帧。步骤3:移动小球,使其开始位置与结束位置不同。步骤4:选择所有帧,创建形状渐变动画。例3:小球沿规定的轨迹运行。步骤
5、5:在前一个动画的基础上添加引导层步骤6:在引导层上用铅笔工具画曲线。步骤7:移动小球,使其开始位置和结束位置分别位于曲线的首尾。1.5 动画的保存与发布:1、保存动画:依次点击“文件”菜单-“保存”输入文件名,即可当前正在制作的影片保存到磁盘上。注意保存的是Flash的源文件,其扩展名为.fla 。2、动画的发布: 依次点击“文件”菜单“发布设置”“发布”即可。注意发布后的文件扩展名为名为.swf ,发布后的文件可用IE等打开。1.6设置工作参数1、常规2、绘画选项卡3、设置标尺和网格4、设置影片属性首先向学生作自我介绍,然后介绍Flash课程性质、目标、考核方法以及学习方法。结合生活,提示
6、学生从生活,学习,娱乐的三个方面罗列flash的应用。讲述层的概述时,可结合前期学习过的Photoshop中层的概念,这样学生头脑中就有了印象。请学生注意动画制作的过程,并能自己制作上述两个动画。注意flash的两种不同格式的文件,源文件和播放文件分别的打开方式学生练习老师绘画选项卡、标尺、网格,教师辅导。课堂小结通过本单元的学习,使学生能了解Flash 的工作环境,掌握基本的操作,了解简单动画的制作过程等,为以后的学习打下一定的基础。作 业实训一:简单动画的制作教学反思本章主要介绍了Flash的基础知识,软件的安装与启动、工作环境以及一些基本操作。各种工具及面板的熟练运用是学习Flash的关
7、键,学生在学完本章后,需要通过不断地练习来掌握各种工具和面板的使用方法。学生通过练习基本可以掌握Flash的基本操作,但要熟练掌握还需多加练习。第一周绘图基础教学时间第二周计划课时 4课时+实训4课时序号课程内容模块2:绘图工具教学目标掌握绘图基础知识;掌握选择工具的使用;掌握线条工具、椭圆工具、矩形工具和刷子工具的使用;掌握图形修饰工具和查看工具的使用教学重点绘图工具的使用和图形修饰工具的使用教学难点选择工具的使用教学方法讲授演示法,任务驱动学习法和协作学习法教学资源多媒体机房、投影仪、电子教学平台、视频演示教程、案例源文件、素材、ppt等。教学过程备注复习巩固打开实例ceng,复习巩固FL
8、ASH中最基本的概念:层通过提问的方式复习文档属性的修改方法导入新课打开绘制好的flash的图像,让学生欣赏,说明Flash 有一个功能强大的绘图工具,可以绘制出完美的图形。它使用灵活、简单易用,在大多数情况下都可以满足使用者的要求。讲授新课(边操作边演示边讲解)补充知识:、矢量图形和位图图像、线条和填充图形、绘制模式()合并绘制模式当你所绘制的线条穿过别的线条或图形时,它会象刀一样把其他的线条或图形切割成不同的部分。同时,线条本身也会被其他线条和图形分成若干部分。()对象绘制模式注意:选择用【对象绘制】模式创建的图形时,Flash会在图形上添加矩形边框。使用【选择】工具 移动对象,只需单击边
9、框然后拖曳图形到舞台上的任意位置即2.1 选择工具、选择工具主要功能是选择对象,对对象进行变形等。对象被选中后,选中部分会填充小的亮点。基本操作有:选取单一对象;选取多个对象;选取填充区和轮廓钱;选取连续线条;选取对象的某一区域;取消选择对象;移动对象;修改形状2、部分选取工具主要用于调整线条上的节点,改变线条的形状。部分选取工具没有选项。基本操作有:删除节点;移动节点;角点转换为曲线点;调节曲率3、套索工具主要作用也是选择物体。与选择工具不同的是,套索工具可以用来选取任何形状范围的对象,而选择工具只能拖出矩形的选取范围,因此它的功能更强一些。2.2绘图图形工具1、线条工具线条工具的使用方法就
10、是在舞台中确认一个起点后按下鼠标,然后拖动鼠标到结束点松开鼠标就可以了。2、钢笔工具钢笔工具的主要功能有画直线、画曲线、曲线点转换为角点、添加节点、删除节点。3、铅笔工具铅笔工具的选项栏中除“对象绘制”按钮外还有一个“铅笔模式”按钮,单击此按钮弹出三种绘图模式:伸直、平滑、墨水。4、椭圆工具所画出的椭圆分为两部分:轮廓线与填充色块。通过设置笔触颜色和填充色,能画出实心椭圆,空心椭圆和实心无边框椭圆。椭圆工具选项栏中只有“对象绘制”和“贴紧至对象”两个按钮。5、矩形工具矩形工具是一个工具组,包括矩形工具和多角星形工具,通过单击右下角的黑色三角进行切换。矩形工具与椭圆工具用法相似,注意矩形圆角的设
11、置。使用多角星形工具可以绘制出不少于三个边的等边多边形。注意选项的设置6、刷子工具刷子工具就像画刷一样可以在舞台中绘制不同颜色的图形,也可以为各刷子工具的选项栏有五个选项:“对象绘制”种图形对象着色。刷子的颜色由填充色设置。、“刷子模式”、“刷子大小”、“刷子形状”和“锁定填充”。7、橡皮擦工具橡皮擦工具就像日常生活中使用的橡皮擦一样,用来擦除图形的线条和填充区。橡皮擦工具的选项栏有三个选项:“橡皮擦模式”,“橡皮擦形状”和“水龙头”2.3 修饰图形工具1、墨水瓶工具墨水瓶工具用于更改线条的颜色、线宽和样式等属性,线条的颜色可以使用纯色、渐变色以及位图图像,2、颜料桶工具与墨水瓶工具相对应,颜
12、料桶工具的功能是更改填充区域的颜色。它可以填充封闭区域或不完全封闭区域,填充时可以使用纯色、渐变色以及位图图像。3、吸管工具吸管工具用于拾取填充或线条的颜色值,选择吸管工具后,鼠标图标变成一个吸管,用吸管单击对象的任意位置,可获得此位置的颜色值及其它属性。4、任意变形工具使用任意变形工具可以对图形做出各种各样的变形,制作各种Flash特效。选择任意变形工具后,在选项栏中有四个选项按钮自动变形工具一共可以做出五种变形处理:旋转、倾斜、缩放、扭曲和封套。其中旋转、倾斜、缩放对所有的对象都有效,而扭曲和封套只对形状对象有效,对组对象、符号和位图都不起作用。2.4查看工具1、手形工具2、缩放工具综合实
13、例1、绘制曲线 2、嘴的轮廓 3、眼镜 4、雨中伞请学生回答几个问题分别打开一幅矢量图形和位图图像进行放大观看,让学生观察结果画两条线条,和两个形状来演示合并绘制模式下图形之间的相互影响教师在屏幕上绘制几个图形,进行演示选择对象的方法。注意:填充区和线条。 请学生观察对象变形时光标的变化教师演示,注意线条工具的选项设置联系PS中钢笔工具的用法请学生思考:怎样绘制五角星?提示学生注意铅笔与刷子工具的异同处 请学生上台体验不同擦除模式分别设置选项中不同的属生设置演示填充有缝隙的图形分别演示提取四种对象属性课堂小结本周主要介绍了flash绘图基础,基本绘图工具的使用和编辑工具的使用。要注意的是,选择
14、某种工具时,可以对它的属性进行设置。要分清合并模式和对象模式的区别。布置作业实训二:绘图工具使用教学反思本章主要介绍了Flash中有关帧的基本操作及形状动画的制作,学生在学完本章后,需要通过不断地练习来掌握形状动画的制作技巧。第二周编辑图像教学时间第三周计划课时 4课时+实训4课时序号3课程内容模块3:编辑图形教学目标使学生会合理的使用:对齐、分布、匹配大小、间隔、相对于舞台等命令;让学生巧秒应用切割 融合 组合 叠放顺序的更改;会应用变形面板、缩放和旋转对话框教学重点分布和相对于舞台;怎么样去解决和巧秒的去应用粘图现象;用变形面板、缩放和旋转对话框调节调整对象或者是画图教学难点分布面板上的各
15、个按钮的操作原理;怎么样的巧秒的去就用粘图来进行图象的切割 改变图象叠放顺序;变形面板中各个按钮的作用教学方法讲授演示法,任务驱动学习法和协作学习法教学资源多媒体机房、投影仪、电子教学平台、视频演示教程、案例源文件、素材、ppt等。教学过程备注复习旧课指出上周实训中出现的问题。强调做文字特效时,一定要将文字打散。复习一下,矩形工具,填充色的应用导入新课展示几个绘图实例,要完成这些实例,必须掌握FLASH中有些工具使用的技巧,这样才能增加动画设计的美感。讲述新课讲授法演示法3.1 调整对象1、排列对象单击菜单中“窗口”|“对齐”命令,出现“对齐”面板。对齐;分布;匹配;间隔2、形状的切割 融合
16、组合 叠放顺序的更改1)形状的切割Flash中将使用绘图工具绘制的图形称为形状。“对象绘制”按钮,在创建对象时如果选中“对象绘制”按钮,将创建独立的对象,与其他对象互不影响。相反,如果在绘制图形时没有选取“对象绘制”按扭,则对象之间将会产生影响,对象能够被切割或融合。绘制对象的作用其实可以理解为一种最简单的“组”,应该是介于打散图形与组之间的状态,这个“组”与真正的组的不同点在于它可以像打散图形一样直接进行修改。举例:直线分割椭圆,矩形打孔 2)形状的融合融合是将两个形状连在一起,此功能可创建绘图工具无法绘制的形状。使用时要注意,进行融合的形状的颜色要相同,没有边框,并且不是独立的对象(即在绘
17、制对象时没有按下“对象绘制”按钮)。3)组合对象组合是将多个对象当作一个整体进行处理,可以更方便地对对象进行移动、变形等操作,还可以防止因为重叠而产生的切割和融合。在编辑组合时,其中的每个对象均保持各自的属性以及与其它对象的关系。创建组合 Ctrl+G编辑组合,注意组合编辑环境4)对象的叠放顺序 单击菜单中“修改”|“排列”命令Flash中,组合对象或实例等独立对象在叠放时,有上下顺序之分,上面的对象可以覆盖下面的对象。对象的上下顺序与创建时的次序有关,后创建的对象在先创建的对象上面。绘图工具创建的非独立的形状没有上下顺序之分,不能进行叠放顺序调整。例1 风景画例2 镜面字3.2变形面板、缩放
18、和旋转对话框1、变形面板单击菜单中“窗口”|“变形”命令,可打开“变形”面板。比例缩放调节旋转角度调节:扭曲角度调节4.2.2 缩放和旋转对话框选定对象后,单击菜单中“修改”|“变形”|“缩放和旋转”命令,出现“缩放和旋转”对话框2、翻转对象和对象的扩展与柔化1)翻转对象 单击菜单中“修改”|“变形”命令,弹出下一级子菜单。2)对象的扩展与柔化选中填充形状,单击菜单中“修改”|“形状”|“扩展填充”柔化对象的边缘选中形状,单击菜单中“修改”|“形状”|“柔化填充边缘”命令例3 制作一朵七色花例4 制作一个暂停按钮3.3混色器和填充变形工具1、混色器1)、笔触颜色2)、填充颜色3)、黑白颜色和交
19、换颜色4)、颜色值5)、渐色面板和亮度6)、Alpha7)、预览框8)、颜色类型:无;纯色;线性;放射状;位图2、调整渐变效果1)填充变形工具:更改渐变中心;改变渐变填充的宽度;旋转渐变填充;改变填充半径。2)溢出溢出Flash 8的一个新增功能,当我们更改渐变中心或缩小渐变宽度时,会使图形的一部分或全部超出渐变的控制范围3)锁定填充在颜料桶工具和刷子工具的辅助选项里,有一个“锁定填充”的按钮,它的作用是锁定渐变填充的区域。如果不锁定,颜料桶填充颜色将在被分开的区域分别产生渐变;锁定后,则在整个区域产生渐变。例:制作带阴影的小球教师绘制几个矩形分别演示对齐面板中的对齐、匹配、分布、间隔按钮的用
20、法。强调“相对于舞台”按钮的用法举例说明:直线分割椭圆 矩形打孔以一个椭圆和一个矩形融合举例说明使用“缩放和旋转”面板缩放对象只能将选中的图形对象按宽和高的比例整体放大或缩小,不能只对水平方向或垂直方向分别放大、缩小。课堂小结如何对Flash中的对象、图形进行编辑,以及图像导入等基本操作。 准确、快速的进行图形的编辑和导入工作,在实践中为日后的动画提供栩栩如生的素材。 布置作业实训三:编辑工具使用教学反思本章主要介绍了Flash中有关帧的基本操作及形状动画的制作,学生在学完本章后,需要通过不断地练习来掌握形状动画的制作技巧。第三周文字教学时间第三周计划课时3课时+实训3课时序号4课程内容模块4
21、:文本工具教学目标掌握混色器的使用方法;掌握渐变色的调整方法;掌握静态文本的输入方法;掌握FLASH制作中几种常见静态字体效果的制作教学重点混色器各个参数工具设置;静态文本的输入方法。教学难点巧秒的应用渐变色画图;各类文字效果的制作教学方法讲授演示法,任务驱动学习法和协作学习法教学资源多媒体机房、投影仪、电子教学平台、视频演示教程、案例源文件、素材、ppt等。教学过程备注复习旧课分析上周学生上机操作出现问题,展示学生的作品,提示图形的不同模式下不同的表现形式导入新课教师播放几个文本特效的Flash影片弹性小球2,由此引入课题。问题的提出:如何制作文本特效?讲述新课(边演示操作边讲解)介绍一下关
22、于颜色的内容:色的调配是动画中重要组成部分,Flash为颜色的使用、生成及修改提供了多种方法。在Windows中所有的颜色都是用红(Red)、绿(Green)、蓝(Blue)三种基本颜色混合而成的,所以这种颜色系统又称为RGB三基色系统,它的每一种基本颜色用两位十六进制数表示,因此用RGB三基色表示的颜色用6位十六进制数表示。4.1 文本的输入1、静态文本的输入 1)、Flash 中文本的类型:静态文本,动态文本,输入文本 2)、静态文本输入、编辑与修改。4.2常用的字效:1、晕光字效关键的技术要求:1)、设置好影片背景和尺寸大小并输入文字;2)、将文字选中并将其打散为离散图形;3)、在选中离
23、散文字的前提下,将文字图形进行柔化边缘填充;4)、在边缘柔化了的文字图象中,将内部填充色删除即可。2、空心字 关键的技术要求:1)、设置影片尺寸大小和背景颜色;2)、输入文字;3)、将文字打散;4)、用墨水瓶工具对打散的文字图形进行描边;5)、最后将文字的内部填充色删除即可。3、立体字 关键技术要求:1)、设置影片尺寸大小并输入文字;2)、按照制作空心字步骤做出空心字效果;3)、将空心字复制并粘贴到相同位置;4)、将复制的空心字往右平移2-4个像素并向上平移2-4个像素,初步造成叠影;5)、将看不到的线条删除,并将文字的各对角相连;6)、同理删除被遮掉的线条,即完成立体字。4、双色(多色)字
24、关键技术要求:1)、制作此类文字效果,只要将文字打散成离散的图形;2)、然后用选取工具选取其中部分,再对选中部分进行颜色填充;33)、选取次数可以随意定。5、彩虹字关键技术要求:1)、将输入的文字打散;2)、对第一种情况来讲,只要文字的填充色直接通过混色器进行编辑即可;3)、对第二种情况,需要用到油漆桶工具,在选中文字图形并设置好油漆桶的颜色值(渐变色)后,点击被选文字,然后使用颜色填充变形工具将颜色的变化方向改变即可。综合实例:雪花字、图案字、镜面字、风景字对做的好的同学要表扬提示学生注意线条转化为填充后,笔触和填充选项的变化注意设置变化中心文本需进行两次分离(Ctrl+B)请学生思考此例制
25、作的关键。提示:阴影实际上就是原图副本填充灰色,然后进行自由变形课堂小结滴管工具是负责改变线条的颜色,分离是把线条分离成了图形,文字的效果很大就是应用几层文字不同状态的叠加效果布置作业实训四:文本工具使用及文本特效教学反思本章主要介绍了Flash中有关文字文本动画的制作,学生在学完本章后,需要通过不断地练习来掌握文字文本动画的制作技巧。第三周元件、实例教学时间第三周计划课时2 课时+实训2课时序号5课程内容模块5:元件和实例教学目标掌握元件和图形之间进行转换和设置实例的方法并能灵活掌握库面板的使用等基本操作教学重点元件和图形之间进行转换和设置实例的方法教学难点元件和图形之间进行转换和设置实例的
26、方法教学方法讲授演示法,任务驱动学习法和协作学习法教学资源多媒体机房、投影仪、电子教学平台、视频演示教程、案例源文件、素材、ppt等。教学过程备注复习旧课1、图层区:一个场景可以由若干层组成,一般来说,不同的对象放在不同的层上,以便于修改,也避免互相干扰。2、文字编辑(打散:Ctrl+B)、吸管工具(用Alt+Print键截屏取色)、渐变变形工具、笔触线形(点状)、橡皮擦模式(擦除填色)。导入新课教师播放情人节贺卡的的Flash影片弹性小球2,由此引入课题。问题的提出:如何利用元件绘图?讲述新课 元件:在Flash中将需要重复出现的图像、动画、按钮制作成元件,元件存放在元件库中。元件只需创建一
27、次,然后即可在整个文档或其他文档中重复使用。 实例:实例是将元件应用到舞台上或嵌套在另一个元件内的元件副本。将一个元件从元件库中拖到工作区中即创建了该元件的一个实例,一个元件可以创建多个实例。实例保持元件的基本特征,但可以设置不同的颜色、大小和功能。当修改元件时,它的所有实例都会随之更新。 库:在Flash中库是用来存放当前文档中的所有元件以及导入的图形、音频、视频等动画元素。5.1 库面板的操作 在Flash中使用库来存储和组织创建元件以及导入的文件,包括位图图形、声音文件和视频剪辑。库是通过库面板来进行管理。通过库面板,可以调用库中的资源,也可以对库中的资源进行查看、新建、删除、编辑、归类
28、等操作。打开库面板方法:打开Flash自带公用库:选择窗口其它面板公共库 打开当前库:选择窗口库 库面板构成:菜单:点击可打开库面板的命令菜单,进行各项有关操作播放停止按钮:用于播放或停止播放电影元件排序按钮:改变元件的排列顺序显示切换按钮:以大图框/小图框方式显示新建元件按钮:单击建立新元件文件夹按钮:单击可创建文件夹属性按钮:单击打开所选项的属性面板删除按钮:单击删除选中的项目 5.2 创建图形元件 图形元件主要用于静态图像的重复使用以及用于制作运动渐变动画。一. 将场景中的元素转换成图形元件1.选择要变为元件的元素,可选择一个或多个 2.选择菜单“修改”“转换为元件”或按F8键 3.在名
29、称栏中输入元件名称,在行为栏中选择“图形” 4.单击确定按钮 二. 创建新的图形元件1.选择菜单“插入”“新建元件”或按Ctrl+F8键或单击“库”面板左下角的“新建元件”按钮 2.在名称栏中输入元件名称,在行为栏中选择“图形”后,单击确定。 3.在舞台中创建元件内容 4.单击舞台上方的“后退”按钮或场景名称返回到场景编辑模式 5.3创建影片剪辑元件 影片剪辑元件主要用于制作需要重复使用的动画片段。 一. 创建新的影片剪辑元件操作步骤: 1.选择菜单“插入”“新建元件”或按Ctrl+F8键或单击“库”面板左下角的“新建元件”按钮 2.在名称栏中输入元件名称,在行为栏中选择“影片剪辑”后,单击确定。 3.在舞台中制作影片剪辑的动画内容 4.单击舞台上方的“后退”按钮或场景名称返回到场景编辑模式 二.将舞台上的动画转换为影片剪辑操作步骤: 1.选择帧 选择某些层的所有帧:按住Shift键,点击
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1