Fireworks8教案

2、给“切片”增加行为 、 切片”
• 简单交换图像：
– 在第一帧中创建切片， – 添加第二帧，在切片区域导入或绘制图像， – 在第一帧的切片中单击行为手柄，选择“简单交换 图像”。
• 不相交翻转图 • 将多个变换图像应用到所选切片：
– 将手柄拖动到同一切片的左上边缘时可创建一个交 换图像， – 将手柄拖动到其它切片时可创建不相交变换图像。
– 修改菜单
• 修剪画布（Ctrl+Alt+T） Ctrl+Alt+T
– 裁去多余的画布和图像
• 符合画布（Ctrl+Alt+F）
– 让画布与图像大小一样
• 旋转画布：修改/画布
二、工具的使用
• • • • • 常用位图图形工具 常用矢量图形工具 对象的选择与编辑 图形特效的设置 使用文本
1、常用矢量图形工具
3、使用切片导出图像
图层的操作
• • • • 新建、复制和删除图层（Alt键） 锁定和隐藏图层 图层透明度的设置 平面化、合并图层：将图层转化为位图层
–“向下合并”只对用于位图层，对于路径、切片、 热点和按钮是无效的 – 修改/平面化图层，修改/向下合并或层面板
• 网页层：包含Web对象（切片和热点）。
– 特殊的层，只有一个，在所有帧之间共享 – 不能停止共享、删除、复制、移动或重命名、合并
• 绘制基本的多边形和星形
– 边数3~360、拖动滑块可设选取工具
– – – – 选择规则区域：正方形或正圆选区 选择不规则区域：“套索”与“多边形套索” 选取相似色彩区域：选择——选择相似 调整选择区域
• • • • • 移动选区（光标置于选区内） 增加选区：Shift 减少选区：Alt 取消：Ctrl+D 相交选区：Alt+Shift
2、动画准备
•帧面板
– 设置帧延时
• 帧延时决定当前帧显示的时间长度。它以一秒的百 分之几为单位来指定。例如，如果设置为 50，则帧 显示 0.5 秒 。 • 可以同时更改多个帧的帧延时：结合Ctrl或Shift键。
•预览动画
– 用显示在文档窗口底部的帧控件。
3、创建动画
• 逐帧创建动画
– 手动创建帧，并在每一帧内设置实例。
• 铅笔、刷子、橡皮图章、橡皮擦 • 位图修饰
• 选择工具编辑图形
– – – –
3、对象的选择与编辑
指针、选择后方工具、部分选定 扩展或收缩选取框：选择——收缩/扩展选取框 反相选取：Ctrl+Shift+I 填充选区：Alt+del
• 图形的移动
– 按“方向”箭头一次移动一个像素； – Shift+方向箭头，一次移动10个像素。
– 通常在上面的图层中设置混合模式，然后应 用到下面的图层中。
混合模式包含下列元素：
• “正常”不应用任何混合模式。 正常” • “色彩增值”用混合颜色乘以基准颜色，从而产生较暗的颜色。 色彩增值” • “屏幕”用基准颜色乘以混合颜色的反色，从而产生漂白效果。 屏幕” • “变暗”选择混合颜色和基准颜色中较暗的那个作为结果颜色。这将只 变暗” 替换比混合颜色亮的像素。 • “变亮”选择混合颜色和基准颜色中较亮的那个作为结果颜色。这将只 变亮” 替换比混合颜色暗的像素。 • “差异”从基准颜色中去除混合颜色或者从混合颜色中去除基准颜色。 差异” 从亮度较高的颜色中去除亮度较低的颜色。 • “色相”将混合颜色的色相值与基准颜色的亮度和饱和度合并以生成结 色相” 果颜色。 • “饱和度”将混合颜色的饱和度与基准颜色的亮度和色相合并以生成结 饱和度” 果颜色。 • “颜色”将混合颜色的色相和饱和度与基准颜色的亮度合并以生成结果 颜色” 颜色，同时保留给单色图像上色和给彩色图像着色的灰度级。 • “发光度”将混合颜色的亮度与基准颜色的色相和饱和度合并。 发光度” • “反转”反转基准颜色。 反转” • “色调”向基准颜色中添加灰色。 色调” • “擦除”删除所有基准颜色像素，包括背景图像中的像素。 擦除”
• 保存：*.png • 打开与导入：文件菜单 • 显示比例：视图菜单及缩放工具
– 放大：Ctrl+=，缩小：Ctrl+– 缩放比率：实际大小、50%显示、200%显示等
• 调节视图比例：
– 双击手形工具：最适合的比例 – 双击放大镜工具：100%的比例
编辑画布属性
• 更改画布（图像）大小及颜色等：
4、图形特效的设置 、
– 滤镜—属性面板
5、使用文本
• 文本的输入
– 右上角会显示一个空心圆或空心正文形。圆表示该 文本块可自动调整大小，而正文形表示其宽度是固 定的，双击该标志可在两者之间切换。
• 设置文本的属性 • 常用操作
– 将文本添加到路径：
• 创建一条路径和一个文本块，文本/附加到路径 • 更改文本在路径上的方向：文本/方向 • 更改文本的起点：属性/文本偏移。结合帧面板，可以制 作类似引导层动画。
2.1、创建蒙版对象
• 使用层面板—创建空蒙版
– 选要创建蒙版的图层，层面板/添加蒙版， “选取框”绘制选区，填充渐变（黑隐白 显）。
• 粘贴为蒙版
– 绘制蒙版图像，编辑/剪切，选择要设置蒙 版的图像，编辑/粘贴为蒙版。（两个对象）
• 贴入内部
– 剪切被遮盖的图像，粘贴为内部至蒙版图形。
3、设计实例
5、动画的导入导出
• 导入动画
– 文件/导入
• 导出动画
– 文件/图像预览——GIF格式 – 快速导出——SWF格式
第三讲
• 按钮的制作 • 切片与热区 • 图形的优化与导出
一、按钮的制作
• 新建按钮
– 编辑/插入/新建按钮
• 按钮的不同状态
– 释放、滑过、按下、按下时滑过、有效区域
• 按钮的属性
2、蒙版
• 蒙版是将不同灰度色值转化为不同的透明度，并作用 到所在图层，从而使图层不同部位透明度产生相应的 变化。黑色为完全透明，白色为完全不透明（黑隐白 显） 。 • 通俗的讲，可以把蒙版理解为一块布，利用其在图层 上制作渐变，实现透明渐变的效果。 • 蒙版通常要与图层结合使用，从而实现特殊的图像效 果，如可使用蒙版完成扣图、创建选区、实现多图像 融合等等。 • 两种类型：矢量蒙版与位图蒙版
• 热区：有时又称为热点，是图像上带有超链接的一块 区域，可以呈矩形、圆形、多边形。使用热区可以为 一个网页图像设置多个不同区域的超链接。
1、创建和编辑切片
• 创建切片（多边形）对象
–“切片”工具 – 基于所选对象插入切片：编辑/插入/切片
• 显示/隐藏切片：“层”面板或“工具” / 面板 • 编辑切片
2、工作环境
• Fireworks窗口组成：
– 标题栏、菜单栏、工具面板、属性检查器、 编辑窗口、各种功能面板、状态栏 – 工具箱（Ctrl+F2）包含了六类工具：
• 选择、位图、矢量、Web、颜色和视图
• 各种面板或工具的显示/隐藏
3、Fireworks 8文件基本 操作
• 新建文件
– 启动向导或菜单 – 分辨率：网页图像72，印刷图像300。
– 属性面板
二、切片与热区
• • • • 创建和编辑切片 改变切片的颜色和隐藏切片 使用切片导出图像 创建热区
理解切片与热区
• 切片就是将一幅大图像分割为若干小的图像切片，然 后在网页中通过没有间距和边距的表格重新将这些小 图像没有缝隙地拼接起来，成为一幅完整的图像。 • 优点：
– 减少下载时间、制作动态交互效果、优化图像、创建链接
• 运用“选取框”工具、“套索”工具或“魔术棒” 工具选择像素，再进行剪切、复制和粘贴像素选区； • 将矢量图形转换成位图图像：修改—平面化所选
• 图形颜色填充 • 图形对象的组织——修改菜单 • 路径的编辑
– 修改/组合路径/……
• 联合、相交、打孔
3、对象的选择与编辑
– 组合、排列（Ctrl+箭头）、对齐
Fireworks 8.0 教案
第一节
• Fireworks基础入门 • Fireworks工具使用
一、Fireworks基础
• • • • Macromedia公司 专为网络图像设计 图像编辑软件 作用：制作GIF动画，大图切割、动态 按钮、动态翻转等。
1、位图图形与矢量图形
• 分辨率：每英寸面积或每厘米面积中的像素数目，也是 图像质量的一个重点技术指标。（像素是图像的基本单 位） • 位图：又称点阵图，由记录颜色信息的像素组合而成。 位图图形与分辨率有关，放大通常会使图像的边 缘呈锯齿状。 • 矢量图：使用称为“矢量”的线条和曲线（包含颜色和 位置信息）呈现图像。 矢量图形与分辨率无关，这意味着对其执行移动、 调整大小、更改形状或更改颜色等操作，都不会改变 其外观品质。
• 直线、基本图形工具、刀子工具、自由变形工 具 • 钢笔工具：
– 闭合路径：终点至起点处闭合。 – 开放路径：绘制完后，按ctrl键点击其他空白位置
• 绘制直线、矩形和椭圆
– 绘制标准正圆：Shift+左键绘制 – 以中心点绘制标准正圆：Alt+Shift+左键绘制
• 绘制圆角矩形
– 更改圆角值：Alt
• 在帧间共享层
– 如果希望对象在动画中一直出现，可将它们放置在 某一层上，然后使用"层"面板在帧间共享该层。当 " " 一个层在各帧间共享时，该层中的所有对象在每个 帧中都是可见的。 – 选择要共享的层：双击并选择“共享交叠层”
4、编辑动画
• 显示和隐藏要播放的帧
– 帧隐藏时，在播放时不显示出来并且不导出。 – 帧/属性/去掉“导出时包括”选项
– 移动、改变大小、复制、删除 – 注：使用辅助线切片图像可避免切片的重合
切片的命名
• 自动命名切片文件：
– 选中切片，在“属性”检查器中输入切片 名称。
• 更改默认的自动命名惯例：
– "文件">"HTML 设置">"文档特定信息"
在对“效果图”进行切片时应注 意
• 切片一定要和所切内容保持相同的尺寸，不能大也不 能小； • 切片不能重叠； • 单色区域不需要切片，因为可以写代码生成同样的效 果。也就是说，凡是写代码能生成效果的地方都不需 要切片； • 重复性的图像只需要切一张即可； • 多个素材重叠的时候，需要先后进行切片。例如背景 图像上有按钮，就需要先切片按钮，然后把按钮隐藏， 再切片背景图像。
• 广告背景图案
– 练习图层操作(宽750,高200)
• Banner
– 图层与蒙版的应用(宽648,高80)
二、动画制作
• 元件与实例 • 动画的制作
– – – – 动画准备 创建动画 编辑动画 动画的导入导出
1、元件与实例
• 创建新元件 • 编辑元件
– 双击实例或“库”面板中的元件
Fireworks 提供三 种类型的元件：图 形、动画和按钮。
• 分散到帧
– 在一帧内摆放好实例运动的位置，分散到帧。
• 动画元件
– 创建动画元件动画
• 新建动画元件：编辑/插入/新建元件（Ctrl+F8） • 属性检查器制作动画
– 快捷创建动画元件动画（将对象转换为动画元件）
• 选中对象/修改/动画/选择动画(Alt+Shift+F8)
• 创建补间动画
– 选择画布上同一图形元件的两个或更多的实例。不 要选择不同元件的实例。 –“修改”/“元件”/“补间实例”
• 图形的变形
– 缩放、倾斜、扭曲、翻转 – 变形菜单：修改/变形 – 任意变形：Ctrl+T， 数值变形：Ctrl+Shift+T
创建位图对象
• 绘制
– 使用fireworks位图绘制工具，在画布中直接绘制； – 在文档中插入一个空的位图图像（“层”面板中，单击 “新建空位图”按钮） ，再用位图工具对其进行绘制、 绘画或填充。
– 将文本转换为路径：文本菜单
第二讲
• 图层与蒙版 • 动画制作
一、图层与蒙版
• • • • • • 图层介绍 图层混合模式 图层相关操作 关于蒙版 创建蒙版 实例应用
1、图层
• 图层就象是含有文字或图像等元素的透 明胶片，一张张按由上至下的顺序叠加 在一起，形成图像。 • Fireworks 8 8中，对于绘制矢量图形会自 动分层，位图需手动建立图层分层。 • 图层的混合模式：39种之多
双击并选择共享交叠层284编辑动画帧属性去掉导出时包括选项295动画的导入导出快速导出swf格式30第三讲图形的优化与导出31一按钮的制作属性面板32二切片与热区创建热区33理解切片与热区切片就是将一幅大图像分割为若干小的图像切片然后在网页中通过没有间距和边距的表格重新将这些小图像没有缝隙地拼接起来成为一幅完整的图像
– 编辑/插入/新建元件（Ctrl+F8） – 将对象转换为元件：修改/元件/转换为元件（F8）
• 创建实例
– 将元件从"库"面板拖到当前文档中
• 编辑实例：
– 断开与元件的链接：修改/元件/分离 – 编辑实例属性：可以在不影响元件或其它实例的前提 下，在“属性”检查器中修改实例属性：
• 不透明度 、效果、宽度和高度 、x 和 y