网页设计ppt课件.ppt

1 第8章FlashCS5基础知识 2 8 1FlashCS5概述Flash是目前非常流行的二维动画制作软件之一 它能将矢量图 位图 音频 动画和深层的交互动作有机地结合在一起 创建出美观 新奇 交互性强的动画 FlashCS5是Adobe公司在2011年5月发布的Flash版本 相比之前的版本 FlashCS5制作动画的效率更高 界面设计也更人性化 8 1 1Flash动画技术的特点与其他动画技术相比 Flash动画技术的特点主要集中在以下几个方面 1 使用矢量技术 2 支持流媒体技术 3 强大的交互性 4 使用方便 得到平台广泛支持 5 普及性强 制作成本低 3 8 1 2Flash动画的应用一般来说 Flash主要有以下用途 1 制作网站动态元素 甚至整个网站 2 开发交互性游戏 3 设计多媒体教学课件 4 制作电子贺卡等多媒体动画 5 开发手机应用程序 4 8 1 3FlashCS5的界面介绍FlashCS5默认的工作界面由菜单栏 标题栏和编辑栏 舞台及工作区域 时间轴 面板 工具 面板 属性 面板等组成 5 8 2FlashCS5的基本操作8 2 1Flash文档的基本操作8 2 2Flash图形的绘制和对象的编辑8 2 3Flash文本的创建和编辑 6 8 3时间轴 帧和图层时间轴是Flash中最重要 最核心的部分 它是摆放和控制帧的地方 帧是Flash动画的最基本组成部分 Flash动画是由不同的帧组合而成的 帧在时间轴上的排列顺序将决定动画的播放顺序 在 时间轴 面板中可以很明显地看出 帧和图层是一一对应的 如果说动画是一幢大楼 那么元件和实例就是砖和水泥 时间轴和帧就是整个建筑的构架 正是它们支撑和组织起整个动画的 8 3 1时间轴 7 8 3 2帧帧是动画最基本的单位 帧中可以包含图形 声音 各种素材和对象等需要显示的内容 播放动画就是将一幅幅图片按照一定的顺序排列起来 然后依照一定的播放速率显示出来 所以也被称为帧动画 1 帧的类型在FlashCS5中用来控制动画播放的帧具有不同的类型 不同类型的帧在动画中发挥的作用也不同 选择 插入 时间轴 菜单命令 在弹出的子菜单中显示了普通帧 关键帧和空白关键帧3种类型的帧 2 帧的基本操作在制作动画时 可以根据需要对帧进行一些基本操作 例如选择 插入 复制 粘贴 删除 清除 移动和翻转帧等 8 8 3 3图层图层就像一张张透明的纸 在每张纸上都可以绘制不同的对象 每一张都保持独立 其上的内容互不影响 可以单独操作 同时又可以合成不同的连续可见的视图文件 1 图层的分类图层可以分为普通图层 引导图层和被引导图层 遮罩图层和被遮罩图层5种类型 2 图层的操作3 图层的属性 9 8 4元件 实例和库元件是Flash中一个非常重要的概念 在动画制作过程中 经常需要重复使用一些特定的动画元素 可以将这些元素转换为元件 方便在动画中多次调用 库 面板是放置和组织元件的地方 任何一个创建的元件都自动成为库的一部分 而实例则是元件在舞台中或者嵌套在其他元件中的一个元件副本 但实例在颜色 大小及功能上可以和元件有很大的不同 8 4 1元件元件是存放在库中可被重复使用的图形 按钮或者动画 元件的运用可以使影片的编辑更加容易 因为在需要对许多重复的元素进行修改时 只要对元件做出修改 Flash便会自动根据修改的内容对所有该元件的实例进行更新 另外 使用元件还可以大大提高网站建设的效率 显著地减少文件的大小 1 元件的种类根据使用方式的不同 Flash中的元件有3类 图形元件 按钮元件和影片剪辑元件 2 创建元件 10 8 4 2实例实例的创建依赖于元件 它是元件在场景中的具体表现 可以根据需要对创建的实例进行各种修改 从而得到依托于该元件的其他效果 1 创建实例2 设置实例属性3 改变实例类型4 交换实例5 分离实例 11 8 4 3库在FlashCS5中 创建的元件和导入的文件都存储在 库 面板中 库是元件和实例的载体 负责对元件进行管理 在 库 面板中的资源可以在多个文档中使用 提高制作动画的效率 1 认识 库 面板2 通过 库 面板对元件的操作3 通过 库 面板更改元件类型4 通过 库 面板编辑元件5 使用公共 库 12 8 5Flash动画制作8 5 1Flash动画的基础知识1 动画的原理动画的基本原理是视觉暂留原理 即人的眼睛看到一幅画或一个物体后 在1 24秒内不会消失 利用这一原理 在一幅画还没有消失前播放出下一幅画 就会给人造成一种流畅的 不间断的视觉变化效果 Flash动画是以时间轴为基础的动画 构成动画的一系列画面称为帧 播放头以一定的速率依次经过各个帧 各帧的画面将显示在屏幕上 从而形成动画 Flash中用帧频衡量动画播放的速度 即每秒播放的帧数 单位为fps 帧 秒 帧频太慢 会使动画看起来挺顿而不连贯 帧频太快 会使动画的细节变得模糊 一般将帧频设为12fps 而且整个Flash动画只能指定一个帧频 所以最好在创建动画之前就设置好帧频 设置帧频的方法 选择 修改 文档 菜单命令 在弹出的 文档属性 对话框中的 帧频 文本框中进行设置 还可以使用 时间轴 面板底部 帧速率 工具来设置 13 2 动画制作的基本流程制作动画的一般过程都包含了动画的构思 收集素材 动画的设计和动画的制作过程 1 动画的构思 2 收集素材 3 动画的设计 4 动画的制作 14 3 Flash动画的分类在FlashCS5中 动画类型可以分为 基本动画 特殊动画和交互式动画3大类 15 8 5 2逐帧动画逐帧动画是最基本 也是最传统的的动画形式 其原理是在 连续的关键帧 中分解动画动作 也就是在时间轴的每帧上逐帧绘制不同的内容 使其连续播放而成动画 创建逐帧动画有2种形式 一种是通过在时间轴中更改连续帧的内容创建 需要用户亲自制作 另一种是通过导入已有的或在其他软件中制作的不同内容的连贯性图像来完成 例8 3 制作逐帧动画实例 奔跑的马 16 8 5 3形状补间动画形状补间是一种在制作对象形状变化时经常被使用到的动画形式 它的制作原理是通过在两个具有不同形状的关键帧之间指定形状补间 以表现中间变化过程的方法形成动画 形状补间动画可以根据时间轴中两个关键帧内对象形状的差异 自动生成基于形状 颜色 位置等变化的补间帧 形状补间的对象不能是元件 必须是被打散的形状图形之间才能产生形状补间 所谓形状图形就是由无数个点堆积而成 而并非是一个整体 就好比一盘散沙就容易塑造其他的形状 但一块石头就不能任意改变形状 因此 在创建形状补间动画时 需要先对动画两侧的关键帧进行预处理 执行 修改 分离 菜单命令 将其打散 使之变成分离的图形 例8 4 制作 个椭圆变矩形的形状补间动画 例8 5 制作一个复杂些的形状补间动画 17 8 5 4动作补间动画利用运动补间动画可以实现的动画效果包括位置和大小的变化 旋转的变化 速度的变化 颜色和透明度的变化 需注意的是运动补间的对象必须是元件 在动作补间动画中要改变组或文字的颜色 必须将其变换为元件 而要使文本块中的每个字符分别动起来 则必须将其分离为单个字符 在FlashCS5中有两种形式的运动补间动画 传统运动补间动画和FlashCS5运动补间动画 其中FlashCS5运动补间动画一般在用到CS5的3D功能时候用到 在普通的动画项目中 还是用传统运动补间动画的比较多 它更容易把控 而且 传统补间比新补间动画产生的尺寸要小 放在网页里 更容易加载 传统运动补间动画和FlashCS5运动补间动画的主要区别在于 1 从操作步骤上来说 传统运动补间动画的制作过程是定头 定尾 做补间 即确定开始帧 结束帧 创建补间 而Flashcs5运动补间动画的制作过程是定头 做补间 即确定开始帧 创建补间 在Flashcs5运动补间中创建补间动画之后 整个层会变为蓝色 选定想要做结束帧的那帧 然后在舞台上直接拖动元件就可以了 2 传统运动补间插入的是关键帧 更改对象的帧 而FlashCS5运动补间插入的是属性关键帧 改变对象属性如位置的变化等的帧 不同的属性关键帧有不同的效果 如位置 旋转等 3 FlashCS5运动补间动画的路径是可以通过鼠标的拖动改变路径的弯曲程度的 例8 6 制作一个传统运动补间动画的实例 例8 7 制作一个FlashCS5运动补间动画的实例 18 8 5 5引导层动画引导层是一种特殊的图层 在该图层中 同样可以导入图形和引入元件 但是最终发布动画时引导层中的对象不会被显示出来 按照引导层发挥的功能不同 FlashCS5中的引导层分为普通引导层和传统运动引导层两种类型 普通引导层在 时间轴 面板的图层名称前方会显示图标 该图层主要用于辅助静态对象定位 帮助对齐对象 并且可以不使用被引导层而单独使用 在传统运动引导层中 引导层是用来指示元件运行路径的 所以引导层中的内容可以是用钢笔 铅笔 线条 椭圆工具 矩形工具或画笔工具等绘制出的线段 被引导层用于放置运动的对象 在引导层的指引下完成相应的路径运动 例8 8 制作一个简单的引导层动画 例8 9 制作一个稍微复杂些的引导层动画实例 19 8 5 6遮罩动画Flash中的遮罩层是制作动画时非常有用的一种特殊图层 它的作用就是可以通过遮罩层内的图形看到被遮罩层中的内容 利用这一原理 可以使用遮罩层制作出多种复杂的动画效果 例8 10 遮罩动画的原理说明实例 例8 11 利用遮罩层制作一个写字效果的动画 20 8 5 7交互式动画Flash还可以制作具有交互式效果的动画 可以响应用户的各种操作事件 所谓交互式动画是指浏览者可以使用键盘 鼠标操作来控制动画的播放和停止 改变动画的显示效果和尺寸 还可以填写表单等反馈信息及执行其他的各种操作 交互式动画是通过动作脚本语言 ActionScript 设置动作来产生的 ActionScript是Flash中内嵌的脚本程序 使用ActionScript可以实现对动画流程以及动画中的元件的控制 从而制作出非常丰富的交互效果以及动画特效 动作脚本语言的语法和风格与JavaScript的语法和风格很相似 如果想成为真正的Flash高手 就必须精通动作脚本语言 深刻理解事件 动作和对象 熟悉掌握它们与影片编辑 按钮和影片动画之间的关系 在FlashCS5中 可以通过 动作 面板为动画添加ActionScript脚本制作交互行为 例8 12 利用脚本语言控制动画播放的实例 21 8 6Flash在网页制作中的应用Flash在网页制作中最普遍的应用 制作网站的Logo Banner以及用Flash制作网站 8 6