1、第1课 初识Flash变形动画昌邑潍水学校 齐广强学习任务:1、认识Flash中可以创建的两种动画:帧帧动画和过渡动画。2、制作一个球体逐渐变成五边形的变形动画。知识要点:1、 认识帧及关键帧2、 导入GIF图片3、 用颜料桶工具着色4、 使用椭圆工具绘制圆,使用多角星形工具绘制五边形5、 制作形状补间动画操作步骤:一、 帧及关键帧的概念在Flash中,帧就是画面,一帧就是指一个画面。动画制作的关键画面就是关键帧。在Flash中为了提高工作效率,有些画面必须由作者制作,称为关键帧;有些画面则可以由计算机自动生成,称作中间帧。二、 认识Flash中可以创建的两种动画1、 帧帧动画(逐帧动画):制
2、作好每一帧画面,然后连续播放产生动画效果。(帧帧动画的每一帧都要保存在文件中,因此文件很大,所以实际制作时帧帧动画用得比较少。)导入gif图片,使学生认识帧帧动画。2、 过渡动画(变形动画):制作好若干关键帧的画面,由Flash通过计算生成中间各帧,使画面从一个关键帧过渡到另一个关键帧。过渡动画的分类根据画面形成的规则和形式,过渡动画又分为运动动画和变形动画(1) 变形动画:就是由一种对象逐渐变为另一种对象。(2) 运动动画:它可以使一个对象在画面中移动,改变其大小,形状使其旋转、改变颜色、产生淡入淡出等效果,各种变画可以独立进行也可以合成复杂的动画。三、 制作变形动画1、使用默认的电影属性,
3、创建一个新文件。2、绘制球体图形选取绘图工具中的椭圆工具,设置笔触颜色为无,填充颜色为蓝黑渐变色,按住Shift键在舞台左上角绘制一个无边框的正圆。如图:1-1图:1-13、 绘制五边形图形(1)选中第20帧,击右键,单击插入空白关键帧在第20帧处插入空白关键帧。(2)选择多角星形工具,如图:1-2图:1-2 多角星形工具(3)在舞台右下角,绘制一无边框红黑渐变色的五边形。如图:1-3图:1-3(4)创建关键帧的动作回到第一帧,单击属性打开“属性”面板,在补间动画中选择形状。如图1-4:图:1-4 属性”面板四、预览动画执行Ctrl+回车, 预览动画效果。五、 保存动画效果。思考与拓展:1、如
4、何修改文档,使球体变成五角星之后再逐渐变为球体。2、制作文字变形效果,数字5变成9(提示:文字制作变形效果必须将文字转换为图形,使用修改菜单中的分离命令)3、 制作一模拟计算机安装软件时显示装载进程的动画,画面是一个红色的条带从左向右延伸。第2课 升旗动画学习任务:红旗升起的运动动画知识要点:1、设置舞台背景颜色2、图层的使用 3、创建图形元件 4、用动作补间制作移动动画操作步骤:一、 新建文件创建一个新文件,设置舞台背景色为淡蓝色执行【窗口】【属性】命令(快捷键Ctrl+F3),打开“属性”面板。“属性”面板位于舞台的下方,新建文档以后,用“属性”面板来指定文档的【舞台】大小、【背景颜色】、
5、【帧频】 (fps也就是播放速度)以及文档的【发布设置】等参数。二、 绘制旗杆、设置笔触颜色为无颜色,填充颜色为棕色、选取矩形工具,分别绘制旗台、旗杆。如图:2-1图:2-1三、 制作红旗的图形符号、【插入】【新建元件】、元件名称命名为“红旗”,行为选取“图形”,单击确定,进入元件编辑状态。如图:2-2。图:2-2、选取矩形工具,将笔触颜色设为无,填充色设为红色,在工作区绘制“红旗”。四、 制作运动动画、单击场景,回到工作区中,单击添加图层按纽添加图层,并将图层命名为“红旗”。、单击Ctrl+L打开库面板,从库中将名为“红旗”的图形符号拖到工作区中,放到旗杆的下端。如图:2-3。(如红旗大小不
6、合适,可以右击库中的红旗符号,选择“编辑”命令,重新编辑红旗符号。)图:2-3、在图层1第200帧处插入帧,并在“红旗”层第200帧处插入关键帧,然后将红旗符号移动到旗杆顶端。4、回到第一帧,右击选择“创建补间动画”。完成后的时间轴效果图如下图:2-4图:2-4五、 预览动画Ctrl+Enter,预览动画效果。六、 保存动画文件执行【文件】【另存为】命令,保存动画文件,生成的是扩展名为fla的可编辑的Flash文件。注:图层的概念:图层就像是若干张透明纸叠放在一起,透过图层上没有画东西的区域就可以看到下面的图层,创建一个新的Flash电影时,它仅有一层,在制作的过程中,可以根据图形和动画的需要
7、在电影中加入并组织多个图层。思考与拓展制作一个蝴蝶由近到远飞行的动画,并且蝴蝶图形由大慢慢变小.第3课 转动的风车学习任务:制作一个只有4个叶片的风车绕风车中心点旋转的动画。知识要点:1、变形面板的使用 2、组合对象 3、选择工具的使用 4、部分选取工具的使用 5、在动作补间中使用旋转操作步骤:一、 新建文件,设置背景属性为淡粉色。二、 创建叶片符号、【插入】【新建元件】、元件名称命名为“叶片”,行为选取“图形”,单击确定,进入元件编辑状态。3、选择矩形工具,将设置笔触颜色为无填充色,填充颜色为绿黑渐变色。4、在符号区中绘制矩形,如图3-1: 图3-1 图3-25、选择“部分选取工具”,选中矩
8、形后,拖动矩形左下角顶点至矩形右下角顶点处,使左下角两个顶点重合,矩形变成三角形,如图3-2:6、选择“选择工具”,移动鼠标指针到三角形的上边线处,鼠标变成箭头下跟圆弧线时,按住鼠标左键向上拖动,使之成为弧形,如图3-3:图3-3 图3-47、使用“部分选取工具”,选中变形后的三角形,通过拖动该图形底部的控制点将图形3-3调整为如图3-4所示的扇形。8、拖动叶片符号,使扇形的顶点与符号编辑工作区的中心点“+”字重合,建立符号中心点。三、 创建风车符号1、建立名为“风车”的图形符号,进入符号编辑工作区。2、使用Ctrl+L组合键打开库面板。弹出如图3-5所示的窗口,从中选取叶片符号,并拖动符号到
9、编辑工作区。如图3-6所示图3-5图3-63、拖动扇形叶片符号使其顶点与风车符号中心点重合。4、执行【窗口】【设计面板】【变形】命令,打开变形面板。4、 选择旋转,在其后输入90度,如图: 3-7图3-76、单击右下角的“复制并应用转换”按纽,复制叶片,绘制出风车图形,如图3-8图3-87、执行【编辑】【全选】命令,将叶片全部选中,然后执行【修改】【组合】命令,将风车组合为一个整体。四、制作旋转动画1、单击场景1,回到工作区中,将风车符号拖到舞台上。2、使用任意变形工具,调节风车符号的大小。3、选择第10帧,按F6插入关键帧。4、回到第一帧,单击属性打开“属性”面板,在补间框中选择“动作”。在
10、旋转下拉列表中选择顺时针。六、 预览动画执行Ctrl+回车, 预览动画效果。七、 保存动画效果。思考与拓展利作本课所学知识制作一个旋转的六角形雪花动画,你会吗?第4课 蝴蝶飞学习任务:制作“蝴蝶在花丛中飞舞”的动画知识要点:让对象沿路径运动 引导层的使用 导入图片作为背景操作步骤:一、 新建文件选择【文件】-【新建】命令新建一个动画文件。二、 导入背景图片1、【文件】【导入】【导入到舞台】,导入一张花朵图片做为背景,调整图片大小、图4-1位置,使之与舞台大小一致。并在图层1第70帧处单击F5插入帧。三、制作蝴蝶飞的电影剪辑符号1、按快捷键Ctrl+F8创建一个名为“蝴蝶飞”的影片剪辑元件。2、
11、执行【文件】【导入】【导入到舞台】命令,导入蝴蝶图片。如图:4-2图4-2选用任意变形工具,蝴蝶图片四周出现8 个小方框,把鼠标放在右下的小方框上,待鼠标变为一个圆形箭头,鼠标轻轻向左一拖,把蝴蝶转个方向,如图4-3:图4-34、移动蝴蝶,使蝴蝶的头部正好在舞台的正中央,右键点时间轴上的第3帧,插入关键帧。5、用任意变形工具,把蝴蝶压扁。如图4-4图4-4四、制作蝴蝶沿路径飞的运动动画1、回到场景一,单击“时间轴”面板中的插入图层按钮 新增一层并改名为“蝴蝶”2、按Ctrl+L快捷键,打开库面板。将蝴蝶元件拖入到舞台中,然后在“蝴蝶”图层中右键单击第70帧,选择插入关键帧(或按F6插入关键帧)
12、,3、添加运动引导层(1)、建立引导层,选中“蝴蝶”图层,选择【插入】-【运动引导线】命令,或者直接单击图层面板左下角第2个图标添加“引导层”按钮。2、单击引导层,在引导层中用铅笔绘制出一条运动线,注意要将“工具”面板下面的图标改为平滑。如图4-5。图4-5五、使蝴蝶沿路线运动1、 为确保蝴蝶的头部是朝向运动路径的,在“蝴蝶”图层中选取第1帧,拖动蝴蝶到路径起点位置,注意这时候“对齐对象”按钮必须处于打开状态,蝴蝶移动为路径起点时会自动吸附到起点处,如下图4-6,同样单击“蝴蝶”图层第70帧,拖动蝴蝶到路径终点并吸附到终点上。如下图4-7图4-6图4-7 2、第1帧和第70帧之间创建“动作”动
13、画,单击第1帧,打开属性面板,设置“补间”为动作,勾选缩放、调整到路径、同步、对齐。3、画制作完成。按“Ctrl+Enter”测试动画,由于引导层在动画输出时是不可见的,所以只看到一蝴蝶在飞。9、测试影片,保存动画。思考与拓展1、再添加一只飞舞的蝴蝶,你会吗?2、如果要让蝴蝶在花朵上停留一会儿,你将如何修改此文档?第5课 太阳、地球、月亮的转动学习任务:利用引导图层制作太阳、地球、月亮的转动。知识要点:创建电影剪辑符号 运动引导层的使用操作步骤:一、新建文档实例场景的大小为600px200px,背景为黑色。二、制作地球符号1 按快捷键Ctrl+F8打开“创建新元件”面板,创建一个名为“地球”的
14、图形元件。单击确定,进入元件编辑状态2、选取椭圆工具,将笔触颜色设为无,填充色设为蓝黑渐变色,在工作区绘制“地球”。注意,球体的中心要和场景的中心(“+”)重叠在一起,这是实现效果的关键之一。三、制作月亮符号1、按快捷键Ctrl+F8打开“创建新元件”面板,创建一个名为“月亮”的图形元件。单击确定,进入元件编辑状态。2、选取椭圆工具,将笔触颜色设为无,填充色设为黄色,在工作区绘制“月亮”。三、 制作月亮围绕地球转动的元件1、 按快捷键Ctrl+F8创建一个名为“地球系”的影片剪辑元件。在“地球系”元件的场景里双击“图层一”层的名字并改名为“地球”层。按快捷键Ctrl+L打开库,把图形元件“地球
15、”拖拽到“地球”层中,接着在第35帧按F5键插入帧。2 单击“时间轴”面板中的插入图层按钮 新增一层并改名为“月亮”。把库中的“月亮”元件拖拽到“月亮”层中,然后在该层的第35帧按F6键插入关键帧,并移动月亮的位置。然后回到该层的第1帧创建补间动画。3、单击“添加运动引导图层”按纽在月亮层上加一个运动引导层。并在引导层的第一帧画一个无填充色的圆。然后使用橡皮工具将该圆擦去一个小缺口,然后单击图层2第一帧,将“月亮”放到引导线的一端,如图:5-1。再单击图层2第35帧,将“月亮”放到引导线的另一端,如图5-2。图5-1 图5-2五、制作地球月亮围绕太阳转动的动画1、回到场景1,选取椭圆工具,将笔
16、触颜色设为无,填充色设为红色,在工作区绘制“太阳。”并在第70帧处按F5插入帧。2、单击“时间轴”面板中的插入图层按钮,新增一层并改名为“地球系”,按快捷键Ctrl+L打开库,把电影剪辑元件“地球系”拖拽到“地球系”层中,接着在第70帧按F6键插入关键帧。并移动地球系的位置。然后回到该层的第1帧创建补间动画。3、单击“添加运动引导图层”按纽在“地球系”层上加一个运动引导层。并在引导层的第一帧画一个无填充色的圆。然后使用橡皮工具将该圆擦去一个小缺口,然后单击图层2第一帧,将“地球系”放到引导线线的一端,如图:5-3。再单击图层2第70帧,将“月亮”放到引导线的另一端,如图5-4。注意:中心点要与
17、引导线对齐。图5-3图5-4六、 测试影片,保存动画。思考与拓展利用引导层制作原子运动动画,两个电子绕原子核做半径不同的圆周运动,其中外层原子运动周期是内层原子运动周期的两倍。第6课 开门动画学习任务:制作两扇门逐渐打开的动画。知识要点:插入背景图片调整元件中心点元件变形操作步骤:一、创建新文档,插入背景图片1、启动FlashMX2004程序,单击“创建空白文档”。2、打开【文件】菜单【导入】【导入到舞台】,打开“导入”对话框,找到相应的图片文件,单击【打开】按钮,图片导入到舞台,调整图片大小,位置。重命名此层为“背景”。在40帧,插入帧(或按F5键)锁定此图层。如图6-1图6-1二、 制作左
18、扇门的动画1、单击时间轴上的“插入图层”按钮,插入一新图层。命名“左扇门”。2、单击“矩形”工具,笔触颜色选择无,填充颜色选择红色,从图片的左上角起,按下鼠标,向右下拖动大约到图片中下部中点。选中此矩形,执行【修改】菜单【转换为元件】命令,打开对话框名称输入“门”,行为选择“图形”,单击“确定”。如图6-2图6-2矩形四周出现蓝线,说明此矩形转换成了元件;单击“任意变形工具”,我们发现矩形四周有8个正方形句柄,中间一个图形中心点,鼠标拖动中心点到左边线中间,然后在40帧插入关键帧,调整此帧矩形形状,单击“任意变形工具”,调整门的倾斜度,把右边线向下拖动,而后,把鼠标放在右线中间柄处,鼠标变成双
19、箭头,向左拖动,使矩形向左缩小宽度成一很窄矩形。选中第一帧,打开“属性”面板,补间栏选择“动作”。如图6-3图6-3三、 制作右扇门动画1、新建一图层命名为“右扇门”2、打开“库”面板,把“门”元件,拖动到图片右半侧,调整大小位置,做两扇门并在一起但不重叠,单击“任意变形工具,”调整中心点到右边线中点。在40帧插入“关键帧”,调整此帧矩形形状,单击“任意变开工具”,调整门的倾斜度,把左边线向下拖动,注意和左扇门倾斜度一致,如图6-4。而后,把鼠标放在左线中间柄处,鼠标变成双箭头,向右拖动,使矩形向右缩小宽度成一很窄矩形。与左扇门矩形等宽。然后在此层第一帧单击打开“属性面板”下拉列表,选择“动作
20、”。如图6-5图6-4图6-5四、 测试影片,保存动画。思考与拓展门打开后,让生日蛋糕放大显示,你如何修改此文档?第7课 翻书动画学习任务:制作翻书动作动画。知识要点:插入背景图片调整元件中心点操作步骤:一、创建新文件创建空白文档,设置文档属性,执行【修改】菜单【文档】命令,打开“文档属性”对话框,设置场景颜色为天蓝色,其他参数保持不变,单击【确定】。如图7-1。图7-1二、绘制书皮1、单击“矩形”工具,笔触选择颜色无,填充颜色选择一种颜色,如紫红色,从场景的左上角起,按下鼠标,向右下拖动,宽度大约到场景的一半,高度大约到场景高度的五分之四。2、单击“任意变形”工具,调整矩形为平行四边形,其右
21、边线下顶点到场景下边线,制作出前书皮(封面)。调整一种填充颜色,同样方法制作出后书皮(封底);使两书皮大小相等,相邻边线对齐。在60帧插入帧(F5键),双击图层名称,命名此图层为 “书皮”,锁定此图层。如图7-2。图7-2三、制作图片翻动动画。(1)、单击时间轴上插入图层图标,双击图层名称,命名此图层为 “翻书”,打开【文件】菜单【导入】【导入到舞台】,打开“导入”对话框,找到相应的图片文件,单击【打开】按钮,图片导入到舞台,调整图片大小,位置。利用“任意变形”工具,使之与后书皮正好重合,把图片中心圆点拖动到右边中心(将来以此为中心轴翻动)。如图7-3图7-3(2)在60帧,插入关键帧(或按F
22、6键),单击“任意变形”工具,选中此图片,拖动右边线句柄到前书皮的左边线,调整其倾斜度,使之与前书皮正好重合。单击此图层第一帧,打开“属性”面板,“补间”栏选择“动作”(因是图片不属于形状)。如图7-4图7-4四、 测试影片,保存动画。思考与拓展1、 假如再添加一个书页翻动,你如何修改此flash文档?2、 如果制作成一本日记(两面都有文字),你如何修改此flash文档?第8课 画卷展开学习任务 作一个画卷展开的动画知识要点 导入图片遮罩的应用 操作步骤一、新建空白文档1、打开fsahMX2004,创建一空白文档,设置舞台尺寸。单击“属性”面板上【大小】右边的“控件按钮”,弹出设置【文档属性】
23、对话框,最上面【尺寸】是用来设定【舞台】大小尺寸的,输入宽度的值:300 px(像素);高度的值不变:500 px(像素),其他项保持不变,单击【确定】。如图8-1图8-1 二、导入背景图片打开【文件】菜单【导入】【导入到舞台】,打开导入对话框找到要导入的文件,单击【打开】,把一画导入到舞台,调整图片的最佳位置及大小。重命名此图层为“画”。如图8-2。图8-2三、 制作画轴元件 1、 执行【插入】菜单创建新元件命令,名称输入“画轴”,行为选择“图形”,单击【确定】按钮,进入元件编辑窗口,单击矩形工具,笔触颜色选择无色,打开“混合器面板”,颜色样式框选择“线性”渐变,在下面的渐变工具栏中、中间设
24、置白色,左右设置为褐黄色。利用矩形工具,在工作区中拖运鼠标,形成中间发亮的画轴。2、 单击“场景1”标签,回到场景,插入一新图层,命名为“遮罩”,利用矩形工具画一比背景画略宽的矩形,在此层60帧插入“关键帧”,调整第一帧,矩形大小高50像素,并置于画的顶端,单击第一帧,在“属性”面板中,补间动作设置为“形状”,右击此层名称栏,在快捷单中执行“遮罩层”命令。如图8-3图8-33、插入上画轴单击“插入图层”按钮,重命名为“上画轴”,然后,打开库面板,把“画轴”元件拖到画卷的顶端,调整位置大小。单击此画轴,复制此画轴(Ctrl+c键),锁定此图层。四、制作下画轴动画插入新图层,并重命名为“下画轴”,
25、按【Ctrl】+【Shift】+【V】对上画轴进行原位置粘贴,然后利用光标键或鼠标拖动把此画轴移动到上画轴的下方。单击第60帧,插入“关键帧”,并把此帧画轴拖动到画卷下方,再单击第一帧,打开“属性”面板,在补间栏选择“动作”。即可创下画轴从上到下的运动。如图8-4图8-4五、测试影片。(Ctrl+回车键)。看画轴画卷展开是否协调,注意调整遮罩矩形的位置大小,直至达到满意效果。然后保存文档。思考与拓展如果让此画轴展开后停止,你如何进行改进?如果让此画轴展开后再卷起来,你会进行设计吗?第9课 遮罩和配音学习任务: 制作一个电影片尾字幕效果动画。(要求:自选一幅合适的图片作背景动画,字幕由下向上运动
26、最后消失,并选择合适的音乐片段给片尾加背景音乐)知识要点: 导入图片作为背景调整图片Alpha值遮罩的使用为动画加入背景音乐操作步骤:一、新建文件1、创建一个背景为白色、宽为400像索、高为300像素的Flash文档。如图9-1图9-1二、插入背景图形1、执行【文件】 【导入】 【导入到舞台】命令或使用快捷键(Ctrl+R键),将外部图片导入到舞台中。调整图片大小,使之与舞台大小一致,作为背景图片、如果所选图片色彩较深的,可以先将其转换成符号,调整其Alpha值,使背景变淡。2、在120帧处单击F5键插入相同的帧,将该层的名称改为“背景”。锁定“背景”图层。如图9-2图9-2三、制作文字动画1
27、、单击插入图层按扭,添加新层,并将其命名为“字幕”。2、在“字幕”层的第一帧中,选择文字工具,设置字体,字号,字色,输入字幕内容,并将文字块置于如图所示的位置(舞台下方)。3、在“字幕“图层的第120帧上按F6键,插入关键帧,并将文字块移动到下图所示的位置(舞台上方)。4、在第一帧处创建运动补间动画。如图9-3图9-3四、设置遮罩效果1、单击时间线上的添加图层按扭,添加图层并命名为“遮罩文字”。2、在“遮罩文字”图层第1帧,选择矩形工具绘制一个无边框有填充颜色的矩形,如图9-4图9-43、在“遮罩文字”图层上单击鼠标右键,在弹出的快键菜单中,选择“遮罩层”命令。五、加入背景音乐先准备好背景音乐
28、1、新添加一层,并命名为“音乐”。2、选择“音乐”层的第一帧,按ctrl+R键,打开导入对话框,在指定位置选择相应的声音文件。3、打开属性面板,在面板的“声音”下拉列表中选择你要使用的声音文件。如图9-5图9-5七、 测试动画通过后,根据需要保存文件。思考与拓展1、 通过测试动画,还有那些不尽人意的地方,如何修改?2、 参考基础知识部分,试着设置动画的暂停和声音的停止。第10课 风吹文字学习任务:风吹文字效果知识要点:将输入文字分离到层 用变形工具对文字进行翻转、倾斜等变形 使用补间动画并用简易值设置运动速度的快慢 改变不同层补间动画的开始帧以形成错位操作步骤:一、 建立新文件,设置背景色为黒
29、色二、 按Ctrl+F8键,新建影片剪辑元件,命名为:风吹字,如图10-1.图10-11、 选择文本工具,然后在属性面板中设置文字字体、字号2、 单击编辑区,产生文本框,输入文字:“望都职教中心欢迎您”,然后再次单击编辑区结束文字的输入。三、 将文字分散到图层1、 因为每个字都要单独做动画,所以必须把每个单独做成一个图形元件,然后分布放在不同的层上。选择文字,然后按Ctrl+B分离成单个字。如图10-2图10-22、 选择【修改】【时间轴】【分离到图层】命令分别将几个字单独放在不同的层上,并且以文字做为层的名字。3、 分别选择每个层的文字,按F8转换成图形元件。然后删除图层1。如图10-3如图
30、10-3(注:文字分散到图层后,最前面的文字会在最上面一层,最后面的文字在最下面一层。四、 对每个单独的字制作变形并运动的补间动画1、 在最上面一层的第20帧处按F6插入关键帧,选择【修改】【变形】【缩放】命令然后用鼠标点住“望”字左边中心的手柄并向右拖动使它在横向压缩直到文字翻转,如图10-4所示:图10-42、 在属性面板的颜色中选择:把这个字移到这一行文字中间上方的位置,然后把Alpha值设置为0%。3、 选择第一帧,在属性面板补间中选择:动作,把简易值设置为-100。(这样这个字在1到20帧之间会由左下向右上方加速移动,在移动的过程中形状不断压缩直到翻转,颜色也逐渐融于背景中,给人一种
31、被风卷走的感觉。)如图10-5图10-5五、 设置不同层的动画开始帧以形成风吹效果1、 对其它层也是一样的操作,因为每个文字开始的时间不一样,所以我们稍稍做些调整。2、 在“ 京”字所在层的第4帧和第24帧分别按F6插入关键帧,在第24帧把“京”字也做压缩翻转及设置Alpha值的处理,并拖到和“望”字一样的位置,设置第3帧为运动渐变,这样“北”字比“京”字晚3帧起动。3、 同样,剩下的层每一层都比上一层晚3帧起动,而文字的终止位置基本相同。最终完成后的时间轴窗口应如图10-6所示。图10-6在具体操作中,我们还应根据实际出现的效果来对文字的终止位置及简易值作出调整,以能够更好地体会到一种被风卷
32、动的感觉。六、 按Ctrl+E返回到场景1,将风吹字元件拖入到舞台。回车测试。思考与拓展结合本课所学内容制作文字的淡入淡出效果。第11课 跳动的小球学习任务:制作一个简单的“小球运动”实例,添加按钮,控制小球的跳动。知识要点 绘图工具的使用方法 渐变填充的设置和调整 创建补间动画的技巧 导入和应用外部的图片 利用公用库添加按钮 给按钮添加stop(),play()命令 测试、保存文档 制作步骤一新建文档设置文档属性1、启动Flash MX 2004,创建一个新空白文档。图11-1 属性 面板2、设置文档属性单击“属性”面板上【大小】右边的“控件按钮”,弹出设置【文档属性】对话框,最上面【尺寸】
33、是用来设定【舞台】大小尺寸的,输入宽度的值:400 px(像素);高度的值不变:400 px(像素),如图11-1所示。 单击【背景颜色】天蓝色,同时可以查看在“十六进制文本框”中显示颜色值为 “#00CCFF” 保持【文档属性】的其它参数不变,单击【确定】按钮,完成文档属性的设置。如图11-2图11-2文档属性对话框 二.创建图形元件1、执行【插入】菜单【新建元件】命令(快捷键 Ctrl+F8),打开【创建新元件】对话框。在【创建新元件】对话框中,输入元件的【名称】为“小球”,【行为】选择【图形】前面的单选按钮,然后单击【确定】按钮,如图11-3所示。图11-3创建小球元件的设置创建元件完成
34、以后,编辑动画的【舞台】已经从“场景1”切换到“小球”图形元件的编辑状态.2、选择【工具】面板上的【椭圆工具】,单击【工具】面板下面“颜色”区域的【笔触颜色】,在弹出的【颜色样本】面板上选择【没有颜色】;再单击【填充颜色】,在弹出的【颜色样本】面板上选择蓝色“#0000FF”,移动鼠标到【舞台】的中间,按住键盘“Shift”键同时按住鼠标左键拖动,绘制出一个随意大小的圆形。3、设置圆形的属性:选择【工具】面板上的【选择工具】,然后单击【舞台】上的“圆形”,打开“属性”面板,在“属性”面板中设置【宽】和【高】都为“66”像素,【X轴】和【Y轴】的坐标都为“-33”,如图11-4所示。图11-4设
35、置圆形的属性改变圆形为渐变填充:保持 “圆形”处于被选中状态,打开【混色器】面板。单击【填充样式】后面的下拉按钮,在弹出菜单中选择【放射状】渐变填充,如图11-5所示。图11-5选择【填充样式】说明:【混色器】面板可以创建并编辑纯色和渐变填充,还可以设置无色和位图的填充。渐变填充有两种方式,【线性】渐变填充是从起始点到终点沿直线逐渐变化的渐变方式;【放射状】渐变填充是从起始点到终点按照环形模式向四周逐渐变化。4、设置渐变填充颜色单击中间【渐变定义栏】的下面“左边”的【渐变指针】,设置【放射状】渐变填充的起始点颜色,也就是圆心中间部位的颜色。在下面的“颜色空间”单击选择一种浅蓝颜色“#939BF
36、D”,如图11-6所示。图11-6调整起始点填充色然后再单击【渐变定义栏】下面“右边”的【颜色指针】,设置【放射状】渐变填充的终点颜色,也就是圆形周围的颜色。在下面的“颜色空间”单击选择一种深蓝颜色“#36027D”,如图11-7所示。图11-7调整终点填充色 图11-8渐变填充的小球完成渐变色填充:颜色设置好以后,因为舞台上的“圆形”处于被选中状态,编辑颜色的同时被选中的“圆形”会自动添加编辑的渐变填充颜色,很像一个小球的形状,如图11-8所示。说明:如果没有事先选中绘制的图形,在【混色器】面板上编辑颜色以后,选择【工具】面板上的【颜料桶工具】,鼠标指针变成“颜料桶”形状,移动鼠标到舞台上单
37、击绘制的形状也可以完成填充,这是填充颜色的另外一种方法。5、调整渐变填充:渐变填充完成以后,“圆形”有了立体感,但是不符合光源的照射规律,我们来调整“圆形”渐变填充的起始位置,使其看起来更接近自然界中的球体。选择【工具】面板上的【填充变形工具】,移动鼠标到舞台上单击“圆形”,“圆形”的中间和周围出现4个【填充变形控制点】,如图11-9所示。图11-9【填充变形工具】选中小球移动鼠标到“圆形”中间的【填充变形控制点】上,鼠标指针变成“十字方向”,按住鼠标左键向左上方拖动,将“高光区”拖放到“圆形”的左上方,如图11-10所示。调整后的效果如图11-11所示。图11-10移动填充变形控制点图11-
38、11调整后的效果三、制作动画1、执行【窗口】【库】命令(快捷建F11),打开【库】面板。在【库】面板中看见我们刚才创建的“小球”图形元件。把 “小球”元件拖放到【舞台】上以后,就直接加到【图层1】的第一帧上,同时第一帧变成【关键帧】。如图11-12所示。图11-12小球第一帧的图层结构2、鼠标双击【图层1】的图层名称处,输入“小球”将【图层1】重新命名为【小球】。单击选中【小球】图层的第20帧,执行【插入】【时间轴】【关键帧】命令(快捷键 F6),在第20帧处插入一个【关键帧】,用同样的方法在【小球】图层的40帧插入一个【关键帧】,效果如图11-13所示。图11-13插入关键帧的图层结构说明:
39、按下F5键可以插入一个【普通帧】;按下F6键可以插入一个【关键帧】;按下F7键可以插入一个【空白关键帧】。单击选中【小球】图层的第20帧,选择 “小球”,按住键盘上的“Shift” 键同时按住鼠标左键拖动“小球”到舞台的正下方。说明:按住“Shift”同时拖动舞台上的元件,可以保持水平或垂直移动元件。也可以45度的角度,向四个斜面方向移动。3、定义动作补间动画:选中【小球】图层的第1帧,打开”属性”面板,在”属性”面板中,单击【补间】后面的下拉按钮,在弹出的菜单中选择【动作】。【小球】图层的第1帧到第20帧之间出现一条浅蓝色背景的带黑色箭头的实线。 这样就实现了第1帧到第20帧的【动作】补间动
40、画。用同样的方法,再实现第20帧到40帧之间的动画,完成后的图层结构如图11-14所示。图11-14定义补间动画的图层结构4、通过测试影片,我们观察到的“小球”是均速的上下运动,现实生活中受地球吸引力的因素,应该是向落下的速度越来越快,弹起以后到上面速度逐步减慢,下面我们来对补间动画属性进行一些设置,使“小球”的运动更符合客观规律。选中【小球】图层的第1帧,打开”属性”面板,在”属性”面板中【简易】的参数文本框中输入“-100”,如图11-15所示。用同样的方法选中【小球】图层的第20帧,在”属性”面板中【简易】的参数文本框中输入“100”。图11-15设置补间动画的【简易】参数说明:在定义补
41、间动画时,通过设置一些相关参数可以使动画效果更丰富,比如上面定义的【简易】参数,可以将运动表现为先慢后快和先快后慢的效果。默认状态下,【简易】参数值为“0”,表示平均速度的运动,更改这个参数值,就可以实现加速运动或者减速运动。当值为正数时,运动为减速运动;当值为负数时,运动为加速运动。5、测试动画:拖动【播放头】到第一帧的位置,再按下键盘的“Enter”键,观察发现“小球”运动效果比较符合客观规律了。四、给动画添加背景单击【时间轴】左边“图层名称”底部的【插入图层】按钮,新建【图层2】。双击【图层2】的图层名称处,输入“背景”将【图层2】重新命名为【背景】。说明:【时间轴】是控制动画的合成和播
42、放的地方,它可以有不同的图层组成,可以把图层看成是堆叠在一起的多张幻灯胶片一样,每个层都包含一个显示在舞台中的不同图像,一层层地向上叠加。层可以帮助组织文档中的插图,可以在层上绘制和编辑对象,而不会影响其它层上的对象。上面的图层可以遮挡住下面图层的内容,当有很多图层时,可以组合出各种复杂的动画效果。 选中【背景】图层的第一帧,执行【文件】【导入】【导入到舞台】命令(快捷键Ctrl+R),弹出【导入】对话框,在【导入】对话框中选择要导入的图片文件“背景.jpg”,然后点击【打开】按钮。单击【打开】按钮以后“背景.jpg”导入到舞台上。调整图片到整个舞台大小。五、添加按钮与脚本1、 添加按纽新建图
43、层,依次打开【窗口】菜单,【其它面板】【公共库】单击【按钮】,打开“库按钮.fla”面板,从中选择“Circle Buttons”文件夹并双击,找到“Play“按钮拖动到舞台上,放到适当的位置,同样操作把“Stop”按钮拖动到舞台上适当位置。2、 对两按钮添加脚本单击选中“Stop”按钮,打开【动作】面板, 依次单击【全局函数】【影片剪辑控制】双击“on”,选择“release”双击,把光标移动在花括号内,打开【时间轴控制】,找到”stop”双击添加停止命令。最后显示命令on(release)stop( ).同样添加“play”脚本。(也可直接在右窗格中输入on(release)play( )
44、.六、 Ctrl+Enter测试和保存动画。思考与拓展小球跳动中再加上小球的影子,你会做吗?第12课 制作“蝶影随行”动画学习任务:制作“蝶影随行”动画。随鼠标的滑动,出现蝴蝶飞舞而渐隐去的动画。知识要点:导入图片利用GIF图片制作“影片剪辑”元件动作脚本应用(stop(), gotoAndplay())按钮元件的制作。操作步骤一、 新建flash文档导入背景图片。单击第一帧,执行【文件】【导入】【导入到舞台】,打开“导入”对话框,找到背景图片文件,单击【打开】按钮,调整图片到整个舞台大小,重命名此图层为“背景”,锁定此图层。如图12-1所示。图12-1二、 制作“蝴蝶飞”影片剪辑元件。1、执
45、行【插入】【新建元件】命令,打开“创建新元件”对话框,名称框中输入“蝴蝶飞”,行为“选择”影片剪辑,单击“确定”按钮。如图12-2所示图12-22、进入元件编辑窗口,执行【文件】菜单【导入】【导入到舞台】命令,找到蝴蝶飞的GIF图片选中,单击“打开”按钮,图片即导入,我们发现时间轴上已有多帧。如图12-3所示。图12-3三、 制作“隐形”按钮1、执行【插入】菜单【新建元件】,打开创建新元件对话框,名称栏输入“图形”,行为选择“按钮”,单击“确定”,进行按钮元件编辑窗口。如图12-4所示。图12-42、在“点击”帧插入关键帧,单击“椭圆”工具,按下【shift】键,以工作区十字心为中心画一正圆。如图12-5所示。
©2010-2024 宁波自信网络信息技术有限公司 版权所有
客服电话:4008-655-100 投诉/维权电话:4009-655-100