《《FLASH网页动画制作》教学课件02可爱的草莓》由会员分享,可在线阅读,更多相关《《FLASH网页动画制作》教学课件02可爱的草莓(52页珍藏版)》请在金锄头文库上搜索。
1、天津市红星职业中等专业学校项目二项目二 可爱的草莓可爱的草莓 绘制与填充图形绘制与填充图形天津市红星职业中等专业学校 任务一任务一 认识常用绘图工具认识常用绘图工具 任务二任务二 绘制草莓轮廓绘制草莓轮廓 任务三任务三 认识常用填充工具认识常用填充工具 任务四任务四 为草莓填充颜色为草莓填充颜色 知识加油站知识加油站 实战演练实战演练 绘制酷酷苹果绘制酷酷苹果 拓展训练拓展训练 绘制水果一家亲绘制水果一家亲天津市红星职业中等专业学校 本任务目标本任务目标:认识线条、钢笔、矩形和椭圆、选取工具。 本任务重点本任务重点:1.了解Flash中图形与图像的概念、区别和用法, 以及绘制图形的基本方法。2
2、.熟练掌握Flash CS4中线条、钢笔、矩形和椭圆、 选取工具等基本绘图工具的使用。项目任务上一页下一页天津市红星职业中等专业学校一、认识线条工具一、认识线条工具 1. 1.使用使用【线条工具线条工具】绘制图形绘制图形 使用线条工具绘制图形非常简单,单击工具面板中的【线条工具】按钮 ,将光标放置在舞台中,当光标显示为“+”时表示可以开始绘图,确定绘制线条的起始点,然后拖动鼠标到结束点位置后释放鼠标,即可绘制出一条直线。 2.2.线条工具的选项设置线条工具的选项设置 选中线条工具后,会在工具面板下方的选项区出现两个选项按钮。其功能如下: (1)【对象绘制】按钮 :选择此项后,每个绘制的图形都将
3、创建为独立对象,其多个图形叠加时不会合并,可以分别进行移动和调整而不会影响其他图形。不选此项,则多个重叠图形会自动合并,再进行移动、调整等操作时会作为一个整体进行。 (2)【贴紧至对象】按钮 :选择此项后,绘制的线条如果靠近其他图形或辅助线时会自动吸附上去。项目任务上一页下一页天津市红星职业中等专业学校 3. 3.线条工具的属性设置线条工具的属性设置 选择线条工具后,可以在属性面板中设置线条工具的相关属性,从而改变绘制线条的颜色、粗细、样式、线条端点显示方式等。 (1)笔触颜色:单击【笔触颜色】按钮 旁边的颜色选项 ,会弹出颜色设置调色板,选择合适的颜色就可以改变线条颜色了。 (2)笔触:用于
4、设置笔触的高度,拖动右侧的滑杆就可以确定线条的粗细了。 (3)样式:用来设置线条的不同样式,共有7种,分为极细线、实线、虚线、点状线、锯齿线、点刻线、和斑马线。 (4)端点:用于设置线条端点的样式,有3种类型,无端点、圆角和方形。 (5)接合:用于设置两条直线相接时端点的接合方式,有尖角、圆角和斜角3种。项目任务上一页下一页天津市红星职业中等专业学校二、认识钢笔工具二、认识钢笔工具(1)绘制直线。单击工具面板上的【钢笔工具】按钮 ,将光标放到舞台中点击一下,画下直线的第一个锚点起始点,移动鼠标到合适的位置单击左键,画下直线的第二个锚点结束点,这时两点之间会自然连成一条直线,如图2-1所示,单击
5、【选择工具】可终止绘制直线。(2)绘制曲线。用钢笔绘制曲线时,第一个锚点直接在舞台上单击鼠标即可,第二个锚点在鼠标单击左键并拖动鼠标,就会出现一曲线,如图2-2所示,单击【选择工具】可终止绘制曲线。图2-1 绘制直线 图2-2 绘制曲线项目任务上一页下一页天津市红星职业中等专业学校 2. 2. 锚点工具锚点工具 按住工具面板上的【钢笔工具】按钮 ,会出现一个下拉列表,里面除了钢笔工具还有三个锚点工具。其功能和作用如下: (1)【添加锚点工具】按钮 :用于在路径上添加锚点。有时路径上的锚点可能较少,这样不利于做更细致的调整,这就需要添加锚点。添加方式很简单,选中【添加锚点工具】后在路径上需要添加
6、锚点的位置点击左键就可以添加一个锚点。 (2)【删除锚点工具】按钮 :用于删除路径上的锚点。当路径上有多余的锚点时,可以选择【删除锚点工具】,在要删除的锚点上单击左键,就可以把选中的锚点删除掉。项目任务上一页下一页天津市红星职业中等专业学校(3)【转换锚点工具】按钮 :用于转换锚点形式。路径有两种锚点:角点和平滑点。角点是突然改变路径方向的锚点,它可以连接直线,也可以连接曲线;平滑点是路径平滑过渡的锚点,它的两端都为曲线。选中【转换锚点工具】后,单击一个平滑点可以将它转换为角点,拉直了该锚点两端的线段,如图2-3所示。用【转换锚点工具】拖动一个角点可以将它转换为平滑点,并显示出它的方向线,通过
7、拖动方向线上的方向点a或b,改变方向线的长短和位置,调整曲线的弧度和方向,如图2-4所示。平滑点角点图2-3 平滑点转换为角点角点平滑点ab图2-4 角点转换为平滑点项目任务上一页下一页天津市红星职业中等专业学校 3. 3. 调整路径调整路径 路径绘制完成后,还可以对其进行修改。修改路径的方法主要有下面几种: (1)移动路径:选择【转换锚点工具】,单击图形出现路径后,通过键盘的方向键可以上下左右移动路径的位置。或者选择【部分选取工具】,单击图形出现路径后,用鼠标拖动或用方向键控制路径,都能实现路径的移动。 (2)移动锚点:选择【部分选取工具】,单击图形出现路径后,选中需要移动的锚点,用鼠标拖动
8、或用方向键控制它,都能移动锚点位置,改变路径走向,从而改变图形的形状。 (3)调整曲线:选择【转换锚点工具】,拖动锚点方向线上的方向点,通过改变方向线的长短、方向、位置来调整曲线的线形。项目任务上一页下一页天津市红星职业中等专业学校三、认识矩形工具与椭圆工具三、认识矩形工具与椭圆工具 1. 1. 矩形工具矩形工具 矩形工具用于绘制不同样式的矩形、正方形和圆角矩形。绘制时单击工具面板上的【矩形工具】按钮,在舞台上单击并拖动鼠标,绘制出一个矩形。如果在拖动鼠标的同时按住【Shift】键,就可以绘制出一个正方形。若按住【Alt】键拖动鼠标会以起点为中心绘制矩形或正方形。 在绘制矩形时,可以通过属性面
9、板,对如图2-5所示的矩形工具属性进行设置。图2-5 矩形工具属性项目任务上一页下一页天津市红星职业中等专业学校项目任务上一页下一页 属性面板上半部分的填充和笔触的设置与线条工具的属性设置相同。下半部分的矩形选项用于设置圆角矩形4个边角半径的角度值。 (1)矩形边角半径:在四个矩形边角半径的文本框中输入数值,可以指定每个边角的半径。 (2)【锁定】按钮 与【解锁】按钮 :单击【锁定】按钮后四个边角半径值一致,所以有三个矩形边角半径文本框被锁定了,只设置一个矩形边角半径值就可以了,或者是利用按钮旁边的滑杆,进行半径的设置。单击【解锁】按钮则四个矩形边角半径可以不同,此时滑杆不能用,只能通过四个文
10、本框分别设置每个矩形边角的半径。 (3)【重置】按钮:重置按钮用于将矩形边角半径清零。 2. 2. 椭圆工具椭圆工具 【椭圆工具】用于绘制椭圆形和圆形,其绘制方法很简单,按住工具面板上的【矩形工具】按钮,在下拉列表中选中【椭圆工具】按钮 ,在舞台的合适位置单击并拖动鼠标,即可绘制出一个椭圆形。如果在拖动鼠标的同时按住【Shift】键,就可以绘制出一个圆形。同样,若按住【Alt】键拖动鼠标会以起点为中心绘制椭圆形和圆形。 天津市红星职业中等专业学校项目任务上一页下一页四、认识常用选取工具四、认识常用选取工具1. 1. 选择工具选择工具Flash CS4 中的选择工具是最常用到的工具,它不但可以选
11、择对象,还可以改变图形的形状。在绘制图形的过程中,经常要用选择工具对图形的线形进行调整。下面就简要介绍一下选择工具的用法。(1)选择笔触线段或填充色:单击工具面板上的【选择工具】按钮 ,将鼠标放到舞台上,单击图形的某一条线段或某一处填充色,可以选择一条线段或图形的填充色。如果想将复合图形的全部笔触都选中,则可以双击笔触线条。(2)选择图形:选中【选择工具】按钮后在舞台上拖动鼠标,在形成的矩形选区框中的线段和填充色都将被选中。使用这种方式选择图形,既可以选择全部图形,又可以选择部分图形,因此可以对局部图形进行操作。天津市红星职业中等专业学校项目任务上一页(3)选择对象:对于外部导入的对象,或不合
12、并的图形,直接用鼠标单击就可以选择一个对象。要是想选择多个对象,可以按住【Shift】键,或者拖动鼠标通过选区框来选择。(4)调整图形:选择工具调整图形主要有两种方式。当鼠标靠近图形的端点,光标变为 时,可以用鼠标拖动端点实现端点位置的移动。当鼠标靠近图形的线段,光标变为 时,拖拽鼠标就可以改变线段的弧度和方向。通过对端点和线段的调整,最终实现对图形的调整。2. 部分选取工具单击工具面板上的【部分选取工具】按钮 ,再点击图形就会将图形转换为路径,然后按照钢笔工具中介绍的路径编辑方式对路径进行编辑就可以了。天津市红星职业中等专业学校 本任务目标本任务目标:绘制图形的基本方法。 本任务重点本任务重
13、点:熟练掌握绘图中的工具使用技巧。项目任务上一页下一页天津市红星职业中等专业学校一、一、绘制草莓脸部绘制草莓脸部 项目任务上一页下一页1 1新建文件新建文件启动Flash CS4后,在启动向导中选择“Flash文件(ActionScript2.0)”选项,新建一个Flash文档,将默认图层名字改为“脸部轮廓”。天津市红星职业中等专业学校项目任务上一页下一页2 2绘制草莓脸部轮廓绘制草莓脸部轮廓(1)绘制草莓外轮廓。单击工具面板上的【钢笔工具】按钮 , 然后在舞台上确定起点a并单击鼠标左键,然后在其右侧b点处单击使其自动连成一条线段,再在下方处的c点处单击使其连成第二条线段,最后再单击起点a处使
14、其连成第三条线段,从而形成了草莓外轮廓,绘制过程如图2-6所示。 图2-6 绘制草莓外轮廓abababcc天津市红星职业中等专业学校项目任务上一页下一页(2)调整草莓外轮廓。按住工具面板上的【钢笔工具】按钮,弹出一个下拉列表,选择“转换锚点工具”按钮,如图2-7所示。然后用鼠标单击a点并拖动锚点,会出现一条直线,上面有三个调整点,拖动调整点可以调整直线的弧度大小和弧度方向,此时按键盘上的方向键还能移动锚点的位置。通过多次调整三个锚点位置、弧度大小和方向,使直线变成曲线,最终形成一个草莓的形状,如图2-8所示。图2-7 钢笔工具下拉列表 图2-8 调整为曲线轮廓 abcde天津市红星职业中等专业
15、学校项目任务上一页下一页3. 3. 绘制草莓五官绘制草莓五官(1)新建图层。单击图层面板上的“新建图层”按钮,新建一个图层,命名为“五官”。后面的眼睛和嘴的绘制都在“五官”图层上进行。(2)绘制眼睛。选中“五官”图层,按住工具面板中的【矩形工具】按钮 ,在弹出的下拉列表中选择【椭圆工具】 ,在属性面板中设置笔触 为黑色 ,大小为2,填充 为透明 ,其他为默认值,如图2-9所示。按住【Shift】键拖动鼠标,在草莓轮廓线内部绘制一个正圆(不按【Shift】键则绘制一个椭圆)做为眼睛。然后单击工具面板中的【选择工具】按钮 ,选择绘制的圆,按住【Ctrl】并拖动鼠进行眼睛的复制,如图2-10所示(可
16、以使用“属性”面板调整眼睛的位置和大小)。图2-9 设置椭圆属性 图2-10 绘制眼睛 天津市红星职业中等专业学校项目任务上一页下一页(3)绘制眼珠。按上面的方法绘制草莓的眼珠,利用鼠标拖动或者键盘方向键将眼珠移动到如图2-11所示位置(可以使用“属性”面板调整眼珠的位置和大小)。图2-11 绘制眼珠天津市红星职业中等专业学校项目任务上一页下一页(4)绘制眉毛。单击工具面板中的【线条工具】按钮 ,在属性面板中将笔触大小设置为2,再在眼睛上方绘制两条直线,如图2-12(a)所示。单击工具面板中的【选择工具】按钮,移动鼠标到直线上,当鼠标下面出现一个弧线时,向上拖动鼠标,将直线调整为曲线。用调整两条直线的弧度和位置如图2-12(b)所示。(a)绘制两条直线 (b)调整直线为曲线天津市红星职业中等专业学校项目任务上一页下一页(5)绘制嘴。与绘制眉毛的方法相同,选择【线条工具】绘制一条短线作为左半部嘴,如图2-13(a)所示,然后用【选择工具】调整为向下的弧线,如图2-13(b)所示。同样绘制右半部嘴的直线,如图2-13(c)所示,再调整为弧线,如图2-13(d)所示。(a)绘制左侧直线 (b