第18章网页设计与制作应用教程课件

网页设计与制作应用教程（第2版）机械工机械工业出版社同名教材出版社同名教材配套配套电子子课件件网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH主要内容第一部分第一部分 网页设计与制作基础网页设计与制作基础第二部分第二部分 Adobe Dreamweaver CS5 网页制作网页制作第三部分第三部分 Adobe Fireworks CS5 网页网页图片处理图片处理第四部分第四部分Adobe Flash CS5 网页动画制作网页动画制作2网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH第第18章章 Flash 动画素材准画素材准18.1 绘制基础绘制基础18.2 使用绘画工具使用绘画工具18.3 使用编辑和修饰工具使用编辑和修饰工具18.4 处理位图和图形处理位图和图形18.5 使用文本工具使用文本工具18.6 使用使用 3D 图形工具图形工具18.7 边学边做（绘制边学边做（绘制“花伞花伞”图形）图形）3网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH 在在在在Flash CS5Flash CS5中，我们可以使用线条、椭圆、矩中，我们可以使用线条、椭圆、矩中，我们可以使用线条、椭圆、矩中，我们可以使用线条、椭圆、矩形和五角星形等基本图形绘制工具绘制基本图形，形和五角星形等基本图形绘制工具绘制基本图形，形和五角星形等基本图形绘制工具绘制基本图形，形和五角星形等基本图形绘制工具绘制基本图形，可以使用钢笔、铅笔等工具进行精细图形的绘制，可以使用钢笔、铅笔等工具进行精细图形的绘制，可以使用钢笔、铅笔等工具进行精细图形的绘制，可以使用钢笔、铅笔等工具进行精细图形的绘制，还可以对已经绘制的图形进行旋转、缩放、扭曲还可以对已经绘制的图形进行旋转、缩放、扭曲还可以对已经绘制的图形进行旋转、缩放、扭曲还可以对已经绘制的图形进行旋转、缩放、扭曲等变形操作。等变形操作。等变形操作。等变形操作。4网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH18.1 绘制基础计算机以矢量或位图格式显示图形。使用计算机以矢量或位图格式显示图形。使用Flash 可以创建压缩矢量图形并将它们制作为动画。可以创建压缩矢量图形并将它们制作为动画。Flash 还可以导入和处理在其他应用程序中创建还可以导入和处理在其他应用程序中创建的矢量图形和位图图形。的矢量图形和位图图形。5网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH18.1.1 绘制模式制模式1.合并绘制模式合并绘制模式2.对象绘制模式对象绘制模式6网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH18.1.2 选择对象象1.使用使用“选择选择”工具工具工具箱中的黑色箭头工具（）可以用来进行对象的选择、移动、复制、修改、旋转、推拉、缩放矢量线和矢量图形。7网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH18.1.2 选择对象象 使用使用“部分选取部分选取”工具工具主主要要用用于于选选择择线线条条、移移动动线线条条和和编编辑辑节节点点以以及及节节点点方方向向等等。它它的的使使用用方方法法和和作作用用与与【选选择择】工工具具类类似似，区区别别在在于于，使使用用【部部分分选选取取】工工具具选选中中一一个个对对象象后后，对对象象的的轮轮廓线上将出现多个控制点。廓线上将出现多个控制点。网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH18.1.2 选择对象象 使用使用“套索套索”工具工具使用“套索”工具（）可以选择不规则的区域。单击工具箱中的“套索”工具，可以看到工具箱的选项栏中显示了3个功能按钮，即“魔术棒”、“魔术棒属性”和“多边形模式”。18.2 使用使用绘画工具画工具Flash 提供了各种工具来绘制自由形状、精准的线条、形状和路径，并可以用来对填充对象涂色1018.2.1 使用“钢笔”绘制路径11网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH使用使用【钢笔笔】工具工具 【钢钢笔笔】工工具具常常用用于于绘绘制制比比较较复复杂杂、精精确确的的曲曲线线。在在Flash CS5中中的的【钢钢笔笔】工工具具分分为为【钢钢笔笔】、【添添加加锚锚点点】、【删删除除锚锚点点】和和【转转换换锚锚点点】工具。工具。网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH13网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH使用使用【铅笔笔】工具工具使使用用【铅铅笔笔】工工具具可可以以绘绘制制任任意意线线条条。在在工工具具箱箱中中选选择择【铅铅笔笔】工工具具后后，在在所所需需位位置置按按下下鼠鼠标标左左键键拖拖动动即即可可。在在使使用用【铅铅笔笔】工工具具绘绘制制线线条条时时，按住按住Shift键，可以绘制出水平或垂直方向的线条。键，可以绘制出水平或垂直方向的线条。网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH使用【刷子】工具“刷子”工具能绘制出刷子般的笔触，就像涂色一样。它可以创建特殊效果，包括书法效果。可以使用“刷子”工具功能按钮选择刷子大小和形状。15网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH使用使用【橡皮擦橡皮擦】工具工具 使使用用【橡橡皮皮擦擦】工工具具，可可以以快快速速擦擦除除舞舞台台中中的的任任何何矢矢量量对对象象，包包括括笔笔触触和和填填充充区区域域。在在使使用用该该工工具具时时，可可以以在在工工具具箱箱中中自自定定义义擦擦除除模模式式，以以便便只只擦擦除除笔笔触触、多多个个填填充充区区域域或或单单个个填填充充区区域域；还还可以在工具箱中选择不同的橡皮擦形状。可以在工具箱中选择不同的橡皮擦形状。网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH使用“线条”工具【线线条条】工工具具主主要要用用于于绘绘制制不不同同角角度度的的矢矢量量直直线线。将将光光标标移移动动到到舞舞台台上上，会会显显示示为为十十字字形形状状，按按住住鼠标左键向任意方向拖动，即可绘制出一条直线。鼠标左键向任意方向拖动，即可绘制出一条直线。网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH使用使用【矩形矩形】和和【基本矩形基本矩形】工具工具 选选择择【工工具具】面面板板中中的的【矩矩形形】工工具具，在在设设计计区区中中按按住住鼠鼠标标左左键键拖拖动动，即即可可开开始始绘绘制制矩矩形形。如果按住如果按住Shift键，可以绘制正方形图形。键，可以绘制正方形图形。网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH使用使用【椭圆】和和【基本基本椭圆】工具工具 选选择择【工工具具】面面板板中中的的【椭椭圆圆】工工具具，在在设设计计区区中中按按住住鼠鼠标标拖拖动动，即即可可绘绘制制出出椭椭圆圆。按按住住Shift键，可以绘制一个正圆图形。键，可以绘制一个正圆图形。网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH使用使用【多角星形多角星形】工具工具 绘绘制制几几何何图图形形时时，【多多角角星星形形】工工具具也也是是常常用用工工具具。使使用用【多多角角星星形形】工工具具可可以以绘绘制制多多边边形形图图形形和和多多角角星星形形图图形形，在在实实际际动动画画制制作作过过程程中中，这些图形是较多应用到的。这些图形是较多应用到的。网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH使用使用Deco装装饰性性绘画工具画工具 DecoDeco工工工工具具具具是是是是装装装装饰饰饰饰性性性性绘绘绘绘画画画画工工工工具具具具，可可可可以以以以将将将将创创创创建建建建的的的的图图图图形形形形形形形形状状状状转转转转变变变变为为为为复复复复杂杂杂杂的的的的几几几几何何何何图图图图案案案案。DecoDeco工工工工具具具具使使使使用用用用算算算算术术术术计计计计算算算算(称称称称为为为为过过过过程程程程绘绘绘绘图图图图)。这这这这些些些些计计计计算算算算将将将将应应应应用用用用于于于于【库库库库】面板中创建的面板中创建的面板中创建的面板中创建的【影片剪辑影片剪辑影片剪辑影片剪辑】或或或或【图形图形图形图形】元件。元件。元件。元件。网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASHDeco工具工具 选选择择【藤藤蔓蔓式式填填充充】效效果果，可可以以用用藤藤蔓蔓式式图图案案填填充充设设计计区区、元元件件或或封封闭闭区区域域。用用户户还还可可以以选选择择【库库】中中的的元元件件替替换换叶叶子子和和花花朵朵的的插插图图，生生成成的的图图案案将将包包含含在在影影片片剪剪辑辑中中，而而影影片片剪剪辑辑本本身身包包含含组成图案的元件。组成图案的元件。网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH网格式填充网格式填充 选选择择【网网格格填填充充】效效果果，可可以以以以元元件件填填充充设设计计区区、元元件件或或封封闭闭区区域域。将将网网格格填填充充绘绘制制到到设设计计区区中中，如如果果移移动动填填充充元元件件或或调调整整其其大大小小，则则网网格格填填充将随之移动或调整大小。充将随之移动或调整大小。网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH对称刷子效果称刷子效果 选选择择对对称称效效果果，可可以以围围绕绕中中心心点点对对称称排排列列元元件件。在在设设计计区区中中绘绘制制元元件件时时，将将显显示示一一组组手手柄柄。可可以以使使用用手手柄柄通通过过增增加加元元件件数数、添添加加对对称称内内容容或或者者编编辑和修改效果的方式来控制对称效果。辑和修改效果的方式来控制对称效果。网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH装装饰性刷子效果性刷子效果 装装饰饰性性刷刷子子效效果果在在进进行行Flash绘绘图图时时很很有有用用，我我们们可可以以通通过过应应用用装装饰饰性性刷刷效效果果，绘绘制制出出多多种种装装饰饰线，例如梯形图案、绳形、星形、波浪线等。线，例如梯形图案、绳形、星形、波浪线等。网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH粒子系粒子系统 使使用用粒粒子子系系统统效效果果，我我们们可可以以创创建建火火、烟烟、水水、气泡及其他效果的粒子动画。气泡及其他效果的粒子动画。网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH树刷子刷子 通通过过树树刷刷效效果果，我我们们可可以以快快速速创创建建树树状状插插图图，选选择择Deco工工具具后后，在在【属属性性】面面板板中中选选择择【树树刷刷子子】效效果果，可可打打开开该该效效果果的的【属属性性】面面板板。打打开开【高高级级选选项项】下下拉拉列列表表框框，可可以以选选择择多多种种树树的的效果。效果。网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH18.3 使用使用编辑和修和修饰工具工具在在Flash 工具箱中，有多种编辑和修饰工具，包工具箱中，有多种编辑和修饰工具，包括颜料桶工具、墨水瓶工具、滴管工具、任意变括颜料桶工具、墨水瓶工具、滴管工具、任意变形工具、填充变形工具、橡皮擦工具等。形工具、填充变形工具、橡皮擦工具等。28网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH使用使用【变形形】菜菜单命令命令 选选择择了了舞舞台台上上的的图图形形对对象象以以后后，可可以以选选择择【修修改改】|【变变形形】|命命令令打打开开【变变形形】子子菜菜单单，在在该该子子菜菜单单中中选选择择需需要要的的变变形形命命令令进进行行图图形形的的变变形形。这这里里的的命命令令选选项项，大大多多与与【变变形形】面面板板中中的的按按钮钮命令或命令或【任意变形任意变形】工具相同。工具相同。网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH使用使用【变形形】面板面板 选选择择对对象象后后，选选择择【窗窗口口】|【变变形形】命命令令，可可以以打打开开【变变形形】面面板板。使使用用【变变形形】面面板板不不仅仅可可以以对对图图形形对对象象进进行行较较为为精精准准的的变变形形操操作作，还还可可以以利利用用其其【重重制制选选区区和和变变形形】的的功功能能，依依靠靠单单一一图图形对象，创建出复合变形效果的图形。形对象，创建出复合变形效果的图形。网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH使用使用【任意任意变形形】工具工具 【任任意意变变形形】工工具具可可以以用用来来对对对对象象进进行行旋旋转转、扭扭曲曲、封封套套等等操操作作。选选择择【工工具具】面面板板中中的的【任任意意变变形形】工工具具，在在【工工具具】面面板板中中会会显显示示【贴贴紧紧至至对对象象】、【旋旋转转和和倾倾斜斜】、【缩缩放放】、【扭扭曲曲】和和【封套封套】按钮。按钮。旋旋转与与倾斜斜对象象 旋旋转与与倾斜斜对象象可可以以垂垂直直或或水水平平方方向向上上缩放放，还可可以以在在垂垂直和水平方向上同直和水平方向上同时缩放。放。缩放放对象象 缩放放对象象可可以以垂垂直直或或水水平平方方向向上上缩放放，还可可以以在在垂垂直直和和水平方向上同水平方向上同时缩放。放。扭曲扭曲对象象 扭扭曲曲对象象可可以以对对象象进行行锥化化处理理。选择【工工具具】面面板板中中的的【任任意意变形形】工工具具，然然后后单击【扭扭曲曲】按按钮，选中要中要对选定定对象象进行扭曲行扭曲变形。形。封套封套对象象 封封套套对象象可可以以对对象象进行行任任意意形形状状的的修修改改。选择【工工具具】面面板板中中的的【任任意意变形形】工工具具，然然后后单击【封封套套】按按钮，选中中对象象，在在对象象的的四四周周会会显示示若若干干控制点和切控制点和切线手柄。手柄。网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH使用使用【手形手形】工具工具 当当视视图图被被放放大大或或者者舞舞台台面面积积很很大大，整整个个场场景景无无法法在在视视图图窗窗口口中中完完整整显显示示时时，要要查查看看场场景景中中的的某某个局部，就可以使用个局部，就可以使用【手形手形】工具。工具。网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH使用使用【缩放放】工具工具 【缩缩放放】工工具具是是最最基基本本的的视视图图查查看看工工具具，用用于于缩缩放视图的局部和全部。放视图的局部和全部。网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH辅助助绘图工具的使用工具的使用想想想想较较较较好好好好的的的的完完完完成成成成绘绘绘绘图图图图工工工工作作作作，仅仅仅仅仅仅仅仅依依依依靠靠靠靠绘绘绘绘图图图图工工工工具具具具还还还还是是是是不不不不够够够够的的的的，我我我我们们们们必必必必须须须须能能能能够够够够熟熟熟熟练练练练使使使使用用用用绘绘绘绘图图图图辅辅辅辅助助助助工工工工具具具具，如如如如【手手手手形形形形】工工工工具具具具、【缩缩缩缩放放放放】工工工工具具具具还还还还有有有有【对对对对齐齐齐齐】面面面面板板板板等，这些工具在绘图时经常会用到。等，这些工具在绘图时经常会用到。等，这些工具在绘图时经常会用到。等，这些工具在绘图时经常会用到。网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH使用使用【对齐】面板面板 打打开开【对对齐齐】面面板板，在在该该面面板板中中可可以以进进行行排排列列对对象象操操作作，尤尤其其在在舞舞台台中中有有过过个个对对象象需需要要进进行行对对齐齐与与分分布布操操作作时时尤尤其其有有用用，选选择择【窗窗口口】|【对对齐齐】命命令令，或或者者按按下下Ctrl+K组组合合键键都都可可以以打打开开【对对齐齐】面板。面板。网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH18.4 处理位理位图和和图形形位图的导入位图的导入Flash 可以导入矢量图形、位图和图像序列，将位图导入Flash 时，该位图可以修改，并可用各种方式在Flash 文档中使用它。可以直接导入到舞台可以导入到库40网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH18.4 处理位理位图和和图形形将位图转换为矢量图形将位图转换为矢量图形“转换位图为矢量图”命令将位图转换为具有可编辑的离散颜色区域的矢量图形。将图像作为矢量图形处理，便可以减小文件大小。41网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH18.4 处理位理位图和和图形形处理图形对象处理图形对象 合并对象合并对象组合组合42网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH18.4 处理位理位图和和图形形处理图形对象处理图形对象叠放叠放改变图层内对象层叠顺序的操作是：执行【修改】/【排列】/【置于顶层】或【置于底层】命令，可以将对象或组移动到层叠顺序的最前或最后。对齐对齐43网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH18.5 使用文本工具使用文本工具使用使用【文本文本】工具可以创建多种类型的文本，工具可以创建多种类型的文本，Flash CS5除了保持和丰富以前的文本模式除了保持和丰富以前的文本模式(现在现在称为传统文本称为传统文本)外，还引入了全新文本引擎外，还引入了全新文本引擎文文本布局框架本布局框架(以下简称以下简称TLF)模式，模式，TLF文本模式文本模式支持更多丰富的文本布局功能和对文本属性的精支持更多丰富的文本布局功能和对文本属性的精细控制细控制。44网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH18.5.1 文本布局框架文本布局框架(TLF)文本文本45网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH18.5.2 传统文本文本传统文本是传统文本是Flash的基础文本模式，它在图文制的基础文本模式，它在图文制作方面发挥着重要的作用。传统文本类型可分为作方面发挥着重要的作用。传统文本类型可分为静态文本、动态文本、输入文本共静态文本、动态文本、输入文本共3种种。46网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH编辑文本编辑文本创建文本后，可以对文本进行一些编辑操作，主要创建文本后，可以对文本进行一些编辑操作，主要包括对文本进行选择、分离、变形等编辑，还可以包括对文本进行选择、分离、变形等编辑，还可以改变文本属性，将文本链接到指定改变文本属性，将文本链接到指定URL地址等操作地址等操作。u 选择和分离文本 u 变形文本 u 设置文本属性 网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH选择和分离文本选择和分离文本 编辑文本前，首先要选择更改的文本。选择文本编辑文本前，首先要选择更改的文本。选择文本以后可以进行分离文本的操作以后可以进行分离文本的操作。网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH变形文本变形文本 在将文本分离为填充图形后，可以非常方便地改在将文本分离为填充图形后，可以非常方便地改变文字的形状。要改变分离后文本的形状时，可变文字的形状。要改变分离后文本的形状时，可以使用工具箱中的以使用工具箱中的【选择选择】工具或工具或【部分选取部分选取】工具等，进行各种变形操作工具等，进行各种变形操作。网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH设置文本属性设置文本属性 创建文本之后，可以利用创建文本之后，可以利用【文本文本】工具的工具的【属性属性】面板，对文本进行进一步的设计和修改面板，对文本进行进一步的设计和修改。网页设计与制作应用教程（第2版）DREAMWEAVER Fireworks FLASH51