专题：FireWorks+Flash
- 格式：ppt
- 大小：1.43 MB
- 文档页数：7
下载文档原格式
合集下载
Flash动画及软件简介
这个软件具有众多的优点，其中最为称道的 是它的流式播放、关键帧技术和矢量动画。 一方面流式播放可以解决网络带宽的影响， 一边下载一边播放；关键帧技术解决了传统 动画中繁复的手工着色；矢量图像解决了传 统位图在电脑制作过程中占用空间大的缺陷。 在当时来说，这个软件从开始研发，就具有 互联网气息。直到现在，这些仍然是 Flash 的主要优势
Flash网络动画 网络动画
• 8．“控制 ”菜单 ．
在设计的过程中，我们要不停的测试影 片，以符合自己的设计，所以说“控制”菜 单是Flash当中重要的一环
Flash网络动画 网络动画
Flash网络动画 网络动画
艺术与设计学院 董海斌
Flash网络动画 网络动画
第一章 Flash网络动画 网络动画
第一节 互联网 第二节 Flash起源 起源 第三节 Macromedia 与Flash 第四节 Flash发展 发展
Flash网络动画 网络动画 第一节 互联网
互联网的英文名字是Internet,汉译音为因特网，泛指由多个计算机网络相互连接而成的网络集合， 即是一个由各种不同类型和规模的、独立运行与管理的计算机，组成全球范围的计算机网络，组 成Internet的计算机网络,包括局域网(LAN)、城域网(MAN)以及大规模的广域网(WAN)等。这些网 络通过普通电话线、高速率专用线路、卫星、微波和光缆等通讯线路,把不同国家的大学、公司、 科研机构和政府等组织的网络资源连接起来,从而进行通信和信息交换,实现资源共享。I 互联网是在20世纪60年代末开始发展起来的,最初是美国用于军事研究的专用计算机网,后建立军用 网(MIL-net)及欧洲的军用网。90年代中期，专用计算机网技术的迅速发展,使它变成了一个普及全 球的信息网络。 1992年以后,随着商业性网络进入互联网,互联网现已成为全球最大的商业电脑网络。我国从1994年 4月起正式加入互联网。
多媒体网页设计判断题
1.使用JavaScript修改浏览器状态栏的方法是“window.status="字符";”对2.CSS样式使用有3种方法，内嵌样式、内部样式表、外部样式表。
对3.＜body＞＜/body＞是网页代码中主体的标志。
对4.HTML设计语言中＜/p＞标记是用来实现网页换页。
错5.对于声音采样，样本位数越多，声音的质量越高，而需要的存储空间也越小。
错6.1394接口是一种新的接口，可以把DV视频文件直接输入到计算机中。
对7.Flash中，可以用引导线来控制对象按照预定的轨迹运动。
对8.在Flash中，创建的元件在任何时候、任何地方都可以被Flash调用，但元件不能减少Flash电影的文件大小。
错9.Flash的最基本的动画功能有：运动动画，形变动画，逐帧动画以及多层次叠加动画。
对10.P hotoshop中最常用的控制面板包括：“图层”面板、“导航器”面板、“信息”面板、“历史记录”面板和“通道”面板。
对11.在Photoshop中，定义画笔的属性时，可以更改画笔的笔触形状。
对12.在Photoshop中，所有图层都可改变不透明度。
错13.在FrontPage当中预览状态，网页是不可以修改的。
对14.小张制作了一个图片网站，网站目录在D:\zhang ，他的图片在本地电脑的我的文档中，他只需要把目录zhang 拷贝给老师，老师就可以正常显示网站了。
错15.超链接以及访问过的超链接的颜色是无法改变的。
错16.在JavaScript中，声明变量使用:var来进行声明。
对17.可以利用修改CSS来改变文本超级链接的颜色属性。
对18.＜title＞我的音乐网页＜/title＞，我的音乐网页文字将显示在网页正文中。
错19.H TML和HTTP一样是网络上遵循的一种协议。
对20.G oldwave是一款录音软件，只能录音，不能编辑声音文件。
错21.A dobe Premiere是专业的数字视频处理软件。
第7章 Flash操作基础
7.1 Flash基本概念与动画原理
2. Flash的动画原理 Flash动画是将一系列具有细微差别的画面 （即帧）以一定的速度播放，利用人的视 觉暂留原理，使原来静止的图像运动起来。
7.2 Flash工作界面
图7-1 Flash8的工作界面
7.2 Flash工作界面
1. 工具栏：其中的工具可以用于绘制、涂色、选择和修改插图 2. 时间轴：是Flash工作界面中最重要的组成部分，在制作flash 动画时，主要就是在时间轴中对帧进行编辑，动画的播放也是 靠时间轴来控制的，时间轴左边为图层区，右边由播放指针、 帧格、关键帧、时间轴标尺及状态栏组成。 3. 场景与舞台：在Flash中编辑的动画通常是在工作界面中间 的白色区域中进行的，这个白色的区域叫做“舞台”，用户可 以在其中进行图形的绘制和编辑等工作，舞台外部有一大片灰 色的区域，这个灰色的区域称为“工作区”，工作区中的内容 在最终播放动画时时不会显示出来的。工作区就象是舞台的 “后台”，在其中可以做许多准备工作或辅助工作，但真正表 现出来的只是舞台上的内容，舞台和工作区组合起来就成为 “场景”。 4. 属性面板、动作面板及面板组：Flash 8 中包括了许多浮动 面板，如 “ 属性 ” 面板、 “ 动作 ” 面板、 “ 混色器 ” 面 板、 “ 组件 ” 面板等。用于对舞台中对象的各种属性进行设 置。
7.3.3 图形、声音素材的处理
(2) 图形的变形 1）使用选择工具变形图形 选择工具栏中的选择工具，将鼠标移动到图形的 边缘区域，鼠标变成形状，按下鼠标左键向所需 方向拖动鼠标即可改变图形的形状。 2）用任意变形工具变形对象 用任意变形工具不但可以进行缩放和旋转操作， 还可以对选中对象进行变形操作，制作出特殊的 效果，选择任选工具栏中的任意变形工具，“选 项”区域如图7-7所示
利用Fireworks制作动画
教学目标：
掌握创建逐帧动画 掌握创建元件动画 掌握创建其他动画 掌握制作逐字变色动画
25.1 创建逐帧动画
逐帧动画需要用户更改影片每一帧中的舞台 内容。简单的逐帧动画并不需要用户定义过 多的参数，只需要设置好每一帧，动画即可 被播放。逐帧动画最适合于每一帧中的图像 都在更改的动画，而不仅仅是简单地在舞台 中移动的复杂动画。
(2)单击【帧】面板右上角的按钮，在弹出的菜单中选择 【属性】命令，弹出【帧属性】对话框。
(3)在【帧延时】文本框中输入需要设置的时间。设置完 毕后，单击此对话框以外的区域或按Enter键，即可完成 对该帧延迟时间的设置。
25.2 创建元件动画
动画元件可以是创建或导入的任何对象，并 且在一个文件中可以有许多元件。每个元件 都有它自己的属性并可独立运动。
25.2.1 元件和实例 25.2.2 编辑元件
25.2.1 元件和实例
如果文档中有重复使用的元素，可通过复制和粘贴 操作在文档中创建对象。
元件和实例还有一些其他用处，如制作动画。Flash 的元件和实例，就是通过创建元件，并不停地改变 实例属性，来表示运动的感觉。一个元件就像一个 木偶，一举一动都是由操作者完成。
(3)在对话框中选中【以动画打开】复选框，单击【打开】 按钮，Fireworks就会在单个文件中打开所需要的文件。在 【帧】面板中可以看到每个文件都按选定的顺序放置在 【帧】面板中。
25.3.2 导入现有GIF动画
导入现有GIF动画的具体操作步骤如下。
(1)选择【文件】|【打开】命令，弹出【打开】对话框。 (2)在对话框中选择要导入的GIF动画，单击【打开】按钮，
25.1.2 编辑帧
可以在【帧】面板中添加、复制、删除帧和 更改帧的顺序。
掌握创建逐帧动画 掌握创建元件动画 掌握创建其他动画 掌握制作逐字变色动画
25.1 创建逐帧动画
逐帧动画需要用户更改影片每一帧中的舞台 内容。简单的逐帧动画并不需要用户定义过 多的参数，只需要设置好每一帧，动画即可 被播放。逐帧动画最适合于每一帧中的图像 都在更改的动画，而不仅仅是简单地在舞台 中移动的复杂动画。
(2)单击【帧】面板右上角的按钮，在弹出的菜单中选择 【属性】命令，弹出【帧属性】对话框。
(3)在【帧延时】文本框中输入需要设置的时间。设置完 毕后，单击此对话框以外的区域或按Enter键，即可完成 对该帧延迟时间的设置。
25.2 创建元件动画
动画元件可以是创建或导入的任何对象，并 且在一个文件中可以有许多元件。每个元件 都有它自己的属性并可独立运动。
25.2.1 元件和实例 25.2.2 编辑元件
25.2.1 元件和实例
如果文档中有重复使用的元素，可通过复制和粘贴 操作在文档中创建对象。
元件和实例还有一些其他用处，如制作动画。Flash 的元件和实例，就是通过创建元件，并不停地改变 实例属性，来表示运动的感觉。一个元件就像一个 木偶，一举一动都是由操作者完成。
(3)在对话框中选中【以动画打开】复选框，单击【打开】 按钮，Fireworks就会在单个文件中打开所需要的文件。在 【帧】面板中可以看到每个文件都按选定的顺序放置在 【帧】面板中。
25.3.2 导入现有GIF动画
导入现有GIF动画的具体操作步骤如下。
(1)选择【文件】|【打开】命令，弹出【打开】对话框。 (2)在对话框中选择要导入的GIF动画，单击【打开】按钮，
25.1.2 编辑帧
可以在【帧】面板中添加、复制、删除帧和 更改帧的顺序。
《Flash与Fireworks》
《Flash与Fireworks》实训创建站点根目录，并在其中创建“png”、“css”、“flash”、“images”子文件夹。
第一部分：Fireworks篇使用Fireworks制作网页效果图。
（一）“main”页面的制作1、新建画布，1000px×760px。
2、使用“main”文件夹中的相关素材，保存main.png源文件，存放在根目录下png子文件夹中。
制作时参考“效果图”文件夹中的“效果图一.jpg”。
注：“效果图一.jpg”中显示添加部分素材后效果，且标注所使用的素材名称及相关颜色值。
3、使用“main”文件夹中的相关素材，编辑main.png，保存源文件。
制作时参考“效果图”文件夹中的“效果图二.jpg”。
注：①“效果图二.jpg”中显示添加文本后的效果，且标注所使用的素材名称。
②在导航的”项目概况”、“品质建筑”、“园林景观”、“精英团队”上添加弹出菜单。
③网页相关文字见“main”文件夹中的“网页内容.doc”。
④可以修改main.png上的显示文字，包括标题、小标题、正文等。
（二）“sub”页面的制作1、新建画布，1000px×940px。
2、使用“sub”文件夹中的相关素材，保存sub.png源文件，存放在根目录下png子文件夹中。
制作时参考“效果图”文件夹中的“效果图三.jpg”。
注：“效果图三.jpg”中显示添加部分素材后效果，且标注所使用的素材名称及相关颜色值。
3、使用“sub”文件夹中的相关素材，编辑sub.png。
保存源文件。
制作时参考“效果图”文件夹中的“效果图四.jpg”。
注：①“效果图四.jpg”中显示添加文本后的效果，且标注所使用的素材名称。
②在导航的”项目概况”、“品质建筑”、“园林景观”、“精英团队”上添加弹出菜单。
③网页相关文字见“sub”文件夹中的“网页内容.doc”。
④可以修改main.png上的显示文字，包括标题、小标题、正文等。
网页设计与制作(Dreamweaver + Fireworks + Flash)(20秋)形考作业3
关于下列代码，描述正确的是（）。
<table width="300" cellpadding="0" cellspacing="0"> <tr><td width="31%">日期</td><td width="22%">课程</td></tr><tr><td>9月1日</td><td>Dreamweaver网页设计</td></tr><tr><td>9月10日</td><td>Flash动画设计</td></tr></table>•••53分关于网页中的换行，说法错误的是（）。
•••63分在HTML语言中，<body alink=#ff0000>表示（）。
•••73分Fireworks中Frame的间隔时间以什么为单位？（）•••83分下面哪些不属于网页的多媒体元素（）•••93分在向swatches 面板中添加颜色时,鼠标指针变为( )•••103分下面哪些文件属于静态网页（）•••113分Firework中将一串文本转换成Path后，如何将没个字符转换成单个的独立路径？（）•••123分Fireworks中Text的对齐属性中Left对齐的默认快捷方式是？（）•••133分模板只有在建立了可编辑区域后才被使用，那么“新建可编辑区域”命令在哪个菜单中（）。
•••143分下列叙述正确的是？（）•••153分关于超链接，下列（）属性是指定链接的目标窗口。
•••163分下列颜色中，属于互补色的是( )•••173分Fireworks的layers中下面哪一个是扩展/收缩层面板？（）•••183分在Flash MX中要测试动画，可使用的快捷键是( )•••193分下列特殊符号（）表示的是空格。
中文版DreamweaverFireworksFlash (CC版) 网页设计
2 Dreamweaver软件基础知识
1
2.1 知识讲解——初识 Dreamweaver
2
2.2 知识讲解——站点的新建与 管理
3
2.3 知识讲解——文档的基本操 作
4
2.4 同步训练——实战应用
5
本章小结
2 Dreamweaver软件基础知识
2.1.1 Dreamweaver CC工作环境
A
2.1.2 Dreamweaver CC参数设置
C
B
A
本章小结
D
4 网页表单元素
4.1.1 插入 表单域
1
4.1.2 表单 域属性设置
2
4.1 知识讲解——表单域
4 网页表单元素
0
0
1
2
4.2.1 使 用文本域
0 4
4.2.2 使 用文本区
域
0
5
4.2.4 使 用复选框
组
4.2.5 使用 单选按钮和 单选按钮组
0 3
4.2.3 使 用复选框
0 6
览器
1 网站建 设与网页 设计基础 知识
1.1 知识讲解
01 1.1.7 域名
03 1.1.9 FTP
05 1.1.11 网站
02 1.1.8 HTTP
04 1.1.10 带宽
1 网站建设与网页设计基础知识
0
0
0
1
2
3
1.2.1 网 页的类型
5.1 知识讲解——插入特殊 元素
01
5.1.1 插入水 平线
03
5.1.3 插入注 释
02
5.1.2 插入日 期
5.2.1 插入页面关 键字
fireworks
6. 点击 选择工具箱中的指针 工具，选择画好的螺旋 7. 选择菜单 修改 变形 水 平翻转 8.选择菜单 修改 变形 缩 放 调整螺旋的大小 9. 移动螺旋将它和字体相连 接形成左图 10. 请按上述方法，画完艺术 字
创建一个球体
1. 新建一个 400*280像素的画 布 2. 使用椭圆工具 （ shift+u 可以进行选 择）绘制一个正圆 （绘制正圆时需要 按住shift键）。
作业中的一些问题： 1. 如何在div层新添加一个层，并定位 为新添加的层在样式表中添加样式，样式中将 新的层进行定位（参见样式表一章中如何将层 定位的） 2. 如何图文混排 在图片的所在的<img>标记中设置align属性。 即可
Fireworks 1
概述
Adobe Fireworks CS3是一款用来设计和制作网页图 形图像的应用程序。它和Dreamweaver、flash一起 称为网页制作三剑客。 Fireworks即可以进行矢量图片处理、也可以处理位 图图像。 矢量图片用称为“矢量”的线条和曲线（包括颜色和 位置信息）呈现图像。矢量图片可以调整大小、改变 形状而不损失图像品质。 位图图像：用像素的点阵方式描述图像。每个点指定 一种颜色，从而构成图片。改变显示设备的分辨率、 改变图片大小将改变图片品质
10. 再画一个小椭圆，白色填充，进行6像素 的羽化，设置不透明度为95，形成光打在球体 的效果。
文字设计
一. 将文字附加到路径 给文本附加上路径，使文本沿着路径方向排列。
设计一颗心
1.新建一个300*300像素的文件 2. 在工具箱中选择椭圆工具，按住shift键画一 个圆，填充为红色。笔触为无。 3. 复制—粘贴该圆，移动新圆达到如图效果 4. 同时选中两个圆，执行 修改/组合路径、联 合 菜单命令。 5. 在工具箱中用部分选择工具，单击如图节点 向下拖动。如图
Flash动画技术的应用
Flash动画技术的应用摘要：随着计算机技术的迅速发展，flash动画已经成为了未来动画发展的一种趋势，引起了越来越多用户的关注。
本文简单介绍了flash动画的应用领域，详细分析另外flash动画在网页设计中的应用。
关键词：计算机技术；flash动画；flash应用；网页设计中图分类号：tp3 文献标识码：a 文章编号：1009-0118（2011）-10-0-02flash的前身是future wave公司的future splash，是世界上第一个商用的二维矢量动画软件，用于设计和编辑flash文档。
当时future splash最大的两个用户是microsoft和disney。
1996年11月，美国macromedia公司收购了future wave，并将其改名为flash1.0。
2005年，在其版本发展到flash 8以后， macromedia 又被adobe公司收购。
目前，adobe flash professional cs5.5（2011发布）是flash的最新版本。
flash 是一种创作工具，设计人员可使用它来创建演示文稿、应用程序和其它允许用户交互的内容。
也可以通过添加图片、声音、视频和特殊效果，构建包含丰富媒体的 flash 应用程序。
一、flash动画技术的特点（一）使用矢量图形和流式播放技术计算机图形中的两大概念是位图和矢量图。
位图，也叫像素图，就是最小单位由像素构成的图，缩放会失真。
每个像素有自己的颜色信息，在对位图图像进行编辑操作时，操作的是每个像素，通过改变图像的色相、饱和度、明度，从而改变图像的显示效果。
矢量图，也叫向量图，即缩放不失真的图像格式。
矢量图是通过多个对象的组合生成的，对其中每一个对象的记录方式，都是以数学函数来实现的，记录了元素形状及颜色的算法，无论显示画面是大是小，对象对应的算法是不变的，因此缩放时不失真。
因此，矢量图形需要的内存和存储空间小很多。
fireworks教案课件第10章制作交互动画
在Flash CS5影片中，要使影片在播放到时间轴中的某一帧时执行 某项动作，可以为该关键帧添加一项动作。 使用动作面板添加帧动作的步骤如下： （1）在时间轴中选择需要添加动作的关键帧。 （2）在动作面板的工具箱里选择需要添加的动作，然后将其添加 到脚本窗格中去。 （3）在脚本窗格中，根据需要编辑输入的动作语句。 （4）重复步骤2和3，直到添加完全部的动作。此时，在时间轴中 所添加了动作的关键帧上就会显示一个小“a”，如图所示。
用户也可以直接在“动作”面板右侧的脚本窗格中输入动作脚本，编 辑动作，输入动作的参数或者删除动作，还可以添加，删除脚本窗格 中的语句或更改语句的顺序，这和用户在文本编辑器中创建脚本十分 相似。还可以通过“动作”面板来查找和替换文本，查看脚本的行号 等。用户还可以检查语法错误，自动设定代码格式并用代码提示来完 成语法。
10.2.3 设置“动作”面板的参数
用户可以通过设置动作面 板的工作参数，来改变脚本窗格 中的脚本编辑风格。
要设置动作面板的参数，可 以通过如下操作： （1）从“动作”面板的选项菜 单中选择“首选参数”命令。然 后单击“ActionScript”选项卡， 如图所示。
10.2.3 设置“动作”面板的参数
第10章 制作交互动画
本章重点
本章将向读者介绍交互动画的制作基础，内容包括交互动画的概 念，Flash CS5中“动作”面板的组成与使用方法，如何设置“动作” 面板参数，在撰写脚本时如何使用代码提示，如何通过“动作”面板 给帧、按钮以及影片剪辑添加动作，以及如何创建简单的交互操作， 比如跳到某一帧或场景，播放和停止影片，跳到不同的URL。
使用“动作”面板添加动作的步骤如下：
（1）单击“动作”工具箱中的某个类别，显示该类别中的动作。
用户也可以直接在“动作”面板右侧的脚本窗格中输入动作脚本，编 辑动作，输入动作的参数或者删除动作，还可以添加，删除脚本窗格 中的语句或更改语句的顺序，这和用户在文本编辑器中创建脚本十分 相似。还可以通过“动作”面板来查找和替换文本，查看脚本的行号 等。用户还可以检查语法错误，自动设定代码格式并用代码提示来完 成语法。
10.2.3 设置“动作”面板的参数
用户可以通过设置动作面 板的工作参数，来改变脚本窗格 中的脚本编辑风格。
要设置动作面板的参数，可 以通过如下操作： （1）从“动作”面板的选项菜 单中选择“首选参数”命令。然 后单击“ActionScript”选项卡， 如图所示。
10.2.3 设置“动作”面板的参数
第10章 制作交互动画
本章重点
本章将向读者介绍交互动画的制作基础，内容包括交互动画的概 念，Flash CS5中“动作”面板的组成与使用方法，如何设置“动作” 面板参数，在撰写脚本时如何使用代码提示，如何通过“动作”面板 给帧、按钮以及影片剪辑添加动作，以及如何创建简单的交互操作， 比如跳到某一帧或场景，播放和停止影片，跳到不同的URL。
使用“动作”面板添加动作的步骤如下：
（1）单击“动作”工具箱中的某个类别，显示该类别中的动作。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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操作