专题：FireWorksFlash.ppt

网页设计基础 网络中心 王大阜Telail wdf 1 网页设计基础 专题 FireWorks Flash 2 网页设计基础 1 1FireWorks概述 矢量图使用称为 矢量 的线条和曲线 包括颜色和位置信息 呈现图形 编辑矢量图形时 修改的是描述其形状的线条和曲线的属性 而不是像素点 所以矢量图放大后仍然保持清晰 位图图像 由像素点描述图像 图像是由每个像素点的位置和颜色值决定的 放大位图图像时 会变得模糊 变成马赛克状 3 网页设计基础 1 1FireWorks概述 Fireworks界面 4 网页设计基础 1 1FireWorks概述 Fireworks界面工具箱有些按钮右下角有箭头 点击按钮不松手 可以看到很多子选项选择 实心箭头 全部选定工具选中整个对象 四周出现 缩放点 空心箭头 部分选定工具选中某对象的路径 四周出现 控制点 如何选中多个对象 按住Shift键使用实心箭头 选中多个对象 5 网页设计基础 1 1FireWorks概述 Fireworks界面属性面板画布的属性某个图形对象的属性 实心指针 画布大小和对象尺寸吻合 修改画布大小 注意基准点 X Y是对象的坐标 画布左上角顶点坐标是 0 0 滤镜效果很多 如发光 浮雕 模糊 投影等 6 网页设计基础 1 2FireWorks操作 Fireworks文件操作新建文档适用于制作网页效果图和其他平面效果图的时候操作 文件 新建 打开文件Fireworks可以打开Photoshop格式 psd 的图片或gif jpg等图片操作 文件 新建 OR鼠标拖拽图片文件到Fireworks界面的任意区域 但不能拖动到工作区中 那就相当于导入文件导入文件适用情形 要在一张图片上插入其他的图片操作 文件 导入 保存文件 文件 保存 保存的是png格式文件 保留了图片的原始信息 方便今后修改 与PhotoShop类似导出文件 文件 图像预览 设置相关属性 导出 7 网页设计基础 1 2FireWorks操作 Fireworks图形处理操作Fireworks操作分为两类 编辑图片素材 如裁剪图片 去掉照片的背景颜色 自己绘制图形 如网页效果图 大多数操作都是绘制操作 编辑图片素材 改变图片大小 裁剪 先选择 后操作 选择 即创建选区 工具有 矩形选取框 椭圆选取框 套索 多边形套索 魔术棒 8 网页设计基础 1 2 1编辑位图 选区操作 创建选区 边缘 选项 有三种 实边 选取框严格按照鼠标操作产生区域 消除锯齿 防止出现锯齿 羽化 柔滑选区边缘 边缘模糊 选区操作 删除 Delete键复制 Ctrl C Ctrl V移动 实心选定工具 移动选取 原选取变成 空洞 反向选取 鼠标右击 修改选取框 反选 取消选取框 ESC键绘制多个选区 可按住Shift键矩形选取框 操作时 按住Shift键可绘制正方形 如再按住Alt键 会从中心点绘制椭圆选取框 同上 9 网页设计基础 1 2 2矢量位图 绘制矢量图形矢量图形基本构成 笔触颜色 粗细 样式 填充颜色 笔触 填充 10 网页设计基础 1 2 2矢量位图 绘制矢量图形矢量图形种类直线矩形正方形 按键与选取操作一致 椭圆形圆形 按键与选取操作一致 多边形自由形状很多圆角矩形 缩放点 控制点 按住Alt键拖拽变成直角 11 网页设计基础 1 2 2矢量位图 绘制矢量图形填充颜色实心 纯颜色 渐变 两种或两种以上颜色的过渡 通常选择 线性 选项 图案 渐变结束颜色 渐变开始颜色 渐变开始透明度 渐变结束透明度 渐变中间颜色 渐变引导线 可平移引导线 可旋转 伸缩引导线 12 网页设计基础 1 2 2矢量位图 编辑文字安装字体Windows自带的字体目录 C Windows Fonts 但一般不具有艺术效果 需下载字体 字体文件扩展名为ttf 下载后 复制到字体目录 重启FireWorks即可使用 字体操作字体 大小 颜色 字间距 描边 笔触 投影倒影字选中文字对象 按住ALT键拖动复制 为倒影使用先垂直翻转 修改 变形 垂直翻转 后线性渐变色填充字体 笔触 滤镜 投影 字间距 13 网页设计基础 1 2 3蒙版 蒙版蒙版作用是显示图像的某些区域或使图像由模糊到清晰进行过渡的技术 有遮罩的意思 粘贴于内部使图像位于某种形状对象内部操作 绘制一圆角矩形 有直角导入图片 改变图层顺序 使图片位于圆角矩形下方实心选择工具选中图片 剪切选中圆角矩形 鼠标右击 选择 编辑 粘贴于内部 14 网页设计基础 1 2 3蒙版 蒙版组合为蒙版制作图像由清晰过渡到透明的渐隐效果操作 导入图片使用 矩形 工具 绘制一个和图片尺寸一样的矩形 设置填充为线性渐变 颜色从黑到白通过层面板 按住Ctrl键同时选中矩形和图片选择菜单 修改 蒙版 组合为蒙版 15 网页设计基础 1 2 4提取图片 保存必要的图片效果图制作完毕后 需要从中提取部分区域作为单独的图片文件 如顶部大幅图片 圆角矩形选项卡等等其他的从网上搜集的素材 如新闻列表小图标 没必要提取 提取方法 复制 新建文档 粘贴 导出新建文档时 画布的大小刚好就是所复制的图形对象大小 默认的 切片与导出选中切片工具 在图片上拖动鼠标 即可创建切片 切片是绿色半透明的矩形 四周是红色的线导出切片 文件 导出 仅导出图像HTML和图像 切片工具 16 网页设计基础 1 3Flash动画 Flash8 工具箱 舞台 面板 属性面板 时间轴 图层 17 网页设计基础 1 3Flash动画 Flash制作流程在舞台中作图 也可以使用现有的图片素材制作Flash动画逐帧动画补间动画 只需创建第一帧和最后一帧 中间帧可以自动生成 导出Flash 文件 保存 文件扩展名为 fla 保留原始信息 文件 导出影片 导出成swf格式的动画 18 网页设计基础 1 3Flash动画 Flash动画基本原理动画的内容通过时间轴组织的 时间轴将动画的内容在横向上划分为帧 在纵向上划分为图层帧 动画的一个静态片段空白关键帧 空心圆 没有内容 空白的帧 如在舞台中绘制一个圆形 空白关键帧就转换成关键帧 关键帧 实心圆 产生动画的起关键作用的帧普通帧 空心矩形 是关键帧的延续图层 动画的某个演员 19 网页设计基础 1 3Flash动画 补间Flash自带的动画技术 实现两个关键帧之间建立渐变的一种动画形状补间从一种形状逐渐变成另一种形状的动画 如圆形变成正方形动画补间关键帧的对象必须是元件的实例 群组体或文字元件是可以重复使用的具有模板意义的图像 动画或按钮实例是元件在舞台上的具体体现群组体是指在舞台上同时选中多个对象 选择菜单中 修改 组合 命令 将多个对象组合到一起而生成的对象原理设置好第一个关键帧 然后再第二个关键帧中修改对象的属性 从而在两帧之间产生动画效果可以修改的属性包括大小 颜色 旋