专题：FireWorks+Flash.ppt

网页设计基础,网络中心：王大阜 TelMail:,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:WindowsFonts，但一般不具有艺术效果，需下载字体，字体文件扩展名为ttf。下载后，复制到字体目录，重启FireWorks即可使用。 字体操作 字体、大小、颜色、字间距、描边（笔触） 投影 倒影字 选中文字对象，按住ALT键拖动复制，为倒影使用 先垂直翻转修改-变形-垂直翻转 后线性渐变色填充字体）,笔触,滤镜-投影,字间距,13,网页设计基础,1.2.3 蒙版,蒙版 蒙版作用是显示图像的某些区域或使图像由模糊到清晰进行过渡的技术，有遮罩的意思。 粘贴于内部 使图像位于某种形状对象内部 操作： 绘制一圆角矩形，有直角 导入图片，改变图层顺序，使图片位于圆角矩形下方 实心选择工具选中图片，剪切 选中圆角矩形，鼠标右击，选择“编辑”-“粘贴于内部”,14,网页设计基础,1.2.3 蒙版,蒙版 组合为蒙版 制作图像由清晰过渡到透明的渐隐效果 操作： 导入图片 使用“矩形”工具，绘制一个和图片尺寸一样的矩形，设置填充为 线性渐变，颜色从黑到白 通过层面板，按住Ctrl键同时选中矩形和图片 选择菜单“修改”-蒙版-“组合为蒙版”,15,网页设计基础,1.2.4 提取图片,保存必要的图片 效果图制作完毕后，需要从中提取部分区域作为单独的图片文件。如顶部大幅图片、圆角矩形选项卡等等 其他的从网上搜集的素材，如新闻列表小图标，没必要提取。 提取方法： 复制-新建文档-粘贴-导出 新建文档时，画布的大小刚好就是所复制的图形对象大小（默认的） 切片与导出 选中切片工具，在图片上拖动鼠标，即可创建切片， 切片是绿色半透明的矩形，四周是红色的线 导出切片（“文件”-“导出”） 仅导出图像 HTML和图像,切片工具,16,网页设计基础,1.3 Flash动画,Flash 8,工具箱,舞台,面板,属性面板,时间轴,图层,17,网页设计基础,1.3 Flash动画,Flash制作流程 在舞台中作图，也可以使用现有的图片素材 制作Flash动画 逐帧动画 补间动画（只需创建第一帧和最后一帧，中间帧可以自动生成） 导出Flash “文件”-“保存”，文件扩展名为.fla。保留原始信息 “文件”-“导出影片”，导出成swf格式的动画,18,网页设计基础,1.3 Flash动画,Flash动画基本原理 动画的内容通过时间轴组织的。时间轴将动画的内容在横向上划分为帧，在纵向上划分为图层 帧：动画的一个静态片段 空白关键帧（空心圆），没有内容、空白的帧，如在舞台中绘制一个圆形，空白关键帧就转换成关键帧。 关键帧（实心圆），产生动画的起关键作用的帧 普通帧（空心矩形），是关键帧的延续 图层：动画的某个演员,19,网页设计基础,1.3 Flash动画,补间 Flash自带的动画技术，实现两个关键帧之间建立渐变的一种动画 形状补间 从一种形状逐渐变成另一种形状的动画，如圆形变成正方形 动画补间 关键帧的对象必须是元件的实例、群组体或文字 元件是可以重复使用的具有模板意义的图像、动画或按钮 实例是元件在舞台上的具体体现 群组体是指在舞台上同时选中多个对象，选择菜单中”修改“-”组合“命令，将多个对象组合到一起而生成的对象 原理 设置好第一个关键帧，然后再第二个关键帧中修改对象的属性，从而在两帧之间产生动画效果 可以修改的属性包括大小、颜色、旋