网页设计与制作第9章.ppt

1 第9章Flash8基础知识 2 9 1认识Flash89 1 1Flash8的简介1 Flash发展史2 Flash的特点同其他动画技术相比 Flash技术的特点主要集中在以下几个方面 1 Flash的图形系统是基于矢量的 制作时 只需存储少量的向量数据就可以描述一个看起来相当复杂的对象 这样 其占用的存储空间同位图相比具有更明显的优势 非常适用于低带宽的因特网 使用矢量图形的另一个好处还在于 无论将它放大多少倍 图像都不会失真 同时 Flash也可以包含位图和声音 2 Flash使用插件方式工作 也就是说 用户只要在浏览器端安装一次插件 以后就可以快速启动并观看动画 而且 在IE和Netscape的后期版本中 还内置了对Flash流式动画的支持 这使得用户观看Flash更为方便 3 Flash的工作方式是流式的 动画在下载传输的过程中即可播放 这大大减少了用户在浏览器端等待的时间 因此非常适合在网络上传输 4 Flash具有强大的交互功能 这不仅给网页设计创造了无限的创意空间 还使得用Flash构建整个梦幻站点成为可能 Flash8提供了全新的Action指令设定环境 使用的ActionScript具备比较完整的程序语言构架 因此Flash动画可以具备很好的交互性 3 Flash的应用一般来说 Flash主要有以下用途 1 制作网页动画 甚至整个网站 2 多媒体软件开发 软件片头 游戏等 3 其他娱乐目的 MTV 贺卡 小型卡通片等 3 9 1 2Flash8的新增功能与Flash以前的版本相比 Flash8的功能更加强大 主要表现在以下几点 强大的滤镜特效混合模式文本渲染全新的视频与新的编码技术实时的位图处理文件上传 下载窗口自定义淡入淡出功能改进的文本工具增强的笔触属性高级渐变控制11 脚本助手12 改进面板管理13 撤销 重做操作14 SWF文件元数据15 对象绘制模式16 库面板的改进17 工作区范围扩展18 交互式Mobile设备模拟器 4 9 1 3Flash8的界面介绍启动Flash8后 其工作界面如图9 1所示 Flash8的工作界面主要由标题栏 菜单栏 工具箱 时间轴 属性面板 编辑区和浮动面板几部分组成 5 9 2导入素材使用Flash可以创造很多元素 而对于Flash本身不能产生的文件 如声音文件 或已有的素材文件 如用其他软件绘制的图形 可以使用导入的方法来使用它们 9 2 1导入图像除了可以使用自身的绘图工具绘制以外 Flash还可以将图像导入到当前Flash文档的舞台中或导入到当前文档的库中 也可以通过将位图粘贴到当前文档的舞台中来导入它们 所有直接导入到Flash文档的位图都会自动添加到该文档的库中 在Flash中可以导入多种格式的图像 如 jpg gif swf png bmp dxf pdf等 1 导入图像2 编辑导入的位图 6 9 2 2导入视频Flash能导入视频剪辑 根据视频格式和所选导入方法的不同 用户可以将具有视频的影片发布为Flash影片 SWF文件 或QuickTime影片 MOV文件 Flash8还提供了一个新的视频导入功能 视频导入向导 视频导入向导可简化视频编码并提供编码调整及剪辑编辑 在向导里还有一个非常简洁的工具提供了整理长度 产生多样的剪辑片断 录制视频剪辑片断及输出音频等功能 1 常用视频文件及使用条件可以导入Flash8的视频文件的种类很多 其中常用的由DirectX9 0支持的视频文件有以下几种 AudioVideoInterleaved文件 扩展名为 avi WindowsMediaFile文件 扩展名为 wmv或 asf MotionPictureExpertsGroup文件 扩展名为 mpg或 mpeg 常用的由QuickTime7 0支持的视频文件有以下几种 avi mpg或 mpeg QuickTimeMovie文件 扩展名为 mov DigitalVideo文件 扩展名为 dv 2 导入视频文件 7 9 2 3导入声音Flash影片中最突出的特点是结合了动画和音频 而且用户可以在特定的情况下播放特定声音 一般来说 添加声音文件将会大大增加动画文件的大小 但是Flash提供了最佳的压缩方式 能使动画文件保持尽可能小 另外 Flash还提供了多种使用声音的方法 既能让声音独立于时间轴连续地播放 也可以使动画与音轨同步 既可以制作声音渐入渐出效果 又可以为按钮添加声音以增加其交互性 还可以用ActionScript语句来控制声音的播放 1 声音的类型一个好的动画如果没有声音则美中不足 优美的声音不仅可以让浏览者轻松地浏览网页 还可以给浏览者一些特别的提示 加深印像 在Flash中可以根据自己的需要选择某种格式来播放 以便达到更好的效果 同时还可以兼顾更快的网络传输速度 能直接导入Flash应用的声音文件 主要包括WAV和MP3两种格式 如果系统上安装了QuickTime4或更高版本 则还可以导入AIFF格式和只有声音的QuickTime影片格式 另外 Flash在图库面板中提供了一些简单的按钮声音 它也可以使用其它的声音 比如MP3等 还可以使用自己录制的声音 用它可以制作多媒体动画的解说词 在Flash中有两种类型声音 事件声音和流式声音 事件声音 在播放前必须下载完全 它可以连续播放直到有明确的命令来停止播放 多是应用在按钮或是固定动作中 流式声音 在下载了前几帧后 只要数据足够 它就可以开始播放 而且它可以做到和Web上播放的时间同步 一般应用于背景音乐 或是不需要与场景内容配合的情况 2 声音的应用一般情况下 在Flash中应用声音主要包括以下几个重要内容 导入声音 引用声音 编辑声音 压缩声音 1 导入声音2 引用声音3 编辑声音4 压缩声音 8 9 3库 元件和实例元件指的是一个图形 按钮或者影片剪辑 在创建它们之后 就可以在整个影片或者其他影片里面重复使用 任何一个创建的元件都自动成为库的一部分 而实例则是元件在舞台中或者嵌套在其他元件中的一个元件副本 但实例在颜色 大小及功能上可以和元件有很大的不同 9 3 1认识库库是元件和实例的载体 它最基本的用处是对动画中的元件进行管理 使用库可以省去很多重复操作及一些不必要的麻烦 1 库面板典型的 库 面板包括标题栏 预览窗口 列表栏和库文件的管理工具等 如图9 19所示 图9 19 库 面板2 库的种类Flash8的库分为两种 即当前编辑文件的 专用库 和Flash8中自带的 公用库 1 专用库2 公用库 9 9 3 2元件元件是指在Flash中创建的图形 按钮和影片剪辑 可以自始自终地在影片或其他影片中重复使用 元件是库中也是动画中最基本的元素 元件的运用可以使影片的编辑更加容易 因为在需要对许多重复的元素进行修改时 只要对元件做出修改 Flash便会自动根据修改的内容对所有该元件的实例进行更新 另外 在影片中运用元件可以显著地减少文件的大小 保存一个元件比保存每个出现的元素要节省更多的空间 1 元件的种类Flash中的元件有3种类型 分别为图形元件 按钮元件和影片剪辑元件 2 建立元件创建一个元件有以下几种方法 1 直接创建元件2 将现有对象转换为元件用导入命令得到的元件使用公用元件库创建元件 10 9 3 3实例实例是指位于舞台上或嵌套在另一个元件内的元件副本 它是元件在场景中的应用 实例可以与元件在颜色 大小和功能上存有很大的差别 1 创建和编辑实例2 改变实例类型3 替换实例 11 9 4时间轴 帧 图层和时间轴特效在制作动画前 首先要认清两个基本概念 一个是时间轴 另一个是帧 如果说动画是一幢大楼 那么元件和实例就是砖和水泥 时间轴和帧就是整个建筑的构架 正是它们支撑和组织起整个动画的 动画连不连贯 运行起来流不流畅很大程度上决定于时间轴和帧的使用 所以时间轴和帧是整个动画最基本也最重要的地方 再复杂的动画也是一帧一帧创建起来的 12 9 4 1时间轴时间轴是实现Flash动画的关键部分 是进行动画编辑的主要工具之一 Flash动画是将画面按一定的空间顺序和时间顺序放在时间轴面板中 在放映时按照时间轴排放顺序连续快速地显示这些画面 从外观看 时间轴由两部分组成 即层控制区和帧控制区 如图9 26所示就是一动画编辑时的时间轴视窗 所有的层排列于时间轴的左侧 每个层由其右侧对应的帧组成 时间轴的底部显示了时间轴的状态 时间轴窗口的每一个小方格表示动画中的一帧 一个动画可以有几条并发的时间轴 每一时间对应着一个运动实例 13 9 4 2帧帧就像一个大容器 在动画中基本上每个帧都包含了各式各样的实例 关键帧是用来定义动画变化的帧 在时间轴中关键帧显示为实心圆 但关键帧不能频繁使用 因为关键帧的增加会增加动画文件的大小 渐变动画的制作是通过关键帧内插的方法实现的 只要在发生变化的画面定义关键帧 Flash就会自动完成中间的内容 1 帧频率2 帧的种类及创建时间轴中的每一个小方格表示一个帧 帧有许多类型 创建方法也不一样 1 关键帧2 普通帧3 空白关键帧4 动作帧5 过渡帧 14 9 4 3图层1 图层的种类在Flash中 图层是作为时间轴视窗的一个组成部分出现的 如图9 37所示 图层像一摞透明的纸 每一张都保持独立 其上的内容互不影响 可以单独操作 同时又可以合成不同的连续可见的视图文件 图9 37图层窗口图层有普通层 引导层和遮罩层3类 下面分别介绍 1 普通层 2 引导层 3 遮罩层2 图层的基本操作在动画制作过程中还常常需要对图层进行一些编辑操作 如图层的删除 显示与隐藏 显示轮廓 锁定等 现分别对其进行介绍 1 删除图层2 显示或隐藏图层3 显示轮廓4 锁定图层 15 9 4 4时间轴特效Flash8将Flash动画中一些经常用到的效果制作成了简单的命令 使用户只需选中动画的对象再执行相关命令即可 从而省去了大量重复的 机械的操作 提高了动画开发的效率 使用Flash内建的时间轴特效 可以快速创建复杂的动画 时间轴特效可以应用于文本图形 包括矢量图 组合对象和图形元件 位图和按钮元件等对象 1 时间轴特效介绍在Flash8中 选择 插入 时间轴特效 菜单项 可以看到Flash内建的时间轴特效 共3种类型 变形 转换 帮助和效果 如图9 41所示 具体含义如下 图9 41时间轴特效1 变形 转换2 帮助3 效果2 时间轴特效的运用实例 例9 1 制作一个阴影文字效果 16 9 5创建简单动画9 5 1Flash动画的基础知识1 动画的原理动画是通过人眼的视觉留影原理得到的连续效果 它是由于一组图像序列快速有序地被播放而在人眼中形成的移动景象 在Flash中常常将这些图像序列分别放置在时间轴上的若干不同的帧中 由帧的有序播放而形成Flash动画 2 动画制作的基本流程制作动画的一般过程都包含了动画的构思 收集素材 动画的设计和动画的制作过程 1 动画的构思 2 收集素材 3 动画的设计 4 动画的制作 17 3 动画的类型Flash8创建动画序列的基本方法有两种 逐帧动画和补间动画 逐帧动画也叫 帧帧动画 顾名思义 它需要具体定义每一帧的内容 以完成动画的创建 补间动画包含了运动补间动画和形状补间动画两大类动画效果 也包含了引导动画和遮罩动画这两种特殊的动画效果 在补间动画中 用户只需要创建起始帧和结束帧的内容 而让Flash自动创建中间帧的内容 Flash甚至可以通过更改起始帧和结束帧之间的对象大小 旋转方式 颜色和其他属性来创建运动的效果 下面将会通过实例详细介绍这几种动画的基本制作方法 18 9 5 2逐帧动画逐帧动画是一种常见的动画形式 其原理是在 连续的关键帧 中分解动画动作 也就是在时间轴的每帧上逐帧绘制不同的内容 使其连续播放而成动画 因为逐帧动画的帧序列内容不一样 不但给制作增加了负担而且最终输出的文件量也很大 但它的优势也很明显 逐帧动画具有非常大的灵活性 几乎可以表现任何想表现的内容 而它类似与电影的播放模式 很适合于表演细腻的动画 下面通过一个实例的制作来说明逐帧动画的制作流程 例9 2 制作逐帧动画 奔跑的马 19 9 5 3补间动画一帧一帧地制作动画既费时又费力 因此 在制作动画时应用最多的还是补间动画 补间动画是一种比较有效的产生动画效果的方式 同时还能尽量减小文件的大小 因为在补间动画中 Flash只保存帧之间不同的数据 而在逐帧动画中 Flash却要保存每一帧的数据 Flash有两种类型的补间动画 一种是运动补间动画 另一种是形状补间动画 运动补间动画需要在一个点定义实例的位置 大小及旋转角度等属性 然后才可以在其他的位置改变这些属性 从而由这些变化而产生动画 形状补间动画需要在一个点绘制一个图形 然后在其他的点改变图形或者绘制其他的图形 Flash能为它们之间的帧内插值或者内插图形 从而产生动画效果 创建补间动画一般有以下两种方法 创建动画的起始和结束关键帧 然后使用属性面板中的 补间 选项 创建动画的第1个关键帧 在时间轴上插入所需帧数 然后在第1帧与所插入帧之间的任意一帧上单击鼠标右键 在弹出的快捷菜单中选择 创建补间动画 命令 再将对象移到舞台中的新位置 Flash会自动创建结束关键帧 1 制作运动补间动画利用运动补间动画可以实现的动画效果包括位置和大小的变化 旋转的变化 速度的变化 颜色和透明度的变化 下面通过一个实例的制作来说明运动补间动画的制作流程 例9 3 制作运动补间动画 20 2 制作形状补间动画通过形状补间可以实现一幅图形变为另一幅图形的效果 形状补间和运动补间的主要区别在于 形状补间不能应用到实例上 必须是被打散的形状图形之间才能产生形状补间 所谓形状图形就是由无数个点堆积而成 而并非是一个整体 选中该对象时外部没有一个兰色边框 而是会显示成掺杂白色小点的图形 下面通过一个实例的制作来说明形状补间动画的制作流程 例9 4 制作形状补间动画 21 9 5 4引导层动画将一个或多个层链接到一个运动引导层 使一个或多个对象沿同一条路径运动的动画形式被称为 引导路径动画 这种动画可以使一个或多个元件完成曲线或不规则运动 引导层是用来指示元件运行路径的 所以 引导层 中的内容可以是用钢笔 铅笔 线条 椭圆工具 矩形工具或画笔工具等绘制出的线段 下面先通过一个简单的实例制作来说明引导层动画的制作流程 具体操作步骤如下 例9 5 制作引导层动画 例9 6 制作一个复杂的引导层动画 22 9 5 5遮罩动画遮罩是Flash中一个很实用的功能 如果选中一个层为遮罩层 那么它的下一层则是被遮挡住的 遮罩就像个窗口 只有在遮罩层的填充色块之下的内容才是可见的 而遮罩的填充色块本身是不可见的 其余的所有内容都会被遮罩层的其余部分隐藏起来 一个遮罩只能包含一个遮罩项目 按钮内容不能有遮罩 也不能将遮罩应用于另一个遮罩 在Flash中没有一个专门的按钮来创建遮罩层 遮罩层其实是由普通图层转化来的 只要在某个图层上单击鼠标右键 在弹出菜单中选择 遮罩层 选项 使选项的左边出现一个小勾 该图层就会生成遮罩层 层图标就会从普通层图标变为遮罩层图标 系统会自动把遮罩层下面的一层关联为 被遮罩层 下面的层在缩进的同时图标变为 如果想关联更多层被遮罩 只要把这些层拖到被遮罩层下面就行了 如图9 80所示 图9 80多层遮罩动画下面通过一个实例的制作来说明遮罩动画的制作流程 具体操作步骤如下 例9 7 制作遮罩动画 23 9 5 6综合动画实例下面将通过一个较为复杂的Flash综合实例来讲解一下如何运用Flash制作动画的过程 例9 8 制作一个较为复杂的Flash综合实例 24 9 6交互动画的制作Flash还可以制作具有交互式效果的动画 可以响应用户的各种操作事件 所谓交互动画是指浏览者可以使用键盘 鼠标操作来控制动画的播放和停止 改变动画的显示效果和尺寸 还可以填写表单等反馈信息及执行其他的各种操作 交互动画是通过动作脚本语言 ActionScript 设置动作来产生的 ActionScript是Flash中内嵌的脚本程序 使用ActionScript可以实现对动画流程以及动画中的元件的控制 从而制作出非常丰富的交互效果以及动画特效 动作脚本语言的语法和风格与JavaScript的语法和风格很相似 Flash8能够识别在任何较早版本的Flash中编写的动作脚本 如果想成为真正的Flash高手 就必须精通动作脚本语言 深刻理解事件 动作和对象 熟悉掌握它们与影片编辑 按钮和影片动画之间的关系 Flash提供了一个专门处理动作脚本的编辑环境 动作 面板 可以通过选择 窗口 动作 菜单项来显示或隐藏 动作 面板 通过 动作 面板可以制作有趣的交互式画面 例如按钮在分配动作后 当有鼠标单击等事件触发时 Flash就执行相应的动作 下面通过一个实例来介绍交互式动画的制作方法 例9 9 交互式动画的制作 25 9 7影片的优化 测试与发布Flash动画制作完成后 如果要在其他应用程序中使用 可以使用导出命令 而要在 eb上发布 则要使用Flash提供的发布功能 导出和发布Flash前可以利用Fla