3.6 案例实战：在网页中插入Flash动画

Flash动画也称为SWF动画，它以文件小巧、速度快、特效精美、支持流媒体和强大交互功能而成为网页最流行的动画格式，被大量应用于网页中。在Dreamweaver CC中插入SWF动画比较简单，具体演示如下。

【操作步骤】

第1步，启动Dreamweaver CC，新建文档，保存为test.html。

第2步，在编辑窗口中，将光标定位在要插入SWF动画的位置。

第3步，选择【插入】|【媒体】|【Flash SWF】命令，打开【选择SWF】对话框。

第4步，在【选择SWF】对话框中选择要插入的SWF动画文件（.swf），然后单击【确定】按钮，此时会打开【对象标签辅助功能属性】对话框，在其中设置动画的标题、访问键和Tab键索引，如图3.18所示。

第5步，单击【确定】按钮，即可在当前位置插入一个SWF动画，此时编辑窗口中将出现一个带有字母f的灰色区域，如图3.19所示，只有在预览状态下才可以观看到SWF动画效果。

第6步，按Ctrl+S快捷键保存文档。当保存已插入SWF动画的网页文档时，Dreamweaver CC会自动弹出对话框，提示保存两个JavaScript脚本文件，它们用来播放动画，如图3.20所示。

第7步，在Dreamweaver CC中插入SWF动画之后，切换到【代码】视图，可以看到新增加的代码。

插入的源代码可以分为两部分，第一部分为脚本部分，即使用JavaScript脚本导入外部SWF动画，第二部分是利用<object>标记来插入动画。当用户浏览器不支持JavaScript脚本时，可以使用<object>标记插入，这样就可以最大限度地保证SWF动画能够适应不同的操作系统和浏览器类型。

<embed>标记表示插入多媒体对象，与Dreamweaver CC属性面板中的各种参数设置相同；classid属性设置类ID编号，同Dreamweaver CC属性面板中的【类ID】相同。<param>标记设置类对象的各种参数，与Dreamweaver CC属性面板中的【参数】按钮打开的【参数】对话框参数设置相同；codebase属性与Dreamweaver CC属性面板中的【基址】相同。

第8步，设置SWF动画属性。插入SWF动画后，选中动画就可以在属性面板中设置SWF动画属性，如图3.21所示。

第9步，在“Flash”字母标识下面的文本框中设置SWF动画的名称，即定义动画的ID，以便脚本进行控制，同时在旁边显示插入动画的大小。

第10步，在【宽】和【高】文本框中设置SWF动画的宽度和高度，默认单位是像素，也可以设置%（相对于父对象大小的百分比）等其他可用单位。输入时数字和缩写必须紧连在一起，中间不留空格，如20%。

当调整动画显示大小后，可以单击其中的【重设大小】按钮恢复动画的原始大小。

第11步，根据需要设置下面几个选项，用来控制动画的播放属性。

☑ 【循环】复选框：设置SWF动画循环播放。

☑ 【自动播放】复选框：设置网页打开后自动播放SWF动画。

☑ 【品质】下拉列表：设置SWF动画的品质，包括【低品质】、【自动低品质】、【自动高品质】和【高品质】4个选项。

品质设置越高，影片的观看效果就越好，但对硬件的要求也高，以使影片在屏幕上正确显示，低品质能加快速度，但画面较粗糙。【自动低品质】设置一般先看速度，如有可能再考虑外观，【自动高品质】设置一般先看外观和速度这两种品质，但根据需要可能会因为速度而影响外观。

如果单击属性面板中的【播放】按钮，可以在编辑窗口中播放动画，如图3.22所示。

第12步，在【比例】下拉列表中设置SWF动画的显示比例，包括3个选项。

☑ 【默认（全部显示）】选项：SWF动画将全部显示，并保证各部分的比例。

☑ 【无边框】选项：根据设置尺寸调整SWF动画显示。

☑ 【严格匹配】选项：SWF动画将全部显示，但会根据设置尺寸调整显示比例。

第13步，可根据页面布局需要设置动画在网页中的显示样式，具体设置包括如下几项。

（1）【背景颜色】选项：指定影片区域的背景颜色。在不播放影片时（在加载时和在播放后）也显示此颜色。

（2）【垂直边距】和【水平边距】文本框：设置SWF动画与上下方和左右方与其他页面元素的距离。

（3）【对齐】下拉列表：设置SWF动画的对齐方式，包括10个选项。

☑ 【默认值】选项：SWF动画将以浏览器默认的方式对齐（通常指基线对齐）。

☑ 【基线】选项和【底部】选项：将文本（或同一段落中的其他元素）的基线与SWF动画的底部对齐。

☑ 【顶端】选项：将SWF动画的顶端与当前行中最高项（图像或文本）的顶端对齐。

☑ 【居中】选项：将SWF动画的中部与当前行的基线对齐。

☑ 【文本上方】选项：将SWF动画的顶端与文本行中最高字符的顶端对齐。

☑ 【绝对居中】选项：将SWF动画的中部与当前行中文本的中部对齐。

☑ 【绝对底部】选项：将SWF动画的底部与文本行（包括字母下部，如在字母g中）的底部对齐。

☑ 【左对齐】选项：将SWF动画放置在左边，文本在图像的右侧换行。如果左对齐文本在行上处于对象之前，它通常强制左对齐对象换到一个新行。

☑ 【右对齐】选项：将SWF动画放置在右边，文本在对象的左侧换行。如果右对齐文本在行上处于对象之前，它通常强制右对齐对象换到一个新行。

第14步，如果需要高级设置，可以单击【参数】按钮，打开【参数】对话框，如图3.23所示。可在其中输入传递给影片的附加参数，对动画进行初始化。

【拓展】

【参数】对话框中的参数由参数和值两部分组成，一般成对出现。单击【参数】对话框的按钮，可增加一个新的参数，然后在【参数】列表框中输入名称，在【值】下面输入参数值，单击按钮，可删除选定参数。在【参数】对话框中，选中一项参数，单击向上或向下的箭头按钮，可调整各项参数的排列顺序，最后单击【确定】按钮即可。例如，设置SWF动画背景透明，可在【参数】列表中输入wmode，在【值】列表中输入transparent，即可实现动画背景透明播放。当然，在Dreamweaver CC版本中，可以直接在属性面板中设置【Wmode】下拉列表。