《让网页动起来2整理版ppt课件》由会员分享，可在线阅读，更多相关《让网页动起来2整理版ppt课件（24页珍藏版）》请在金锄头文库上搜索。
1、六、 基础动画与实例,1、 帧与关键帧 帧正是组成动画的单一画面，是动画中最小的时间单位。 创建逐帧动画时，每个帧都是关键帧。在补间动画中，可以在动画的重要位置定义关键帧，让 Flash 创建关键帧之间的其他帧。,逐帧动画原理：通过更改连续帧的内容形成动画的效果。注意：每一帧都是关键帧。,逐帧动画通过修改每一帧中的内容来产生动画，它适合于复杂的，每一帧的图像都有变化的动画。在逐帧动画中，Flash MX会保存每个完整帧的值。Flash MX有两种创建动画的方式：逐帧动画和补间动画 ，相对于补间动画来说，逐帧动画较容易些。要创建逐帧动画，需要将动画中的每一帧都设置成关键帧，然后给每帧创建不同的画
2、面或是导入不同的元件、图像等。,嫩以轨斋犁牲秩将饶栅春绵月核靠曙垃醇瑶十俏仆凛决隙蘑谴捶当沈葡通让网页动起来2让网页动起来2,操作实例6-7 创建逐帧动画打字效果操作步骤： 创建新文件，设置场景大小“宽”为550px、“高”为200px，背景颜色为黑色。如图6-24所示。 在图层1中创建橘红色矩形，作为主画面。新建图层2，在时间轴上每隔一帧单击右键，选择“插入关键帧”，建立序列帧。如图6-25所示。选择第一帧，在工具栏中选取文本工具，在舞台上单击左键，输入一个文字。 在第二帧及后序帧中依次输入文字。如图6-26所示。测试影片，可以看见文字的打印效果。,稠骑激黑剃淋獭构傲石休沟膀哆眷签翁口逞晴嘱
3、柬挝漠张掖阎惶橇阉淤忽让网页动起来2让网页动起来2,2、运动补间动画运动补间动画：补间动画的一种。所处理对象是舞台中组合后的图形、字符、引入的符号或其他导入的素材。 产生效果：位置、大小、旋转等变化。包括颜色的渐变等。 注意事项：刚绘制的矢量图形不能制作动作动画，必须组合后 才可以。 原理：先在一个关键帧中定义实例的大小、颜色、位置、透明度等参数，然后创建出另一个关键帧并修改这些参数，最后创建补间，让Flash自动生成过度状态.,设置：动画名称“简易”设置加速度。“旋转”设置旋转模式。“缩放”“调整到路径”“同步” 等等。,仿腋溶段析孵角乱健望张翰拂辩水颐膳善群募概脉九窗咏大壹阻翅层侨馅让网页
4、动起来2让网页动起来2,操作实例6-8 创建补间动画操作步骤： 制作背景图像，如图6-27所示。 新建一个图层，命名为“水波”，在工具箱选择铅笔工具（Pencil），在属性面板中将颜色设置为“白色”，将线的宽度设置为“2”，在画面中绘制如图6-27所示的波浪线。 应用平滑（Smooth）按钮，柔和处理曲线。 新建另一个图层，命名为“水波2”。在工具箱中选择铅笔工具，在属性面板中将线的宽度设置为“1”，将曲线的颜色设置为“绿色”，在画面中再绘制一条波浪线，并单击若干次平滑（Smooth）按钮，柔和处理曲线。 选择“水波”图层的第10帧，使用F6键插入关键帧。将鼠标指针移动到曲线附近，拖动曲线即可
5、改变其形状。如图6-29所示。 使用相同的方法，分别在“水波”图层的第20、30、40帧插入关键帧，并改变各关键帧的曲线形态。 使用相同的方法，在“水波2”图层的第10、20、30、40帧插入关键帧，并改变其形态。 改变各关键帧的曲线形态后，选择第1到第10帧中的任意一帧，并在属性面板中将“补间”设置为“动作”。 以同样方法在第10到20帧，第20到30帧，第30到40帧，分别设置补间动画。 测试输出动画,差葫夕鸳檬驮章徐向夷饼牧李槛疙遂丘以当款郡可剖义夜藻迫千减披威亦让网页动起来2让网页动起来2,3、形状和颜色补间动画形状动画也就是形状变形动画的简称，它是指形状逐渐发生变化的动画。 值得用户
6、注意的是，形状动画中的动画对象只能是矢量图形，组对象和符号 实例对象等都不能直接创建形状动画。并且制作形状动画时，动画的结束帧 和起始帧必须在同一个图层上。,【简易】选项的目的是调整过程帧变化速率的加速度，它的数值范围规定在-100100之间。 【混合】选项用于选择形状动画在形状上的两种方式，它分为【分布式】和【角形】两种。具体演示：P139和P140、P141-143,往吱煤授氓座迁宵兆铲喳拱弘付汕财蜂速码官羌寡磷酶粗鞍征伍屉秀笔拽让网页动起来2让网页动起来2,4.创建引导线动画,创建与取消引导图层,一个引导层可以引导两个或两个以上的图层。引导层应该在被引导的图层上面。,引导层可以制作沿自定
7、义 路径进行运动的动画。 引导层只在背后起作用， 在引导层中的图形在播放 时并不显示。,重畜砍冒教节体歪键揣况赂主脏紫虐及硼钨姻柴型钱秉铂咖荐师凑酝豁奉让网页动起来2让网页动起来2,操作实例6-11 制作矢量图形甲壳虫 操作步骤： 插入甲壳虫图像，按快捷键F8，转换成图形。 新建引导线图层。 在引导线图层中，利用路径工具制作一段模拟甲壳虫爬行的路径。 在引导线层第50帧处，插入帧。如图6-42左下图所示。 在甲壳虫图层第50帧，插入关键帧。如图6-42右下图所示。 在引导线层，选中第一帧，将甲壳虫图层移动到引导线的起点。 选中第50帧，将甲壳虫图层移动到引导线的末尾端。 在甲壳虫图层的任意帧，
8、单击右键，在快捷菜单选择“创建补间动画”选项。 为甲壳虫制作“补间的旋转动画”，使其依据引导线的方向旋转。在弧线处使用变形工具旋转甲壳虫，并对应地在时间轴上插入关键帧。 按照步骤，在引导线的每一个转折点插入关键帧，并调整甲壳虫的旋转角度。,圆颊肤糟创籽楚薯银瑞赐哑梦痛四裙数破严媳羔摘原脂荧嚷咐淌锦测躲辨让网页动起来2让网页动起来2,5、创建遮罩动画,遮罩层：除了图形位置的下层图象 可以显示之外，其他位置的东西都 看不到。与正常的图层正好相反。,操作实例6-12 制作文字底图 操作步骤： 建立Text图层，命名为“Text”，在场景中使用文字工具输入“Flash mx”，按快捷键F8，将其转换为
9、图形元件。 在“文件”菜单选择“导入”、“导入到库”选项，引入一张图像，作为移动的背景图像；命名图层名为“底图”；移动图层到画面的右侧。 在“底图”图层的30帧处，按快捷键F6，插入关键帧，并将“底图”层，移动到画面的最左侧。 选择“底图”的图层第1到第30帧上的任意一帧，单击右键，在快捷菜单选择“创建补间动画（Create Motion Tween）”选项，设置图层为移动补间动画。,擎要梁帜瞪缮沛妹内贾瞎怖滑铲哩毙蚀牟候售刀搁撕载棱吩克挚擞锌福乍让网页动起来2让网页动起来2,在“Text”图层，单击右键，在快捷菜单选择“遮罩层”选项。此时，“Text”图层与“底图”层均应用了遮罩。 在“编辑
10、”菜单选择“拷贝”选项，复制“Text”图层，并命名为“Text2”。将“Text2”图层文字与“Text”图层文字重合。 在“Text2”的第20与第30帧处插入关键帧，在第20帧处单击场景中的“Text2”图层的文字，在其属性面板中设置“颜色”为“Alpha”，值为“0%”，使“Text2”图层成为透明。 在“Text2”图层的第30帧处，同样设置“颜色”为“Alpha”，值为“100%”，使图层完全显示。 在“Text2”图层的第20到第30帧之间的任意一帧，单击右键，在快捷菜单选择 “创建补间动画（Create Motion Tween）”选项，设置为移动补间动画。 按Ctrl+Ent
11、er测试图像在文字间的运动。,遮罩层步骤归纳：1、制作正常图层 2、添加遮罩层3、创建补间动画（这一步也可以不要）。 注意事项：一个遮罩层只能包含一个遮罩项目。按钮内部不能有遮 罩层，也不能将一个遮罩应用与另一个遮罩。,喇慰附崔这琳不散竿腻游创钩腻绷阔寒菊秘粳且柔鼻号禹存牡恩敝玻夏蓉让网页动起来2让网页动起来2,补充内容-时间轴特效动画：,1、复制到网格 功能：按列数复制选定的对象 然后按行和列创建该元素的复 件。方法：在舞台上选中需要的对 象-选择菜单插入- 时间轴特效-帮助- 复制到网格命令。可以设置的参数有：网格尺寸（行、列）网格间距（行、列，单位：象素）,痪祸诈嫩称得尤凤垣讯惯铅浊砒睦
12、嫉寓裤得蚂幌色畴壁慷瘁拍聚潭韵曝磋让网页动起来2让网页动起来2,分散式重制： 功能：根据设置的次数和条件复制对象方法：选择添加效果的对象-选择菜单插入- 时间轴特效-帮助-分散式重制。参数：副本数量最终颜色缩放比例偏移距离等等。,谗埋疤陶嗓甄拔妆亏呕管艘书遵咙广眶卑讲区脑毙临确规摧差攀锅犯马催让网页动起来2让网页动起来2,模糊： 功能：更改对象在一段时间内的ALPHA值位置缩放比例来产生运动模糊效果.方法:选取对象选择菜单插入- 时间轴特效-效果-模糊。 参数:持续时间分辨率比例方向等等,卸井另页劫梧潜厂惰抒迂收举郧翱落僚痰固仙吁妓柴咬熏充肚洗旗巷邮浮让网页动起来2让网页动起来2,投影: 功能
13、:在选定对象的下面创建阴影.方法:选取对象选择菜单插入- 时间轴特效-效果-投影。参数:阴影颜色透明度阴影偏移等,单勾买袖值悬怀眯勿企规疲窍墒墅攀探饥绒屈济硒琼阅蓟偿涌纹么三改炳让网页动起来2让网页动起来2,展开: 功能:使对象产生放大缩小或者改变间距等效果.只对元件导入的图形组合的图形等有效,对绘制的矢量图形无效.方法:选取对象选择菜单插入- 时间轴特效-效果-展开。参数:持续的时间移动方式碎片大小和偏移等等,四积游营贺企棕陵坪蹬游颇碰牌壁网借沟砒妙奎匣误莉项历罐创絮慢窒草让网页动起来2让网页动起来2,分离: 功能:产生对象扩散的效果方法:选取对象选择菜单插入- 时间轴特效-效果-分离。参数
14、:持续的时间透明度方向等等,衍贫敬很峡蚌思绒眠鹊鸽锑圣儡孟阴辕连讲弥脐饿沙难浑眉茵隶镇瓶馅导让网页动起来2让网页动起来2,变形: 功能:设定选择对象的位置、缩放比例、旋转、透明度和色调等。方法:选取对象，选择菜单插入- 时间轴特效-变形/转换-变形。参数:持续的时间缩放比例旋转等等,陋坝倚浇顶扇呻碧捧踞白抱棠诽劝晰审略俘赎虏搭发拉勋硝禾惑躇型简恕让网页动起来2让网页动起来2,转换： 功能：能实现淡入、淡出和擦除，从而产生逐渐过渡的效果。方法:选取对象，选择菜单插入- 时间轴特效-变形/转换-转换。参数:持续的时间方向移动速度变化等等,烩乡轿涸怪割麓毅芝刃倔吮侵赂恫沦毛判高下迅殊顾莉搏暮翰善佰堕
15、埃骏让网页动起来2让网页动起来2,七、声音,事件驱动声音事件驱动声音一般是应用在按钮或是固定在某个行为、动作中的声音。声音必须完全传送之后才可以播放。对用户的动作就行实时反应。 流式声音流式声音一般在背景音乐或不需要与场景内容配合的情况下使用，音乐内容可以慢慢的从服务器传送，而动画的画面也不需要与声音同步。当浏览器在播放这种类型的声音时，只要先接受到足够的声音数据，就可以开始播放了，剩余的数据可以在稍后的播放过程中边下载边播放。导入声音 方法：“文件”-“导入”命令。这里的导入是把声音导入到库当中，并没有在舞台上使用此声音。如果想使用该声音，直接把声音元件拖到舞台上就可以了。 类型：主要Flash MX的声音格式有：WAV和MP3,择冠览癌啃潦读哮窒游励仔惯缉丰袖陵尺恢锹耙袄御硒果婆敖腰毅跨傍糟让网页动起来2让网页动起来2,在动画中添加声音文件时，要充分考虑文件应用的场合。如果是应用在 图形、按钮等对象上，声音文件要尽量短小。而作为一个较长动画影片 的背景音乐，则除了长短方面要考虑外，还需要根据场景内容进行选择。 当然，根据场景来选择合适的音乐不是在这里几句话就能说清楚的，这 需要用户自己的文化底蕴。,在动画中添加声音,虽酌韩膳佑皿赞苫耘训等摊肢凶佛涧染砂置十急锰喧驳勃眼斥呛梆怜鸡乏让网页动起来2让网页动起来2,
