网页制作技术1.ppt

7 1基础知识7 2制作动画7 3加入声音7 4交互动作7 5影片优化和发布 第7章Flash5 7 1基础知识 1 1 Flash的特点Flash是基于矢量图形的动画编辑软件 它编辑的主要对象是矢量图形 也可对转换为矢量图形的位图进行编辑 动画的基础是关键帧 在关键帧之间是依靠变形和移动位置等技术自动形成过渡帧来组成动画序列 Flash采用了流控制技术 制作的动态网页在传输时显示速度较快 播放时延迟时间较短 第7章Flash5 7 1 1Flash动画概述 7 1基础知识 2 2 动画的有关概念 1 帧 就是一个画面 2 帧频 就是每秒钟播放的帧数 3 符号和实体 用来构成帧的基本元素 4 图层 类似于绘有图形的透明胶片 5 场景 就是一个简短的动画 6 影片 由场景组成的表达完整意义的动画 7 时间线 描述动画中帧与时间的关系等 第7章Flash5 7 1 1Flash动画概述 7 1基础知识 3 7 1 2Flash5的工作界面 第7章Flash5 标题栏 菜单栏 工具栏 舞台窗口 绘图工具栏 打开浏览器窗口 时间线窗口 状态栏 7 1基础知识 4 1 标题栏Flash5的标题栏位于程序窗口的最上端 主要用于显示编辑文件的名称 以及 最小化 还原 和 关闭 按钮 用鼠标拖动标题栏可以移动整个窗口 第7章Flash5 7 1 2Flash5的工作界面 7 1基础知识 5 2 菜单栏可以完成各种对文件和对象的编辑操作 共有九个菜单 文件 菜单 编辑 菜单 查看 菜单 插入 菜单 修改 菜单 文本 菜单 控制 菜单 窗口 菜单 帮助 菜单 第7章Flash5 7 1 2Flash5的工作界面 7 1基础知识 6 3 工具栏工具栏包括了主要栏 状态栏 控制栏三个常用的工具栏 通过菜单 窗口 工具栏 控制这三个工具栏是否显示 第7章Flash5 7 1 2Flash5的工作界面 7 1基础知识 7 4 绘图工具箱主要用于绘制各种图形的工具 通过菜单 窗口 工具 控制绘图工具箱是否显示 绘图工具箱分为四部分 1 工具部分 用于选取对象和绘制图形 2 查看部分 用于图形的移动和缩小 放大 3 颜色部分 用于选择图形边框的颜色和填充图形内部的颜色 4 选项部分 用于选择所选工具的属性 第7章Flash5 7 1 2Flash5的工作界面 7 1基础知识 8 4 绘图工具箱Flash5主要的绘图工具有以下几种 箭头工具 选取工具 直线工具 套索工具 钢笔工具 文字工具 椭圆工具 矩形工具 铅笔工具 画刷工具 墨水瓶工具 油漆桶工具 吸管工具橡皮工具 手型工具 放大镜工具 第7章Flash5 7 1 2Flash5的工作界面 7 1基础知识 9 5 时间线窗口时间线窗口是Flash5控制动画播放的区域 通过菜单 查看 时间线 可显示或隐藏时间线 第7章Flash5 7 1 2Flash5的工作界面 7 1基础知识 10 6 舞台舞台位于程序窗口的下方 在舞台中可组织各帧中显示的画面内容 使用绘图工具箱的工具绘制各种图形 或者导入其他文件 舞台窗口中内容的显示 可以根据动画的需要用手形工具移动或用放大镜工具缩放 第7章Flash5 7 1 2Flash5的工作界面 7 1基础知识 11 1 新建文件启动Flash后 系统新建一个默认文件名为 影片1 的新文件 然后可进行各种操作 选择菜单 文件 新建 也可建立新的影片文件 第7章Flash5 7 1 3文件操作 7 1基础知识 12 2 打开文件选择菜单 文件 打开 在文件对话框中选中文件后单击 打开 按钮 或者双击该文件 可将该文件打开 第7章Flash5 7 1 3文件操作 7 1基础知识 13 3 保存文件在对动画进行编辑或修改时 需要经常对文件进行保存操作 如果所需保存的文件是首次保存 选择菜单 文件 保存 在弹出的保存文件对话框中选定要保存到的文件夹 输入文件名 单击 保存 即可 如果不是首次保存 而是保存对原有文件的修改 那么只需要选择菜单 文件 保存 即可 第7章Flash5 7 1 3文件操作 7 1基础知识 14 4 关闭文件和退出系统通过菜单 文件 关闭 可关闭当前文件 但不退出Flash5系统 通过菜单 文件 退出 可关闭所有文件 并退出Flash5系统 第7章Flash5 7 1 3文件操作 7 2制作动画 1 在影片属性对话框中可以设置以下参数 1 帧频 可以设置动画的播放速度 2 尺寸 可以设置动画的宽度和高度 3 匹配 单击 打印机 按钮可以使制作的动画与打印机相匹配 单击 内容 按钮可以使制作的动画与动画内容相匹配 并使动画内容的工作区四周具有相同的距离 4 背景颜色 设置动画的背景颜色 5 标尺单位 设置动画的标尺单位 第7章Flash5 7 2 1影片属性设置 7 2制作动画 2 1 帧的类型Flash动画是通过若干个静止的图像连续显示而成的 这些静止的图像就是帧 Flash舞台上某一时刻播放的图像是由当时时间线上播放指针所在的同一列的所有可见帧共同组成的 在Flash中 帧有以下几种类型 关键帧 空白关键帧 过渡帧 第7章Flash5 7 2 2帧的设置 7 2制作动画 3 2 帧的创建创建关键帧 在需要插入关键帧的帧上 单击鼠标右键 在弹出的菜单中选择插件关键帧即可 创建空白关键帧 在需要插入空白关键帧的帧上 单击鼠标右键在弹出菜单中选择插入空白关键帧即可 创建过渡帧 在两个关键帧之间的帧上单击鼠标右键 在弹出菜单中选择创建动画动作即可 第7章Flash5 7 2 2帧的设置 7 2制作动画 4 3 描图纸功能在正常的工作状态下 Flash一次只显示动画中的一帧 为了更好地定位和编辑多个帧的连续动画 可以使用描图纸 也称为洋葱皮 功能同时查看多帧画面 在Flash中 通过时间线下部的几个按钮可控制描图纸的全部功能 第7章Flash5 7 2 2帧的设置 7 2制作动画 5 1 增加和删除图层在Flash中 一个图层相当于一张透明的胶片 在每一张胶片上绘制图形 再将它们叠放在一起 就产生出最终效果 例如 在一张透明的胶片上绘制蜻蜓的身体 在另外一张透明的胶片上绘制蜻蜓的翅膀 将两张透明胶片叠在一起 就能看到完整的蜻蜓图像 在动画中使用图层是为了更有效地组织动画 这样就可以轻松地制作复杂的动画 所有使用图层的工具都在时间线的左边部分 第7章Flash5 7 2 3使用图层 7 2制作动画 6 1 增加和删除图层在舞台上 各图层内容按照图层窗口中的顺序从上到下显示 可通过选中层后再按鼠标左键将图层拖到所要的位置上来改变图层的位置 较高的一层浮在较低一层之上 却又没有完全挡住下面一层 因为除画有图形或文字的地方外 图层的其余部分是透明的 图层还具有相互独立性 修改某一图层对其他图层没有影响 第7章Flash5 7 2 3使用图层 7 2制作动画 7 2 导引层使用导引层 可以使一个图形按预定的轨迹运动 在导引层中有一条曲线 它可以使另一个图层的图形按照导引层的曲线轨迹运动 第7章Flash5 7 2 3使用图层 7 2制作动画 8 在Flash5中除了可以使用绘图工具绘制需要的图形之外 还可以直接使用FreeHand文件 JPEG文件 PNG文件 Flash播放文件 QuickTime电影文件 位图文件等多种格式的图形文件 第7章Flash5 7 2 4导入图形 7 2制作动画 9 1 矢量化位图Flash中使用的矢量图是用指令集合来描述图形 图像 而bmp jpg等位图格式是用像素点的亮度和颜色的数位集合来描述图像 导入动画的位图必须经过矢量化或打碎后才能进行各种编辑操作 先通过菜单 文件 导入 来导入一个位图图形 再选择菜单 修改 描绘位图 可将位图转化为矢量图 第7章Flash5 7 2 4导入图形 7 2制作动画 10 2 打碎位图首先选中一个位图 选择菜单 修改 分解组件 即可将位图打碎 打碎以后的位图可以进行编辑 但因没有经过矢量化 所以仍是位图 两个经过矢量化的位图之间可以进行变形过渡 而两个打碎的位图之间不能进行变形过渡 第7章Flash5 7 2 4导入图形 7 2制作动画 11 符号是可以重复使用的图形 动画或按钮 实体是符号在舞台上的体现 Flash中提供了很多符号 都存在图库中 可供直接使用 当把图形符号从图库中拖到舞台上后 舞台上的这一图形就是一个符号的实体 使用符号可以使编辑动画更简单 尤其是对于有大量重复元素的动画 只要对符号进行修改 系统会自动更新所有的实体 符号和实体在Flash中又被称为组件 第7章Flash5 7 2 5创建符号和实体 7 2制作动画 12 1 符号类型选择菜单 插入 新建组件 在弹出的组件属性对话框中输入要创建的符号名称以及类型 单击 确定 按钮后 就可进入符号编辑界面 Flash5中 符号分为三种类型 影片剪辑 按钮 图形 不同的符号类型有不同的使用特点 第7章Flash5 7 2 5创建符号和实体 7 2制作动画 13 1 符号类型影片剪辑符号是位于影片中的小片断 影片剪辑的运行独立于主要影片的时间线 图形符号主要是适用于静态图片和通过主影片的时间线来控制的简单动画 按钮符号用于创建交互式按钮 可以响应鼠标动作 创建按钮符号时 时间线变成向上 经过 向下和执行四种帧 在四个帧中都插入关键帧或空白关键帧 制作相应的图形 则按钮符号就制作完成 第7章Flash5 7 2 5创建符号和实体 7 2制作动画 14 1 符号类型符号在制作完成后 自动进入图库中 选择菜单 窗口 图库 制作好的符号都会显示在图库中 双击图库中的符号可以对此符号进行修改 选择菜单 编辑 编辑影片 或单击时间线上方的场景名 返回场景中 可将需要的符号从图库中拖到舞台中 图库中的一个符号可以反复被放到不同的帧或场景中 修改图库中的符号则动画中所有使用此符号的地方都会自动改变 第7章Flash5 7 2 5创建符号和实体 7 2制作动画 15 2 遮罩功能使用图层的遮罩功能可以产生类似于聚光灯扫射的效果 如果将遮罩层比作聚光灯 则当遮罩层移动时 其下面被遮罩的层就会像被灯光扫过一样 被灯光扫过的地方清晰可见 没有灯光的地方则一片漆黑 一个遮罩层可以同时遮罩几个层 从而产生出各种奇幻的效果 第7章Flash5 7 2 5创建符号和实体 7 3加入声音 1 在Flash5中 不仅可以制作动画 还可以处理丰富的声音效果 可以制作多媒体动画的解说词 也可以制作MTV等 声音可以放到按钮上 在按钮动作时播放 也可以放到一个层上 使动画播放到指定帧时开始播放 也可以通过事件操作控制对声音的播放进行控制 Flash5支持的声音格式主要是WAV AIFF和MP3 如果计算机中安装了QuickTime播放器 可支持更多的声音格式 在共享图库中提供了一些简单的声音 也可以导入外部的声音文件 第7章Flash5 7 3加入声音 2 使用声音的步骤一般是先导入外部声音文件 导入的声音会自动添加到图库中 使用声音时从图库中拖动到场景中即可 选择菜单 文件 导入 在弹出的对话框中选中一个或多个需要的文件 然后单击 打开 按钮即可将声音导入到Flash中 导入的声音文件以符号的形式显示在图库中 第7章Flash5 7 3 1导入声音 7 3加入声音 3 Flash5的共享图库中也提供了一些声音素材提供的共享声音 选择菜单 窗口 共享图库 Sounds 弹出共享声音图库窗口 可把图库中的声音直接拖动到场景中 在当前场景中使用过的声音会自动添加到当前影片的图库中 第7章Flash5 7 3 1导入声音 7 3加入声音 4 1 给帧添加声音在影片中使用声音时 一般要为声音文件单独新建一个图层 如果需要声音从该层的某一帧开始 首先在该帧单击鼠标右键 在弹出的菜单中选择 插件关键帧 将该帧设置为关键帧 使用菜单 窗口 面板 声音 或双击该帧 在弹出的声音控制面板中可设置声音效果 第7章Flash5 7 3 2应用声音 7 3加入声音 5 2 给按钮添加声音在Flash5中可以给按钮添加一段声音 将声音附在按钮上会使按钮动作更加生动 当鼠标经过按钮和点击按钮时可设置发出不同的声音 选择一个需要添加声音的按钮符号 进入按钮符号编辑状态 再新建一个声音图层 选择声音层 在与需要添加声音的按钮状态对应的帧上插入关键帧 再在该关键帧上添加声音 操作和给帧添加声音相同 第7章Flash5 7 3 2应用声音 7 3加入声音 6 由于网络传输速度的问题 在保证影片质量的前提下 要求文件要尽量小 压缩声音是减小文件的主要方法之一 要对Flash5文件中的声音进行压缩 先将声音导入 再在图库中的声音组件上单击鼠标右键 在弹出菜单中选择属性 可在弹出的声音属性对话框中进行设置 第7章Flash5 7 3 3压缩声音 7 4交互动作 1 交互就是可以通过键盘或鼠标控制动画的播放 创建交互式动画的过程实际上就是给按钮或帧分配动作 在Flash5中 当播放到某个特定的帧时 或点击鼠标 按下键盘 都会产生特定的事件 用这些事件可以控制动画的播放动作 实现用户和影片播放的交互动作 第7章Flash5 7 4交互动作 2 1 给按钮添加动作给按钮添加动作就是设置在按钮被按下 鼠标离开 鼠标经过 敲击键盘等事件发生时 影片所产生的动作 如跳转到另外一帧继续播放 停止播放 播放一段影片或声音等 用箭头工具在舞台上选择一个按钮实体 选择菜单 窗口 动作 或在按钮实体上单击鼠标右键 在弹出菜单中选择 动作 弹出的对象动作面板 在弹出的动作列表中选择事件所产生的动作 第7章Flash5 7 4 1给按钮或帧添加动作 7 4交互动作 3 2 给帧添加动作给动画中的关键帧分配动作 可以使动画播放到这一帧时自动执行一个动作 在时间线上选中要设置动作的关键帧 选择菜单 窗口 动作 或在关键帧上单击鼠标右键 在弹出菜单中选择 动作 也可直接双击该关键帧 可在弹出的帧动作面板中给此关键帧设置动作 帧动作面板中不用进行事件选择 第7章Flash5 7 4 1给按钮或帧添加动作 7 4交互动作 4 基本动作是组成交互作用的最基础也是最重要的一部分 包括转到 播放 停止 固定高品质 停止所有声音 获得URL FSCommand 加载影片 卸载影片 判定对象 若帧已加载完成 鼠标事件等十二个动作 第7章Flash5 7 4 2基本动作 7 4交互动作 5 各个动作的功能如下 1 转到转到动作是将播放转到指定的场景的某个帧 2 播放播放动作用来启动一个影片 使影片从它的当前位置开始播放 播放一般都是循环播放 第7章Flash5 7 4 2基本动作 7 4交互动作 6 3 停止停止动作使得处于播放状态的影片停止播放 一般和按钮事件结合使用 实现按钮对影片播放的控制 如果在第一帧加上停止动作可以防止影片的立即播放 如果在最后一帧使用停止动作可以使得影片在播放完一遍后不再循环 第7章Flash5 7 4 2基本动作 7 4交互动作 7 4 固定高品质固定高品质动作用来打开或关闭动画播放的保真效果 5 停止所有声音停止所有声音动作在不中断影片播放的情况下 停止影片中的所有声音播放 如果结合按钮事件 可实现 静音 功能 第7章Flash5 7 4 2基本动作 7 4交互动作 8 6 获得URL获得URL动作可以实现与Web页面的链接 它可以打开一个浏览器窗口 同时在此窗口中加载指定的URL内容 这个动作也可以把变量提交给指定的Web服务器 7 FSCommandFSCommand动作可以设置影片的播放命令和参数 实现用按钮或其他动作控制影片的播放 如改变窗口大小 停止 播放等 第7章Flash5 7 4 2基本动作 7 4交互动作 9 8 加载影片加载影片动作可以将一部新的影片加载到到原有的影片上 或同时打开多个播放窗口 9 卸载影片卸载影片动作把加载到影片窗口的影片卸载掉 要卸载某一个已加载的影片 在 位置 中输入的级别编号一定要和卸载对象的级别编号相同 第7章Flash5 7 4 2基本动作 7 4交互动作 10 10 判定对象判定对象动作指定所选帧和按钮的目标对象 可以使一个指定的影片执行播放 停止等动作 在目标输入入框中输入目标对象的位置 11 若帧已加载完成若帧已加载完成动作用来判断指定的帧是否已经被调入 12 鼠标事件鼠标事件可在语句编辑框中增加一个鼠标或键盘事件 第7章Flash5 7 4 2基本动作 7 5影片优化和发布 1 在Flash文件做好后 应该先进行必要的优化 再将其发布成所需要的文件格式 如SWF格式 HTML格式 GIF格式等 发布后可将它加入到网页或其他文件中 也可以编译成可执行文件单独运行 第7章Flash5 7 5影片优化和发布 2 Flash作为网页制作与动画创作的专业软件 操作简便 功能强大 已成为交互式矢量图形和Web动画事实上的标准 但是 如果制作的Flash影片文件较大 则播放就相对较慢 需要较长的浏览时间 因此 对Flash影片进行优化就显得十分必要了 通常采用以下方法来优化Flash影片 第7章Flash5 7 5 1影片优化 7 5影片优化和发布 3 1 多使用符号 如果影片中的元素使用一次以上 则应考虑将其转换为符号 重复使用符号并不会使影片文件明显增大 因为影片文件只需存储一个符号的图形数据 2 尽量使用渐变动画 只要有可能 应尽量以移动渐变的方式产生动画效果 而少使用逐帧渐变的方式产生动画 关键帧使用得越多 影片文件就越大 第7章Flash5 7 5 1影片优化 7 5影片优化和发布 4 3 多用实线 少用虚线 减少特殊线条如短划线 虚线 波浪线等的数量 由于实线的线条构图最简单 因此使用实线将使文件更小 4 多用矢量图形 少用位图图像 矢量图形可以任意缩放而不影响画面质量 位图图像一般为静态元素或背景图 应避免位图图像元素的动画 第7章Flash5 7 5 1影片优化 7 5影片优化和发布 5 5 多用构图简单的矢量图形 矢量图形越复杂 CPU所需的运算时间就越长 可以选择菜单 修改 最优化 将矢量图形中不必要的线条删除 从而减小文件 6 导入的位图图像文件要尽可能小 并以JPEG方式压缩 第7章Flash5 7 5 1影片优化 7 5影片优化和发布 6 7 声音文件最好以压缩比非常高的MP3方式压缩 8 限制字体和字体样式的数量 尽量不要使用太多不同的字体 使用的字体越多 影片文件就越大 尽可能使用Flash内含的字体 9 尽量不要包括所有字体外形 第7章Flash5 7 5 1影片优化 7 5影片优化和发布 7 10 尽量不要将字体打散 字体打散后就变成图形 会使文件增大 11 少使用过渡填充颜色 否则将占用更多的存储空间 12 缩小动作区域 限制每个关键帧中发生变化的区域 一般应使动作发生在尽可能小的区域内 第7章Flash5 7 5 1影片优化 7 5影片优化和发布 8 13 避免在同一时间内安排多个对象同时产生动作 有动作的对象也不要与其他静态对象安排在同一图层里 应将有动作的对象安排在各自专属的图层内 以便加速处理过程 14 用 加载影片 命令减轻影片开始下载时的负担 如有必要 可以考虑将影片划分成多个子影片 再通过主影片里的 加载影片 卸载影片 命令随时加载 卸载子影片 第7章Flash5 7 5 1影片优化 7 5影片优化和发布 9 15 使用预先下载画面 如果有必要 可在影片一开始时加入预先下载画面 以便后续影片能够平滑播放 16 影片的尺寸越小越好 尺寸越小 影片文件就越小 可以选择菜单 修改 影片 调整影片的宽度和高度 第7章Flash5 7 5 1影片优化 7 5影片优化和发布 10 17 制作小尺寸影片 然后再放大 为了减小文件 可以在Flash中将影片的尺寸设置小一些 然后导出SWF格式影片 接着将通过菜单 文件 发布设置 弹出的对话框中的HTML选项卡里的影片尺寸设置大一些 这样 在网页里就会呈现出尺寸较大的影片 而画质丝毫未变 依然完美 第7章Flash5 7 5 1影片优化 7 5影片优化和发布 11 Flash文件制作完成后 可以发布成多种文件格式 发布的文件可以作为素材加入到网页或其他文件中 也可编译成独立运行的文件 第7章Flash5 7 5 2导出和发布 7 5影片优化和发布 12 1 导出用导出操作可以将FLA格式的Flash文件以另外一种可以在其它系统中应用的格式输出 Flash5可以将影片导出为SWF MOV AVI GIF JPG等格式的文件 SWF格式为可以在网页中应用Flash动画格式 导出为动态影片格式 如MOV AVI 时 影片中的交互功能会失效 导出为静态图片格式 如JPG BMP等 时 产生一个图片序列 每一帧生成一幅图片 导出为声音格式时 只使用影片中的声音生成一个WAV文件 第7章Flash5 7 5 2导出和发布 7 5影片优化和发布 13 1 导出制作好一个Flash文件后 选择菜单 文件 导出影片 在弹出的输出影片对话框中选择保存类型为 Flash播放文件 swf 可导出SWF格式的文件 输入要生成的文件名字 单击 保存 按钮 在弹出的输出Flash播放器对话框中进行设置 第7章Flash5 7 5 2导出和发布 7 5影片优化和发布 14 2 发布发布操作可以同时将影片生成多种格式的文件 并且可以生成一个包含产生的SWF文件的HTML网页文件 选择菜单 文件 发布设置 弹出发布设置对话框 一个Flash文件可以同时发布成多种不同格式的文件 选择了一种类型 就会增加相应的选项卡 第7章Flash5 7 5 2导出和发布 7 5影片优化和发布 15 1 使用网页制作工具将Flash动画嵌入网页使用Flash5的发布功能可