《网页制作实用教程 教学课件 ppt 作者 张淑清2 第五章》由会员分享，可在线阅读，更多相关《网页制作实用教程 教学课件 ppt 作者 张淑清2 第五章（37页珍藏版）》请在金锄头文库上搜索。
1、网页设计实用教程,第 五 章,第5章 网页素材的定做图像、动画与媒体,本章通过对firework、flash的学习，要求掌握一些自己绘制、编辑、修改图像，以及制作简单动画的技术，并能够在后期的网页设计中，将各种媒体元素合理的安排到网页当中去。,目标要求,第5章 网页素材的定做图像、动画与媒体,Fireworks MX 2004的学习 （界面介绍应用实例） Flash MX 2004的学习 （界面介绍简单动画实例制作） 媒体对象的插入和设置 （插入面板的介绍插入flash对象、声音对象）,讲课提纲,网页图像设计师Fireworks MX 2004,Fireworks既可以编辑网页图像，也可以编辑
2、Web动画。它的一个很大的优势就在于它将位图处理和矢量图处理合二为一，网页图像设计师们就无需在多种图像处理软件之间来回切换，大大简化了网络图形设计的工作难度。 使用Fireworks不仅可以轻松制作出动感的GIF动画，还可以轻易完成大图切割、动态按钮、动态翻转图等。,认识Fireworks的工作界面,包含有选取工具、切片工具及各种编辑工具,可在此绘制矢量图、 处理位图,可以控制路径、文字、图像、蒙板组、符号、文字沿路径排列、热点及切片等不同状态,包含”历史记录”面板、 “优化”面板 ”属性检查器”面板 ”动作”面板,Fireworks应用实例,静态网页图片制作 1、设计导航图片 2、制作波浪型
3、图片文字 3、爆炸型图片效果的制作 制作gif 动画 1、闪烁星星 2、合成已有图片成为gif动画 导出及优化图像,设计导航图片,新建并设置文档后，使用工具栏中的“文本”工具按钮 ，逐个输入图示中的文字，并用“指针”工具拖动文本框，调整各组文字的具体位置即可得到该效果。然后导出图片，调整切片后，保存即可。详细过程参照课本。,制作波浪型图片文字,爆炸型图片效果的制作,合成已有图片成为gif动画,导出及优化图像,设计能够快速下载的优美的高质量的图像，在最大限度地保持图像品质的同时，选择压缩质量最高的文件格式。这种平衡行为称之为优化，即寻找颜色、压缩和品质的适当组合。 利用“导出向导”，无需了解优化
4、和导出细节，可以轻松导出图形。,Flash MX 2004 网页动画制作专家 主界面,FLASH的相关术语,影片：影片是Flash中的最高一级结构，当打开Flash开始制作的时候，实际上开始了电影的制作过程。 场景：组成影片的单位。每个场景可以是一个独立的影片。 图层：场景中的空间层次，动画组件在不同图层上动作，但合起来在同一场景演出。 帧：类似于电影底片上的每一格，每一格间的动作差异细微，播放时，利用视觉暂留，就产生了动画。按F5键可以插入一个帧。 关键帧：是动画在进行变化的一个时间点。当想要让动画增加对象或是产生变化时，就要插入关键帧。按F6键可以插入一个关键帧。 空白关键帧：指没有任何内
5、容的关键帧。一旦加入了内容而变得非空时，空白关键帧就转换成了关键帧。按F7键可以插入一个空白关键帧。 元件：是指在Flash中创建的图形、按钮或影片剪辑，可以自始至终在影片或其他影片中重复使用。元件分为图形元件（可重复使用的图片）、按钮元件（在Flash中，所有的按钮都是元件）和影片剪辑（一段小动画，变成元件后，可随时播放）。按F8键可以将当前对象转换为一个元件。 实例：将库中的元件拖入到场景中，场景中的这个元件就称为实例。,时间轴面板,时间轴面板是用来进行动画创作和编辑的主要工具。 按照功能不同，可将时间轴分为两大部分：层操作区和时间控制区。,制作简单的Flash动画 （1）,变形动画也称补
6、间形状动画，是指形状发生变化的动画，是Flash中比较特殊的插值动画。 变形动画的原理是：在一个时间点绘制一个形状，然后在另一个时间点更改形状或绘制另一个形状。Flash会内插二者之间帧的值或形状来创建动画。,一个变形文字（“壮族”变成“印象”）的制作过程,渐变动画,渐变动画也称动作补间动画，指在一个时间点定义一个实例、组或文本块的位置、大小和旋转等属性，然后在另一个时间点改变那些属性。 渐变动画所处理的动画对象是场景中群组后的矢量图形、字符、引入的符号或者其他导入的素材对象。利用这种方法，可以对对象进行位置、大小、旋转、透明度等变换效果。,路径动画,Flash有一个运动引导层，在这个图层里画
7、一条移动路径，就可以让指定对象跟着路径自由移动。 参照课本“星球运动效果”实例，练习制作路径动画。,遮罩效果,遮罩是通过设计任意形状的区域，让处于底层被遮罩层的内容只能在该区域内显示 。 遮罩层的图形，在演示中是不显示的，它只是给定一个窗口，窗口的范围是遮罩图层图形的边沿所勾勒的范围。 参照课本“探照灯动画 ”实例，练习制作具有遮罩效果的动画。,星球运动的综合动画制作,动画表现的主题是宇宙中发光的太阳、地球、月亮和星星以及它们运动的轨迹。用到的技术有逐帧动画、补间动作动画、引导层、遮罩效果等。 整个动画分如下几个步骤（具体参照课本）： （）地球自转 （）月亮绕着地球转 （）发光的太阳 （）闪烁
8、的星星 （）地球绕着太阳转,Flash动画的保存、导出与发布,保存：在Flash MX 2004中，文档是以“*.fla”类型保存的，这种文件称为Flash动画源文件，保存文档时连同影片中的场景、时间轴、图层及库中的元件一同保存。下次打开时，可以继续动画的制作与编辑。 导出：执行菜单命令“文件 | 导出 |导出影片” ，得到“*.swf”类型的Flash文档。 发布：通过“文件 | 发布设置” 后，可将制作的flash输出成“*.swf”及相应的网页文件。,网络影院的灵魂媒体对象,目前网络条件相比过去得到很大提高，各种“在线影院”、“在线试听”、“Flash MTV”等媒体形式的出现，大大丰富
9、了网页的表现魅力。 我们需要学习在网页中如何插入Flash影片或Shockwave 影片以及插入其他音频、视频对象，以实现这些网页多媒体的效果。,认识插入命令菜单,Dreamweaver为了在网页中插入多媒体对象，设计了专门的插入命令及菜单面板，如图,插入Flash对象,Flash动画是一种高质量、高压缩率的矢量动画，有超强的交互能力，在网络上得到了快速发展。 在网页中插入的Flash媒体主要有： 1、Flash按钮 2、Flash文本对象 3、Flash电影,添加声音,在网络上，添加声音的常见格式有：mid、wave、mp3、aif和ram等。不同声音格式的差别在于文件大小和音质。,具体步骤
10、如下：确定插入点后，使用命令“插入 | 媒体 | 插件”， 在弹出的文件选择对话框中，选择本站点目录下的一个声音文件。最后在属性面板中，设定声音文件播放区域的相关参数。,小结,本章主要通过几个简单实例介绍了用Frieworks、Flash定做网页素材的方法，具体涉及到Fireworks、Flash工作界面的主要组成部分以及其常用工具的使用，了解了逐帧动画，关键帧动画等的制作原理，最后 对如何插入视频、音频及FLASH影片等各类媒体对象作了详细的讲解。,注意事项,不要使用中文来命名图像。 尽量使用定义的站点中的图像 尽量避免使用尺寸过大的图像。 尽可能有减少文字和图像的简单混合排版。 在网页中使用媒体对象时注意一般媒体对象的播放都需要插件的支持。,填空题,选择题,判断题,简答题,为何要用Fireworks来优化网页中的图像。 简述插入Flash文本对象的的作用。,上机实训,
