专题：FireWorks+Flash

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