图像与动画的制作与优化.ppt

8 1图像的制作与优化 Fireworks是集创建 编辑和优化网页图形为一体的应用软件 它不仅可以创建与编辑位图和矢量图 而且可以通过修剪和优化图形图像来减小文件的大小 而在不影响图形图像质量的情况下 文件的体积越小 网页的下载速度就越快 这也是Fireworks大受欢迎的原因之一 8 1 1Fireworks简介 1 Fireworks拥有与Dreamweaver相似的操作界面 同样由编辑区域 属性面板和浮动面板等组成 8 1 1Fireworks简介 2 单击菜单栏上的 文件 在下拉菜单中选择 新建 命令 打开 新建文档 对话框 在 新建文档 对话框中 可以通过更改宽度和高度的值 来更改画布的大小 还可以对分辨率和画布颜色进行修改 最后单击 确定 8 1 1Fireworks简介 3 窗口左边的工具面板分为六个区域 分别有不同的功能 在该面板上集成了编辑图像所需的各种工具 只需要在面板上选择相应的工具就可以对矢量图 位图进行操作 这样就省去了在位图和矢量图之间的切换操作 8 1 1Fireworks简介 4 和Dreamweaver的属性面板一样 Fireworks的属性面板也是一个包含各种选项的动态面板 随着操作内容的变化 属性面板上的内容也随着发生相应的变化 如图8 6所示是选中画布时 属性面板的样子 8 1 1Fireworks简介 5 在默认的情况下 Dreamweaver的面板组停放在工作区的右侧 我们可以取消面板组 以及叠放面板 排列面板顺序等操作 在该面板组中可以完成许多高性能操作 如图8 7所示该面板组中有 优化 层 资源 帧和记录 和 答案 等面板 其中 层 和 答案 面板是打开的 8 1 1Fireworks简介 6 在窗口中间是画布 它是对图像进行绘制 修改或编辑的地方 从图8 8中可以发现它提供了四种预览模式 原始 预览 2幅和4幅 具体的使用可以在下面的实例中给予说明 8 1 2Fireworks中图片的制作 1 更改画布 单击菜单栏上的 修改 弹出其子菜单 然后移动鼠标指针到画布上 在弹出其子菜单后 单击 画布大小 命令 在对话框中输入宽和高的值 单击 确定 按钮 8 1 2Fireworks中图片的制作 2 画出红色的矩形区域 在工具面板的 矢量 区中单击 矩形 工具 然后在工具面板的 颜色 区中单击填充颜色块 在弹出的调色板中选择红色 在画布上 拖动鼠标 画出一个红色的矩形区域 8 1 2Fireworks中图片的制作 3 输入字母 在工具面板的 矢量 区中单击 文本 工具 然后在编辑区的红色矩形块中单击鼠标 出现一个有光标闪动的文本框 在文本框中输入大写的字母 JL 然后拖动鼠标选中这两个字母 接着在 属性 面板中单击 颜色 块 在弹出的调色板中选择 黄色 在属性面板中单击 字体 框 在下拉列表中选择 Tahoma 字体 然后单击字号框右边的下拉按钮 拖动滑动指针 设置字号为31 在编辑区域单击鼠标 文字变成设置的效果 8 1 2Fireworks中图片的制作 4 在工具面板的 选择 区中单击 选取 工具 然后在编辑区域中拖动文本框到合适的位置 使两个字母看起来更美观 8 1 2Fireworks中图片的制作 5 输入汉字 重复上述操作 在红色矩形块的右边输入 杰力 两个汉字 设置字体为 楷体 字号为28 单击菜单栏上的 文件 在弹出的文件菜单中单击 保存 命令 对文件进行保存 8 1 2Fireworks中图片的制作 6 导出图片 单击菜单栏上的 文件 在文件菜单中单击 导出 命令 在对话框中输入文件名 单击 保存 按钮 8 1 3Fireworks中图片的优化 1 除了可以直接制作图片以外 Fireworks还可以对已有的图片进行优化 使图片在不影响视觉效果的情况下 体积更小 更有利于网络传输 8 1 3Fireworks中图片的优化 2 打开图片 单击菜单栏上的文件 打开 文件 菜单 在下拉菜单中单击 打开 命令 在 打开 对话框中 单击 查找范围 框 在下拉列表中找到存放图片文件的文件夹 然后选种要优化的文件 最后单击 打开 按钮 8 1 3Fireworks中图片的优化 3 在窗口右边的面板组中单击 优化 面板的 小三角 按钮 将 优化 面板展开 在 优化 面板中单击 设置 框 在下拉列表中选择 GIF接近256 将图片优化成GIF 文件 图片颜色为256色 优化图片 8 1 3Fireworks中图片的优化 4 单击文件菜单 在下拉菜单中选择 导出 命令 打开 导出 对话框 在 导出 对话框中输入文件名 单击 保存 命令 导出图片 打开保存文件的文件夹 可以发现优化的效果是非常明显的 8 1 4Fireworks与Dreamweaver整合应用 1 网站的制作过程一般可分为网页组件制作准备 网页制作和网页管理三个阶段 在网页组件制作准备阶段主要使用Fireworks对图片进行处理 其他两个阶段主要采用Dreamweaver进行操作 通过两个软件的整合可以实现网站的决大部分操作 除了这种整合应用以外 在Dreamweaver中随时可以打开Fireworks 对网页中的图片进行编辑和优化 8 1 4Fireworks与Dreamweaver整合应用 2 在Dreamweaver窗口中 选中图片 然后在 属性 面板中单击 编辑 按钮 打开Fireworks 在Fireworks窗口中可以发现 图形文件被打开 特别是图片编辑区有 编辑自Dreamwea 的字样 表明该图片来自Dreamweaver 对图片进行编辑或优化后 单击 完成 按钮 Fireworks编辑窗口自动关闭 同时Fireworks程序窗口最小化 Dreamweaver窗口中图片显示编辑后的样子 8 2动画的制作与优化 现在的网络可以说是Flash时代 越来越多的人喜欢Flash动画 越来越多的网站使用Flash制作的动画 不知Flash为何物 会直接被人认为是网络盲 甚至是电脑盲 Flash功能强大 不仅仅是制作动画 甚至有人直接用它来制作网页 特别值得一提的是 它与Dreamweaver Fireworks等软件整合使用天衣无缝 8 2 1Flash简介 1 Flash为广大用户提供了三种不同的使用模式 我们多采用一般用户模式 设计者模式是专为动画设计师准备的 而开发者模式是给程序开发人员使用的 采用不同的模式可以屏蔽掉一些功能 为不同需求的用户带来极大的便利 单击 窗口 菜单 选择 面板设置 下的不同命令可以在不同的模式下进行切换 8 2 1Flash简介 2 工具面板提供了一些常用的绘图工具 使用这些工具可以很容易地绘制出各种图形 该面板共分为4部分 工具部分主要用来创建或改变图像或文本 查看部分用来调整编辑的舞台 颜色部分选择填充的颜色或线条的颜色 选项部分则随着选取工具的不同 而出现相应的修改工具 8 2 1Flash简介 3 动作 帧面板是提供内嵌程序语言的编辑面板 作为初级使用者一般用不到 属性面板则用处很大 它和Dreamweaver Fireworks的属性面板一样 其内容会根据所选对象的不同而发生变化 如图是新建一个文件时 属性面板的样子 8 2 1Flash简介 4 在窗口中间的编辑区域 我们称其为舞台 它主要用于绘制或导入图片 添加文本或声音以及添加附加行为作为导航按钮等等操作 在没有特殊效果的情况下 Flash动画都可以直接在舞台上播放 而不必转换成可播放的动画文件 8 2 1Flash简介 5 Flash的时间轴主要用来组织和控制动画在一定时间内播放的层数和帧数 我们知道一帧一帧静止的图片连续起来就形成了动画 所以最简单的动画制作方法就是画出一帧一帧的图片 然后通过时间轴来控制他们的播放速度来实现 时间轴由图层 帧和播放头组成 8 2 1Flash简介 6 在默认的情况下 面板组包含 混色器 颜色样本 组件 和 问题解答 四个 通过 窗口 菜单可以添加面板 当然也可以隐藏面板 8 2 2使用Flash制作补间动画 1 补间动画是创建随时间移动或更改的动画的一种有效方法 并且最大程度地减小所生成的文件 在补间动画中 Flash能够自动地在两个关键帧之间插入帧的值或形状来创建动画 使动画变得生动 补间动画分为运动渐变与形状渐变两种动画 运动渐变是指在一个时间点定义一个实例或文字块的位置 大小等特性 在另一个时间点改变这些属性 Flash自动插入动画帧 形成两者之间平滑的过度 形状渐变是指在一个时间点绘制一个形状 在另一个时间点更改该形状 Flash自动插入动画帧 形成两者之间平滑的过渡 8 2 2使用Flash制作补间动画 2 修改舞台大小 单击菜单栏上的 修改 在其下拉菜单中单击 文档 命令 在 文档属性 对话框中 修改尺寸值为图片的大小 注意默认单位为像素 单击 确定 后 舞台变为设置的大小 8 2 2使用Flash制作补间动画 3 将图片导入到舞台中 作为背景 单击文件菜单 选择 导入 命令 在 导入 对话框中 选择查找范围 找到要导入的图片文件 单击 打开 按钮 单击选择工具 拖动图片 使它完全遮盖住白色的舞台背景 8 2 2使用Flash制作补间动画 4 使用鼠标单击第30帧 然后单击 插入 菜单 在下拉菜单中单击 帧 命令 这样 从第1帧到第30帧都使用了该图片作为背景 同时 确定动画长度 也设定了整个动画为30帧 8 2 2使用Flash制作补间动画 5 插入图层和文字 在时间轴面板中单击 插入图层 按钮 在图层1上插入一个新的图层 选中图层2的第1帧 然后单击 工具 面板中的 文本工具 在图片上方单击鼠标 出现文本框 输入一个字 欢 然后选中这个字 在属性面板中更改合适的字体和字号 并设置字体颜色为蓝色 8 2 2使用Flash制作补间动画 6 选中图层2的第30帧 单击 插入 菜单 在下拉菜单中选择 关键帧 命令 在第30帧插入一个关键帧 选择 工具 面板中的选取工具 拖动文字块 欢 到图片中的合适位置 插入关键帧 8 2 2使用Flash制作补间动画 7 创建补间动画 选中图层2上的第1帧 在属性面板中 单击 补间 右边的下拉框 在下拉列表中选择 运动 为第1帧到第30帧之间设置上补间动画 可以发现两者之间有一条黑色的箭头 8 2 2使用Flash制作补间动画 8 创建补间动画 重复上述步骤 插入图层3 在图片下面插入一个文本框 输入一个字 迎 并设置字的字体 字号 字体颜色与 欢 相同 用同样的方法在图层3的第30帧插入一个关键帧 将 迎 拖入图片合适位置 并设置补间动画 8 2 2使用Flash制作补间动画 9 创建补间动画 再次重复操作 在图片上面插入 光 在图片下插入 临 并设置上动画 单击 控制 菜单 在下拉菜单中选择 播放 命令 可以看到四个字分别进入图片上的动画效果 8 2 2使用Flash制作补间动画 10 导出动画 单击 文件 菜单 在下拉菜单中选择 导出 命令 在 导出影片 对话框中 输入文件名 单击保存 将影片保存 将来可以随时将他插入到网页中 另外 也 可以更改保存类型为GIF文件 生成GIF动画 8 2 3使用Flash制作逐帧动画 1 逐帧动画是指更改每一帧中的内容 来实现动画效果 它最适合于每一帧中的图像都在更改而不是仅仅简单地在舞台上移动的复杂动画 逐帧动画增加文件大小的速度比补间动画快的多 在逐帧动画中 Flash会保存每个完整帧的值 8 2 3使用Flash制作逐帧动画 2 在Flash中建立一个新的文件 修改文档大小为图片大小 然后导入图片到图层1中 并拖动该图片到合适的位置 选中图层1中的第30帧 单击 插入 菜单 选择 帧 命令 设置前30帧为相同的背景 建立文件 8 2 3使用Flash制作逐帧动画 3 在时间轴面板中单击 插入图层 按钮 在图层1上插入一个新的图层 选中图层2的第1帧 然后单击 工具 面板的文字工具 在图片上输入 欢迎光临 四个字 使用选取工具 调整文字在图片中的位置 并设置字体 字号和文字颜色等 拖动鼠标 选中图层2中的第1帧到第30帧 保持选取状态 单击鼠标右键 在打开的快捷菜单中选择 转换为关键帧 命令 8 2 3使用Flash制作逐帧动画 4 选中第5帧 将文字框中的 迎光临 几个字删除 选中第10帧 将文字框中的 光临 几个字删除 选中第15帧 将文字框中的 临 删除 拖动鼠标 选中图层2中的第1帧到第4帧 保持选取状态 单击鼠标右键 在打开的快捷菜单中选择 清除关键帧 命令 如图8 65所示 然后按下键盘上的 del 键 将图层上的文字删除 8 2 3使用Flash制作逐帧动画 5 单击 控制 菜单 在下拉菜单中选择 播放 命令 这时可以看到文字依次出现的效果 与补间动画一样 保存文件后选择 文件 菜单下的 导出 命令 将Flash影片导出 可以随时 插入到Dreamweaver中 8 2 4Flash与Dreamweaver整合应用1 Flash也能够与Dreamweaver整合使用 在网页制作过程中 插入Flash文本与Flash按钮就是整合使用的好例子 Dreamweaver还可以直接调用Flash对网