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