1、第二章Flash CS3绘图基础,1,其中:心的颜色为红色,两个心的形状一样,只是又叠放次序不同,模块十六:一箭穿心,学习目标: 学会绘制如下图所示图形:,图层的类型和状态图层的基本操作,第二章Flash CS3绘图基础,2,教学重点,教具,多媒体网络机房,教学方法,任务驱动法、演示法,第二章Flash CS3绘图基础,3,一、图层的类型和状态 图层又称为层,用来组织动画。1、图层的类型(1)普通层 用来放置一些对象,影片播放时显示在舞台上。(2)遮罩层 有遮罩层,就有被遮罩层。遮罩层遮住被遮罩层,遮罩层上的内容在影片播放时并不显示,而被遮罩层上的内容才被显示出来,但并不是被遮罩层上的所有内容
2、在影片播放时都能显示,只有遮罩层遮住的地方才能显示出来。(3)引导层 有引导层,就有被引导层。引导层的内容在影片播放时也不会播放出来,不过将会指引被引导层上的对象沿着引导层的内容运动。具体引导层的操作见下一章。,教学过程,第二章Flash CS3绘图基础,4,2、图层的状态,(1)活动状态:表明此图层牌活动状态,是当前正在操作的图层,(2)隐藏图层:表示此图层处于隐藏状态,即在编辑区是看不见(3)锁定图层:表明此图层处于锁定状态,被锁定的图层无法进行任何操作。(4)外框显示模式: 用于将图层置于外框显示模式下。图层的所有图形只能显示轮廓。(5)删除图层:用于将不用的图层删除。(6)插入图层文件
3、夹:用于插入一个图层的文件夹,将具有一定特征的图层放于一个文件夹下。(7)添加运动引导层:用于添加一个运动引导层。(8)插入图层:用于添加一个图层。单击此图标,则会在当前图层的上方添加一个新图层。,第二章Flash CS3绘图基础,5,二、图标的基本操作1、新建图层 用“插入图层”图标或者“插入”“时间轴” “图层”,就会在当前图层的上方添加一个新图层。2、重命名图层 方法1:双击图层名称,输入名称按Enter键。 方法2: 快捷菜单中选择“属性”,出现“图层属性”对话框,在“名称”中输入名称。 方法3:用“修改” “时间轴” “图层属性”来完成。3、选择图层 单击图层名称选定一个图层;借助C
4、trl键依次单击其它图层,可选定不连续图层;借助Shift键可选定连续图层4、复制图层 用“复制帧”和 “粘贴帧”命令即可。5、改变图层顺序 用鼠标选中某一图层,然后向上或向下拖动到合适的位置即可。6、删除图层 选定图层,单击“删除”图标。,步骤如下:1、启动Flash CS3,新建一个Flash文档;2、选择椭圆工具,设置笔触颜色为黑色,填充颜色为无,按下Shift键不放,在场景中绘制一圆形;3、单击选择工具,把圆形的右边小半部分删除,然后用选择工具,调整图形呈心形的一半;4、按下Alt键不放,拖动复制出另一半心形,“修改” “变形” “水平翻转”,并把两半心拼在一起,调整成心形,选择颜料桶
5、工具,设置填充颜色为红色,填充心形为红色;5、单击选择工具,选中心形,右击选择“复制”,单击“插入图层”图标,插入“图层2”,单击“图层2”的第1帧,在场景中右击鼠标,选择“粘贴”,复制也另一个心形,把心形拖动到合适的位置,使两个心叠放一起,且上边的心向右下移动一点儿;6、插入图层3,单击第1帧,选择线条工具,设置笔触颜色为黑色,绘制一条斜线;7、插入图层4,用线条工具,设置笔触颜色为黑色,绘制一条斜线,方向与第一条斜线相同,只是位置偏左上角,并且用线条绘制出箭头的形状;8、用鼠标拖动图层4到图层1的下方,把第2条斜线置于心形的下面,绘制完成;,第二章Flash CS3绘图基础,6,谢 谢 观
6、 看 !,广平职教中心欢迎您的指导!,第三章简单动画,72,任务一:倒计时 绘制如下所示动画:,本实例以浅黄色为背景,中间数字从5开始倒计时到1,然后显示“开始”。,第三章简单动画,73,任务所涉及知识:,一、时间轴及其显示设置 时间轴主要任务是显示和控制帧。在影片播放时,时间轴上的“播放头” 经过哪帧,影片就显示哪帧的内容。可以根据需要更改帧在时间轴中的显示方式。操作方法:单击时间轴右上角的“帧视图”选项按钮,弹出如图所示:,1、很小、小、标准、中、大:这5种用于调整帧在时间轴中的显示宽度,默认情况下为标准;2、“预览”时场景中的内容以居中方式显示在时间轴的帧中,“关联预览”时场景中的内容以
7、实际位置显示在时间轴的帧中;3、较短:用于减小帧的高度,在预览和关联预览时不可用;4、彩色显示帧:选择此项时,关键帧将显示为黑色实心小圆点,普通帧将显示为灰色等,而不选择此项时,关键帧将显示为蓝色小点,普通帧将显示为白色等;5、位置:其中前四项,用于设定时间轴与舞台的位置关系,“从文档中取消停放”将使时间轴作为一个单独的浮动工具栏出现。,第三章简单动画,74,二、帧的操作1、帧的选择 为了查看和修改帧中的对象,需要帧,方法如下:(1)选任意一个帧,只需单击该帧即可。(2)选所有帧,执行“编辑”“时间轴”“选择所有帧”或者按CtrlAltA快捷键。(3)选多个连续的帧,Shift键即可。(4)选
8、多个不连续的帧,住借助Ctrl键即可。2、帧的操作 制作影片时,需要创建不同类型的帧,方法如下:(1)插入关键帧与空白关键帧 I、插入关键帧:先选中时间轴上的某帧,单击“插入”菜单,选择“时间轴”命令,在级联菜单中选择“关键帧”或者在选中时间轴上的某帧后,直接按F6键,或者右击某帧,在弹出的快捷菜单中,选择“插入关键帧”即可。注意:同时选中多个帧,按F6键,可以在选定的位置中同时插入多个关键帧。 II、插入空白关键帧:在级联菜单中选择“空白关键帧”,或者选中某帧后,直接按F7键,或者右击某帧,在弹出的快捷菜单中选择“插入空白关键帧”即可。(2)插入帧 首先要在关键帧中设置好对象,在关键帧后面选
9、中扩展范围结束的帧,单击“插入”菜单,选择“时间轴”命令,在级联菜单中选择“帧”命令,或者直接按F5键,或者右击帧,在弹出的快捷菜单中选择“插入帧”即可。,第三章简单动画,75,三、逐帧动画原理 又称为帧并帧动画,指的是在影片中的每一帧均是关键帧的动画。 原理是将对象运动分解成若干静态图形,把这些静态图形按照按时对象运动规律的顺序排序在时间轴连续关键帧中,播放时就形成动画。一般用于精细复杂的小动画的制作。逐帧动画的特点是:1、表现形式灵活,几乎可以表现任意想要表现的内容;2、由于每帧都是关键帧,所以形成的文件的体积较大;3、适合于表现细腻、复杂的动画。,完成任务:步骤如下:1、单击“属性”面板
10、上的“背景颜色”按钮,把颜色设置为FFFF66;2、按下工作箱中的“矩形工具”不放,在出现的选项中选择“椭圆工具”,设置笔触颜色为红色,填充颜色为空,笔触高度为5,按下Shift键,在舞台上拖动绘制一个正圆;3、用选择工具选中圆,在“对齐”面板中选中“相对于舞台”,并且依次单击“水平中齐”和“垂直中齐”按钮,使圆位于舞台的正中央(若“对齐”面板没有出现,可以单击“窗口”菜单,选择“对齐”来使“对齐”面板出现);4、单击“线条工具”,笔触颜色和笔触高度均不变,按下Shift键,在舞台下绘制一条长度合适的水平直线,称为直线A,用选择工具选中直线,按下Ctrl键,拖动直线,复制出另一条直线,称为直线
11、B,依此方法,复制直线C,选中直线A,依次单击“对齐”面板中的“左对齐”和“垂直中齐”使直线靠左边居中对齐,依照这种方法使直线B靠右边居中对齐;5、选中直线C,单击“修改”菜单,选择“变形”命令,选择“顺时针旋转90度”,使直线C变成垂直直线,选择直线C,按下Ctrl键不放,拖动复制出另一条直线D,选中直线C,依次单击“对齐”面板中的“上对齐”和“水平中齐”,使直线C靠上居中对齐,依次方法使直线D靠下居中对齐,调整直线长度;,第二章Flash CS3绘图基础,76,第三章简单动画,77,6、单击“文本工具”,在“属性”面板中将字体设置为“黑体”,字号设置为90,文本颜色设置为红色,单击圆形的中
12、心位置,输入5,用选择工具选中“5”,单击“对齐”面板中的“水平中齐”和“垂直中齐”按钮,调整数字“5”的位置到圆形中心区域;7、单击时间轴中第2帧,按F6键,插入关键帧,单击“文本工具”,点击“5”,将“5”改“4“;8、按照8的方法,插入第3、4、5帧,并将数字改成“3”、“2”和“1”;9、单击第6帧,按F6插入关键帧,按CtrlA,将第6帧中所有内容选中,按Delete键,将所有内容删除,选择“文本工具”,在舞台中输入“开始”,选中“开始”,依次单击“对齐”面板中的“水平中齐”和“垂直中齐”,使“开始”位于舞台中央;10、选择“帧视图”按钮,将视图方式改成“预览”可以在时间帧中以缩略图
13、方式看到舞台上的内容;11、保存文件,文件名:倒计时.fla,第三章简单动画,78,任务二:人物跑动 绘制如下所示动画:,本实例以白色为背景,人物做跑动状态。,第三章简单动画,79,任务所涉及知识:,一、洋葱皮工具 在Flash的场景中,只能显示当前帧的内容,有时在编辑制作动画的过程中,需要同时查看多个帧中的对象,以便于给图像定位,这就需要用到洋葱皮工具。 洋葱皮工具主要用辅助图形调整其位置,在逐帧动画中,相邻多个帧间动画差别较小,此工具可以给图形定位,明确看到各个帧中图形之间的差别和位置关系,使物体动作更加流畅。 洋葱皮工具显示多个帧时,可编辑帧中的内容以正常颜色显示,其他帧中的内容在默认条
14、件处不可编辑,以透明的颜色或轮廓线的模式显示。,第三章简单动画,80,为洋葱皮工具的工具按钮,从左到右依次为:,1、绘图纸外观 单击“绘图纸外观”按钮,此时所有标记范围内的帧的内容均显示在场景中,只不过当前帧的内容可编辑,而其它帧中的内容则以透明显示,并不可编辑。再次单击此按钮,则取消洋葱皮工具。2、绘图纸外观轮廓 单击“绘图纸外观轮廓”按钮,只在场景中其它帧中的内容以透明显示且只显示轮廓线,而不是整个帧内容。3、编辑多个帧 单击“编辑多个帧”按钮,则标记范围内的所有帧的内容均显示在场景中,并且不是透明显示,均可以编辑。4、修改绘图纸标记 如果自动给出的绘图纸标记范围不是自己想要的范围,则可以
15、直接拖动时间轴上方标记中间的小圆点,或者单击“修改绘图纸标记”按钮,,完成任务:步骤如下:1、利用选择工具、椭圆工具等绘制第一帧的人物;2、用鼠标单击第2帧,按F6插入一个关键帧;3、单击“洋葱皮工具”中的第一个“绘图纸外观”按钮,使第1帧的内容以透明显示在场景中;4、用选择工具等把第2帧的内容微调,使符合如图3-2中第2个图形内容;5、单击第3帧,按F6插入一个关键帧,依照5的方法绘制第3帧的内容,并依次绘制出其余各帧的内容;6、按Ctrl+Enter预览动画效果;7、保存文档,文件名:人物跑动.fla,第二章Flash CS3绘图基础,81,第三章简单动画,82,任务三:风吹花动 绘制如下
16、所示动画:,本实例以浅蓝色为背景,花柄一截一截向上伸展,到顶端8个花瓣按顺时针逐个展示,展示完毕后,逐个字母展现FLOWER,同时花朵随风左右摆动。,第三章简单动画,83,任务所涉及知识:,一、翻转帧 翻转帧就是将选定一组帧按照相反的顺序排列在时间轴中。比如时间轴中的动画为一个人在从左向右前进,对这组动画执行“翻转帧”后,动画就变成一个人在从右向左倒退运动,类似电影中的后退播放的效果。操作方法如下: 先选定一组帧,其中至少包括2个关键帧,单击“修改”菜单,选择“时间轴”命令,在级联菜单中选择“翻转帧”命令,或者在选定的一组帧上右击,在弹出的快捷菜单中选择“翻转帧”命令即可。,完成任务:步骤如下
17、:1、单击选取线条工具,设置笔触颜色为红色,在场景中绘制一条直线;2、单击选择工具,把鼠标放置在直线的中间偏外的位置,当光标右下角出现圆弧标志时,向左上方拖动鼠标,即把直线变成弧形曲线;3、在第2帧中插入关键帧,用橡皮工具,擦掉曲线的上端一部分,在第3帧插入关键帧,再用橡皮工具擦掉曲线的上端一部分,如此一直到曲线只剩下一点点,假设一直到第15帧;4、单击第1帧,按下Shift键不放,单击第15帧,这时从第1帧到第15帧均被选中,在选中的帧上右击鼠标,在弹出的快捷菜单中选择“翻转帧”,这时各帧内容按创建时的顺序颠倒过来;5、单击第18帧,按F6插入关键帧,在工具箱中,按下矩形工具不放,调出工具选
18、择面板,选择椭圆工具,把笔触颜色设置为无,填充颜色设置为黄色,并在工具栏的属性区中选择对象绘制,在场景中绘制一下椭圆作为一个花瓣;6、选中花瓣,选择任意变形工具,把中心点拖动到图形的中部偏下;7、按Ctrl+T调出变形面板,在旋转后的角度中输入45,即2个圆形间隔45度,单击“复制并应用变形”按钮,单击多次,则按顺时针方向复制出8个花瓣;8、选中这8个花瓣,把其移动到花柄的合适位置,单击第19帧,按F6插入一个关键帧,把最后复制出的一个花瓣删除,第二章Flash CS3绘图基础,84,9、单击第20帧,按F6插入一个关键帧,依次按复制花瓣的逆顺序删除花瓣,直到第25帧,单击第18帧,按下Shi
19、ft键不放,单击第25帧,选中这8帧,在选中的帧上右击,出现的快捷菜单中选择“翻转帧”;10、单击第25帧,把花柄和花瓣全部选中,按Ctrl+G快捷键快捷键,或者单击修改菜单,选中组合命令,将花柄和花瓣组合成一个对象,单击任意变形工具,把中心点移到花柄的最下端,单击第30帧,按F6插入一个关键帧,用任意变形工具把组合对象旋转一个角度,创建25帧到30帧的补间动画,依次多创建几个补间动画,形成风吹花朵左右摆动的形式;11、插入一个图层,将图层名改为“字母”,单击第25帧,按F6插入一个关键帧,用文本工具,并设置字体和字号及颜色,然后在场景中输入“FLOWER”字母,选中字母,按两次Ctrl+B,
20、将字母打散;12、单击图层字母的第26帧,按F6插入一个关键帧,用橡皮工具将字母R的最后一笔删除,依次插入关键帧,并按字母书写的反方向顺序擦除笔画,一直到第41帧;13、选中图层字母的第25帧至41帧,在选中的区域上右击,选中“翻转帧”;14、调整使2个图层的最后一帧对齐;15、按Ctrl+Enter预览动画效果;16、保存文档,文件名:风吹花动.fla,第二章Flash CS3绘图基础,85,第三章简单动画,86,任务四:生日快乐 绘制如下所示动画:,本实例以浅黄色为背景,由红色的生日快乐4个字,逐渐变成一个一个红色的心形。,第三章简单动画,87,任务所涉及知识:,一、形状渐变动画的原理与创
21、建条件 补间是指在动画的起始帧和终止帧之间,Flash自动生成的过渡动画。补间的方式有两种,分别为形状渐变与动画渐变。形状渐变动画就是指对象在两个关键帧之间形状形状发生变化的动画。 正确的形状渐变动画在时间轴中以浅绿色背景的单前头符号表示,而错误的形状渐变动画是以浅绿色背景的虚线表示。形状渐变动画的创建条件:1、起始帧和终止帧中必须包含形状对象,无对象将造成错误的形状渐变。2、起始帧和终止帧中不能包含元件、组合对象、实例、位图或文件等,即选中对象后,被选中的对象应该呈虚点状,而不是用一个浅蓝色的外框包围。3、两个形状必须位于同一图层,不同图层的形状对象不能创建形状渐变动画。一般对于有多个形状渐
22、变的情况,通常是一个图层一个对象渐变,用多个图层来表现多个形状对象的渐变。形状渐变动画除了可以应用于对象的形状变化之间,也可以用于对象的位置、大小、颜色等的变化。,第三章简单动画,88,二、形状渐变动画的创建过程 创建形状渐变动画时,先要创建两个帧,即起始帧和终止帧,在这两帧中绘制好形状对象,然后在这两个关键帧之间就可以创建形状渐变动画了。1、在某一关键帧中绘制形状对象; 2、间隔若干帧,插入一个关键帧,把原来的图形删除掉,重新绘制形状对象;3、右击两个关键帧之间的任一帧,在弹出的快捷菜单中选择“创建补间形状”,或者单击两个关键帧之间的任一帧,在“属性”面板中的“补间”下拉列表框中选择“形状”
23、,在两个关键帧之间出现以浅绿色背景的单箭头,即表示创建形状渐变动画成功;,第三章简单动画,89,三、形状渐变动画的属性面板 在设置形状渐变动画后,“属性”面板如图3-8所示:,1、补间:用于设置或取消对象之间的补间类型,有无、动画和形状三种形式。2、缓动:用于调节对象动画的速度,是速度变化与时间之间的比率。可以通过调整数值进行设置。数值范围在-100到100之间,默认值为0。3、混合:用于调节对象变化过程中的形状平滑度。 有两个选项:分布式和角度分布式:这种方式下,补间动画中的对象在渐变过程中,使图形较为平滑和不规则。角度:这种方式下,补间动画中的对象在渐变过程中,尽量保留物体原来的形状。,完
24、成任务:步骤如下:1、单击“属性”面板中的“背景颜色”,选择浅黄色;2、选择“文本工具”,在“属性”面板中选择字体、设置字号为100、字体颜色为红色,然后单击场景,输入“生日快乐”4个字;3、单击“选择工具”,选择“生日快乐”,按CtrlG快捷键,打开“对齐”面板,单击“相对于舞台”下面的按钮,然后依次单击“对齐”中的“水平中齐”和“垂直中齐”两个按钮,将“生日快乐”这4个字放置于场景中间;4、按Ctrl+B,连续两次,把“生日快乐”打散,变成形状对象;5、单击第30帧,按F6插入关键帧,删除“生日快乐”对象;6、单击“钢笔工具”,选择笔触颜色为红色:7、单击“颜料桶工具”,选择“填充颜色”为
25、红色,给心形填充红色;8、右击第1至第30帧之间的任一帧,选择“创建补间形状”,则在第1帧至第30帧之间自动创建形状补间动画;9、根据自己的需要,可以更改“缓动”值,观察图形变化;10、按Ctrl+Enter预览动画效果;11、保存文档,文件名:生日快乐.fla;,第三章简单动画,90,第三章简单动画,91,任务五:1变2 绘制如下所示动画:,本实例以浅黄色为背景,数字“1”渐变为“2”,要求“1”的上半部分变化为“2”的上半部分,“1”的下半部分变化成“2”的下半部分 。,第三章简单动画,92,任务所涉及知识:,一、添加形状提示 形状提示是辅助图形变形的一种提示。在变形的初始图形上指定一些变
26、形的关键点,在变形结束的图形上指定关键点的变化位置,这样,图形在进行形状渐变的过程中,Flash CS3会根据关键点的位置来自动计算中间变化过程,即过渡效果。 “1”的相应位置变化到“2”的相应位置,操作方法: A、 添加形状提示:在“1”所在帧上单击“修改”菜单,选择“形状”下的“添加形状提示”,这时在场景中出现带一个小圆圈的红色a,同时在“2”所在帧上也同样会出现带圆圈的a,在“1”上用鼠标拖动a到“1”对象的相应(形状边缘位置),同样把“2”中的a也拖动到相应位置(形状边缘位置),按照这种方法依次添加即可。还可以用快捷键Ctrl+Shift+H来添加形状提示。拖动形状提示点到相应位置后,
27、提示点的颜色会由红色变成黄色,表示激活了形状提示点。,第三章简单动画,93,B、删除所有形状提示:单击“修改”菜单,选择“形状”下的“删除所有提示”,即可C、显示或隐藏形状提示:单击“视图”菜单,选择“显示形状提示”或者按快捷键Ctrl+Alt+H即可在显示或隐藏形状提示。 添加形状提示关键点的注意事项:1、只有应用形状渐变后才能使用添加或删除关键点。2、只能在形状渐变动画的起始帧和终止帧中添加形状提示关键点。3、形状提示关键点的顺序为字母小写英文字母,最多可添加26个关键点。4、并非添加的形状提示关键点越多越好,添加太多的形状提示关键点反而会使形状渐变进变得非常复杂。,完成任务:步骤如下:1
28、、新建一个Flash文档,并设置场景颜色为浅黄色;2、单击“文本工具”,设置字号为100,字体为“方正姚体”,颜色设置为红色,在场景中输入“1”;3、按Ctrl+K快捷键,打开对齐面板,依次单击“相对于舞台”下面的按钮、“对齐”中的“水平中齐”和“垂直中齐”两个按钮,使形状对象位置场景中间,并按Ctrl+B,把“1”打散;4、单击第30帧,按F6插入一个关键帧,把“1”删除,单击“文本工具”,设置与“1”相同的字体、字号和颜色,在场景中单击,并输入“2”;5、按“1”对齐方法,把“2”置于场景的中间,并按Ctrl+B快捷键,把“2”打散;6、单击第1帧至第30帧之间的任一帧,在“属性”面板中“
29、补间”中选择“形状”,创建形状补间动画;7、单击第1帧,按Ctrl+Shift+H快捷键,添加一个形状提示关键点a,并把a点拖动到“1”的如图3-11所示的位置;8、单击第30帧,把形状提示关键点a拖动到如图3-11中“2”所示的位置,这时可以看到a点已经由红色变成了黄色;9、重复8步骤,添加各个形状提示关键点;10、按Ctrl+Enter预览动画效果;11、保存文档,文件名:1变2.fla;,第三章简单动画,94,第三章简单动画,95,任务五:小球撞墙 绘制如下所示动画:,本实例以白色为背景,有一小球在地面上自左端开始向右滚动2周撞墙,先快后慢,撞墙后,反方向滚动2周到比原来近的位置,也是先
30、快后慢。,第三章简单动画,96,任务所涉及知识:,一、动画渐变原理和创建条件 动画渐变的主要功能是计算元件实例从一个地方到另一个地方位置之间的过渡部分。除此之外,动画渐变还可以在元件实例的大小和颜色方面创建过渡动画,在实例运动的过程中,可以根据需要使实例旋转。 动画渐变动画是补间动画的一种。通过为对象创建动画渐变,可以改变对象的位置、大小、旋转或倾斜,做出物体运动的各种效果。通过设置实例的颜色属性,还可以制作出丰富的渐变效果。 要正确使用动画渐变需要满足下面的几个条件:1、动画渐变只能作用于整体对象,即选择后周围会以浅蓝色为边框圈起来的对象,而不能是以虚点形式显示的对象,整体对象可以是元件实例
31、、组合对象、位置或者文本对象等。2、动画渐变中的对象只能是一对一的渐变,而不能是一对多、多对一或多对多的渐变。3、动画渐变的对象在同一图层。,第三章简单动画,97,二、动画渐变类型 动画渐变动画共有4种类型,其中包括位置的移动、大小的变化、旋转和颜色的变化。这4种基本渐变类型中,元件实例尺寸的变化、角度的变化和颜色的变化又可以演变出大量形式多样的渐变效果。如等比尺寸变化、不规则变化、顺时针或逆时针旋转、亮度、色调或Alpha值之间的变化等,其中整体对象的Alpha值的变化应用较多。,三、创建动画渐变动画 首先需要定义一个关键帧,在其中调整好元件的位置与属性,作为动画渐变的起始帧。 接着在同一图
32、层中建立另一个关键,调整好元件的与属性,作为动画渐变的终止帧,这样就可以在两个关键帧之间创建动画渐变动画了。 操作方法:创建好两个关键帧后,右击中间的任一帧,在出现的快捷菜单中,选择“创建补间动画”,或者选择其中的任一帧后,在“属性”面板中的“补间”中选择“动画”即可。,第三章简单动画,98,创建动画渐变动画后的“属性”面板如图所示:,1、缩放:用于决定元件实例变化过程中,是否使元件实例的尺寸发生变化。在制作有尺寸变化的动画效果时使用。2、旋转:用于设置元件实例的旋转角度。3、调整到路径:在引导层动画中用于使元件实例沿引导线运动。4、同步:用于设置元件实例的同步性。5、对齐:使元件实例自动吸附
33、到引导线上,完成任务:步骤如下:1、新建一个Flash文档,并设置场景颜色为白色;2、将“图层1”更名为“背景”,单击“线条工具”,将笔触颜色设置为黑色,笔触高度设置为1,按下Shift键不放,在“背景”图层上绘制一水平直线,再绘制一垂直线,与水平直线交叉,作为地面和墙壁;3、从水平直线向左下拖动绘制一条小斜线,绘制多条这样的小斜线,增加地面效果,同样,绘制墙壁的小斜线4、单击第30帧,按F5插入一个帧;5、单击时间轴上的左侧图层名称下面的“插入图层”按钮,插入一个新图层,并更名为“小球”,作为小球撞墙的图层;6、按Ctrl+F8快捷键或者单击“插入”菜单,选择“新建元件”命令,在出现的“创建
34、新元件”对话框中,名称输入“球”,类型选择“图形”,单击“确定”,进行元件编辑状态;7、在元件编辑状态,选择“椭圆工具”,笔触颜色选择无,按下Shift键不放,拖动绘制一个圆,选中这个圆,在“颜色”面板(如果“颜色”面板没有出现,可以按Shift+F8快捷键来调出此面板)中,单击“填充颜色”,在类型中选择“放射状”,把横向颜色滑动块的左端调整为黑色,右端调整为白色,单击“颜料桶工具”,在圆的中间偏左的位置单击填充,,第三章简单动画,99,8、选中圆,按Ctrl+K,调出对齐面板,依次按“相对于舞台”下面的按钮、“对齐”中的“水平中齐”和“垂直中齐”两个按钮,使小球位于中心;9、单击时间轴下方的
35、“场景1”,回到场景1,在“库”面板(如果“库”面板没有出现,则按CtrlL即可调出此面板)中,把“球”元件拖动到图层“球”的第1帧,形成元件实例,并调整元件的位置,使小球与地面刚好接触并位于画面左端;10、单击“球”图层的第15帧,按F6插入一个关键帧,把元件实例拖动到刚好与墙接触,单击第30帧,按F6插入一个关键帧,把元件实例往左拖动一些,但不到原来的位置;11、单击第1至第15帧之间的任一帧,在“属性”面板中的“补间”中选择“动画”,即创建动画渐变补间动画,同时在“属性”面板中的旋转中选择“顺时针”,把后面的数字改为2,即旋转2圈,同时把“缓动”值改为50,即先快后慢;12、单击第15至
36、第30帧之间的任一帧,在“属性”面板中的“补间”中选择“动画”,“旋转”选择“逆时针”,把数值改为2,同时把“缓动”值改为-50;13、按Ctrl+Enter预览动画效果;14、保存文档,文件名:小球撞墙.fla;,第三章简单动画,100,第四章复杂动画,101,任务一:展开的卷轴 绘制如下所示动画:,本实例以卷轴开展方式显示一幅山水名画。首先清晰显示山水画全貌,然后渐渐模糊,接着山水画以卷轴展开的方式从左向右展开,直至全部展开。如图按1234的顺序。,第四章复杂动画,102,任务所涉及知识:,一、遮罩层动画的概念及作用 遮罩层动画至少有两个图层,上层为“遮罩层”,下层为“被遮罩层”,遮罩层上
37、的图形在Flash动画播放过程中不显示,而两个图层重叠的部分才能显示。也就是说在遮罩层中有对象的地方就是“透明”的,可以看到被遮罩层中的对象,而没有对象的地方就是不透明的,被遮罩层中相应位置的对象是看不见的。 “遮罩”主要有2种用途,一个作用是用在整个场景或一个特定区域,使场景外的对象或特定区域外的对象不可见,另一个作用是用来遮罩住某一元件的一部分,从而实现一些特殊的效果。,第四章复杂动画,103,二、遮罩层动画的创建 创建遮罩层动画至少需要两个图层,在一个图层上创建要显示的对象,作为被遮罩层,插入一个图层,并使此图层在原来的图层的上面,作为遮罩层,在其上绘制对象,即只能透过此对象区域的部分,
38、被遮罩层上的对象才能显示出现,右击上面的图层,在快捷菜单中选择“遮罩层”,这时图层显示如图所示:,如图所示的图层1称为“被遮罩层”,图层2称为“遮罩层”,在把图层2设置为遮罩层后,图层的形状变化如图所示,同时会自动锁定这两个图层。 也可以通过另一种方法来设置:右击图层2,在快捷菜单中选择“属性”,在出现的“图层属性”对话框中的“类型”中选择“遮罩层”,右击图层1,在快捷菜单中选择“属性”,在出现的“图层属性”对话框中的“类型”中选择“被遮罩”即可。 也可以单击“修改”菜单中的“时间轴”,在出现的级联菜单中选择“图层属性”,出现“图层属性”对话框,选择“类型”中的相应项即可。,完成任务:步骤如下
39、:1、启动Flash CS3,单击Flash文件(ActionScript2.0),新建一个Flash文档; 2、单击“文件”菜单,选择“导入”中的“导入到库”命令,选择一张山水画导入到库;3、把山水画从库中拖动到场景中,右击山水画,在快捷菜单中选择“转换为元件”,在出现的“转换为元件”对话框中,名称输入“山水画”,类型为“影片剪辑”;4、单击山水画之外,在“属性”面板中,单击“大小”按钮,在出现的“文档属性”对话框中的“匹配”选择“内容”,使场景大小与山水画大小一致;5、单击图层1的第30帧,按F6插入关键帧,单击元件“山水画”,在“属性”面板中“颜色”中选择“Alpha”,并把值修改为60
40、%;6、单击图层1的第1至第30帧之间的任一帧,在“属性”面板的“补间”选择“动画”,创建一个动画补间动画,单击第100帧,按F5插入一个帧;7、单击“插入图层”按钮,插入图层2,在图层2的第30帧单击,按F6插入一个关键帧,从库中把“山水画”影片剪辑元件拖动到场景中,选中“山水画”,单击“修改”菜单,单击“变形”命令下的“缩放和旋转”,在“缩放和旋转”对话框中,把“缩放”修改为80,即把元件变为原来的80%,单击“确定”;,第四章复杂动画,104,8、按Ctrl+K,调出对齐面板,依次单击“相对于舞台”、“对齐”中的“水平中齐”、“垂直中齐”,把修改后的元件置于舞台中央;9、单击第100帧,
41、按F5插入帧,这是展开时的原始画面;10、插入一个新图层,名称为图层3,单击第30帧,按F6插入一个关键帧,选择“矩形工具”,笔触颜色和填充颜色任意,但填充颜色不能为无,绘制一个与图层2中的元件大小完全一样的矩形,并把矩形移至右侧刚好与图层2中的元件的左侧紧接;11、单击图层3的第100帧,按F6插入一个关键帧,把矩形移至与图层2的元件完全重叠,单击第30帧至100帧之间的任一帧,在属性面板中“补间”选择“形状”,作为遮罩层的动画;12、右击图层3,在快捷菜单中选择“遮罩层”,则图层3变为遮罩层,图层2变为被遮罩层,到此已经具有画面展开有效果了,下面制作卷轴展开;13、按Ctrl+F8,创建一
42、个新元件,名称为:卷轴,类型为:图形,单击“确定”,进入元件编辑状态;14、选择“矩形工具”,笔触颜色为无,在“颜色”面板中单击“填充颜色”按钮,在“类型”中选择“线性”,在水平颜色滑动条的中间单击添加颜色铅笔,单击左端的铅笔,利用垂直颜色渐变条把颜色设置为白色(R:255,G:255,B:255),依次把中间和右端的铅笔的颜色设置为灰色(R:128,G:128,B:128)和白色(R:255,G:255,B:255),在舞台绘制宽为26,高度与图层2中“山水画”元件实例的高度相同的矩形,并把矩形通过“对齐”面板调整到舞台的中央,单击“场景一”回到场景一的编辑状态;,第四章复杂动画,105,1
43、5、添加两个新图层,名称为图层4和图层5,在分别单击图层4和图层5的第30帧,按F6插入一个关键帧,在图层5上,拖动库中的“卷轴”元件到场景中,并把位置调整到与图层2中“山水画”元件实例中的左侧与“卷轴”元件实例的左侧对齐,高度完全重合;16、单击图层4的第30帧,把库中的“山水画”元件拖动到场景,并修改为原始大小的80%,右侧与图层5中的“卷轴”元件实例的右侧对齐,高度与之完全重合,即此时的“山水画”元件实例与图层2中的“山水画”元件实例有“卷轴”元件实例宽度的重叠;17、单击图层5的第100帧,按F6插入一个关键帧,把“卷轴”元件实例位置调整为左侧与图层2中的元件实例的右侧对齐,高低位置不
44、变,单击第30帧至第100帧之间的任一帧,在“属性”面板的“补间”中选择“动画”;18、单击图层4的第100帧,按F6插入一个关键帧,把“山水画”元件实例位置调整为左侧与图层5中的“卷轴”元件实例的左侧对齐,高低位置不变,单击第30100帧之间的任一帧,在“属性”面板的“补间”中选择“动画”;19、右击图层5,在快捷菜单中选择“遮罩层”;20、添加一个新图层,名称为图层6,单击图层5的第30帧,按下Shift键不放,单击第100帧,即选中这71帧,在选中的某一帧上右击,在快捷菜单中,选择“复制帧”,右击图层6的第30帧,在快捷菜单中选择“粘贴帧”,单击图层6的第30帧,选中“卷轴”元件实例,在
45、“属性”面板中的“颜色”中选择“Alpha”,并把值设置为60,同样,把第100的元件实例的也设置为Alpha值为60;,第四章复杂动画,106,第四章复杂动画,107,任务二:地球绕着太阳转 绘制如下所示动画:,本实例以红色圆表示太阳,以蓝色圆表示地球,地球围着太阳转,同时地球在自转。,第四章复杂动画,108,任务所涉及知识:,一、引导层动画原理 引导层是Flash中起辅助其它图层对象的运动或定位作用的图层,把在引导层中绘制的线条作为被引导层中对象动画补间时的运动轨道。在动画播放时引导层中的对象不显示。 引导层中的图案可以创建的网格、绘制的图形、对象等,以帮助对齐其他对象,或者是不封闭的线条
46、以引导被引导层对象运动,这种线条称为引导线。 引导层分为普通引导层和运动引导层。 普通引导层起静态辅助定位,可以在绘画时帮助对齐对象,以表示。 运动引导层,用以控制动画补间动画时对象的移动情况。以表示。,引导层的特点:1.引导层必须是打散的图形。 2.被引导的层在引导层的下面,并且缩进。3.图片吸附到引导线时一定要准,位置不准确一定不行,可打开吸附作用二、引导层动画制作 1、创建引导层动画的操作步骤: (1)选择要为其建立运动引导层的层。 (2)单击时间轴窗口左下角的“添加运动引导层按钮,第四章复杂动画,109,2、添加和取消引导层的方法(1)要将其他图层同运动引导层建立连接,可执行以下操作之
47、一 A、将运动引导层建立连接的常规图层拖动到运动引导层的正下方 B、用“修改”|“时间轴”|“图层属性”命令,弹出“图层属性”对话框,选中“类型”选项组中的“被引导”单选按钮。 C、右击运动引导层下面选择一个图层,在弹出的快捷菜单中同上命令完成。(2)要取消同运动引导层的连接关系,可按下列步骤进行操作 选择要取消同运动引导层的连接关系的图层。 执行以下操作之一 A、将所选图层拖动到运动引导层的上面或其他常规图层的下面。 B、在“图层属性”对话框中选中“类型”选项组中的“一般”单选按钮作为图层类型。,第四章复杂动画,110,完成任务:步骤如下:1、新建一个Flash文档,并设置场景颜色为白色;2
48、、将“图层1”修改为“太阳”,选择“椭圆工具”,填充颜色设置为红色,笔触颜色选择无,按下Shift键不放,在舞台上绘制一个圆形;3、单击“选择工具”,选中红色圆形,按Ctrl+K打开对齐面板,依次按“相对于舞台”下面的按钮、“对齐”中的“水平中齐”和“垂直中齐”两个按钮,使“太阳”位于舞台的正中间,单击第30帧,按F5插入一个帧;4、单击“插入图层”按钮,插入一个新图层,名称修改为“地球”,按Ctrl+F8快捷键,插入一个元件,名称为“地球”,类型为“图形”,单击“确定”,进入元件编辑界面;5、单击“椭圆工具”填充颜色设置为蓝色,笔触颜色选择无,按下Shift键不放,在舞台上绘制一个圆形,单击“刷子工具”,填充颜色为白色,“刷子大小”选成中等即可,“刷子形状”选成圆形,在蓝色圆形的中间偏左的位置单击;6、单击“选择工具”,选中蓝色圆形,在“对齐面板”中依次按“相对于舞台”下面的按钮、“对齐”中的“水平中齐”和“垂直中齐”两个按钮,使对象位于正中心,回到场景1;7、单击“地球”图层的第1帧,从库中把“地球”元件拖到舞台中;,