使用Fireworks, Flash和Dreamweaver创建简单的交互内容

出自9RIA.com WIKI

(英文原文: Creating simple interactive content using Fireworks, Flash, and Dreamweaver )
原作者：Dan Carr 翻译者：flashzone

在本教程中你将为一个虚拟的Double Identity的电影网站创建一个简单的促销网页。该网页包括一个支持文字填写布局的互动的SWF标题在网页上方的（见图1 ）。在这个过程中你将探讨Adobe CS4产品的工作流程和学习创造原型和互动内容的基本要素。

Figure 1. 网页标题影片的Fireworks原型

如图1所示原型是本教材的中心。首先，准备好用Adobe Photoshop, Adobe Illustrator, and Adobe Soundbooth提供的资源。然后，用Adobe Fireworks为标题创建一个原型，再用Adobe Flash转成一个互动的影片。最后用Adobe Dreamweaver来整合生成最终的文件。

完成本教程，你将掌握CS4创建项目的工作流程。教程大约需要一个半小时完成。

目录 1 要求 2 开始 2.1 搭建项目结构 2.2 了解实例文件 2.3 Illustrator CS4 2.4 Soundbooth CS4 3 在Fireworks中创建一个原型 3.1 Fireworks CS4 3.2 导入图像并建立层 3.3 添加作品完成原型 3.4 制作用于Flash的PNG文件 4 在Flash中添加声音和互动 4.1 Flash CS4 4.2 创建一个FLA文件和发布设置 4.3 将Fireworks原型导入Flash的movieclip 4.4 在movieclip的时间轴上制作动画 4.5 创建互动按钮 4.6 增加声音 4.7 发布SWF文件 5 在Dreamweaver中完成网页 5.1 Dreamweaver CS4 5.2 新建一个网站 5.3 使用Dreamweaver模板新建网页 5.4 修改CSS 5.5 预览网页 5.6 上传文件到服务器 6 修改编辑流程 6.1 更换图片 6.2 修改音频文件 6.3 修改网页文字或格式 6.4 上传更新的文件 7 总结 8 关于作者

要求

为完成此教程，你需要以下软件：

Fireworks CS4

试用 购买

Flash CS4

试用 购买

Dreamweaver CS4

试用 购买

或Creative Suite 4 Web Premium (包括 Fireworks, Flash, and Dreamweaver)

试用 购买

样例文件 cs4_project.zip (ZIP, 11 MB)

cs4_project_completed.zip (ZIP, 24 MB)

必备知识

本教材主要针对有兴趣了解掌握用Adobe CS4创造网络相关产品的工作流程的入门者。

开始

任何一个项目开始，最好是先坐下来在一张空白的纸上勾画一下自己的想法。加些注释，标出无法实现的地方，总之就是自己要知道最终能达到什么目的。然后列出清单，开始你的计划。 本教程中提供的视图和内容资源都清晰的罗列在源文件中，第一步将帮助你构建和理解你的项目结构，资源。

搭建项目结构

开始项目前最好能花点时间考虑一下文件结构。你的文件可分为两类：源文件和发布文件。源文件是最重要的可编辑文件，用来创建和编辑网站，发布文件是由源文件发布导出的文件，包括那些视图媒体等支持文件。最终只需要上传发布文件到服务器。 创建本教材实例文件：

1. 下载本教材文件(cs4_project.zip [ZIP, 11 MB])并解压到你的桌面或某文件夹。
2. 打开CS4_Project文件夹，里面有一个_Source文件夹，_Source文件夹中又包含了Dreamweaver, Illustrator, Photoshop和Soudbooth子文件夹用来分别放各自的文件，如图Figure 2。在创建自己的原型和源文件时可以此为参照。

Figure 2. CS4_Project 根目录和 _Source文件夹中的实例文件

作为根目录，CS4_Project文件夹不仅包含_Source文件夹，所有发布文件也都发布在这里。当你工作时，将所有源文件保存在_Source文件夹，发布文件保存在CS4_Project文件夹。完成后除了_Source文件夹，将整个根目录中的文件都上传到服务器。

了解实例文件

本教程提供了三种媒体资源：图片，声音和文字。 计算机图像一般有两种形式：矢量图和位图。矢量图是数学公式生成的由点和线构成的图形。矢量图是分辨率独立的，比位图的文件要小很多。位图使用一格一格彩色的像素点来描述图像，像素点越多，图像分辨率越高。位图文件较大，但对复杂的图像表现的更好。在CS4的工作流程中，将使用Photoshop处理位图，Illustrator编辑矢量图。 声音文件有两种格式：不压缩的WAV(Windows系统)或AIFF(Mac系统)和压缩的MP3格式。在CS4的工作流程中，将用Soundboot Sound（ASND）格式生成可编辑的声音文件。在Flash中选择Edit With Soundbooth CS4可以开始在Soundbooth中直接编辑音频，这样编辑的好处是，只要在Soundbooth中保存了文件，回到Flash中，你不需要再导入新文件替代旧文件，音频就得到更新。 下一步我们来看看实例和工具的应用 Photoshop CS4 Photoshop是一款被广泛应用的功能强大的图像编辑软件。在印刷业，Photoshop常用来编辑高分辨率图像，在网络业，Photoshop常用在复杂图像的合成，照片处理和图像恢复。在CS4的工作流程中Photoshop经常用来制作位图，文件可以存成PSD格式，也可以导出生成平面图像格式如JPG，PNG。 下面看看如何在Photoshop中处理一个背景图像

1. 打开CS4_Project/_Source/Photoshop/ city_background.psd文件
2. 如图Figure 3中的工作区基本面板：Tools在左边，Options在画布上面，Color and Adjustment，Layers在右边。
3. 在Layers中，将各层效果和混合模式合成图像的功能非常强大。
4. 试着点击一下Adjustments面板中的按钮看看有什么效果。

Figure 3. Photoshop CS4 工作区主要面板

如果想了解更多Photoshop的知识，请查看Using Adobe Photoshop CS4文档。

Illustrator CS4

Illustrator是一款高端矢量图形编辑软件，常运用在创建标识，文字设计和处理复杂的说明性内容。因为专门为矢量图形设计，所以无论高分辨率或低分辨率的图像，都能保证可编辑性。在这个实例中，Illustrator将用来制作标题中的标识，标语文字和名称文字。虽然矢量图形导入到其他地方仍然能修改编辑，但是我们还是推荐在Illustrator的源文件AI文件中编辑。 按照下面的步骤看如何在Illustrator中处理一个标识图像

1. 在CS4_Project/_Source/Illustrator文件夹中打开logo.ai文件。
2. 如图Figure 4，了解一下Illustrator的工作区，Tools面板在左边，Options在上面，Color，Transformation和Layers在右边。
3. 在矢量图的绘制中，Pen是最重要的一个工具，自己可以花点时间试试Pen的使用。

小技巧：点击添加一个点，然后拖拽Pen你可以以Bezier方式画曲线

Figure 4. Illustrator CS4 工作区面板

如果想了解更多Illustrator的知识，请查看Using Adobe Illustrator CS4文档。

Soundbooth CS4

Soundbooth是一款音频编辑和制作的软件，能帮助我们轻松地录制和编辑用于Flash中的音频。Soundbooth能以非压缩格式记录音频，也能以压缩格式导出音频。Soundbooth CS4的一个新特性是当你用ASND格式编辑音频时你的工作快照可以保存下来。另一个新特性是能够创建多轨ASND文件，如图Figure 5。在CS4工作流程中，Soundbooth用来制作编辑ASND格式的音频。 下面在Soundbooth中看看soundtrack.asnd文件

1. 在CS4_Project/_Source/Soundbooth中打开soundtrack.asnd文件
2. 注意到屏幕分成两部分，左边有Files，Tasks和History面板，声音波形编辑面板在右边，如图Figure 5。
3. 自己实践操作一下编辑的控制键，注意多轨的效果。试着加些小的音效到不同的时间段，你会发现非常容易编辑修改时间。
4. 点击Resource Central看看网上资源，你可以给自己的项目创建声音的记录和效果。

Figure 5. Soundbooth CS4工作区面板

如果想了解更多Soundbooth的知识，请查看Using Adobe Soundbooth CS4文档。

最后需要注意的一点是你可以在Adobe Bridge中管理所有的源文件和发布文件。当你安装Creative Suite 4的时候，Adobe Bridge就自动安装了。Bridge是一个文件浏览器和媒体资源管理器，你可以在不同的项目间搜寻管理文件。很有趣的一点是你可以用metadata为标签有目的的搜索，还可以同步Adobe Version Cue 和 Adobe Device Central。

如果想了解更多Bridge的知识，请查看Using Adobe Bridge and Adobe Version Cue CS4文档。

上面是简单的介绍，下面来看看Fireworks，Flash和Dreamweaver。

在Fireworks中创建一个原型

所谓原型是指将你的网页及内容，比如完成的作品等用图形在Fireworks中表示出来，然后准备进入下一步的工作流程。Fireworks是一款非常优秀的创建原型的软件，能轻松的整合Photoshop，Illustrator，Dreamweaver和Flash。Fireworks制作的原型能非常简单容易的用在Flash和Dreamweaver中。 这部分你将学到如何用Fireworks整合各种资源为你的网页和标题制作一个原型，如何准备Flash中的内容。

Fireworks CS4

Fireworks可以编辑图像和Web产品，不仅能用矢量图形还可以用位图创建网页图像和网站原型。Fireworks还有很多功能如制作有JavaScript功能的网页，互动的SWF等等。在本CS4工作流程中Fireworks将用来制作网页的原型。 你将使用Fireworks的源文件PNG格式来整合、布局所有文件、资源。然后将PNG文件导入Flash中，沿用已生成的布局，直接加动画和互动部分。 下面来看看Fireworks：

1. 打开Fireworks新建一个文件（File > New）。
2. 在New Document对话框中，设置长725像素，宽320像素，画布颜色为黑色。然后点OK。
3. Fireworks有Tools，Optimize，Layers，Property Inspector面板和画布工作区。
4. 点击Layers进入Layers面板。

Figure 6. Fireworks CS4 工作区面板

如果想了解更多Fireworks的知识，请查看Using Adobe Fireworks CS4文档。

导入图像并建立层

开始创建一个结构清晰的PNG文件，后面所有层的名字和内容都将复制到Flash的源文件中。开始前要想想如何用一种简单的方式创建原型，以后能很自然的转变到互动的开发环境。 本原型有四层：Background，Cars，Details和Text。其中位图的动画在Cars层，为了以后方便，要与Background和Details层分开。最好也将文字部分单独放在Text层，便于编辑。 开始创建层和导入图片：

1. 将前面新建的文件存在_Source文件夹中，命名为promo_header.png。
2. 在Layers面板中双击Layers 1命名为Background。
3. 点击File > Import从CS4_Project/_Source/Photoshop文件夹中导入文件city_background.psd，在File Import Options的对话框中选择Flatten Photoshop Layers To Single Image，然后点击OK。
4. 将鼠标移到左上角点击放置图片，选取图片后确定在属性面板中其x和y坐标都是0。在Layers面板中双击Bitmap重命名为city（重新命名对以后导出到其他地方有很大方便）
5. 点击Layers面板底部的新建图层按钮新建一个层，如图Figure 6，命名为Cars。在Fireworks中一个层代表Layers面板中的一个文件夹，包含一些位图或矢量图。当这些层导入到Flash中后会转变成层文件夹。
6. 用同样的方式从CS4_Project/_Source/Photoshop中导入car_1.psd。将车子的图片放在中下部。在Tools面板中选择Scale工具（Q），点车子选取该图片，然后通过拖拽手柄将图宽缩小为250像素。将Bitmap命名为car-left。你会注意到图片会导入到你选择的图层Cars。
7. 复制一个车子的图片，将复制的图片拖拽到画布右边然后选择Modify > Transform > Flip Horizontal水平翻转图片。将复制的车子图片移到原图右边一寸左右，然后命名为tcar-right层。
8. 从CS4_Project/_Source/Photoshop中导入car_2.psd，图片大小和前面一样，并放置在前面两图中间，将Bitmap层命名为car-middle。
9. 在Cars层的上面新建一层Text，Illustrator的3个文件将导入到此层。
10. 从CS4_Project/_Source/Illustrator文件夹中导入logo.ai文件，在弹出的Vector File Options对话框中全部用默认选项，然后点OK。
11. 将鼠标移到左上角点击放置图片。用Scale工具将标识图片改成250像素宽，层命名为logo。
12. 从CS4_Project/_Source/Illustrator文件夹中导入tagline.ai文件，移动文字到车子图片的上方。选取标题文字，从Tools面板的Color Fill Swatch选择一种浅色，再从调色板中选取白色或用鼠标在画布的图像上选取一个颜色。最后命名层为tagline。
13. 从CS4_Project/_Source/Illustrator文件夹中导入names.ai文件，放在标题文字的右边。颜色填充为浅色，并命名层mark和wendy。
14. 新建Details层，并拖拽到Text层和Cars层之间。
15. 从CS4_Project/_Source/ Photoshop文件夹中导入mark_sousa.psd 和 wendy_carter.psd文件到wendy-image和mark-image层中。如图Figure 7是原型中全部文件。
16. 保存文件。

Figure 7. Fireworks 原型源文件的层结构

添加作品完成原型

原型基本上完成，再用Fireworks的绘图工具添加些东西就差不多了。用Rectangle工具给图片加个框，再给背景加些透明渐变突出文字和图片。 下面来完成图像的布局：

1. 继续选中Details层，选择Rectangle工具，填充色选无（一条红色的斜杠表示），线条颜色选浅灰。给每个图片画一个边框，注意方框会自动对齐到位图边界，你需要用Scale工具手工修改方框的大小。
2. 选择Pointer工具，点击画布灰色部分不选取任何物体。在Tools面板中选择Rectangle工具，填充色为黑色，边框颜色为无。在浅色文字下面画一个高为60像素横贯画布的长方形，把透明度设为50%，移动长方形到文字比较容易辨认的地方，如图Figure 8。
3. 保存文件。

Figure 8. 完成的Fireworks中的层结构

制作用于Flash的PNG文件

Fireworks的一个好处是可以导出直接用于Flash，Dreamweaver的内容。这种情况下，你可以用PNG原型直接转为Flash的源文件。开始之前，为了简单化，先将图片由矢量图标识转变为位图，虽然复杂的矢量图文件小，但在Flash播放器中渲染较慢。所以如果复杂的矢量图不需要再编辑的话转为位图比较好。 下面来制作PNG文件：

1. 选择Pointer工具然后点击选取标识图。
2. 选择Modify > Flatten Selection将矢量图转变为位图。
3. 保存文件。好了，这就完成Fireworks的第一个原型！
4. 选择可以退出Fireworks了，如果以后需要修改PNG文件再启动Fireworks。

关于原型的相关话题可以看看这篇文章：Mocking up text with the Lorem Ipsum placeholder text generator。

在Flash中添加声音和互动

声音和动画使网页更加生动。Fireworks的PNG文件的直接导入使Flash CS4制作动画更加容易，Soundbooth CS4的改进也使Flash中声音的运用更加灵活和直观。 这部分教你如何在Flash中给Fireworks原型添加声音，动画和互动。

Flash CS4

Flash是一款拥有可视开发环境的工具，生成用于Flash播放器中的内容。设计人员和开发人员可以用Flash制作网页横幅，内容和整个网页，甚至整个网站的应用程序。在我们的CS4的工作流程中，Flash将Fireworks原型转变成一个含按钮，声音和动画的互动的标题，生成一个可编辑的FLA源文件，发布成SWF文件用于下一步的Dreamweaver中。 下面来看看Flash的应用：

1. 打开Flash。
2. 点击File > New创建一个新文件。在New Document对话框中选Flash File (ActionScript 3.0)，然后点击OK。
3. 看一下Flash的工作面板，有Stage，Timeline面板，Properties面板，Library面板和Tools面板，如图Figure 9。
4. 点Library进入Library面板，Library用来存放所有可重复使用的symbol资源和媒体资源。

Figure 9. Flash Professional工作区面板 如果想了解更多Flash的知识，请查看Using Adobe Flash CS4 Professional文档。

创建一个FLA文件和发布设置

无论何时创建FLA文件，都要设置一下文件的发布设置，发布设置可以控制文件导出类型和改变SWF文件发布选项。本教程里，将不选默认的发布HTML文件，修改SWF文件的发布路径。 下面来看看具体操作：

1. 把前面创建的FLA文件保存在CS4_Project/_Source文件夹中，命名为promo_header.fla。
2. 选择Modify > Document来修改舞台大小和背景颜色。在Document Properties的对话框中，设置宽为725像素，高为320像素，这样和Fireworks原型大小一样，原型导入后大小正好合适。背景色设为黑色。
3. 选择File > Publish Settings来修改发布设置。在Publish Settings对话框中，将默认勾选的HTML改为不选（如图Figure 10），因为后面会在Dreamweaver中创建HTML，所以这里没有必要发布HTML文件。点击Flash选项后面的文件夹按钮，打开Flash File对话框来修改SWF文件的发布路径，在Select Destination Folder的对话框中将发布路径指到CS4_Project文件夹。然后点击保存。
4. 回到Flash tab后点击OK。
5. 保存文件。

Figure 10.发布设置对话框的各选项控制文件的发布和设置

小技巧：Flash Player 9和以后的版本都支持ActionScript 3.0。选择ActionScript 3.0，除非你的用户的Flash Player的版本是9以前的。

将Fireworks原型导入Flash的movieclip

FLA文件中层的概念和前面其他软件是一样的，但Flash中的层是Timeline面板的一部分。FLA中可以在时间轴的帧上控制各层内容。 Flash用时间轴作为容器来组织内容。当打开一个FLA文件就可看到主时间轴，大部分时间你将在主时间轴工作，或者是symbol的时间轴。Symbol是可重复使用的资源，有自己的时间轴，编辑区和层。可以用symbol来创建一些内容的集合，制作动画和按钮。 本教程的FLA文件的结构已经在Fireworks的PNG文件中都创建好了，导入PNG到Flash中时可以选择导入到Flash主时间轴或一个movieclip的时间轴中。选择导入到一个movieclip是更好更灵活的选择，这样所有的层结构保持原样并且可以马上从你上次结束的地方开始。 下面我们导入Fireworks原型到FLA文件中：

1. 在主时间轴中双击Timeline面板中的Layer 1，重新命名为Assets。
2. 点击File > Import > Import To Stage将CS4_Project/_Source文件夹中的promo_header.png文件导入。在Import Fireworks Document对话框中选择Current Frame As Movie Clip，并设置Objects selection为Import As Bitmaps to Maintain Appearance。Text设置为Keep All Text Editable，然后点击OK。
3. 注意到在时间轴的第一帧有一个黑点（称为关键帧），这表明图片已经导入到那一帧的层上。因为选择导入PNG文件到一个movieclip，所以层结构都在movieclip的时间轴上。现在看到的是在第一帧的一个movieclip的实例。双击舞台上的movieclip实例可进入该movieclip的时间轴。注意在时间轴上面有个Edit bar，显示现在已经离开Scene 1（主时间轴）进入movieclip的时间轴。可以点击Edit bar上的Scene 1回到主时间轴。通常你可以双击舞台上的实例进入其时间轴或在Library面板中双击symbol进入其时间轴进行编辑。
4. 看看Library面板中的资源，打开Fireworks Objects文件夹及其子文件夹，直到看到你导入的图片（如图Figure 11）。
5. 保存文件。

Figure 11. 导入Fireworks 原型后FLA文件的Library

注意：层结构看上去可能有些不同如果你在Fireworks中用了不同设置。你可以通过拖拽层和层文件夹达到你想要的结构。

在movieclip的时间轴上制作动画

Flash CS4在动画方面提高很多，更容易制作移动变形动画。一种最常用的动画叫补间动画，就是定义动画的起始点和终点，然后Flash Player能自动的生成中间部分。 这个练习中将制作车子移动的动画。首先需要将所有车子的图片转成movieclip。 下面来制作symbol，创建车子的补间动画

1. 双击舞台上的symbol实例或Library的symbol进入symbol的时间轴。
2. 将所有的层都增加到35帧，点击第35帧最上层，拖拽点选所有层，然后鼠标右击或Ctrl点击选择Insert Frame (F5)。确定开始做动画前所有层都有35帧，这样在动画过程中所有层的内容都能显示。
3. 在Layers上方有一个眼球标识的按钮，点击此按钮隐藏所有的层。你会发现在各层前面有一个X，表示各层内容都隐藏了。
4. 点击city层和car-middle层的X，这样这两层的图片就显示出来。再点击city层的锁定按钮锁住此层。小技巧：有时总是不容易选中你要选的内容，所以一个很好的办法是用锁定和隐藏避免一些问题的发生。
5. 选择Tools面板中的Selection工具（黑色箭头），然后点击中间的车子图片选取该图，再点击Modify > Convert To Symbol (F8)将该图转变成一个symbol，在Convert To Symbol对话框中命名为Car-Middle，类型勾选Movie Clip，注册点选左上角或中心都可以。注册点将影响物体跟随路线的动画。左上角和中心是最常见的选择。最后点击OK，这时在Library面板就会有一个symbol了。
6. 现在可以开始制作动画了，右击或Ctrl点击car-middle层第一帧关键帧然后选择Create Motion Tween。
7. 在第35帧点击或拖动红色的表示当前帧的指针到第35帧。
8. 选择the Free Transform工具 (Q)再点击车子图片，将图片缩放到50%。
9. 再将图片往上和右边稍微挪动一点，这样看起来车子更像在移动而不是缩放。
10. 在时间轴上来回拖动当前帧指针浏览一下动画，可以回到第一帧或第35帧再调整图片位置和大小。
11. 在第一帧右击或Ctrl点击选择Reverse Keyframes使动画翻转。现在就可以看到一个比较逼真的车子往前开的动画了。
12. 重复4-10的步骤为左边和右边的车子也加上同样的动画。不过左边和右边车子的动画的起始关键帧帧都在第一帧之后，所以要将起始关键帧往后挪。将鼠标滑动到关键帧，当出现双箭头时，按下鼠标拖动关键帧到其后的帧。如图Figure 12你可以看到三辆车的动画时间轴。
13. 点击Control > Test Movie导出SWF预览影片。生成的预览动画在FLA上面，而且动画会不停的循环播放，除非加stop()强行停止。小技巧：默认情况下隐藏的层将不会随SWF文件导出，所以为了显示所有的内容不要隐藏层。（译者疑问：这点不对，隐藏层是可以导出的，请审阅核实）
14. 为了增加stop的actionscript，应该新建一层，在Text文件夹层上选择Insert > Timeline > New Layer新建层，命名为Actions。
15. 要添加内容到时间轴必须添加在某一层的某关键帧上。Stop将加在第35帧，点击Actions层的第35帧，按F6增加一关键帧。你可以将有actionscript的关键帧放在任何层，但最好是在最上层建一层放所有的actionscript。
16. 选中新建的关键帧，打开Actions面板（F9）输入stop（）；
17. 再测试影片，这次动画就只运行一次了。
18. 保存文件。

Figure 12. Page 1 symbol创建动画后的时间轴

小技巧：用Motion Editor面板可以更详细的修改动画。 要看看更多的关于补间动画的教程可以看看这个资料：Creating motion tweens: 第一部分。

创建互动按钮

最简单的创建互动就是给页面加一些按钮。在Flash中你可以用Buttons Common Library内置的已创建好的按钮或用button symbol创建自定义的按钮。要按钮执行命令就要先命名按钮实例，然后加些actionscript触发按钮的点击事件。下面将给标题影片增加三个按钮。 首先从Buttons Common Library中给动画添加一个重新开始按钮： 1.最快捷简单的办法就是从Buttons Common Library中加一个播放按钮。点击Window > Common Libraries > Buttons 打开Buttons Common Library。

2.在舞台上双击实例或在Library中双击symbol进入symbol的时间轴。

3.在Actions层下新建一个Buttons层。

4.在Buttons Common Library，从classic buttons > Circle Buttons文件夹中选择Play按钮，拖拽到舞台。可以看到复制了一个按钮symbol到Library。

5.将舞台上的按钮实例移动到左下角，命名为play_btn，在actionscript里要用到实例名。

6.在Actions层的第一帧写按钮的相关代码如下：

function playClickHandler(event:MouseEvent):void
{
  gotoAndPlay(2);
}
play_btn.addEventListener(MouseEvent.CLICK, playClickHandler); 

7.点Control > Test Movie测试影片，动画播放一遍后停止，点播放按钮重放。

8.保存文件。

下面来创建演员名字的按钮： 1.创建自定义按钮过程和前面差不多，不同的就是将图片转换成一个Button symbol。选中Mark Sousa文字，按F8转换成一个symbol，在Convert to Symbol对话框中，命名symbol为MarkBtn，类型选Button，然后点OK。 2.这样就在舞台生成一个按钮，将这个按钮实例命名为mark_btn。 3.双击按钮实例进入其时间轴，你会发现按钮的时间轴只有四帧：Up, Over, Down, 和 Hit，如图Figure 13。

Figure 13. Button symbol的时间轴，包含按钮的四种状态

4.点击Over帧，按F6增加一个关键帧，Up帧的内容会复制到Over帧。选中Over帧的文字，重复按Ctrl+B/Cmd+B直到将文字变成打散的矢量图。选中文字，将颜色改为自己想要的颜色。改变Over帧的颜色就是产生鼠标rollover时的效果。 5.在Hit帧增加一个关键帧，在Hit帧用Rectangle工具画一个包围所有文字的长方形。Hit帧的内容在按钮应用中不会显示，但它定义了按钮的触发区。Hit帧中用长方形覆盖文字，可以使按钮触发均匀，在整个长方形区域都可以触发。 6.点击舞台上面Edit bar的Page 1或Library中的Page 1 symbol回到Page 1的时间轴。 7.在Actions层的第一帧写入如下代码：

import flash.net.*;
function markClickHandler(event:MouseEvent):void
{
  navigateToURL(new URLRequest('http://www.adobe.com/'), '_blank');
}
mark_btn.addEventListener(MouseEvent.CLICK, markClickHandler);

8.点击Control > Test Movie测试影片。点击Mark Sousa按钮会新开一个浏览器打开一个网站。代码的最后一步给按钮增加了一个点击事件的markClickHandler function，当事件被触发，navigateToURL会执行新开一个浏览器打开网页的任务。

9.保存文件。

要了解更多的关于按钮的知识，可以看看Using Flash CS4 Professional 文档中的Working with button symbols。

增加声音

Flash Player可以支持声音内嵌于SWF文件或调用外部音频。调用外部音频，目前支持MP3格式。内嵌音频有多种选择格式，ASND是最熟悉常用之一。 使用ASND格式，能在Soundbooth CS4中直接编辑内嵌于FLA中的声音文件。能轻松在Soundbooth中测试声音源文件和查看修改记录。 下面给时间轴加一个声音，编辑声音并同步到动画中

1. 在Buttons层上面新建Soundtrack层。
2. 点击File > Import > Import To Library从CS4_Project__Source/Soundbooth文件夹中导入soundtrack.asnd文件。注意声音文件出现在Library中，但不在时间轴上。
3. 点击选中Soundtrack层的第一帧，在Property Inspector面板的Sound选项中选择导入的声音，Sync设置为Stream。Streaming音频可以在文件下载时播放并保持时间轴同步。
4. 选中各层第400帧按F5使所有层增加到400帧。
5. 将第35帧的stop代码移到第400帧，可以点击第35帧拖动到第400帧放下，这样声音可以从头播到尾。
6. 发现声音文件比400帧稍长，我们用Soundbooth来裁剪。在Library中右击声音文件，选择Edit With Soundbooth CS4，文件在Soundbooth中打开。
7. 在Soundbooth中，声道显示在右边工作区。在每个声道的的两头都有渐入渐出和裁剪手柄，简单的拖动就可以编辑修改。将鼠标移动到较大的声道最右边，当鼠标指针变成中括号箭头形状时，点击向左拖动裁剪后面部分声音，看编辑区顶部的时间显示保证声音有17秒左右。
8. 保存ASND文件，然后返回到Flash。
9. 回到FLA文件你会发现ASND文件已经自动更新。测试影片发现轮胎滑动的声音有些迟滞，而且有点长。如果Soundbooth还打开的话直接回到Soundbooth。
10. 在Soundbooth中，将鼠标移动到较小的声道的最左边裁剪车子滑动声音的开始部分，然后拖动整段声音到最左边，这样滑动的声音立即开始，和动画就比较符合了。
11. 保存ASND文件回到Flash中再测试。可以重复修改几次，直到自己满意为止，如图Figure 14。
12. 全部编辑好后，可以回到Soundbooth生成一个文件的记录快照，点击右下角History面板中的Snapshot按钮，选New Snapshot，输入一个名字然后保存ASND文件。最后退出Soundbooth。

Figure 14.加声音的动画的时间轴

发布SWF文件

最后点击File > Publish发布SWF。使用Publish导出的SWF文件和Test Movie生成的SWF没有区别，Publish可以同时导出HTML等其他格式的文件。在教程前部分已经取消导出HTML的选项，所以这里就不用再管它了。 需要了解详细的发布设置，请参看Using Flash CS4 Professional文档中的发布设置

在Dreamweaver中完成网页

最后一步是用Dreamweaver完成网页的制作。Dreamweaver可以用来编辑修改整个网站的文件和可视化资源，可以通过代码视图或直观视图，利用布局的技术将所有内容资源整合创建网页。 下面教你如何设置网站，创建一个简单的网页，及如何预览，上传作品到服务器。

Dreamweaver CS4

Dreamweaver提供了一个使用HTML语言和其他web脚本语言创建网站的开发环境。简单的说，Dreamweaver是一个文本编辑器，但其丰富的网站管理功能和支持脚本语言，标签技术使其成为一款非常强大的网站制作工具。在CS4的工作流程中，Dreamweaver是作品上传服务器前的最后一道环节。你将从一个Dreamweaver内置的模板（DWT）和CSS开始创建一个简单的网页。 下面开始Dreamweaver

1. 打开Dreamweaver，点击File > New，在New Document对话框中选Blank Page and HTML创建一个HTML文件。
2. Dreamweaver工作区包括Document窗口（可以分别显示代码视图，设计视图和包括两者的双视图），Property Inspector， Insert面板，CSS Styles面板和Files面板，如图Figure 15。

Figure 15. Dreamweaver CS4工作区面板

如果想详细了解如何使用Dreamweaver，请参看Using Adobe Dreamweaver CS4文档。

新建一个网站

使用Dreamweaver，非常重要的是创建文件前先定义一个网站。Dreamweaver可以帮助你创建网站，首先必须知道网站的根目录所在的位置。当定义网站时你可以设置好FTP的属性，这样对你制作网站大有帮助，并且日常的更新维护非常的容易。

下面来创建一个网站：

Figure 16. 任何时候都可以设置网站参数

1. 将Templates文件夹从CS4_Project/_Source/Dreamweaver文件夹挪到CS4_Project文件夹。你应该还记得CS4_Project就是项目的根目录，所有的发布文件都保存在这里。把Templates文件夹移到根目录下，Dreamweaver能立即进入预定义的模板。
2. 点击Site > New Site打开Site Definition对话框，点击Advanced，如图Figure 16。
3. 在Site name中输入CS4 Project，定位到CS4_Project文件夹。点击OK。
4. 网站的内容和目录将列在Files面板。

使用Dreamweaver模板新建网页

你可以从头开始创建一个新的网页或用预定义的模板。Dreamweaver模板包含一些已定义好的可编辑的布局。这些模板主要用来快速生成网页，而且能保持结构的一致性。本教程提供的资源中包括了一个自定义的包含一个简单的垂直方向中间对齐模板。 下面来添加内容完成这个网页：

1. 退出前面创建的HTML文件。
2. 点击File > New，在New Document对话框中的左边选Page From Template，如果没有安装其他的模板，默认会选择promo_page模板，点击Create创建新文件。
3. 将文件保存到CS4_Project，命名为promo_page.html。
4. 将页面顶部的headerContent中的placeholder文字删除。
5. 选中headerContent，点击Insert > Media > SWF，在Select File对话框中选择CS4_Project/_Source文件夹中的promo_header.swf插入标题影片。点击OK。
6. 在Object Tag Accessibility Attributes对话框的Title文本框中输入Double Identity Movie，这样给浏览器提供了访问内容的基本信息。在更复杂的HTML表单和按钮的布局中，使用Access Key和Tab Index文本框能有助于全面提高用户体验和满足用户特殊需求。这里你也可以让Access Key和Tab Index空白。点击OK。
7. 在titleContent中点击placeholder文字并删除。
8. 在CS4_Project/_Source/Dreamweaver文件夹中打开body.txt文件，复制里面的标题文字到titleContent中。
9. 在bodyContent中点击placeholder文字并删除。
10. 将body.txt中剩下的文字复制到bodyContent中
11. 在footerContent中点击placeholder文字并删除。
12. 在CS4_Project/_Source/Dreamweaver文件夹中打开copyright.txt文件，复制里面的文字到footerContent中。注意文字自动套用了CSS中定义好的格式。
13. 在顶部的Document Title的文本框中输入Double Identity。
14. 保存文件。当Copy Dependent Files对话框弹出是点OK。

注意：第12步在项目的根目录创建了一个叫Scripts的文件夹并将内嵌在网页的SWFObject文件复制在这里。这些都在屏幕后自动完成，你只需要知道这些是你的发布文件的一部分，要一起上传到网站上。

修改CSS

现在网页的设计基本都使用CSS来控制网页内容的布局，字体，格式。前面用到的模板就是用CSS创建布局结构，编辑CSS文件就可以修改所有使用此模板的页面。 下面通过编辑CSS来修改标题，内容和版权的文字：

1. 用Files面板打开Templates文件夹中的promo_page.dwt文件。
2. 展开CSS Styles面板开始编辑页面标题。将鼠标指针放在标题文字的编辑区，选择CSS Styles面板上部的Current按钮。
3. 试着修改一下预定义的一些属性或增加一些属性，看看页面有些什么变化，比如改变一下颜色。你会发现上面三个cell的颜色变化了，但最底部的一个cell没有改变。这是因为你修改的样式改变了HTML中的div标签，模板中所有使用div标签的cell都会改变。footerContent cell稍微不同的是在div标签使用了一个自定义的CSS类，这样自定义覆盖了全局定义。转换到代码视图看看CSS和div标签的结构。

小技巧：Dreamweaver模板非常方便的管理网站网页的格式。如果你不想用这种模板的格式，可以选择Modify > Templates > Remove Template Markup。 如果想了解更多关于CSS的知识，请参看Best practices with CSS in Dreamweaver CS4。

预览网页

Dreamweaver一个非常强大的功能是可以用几种不同的方式预览网页。你可以选择代码视图或设计视图，或者同时看两种视图。在Document窗口的顶部点击Code，Split或Design来切换各种视图。Dreamweaver CS4的新特性还可以看到Javascript代码。按F12可以很方便的在一个浏览器中打开当前网页。

小技巧：用代码视图创建网页对学习HTML和Javascript语言大有帮助。

上传文件到服务器

好了，终于到了上传文件到服务器，把网页放在互联网的时刻了。你可以用任何FTP工具上传你的文件，Dreamweaver一个很重要的功能就是Files面板中的FTP功能。使用Dreamweaver的FTP的好处是文件编辑后方便同步，文件上传下载版本的控制。

下面上传文件完成网站：

1. 首先确定CS4 Project网站和服务器连接。点击Site > Manage Sites, 在Manage Sites对话框中选CS4 Project，点Edit。
2. Site Definition对话框中，在Category中点击Remote Info，然后在Access中选FTP，在FTP host，Login和Password文本框中输入登录和域名信息。如果你还没有这些信息，请联系服务商获得。输入登录信息后，点击Test测试连接。最后点击OK。如果你不能连接到服务器，就略过下面操作，掌握基本概念。
3. 打开Files面板点击左上角的Connect To Remote Host按钮连接。
4. 连接建立后，在本地文件中，选中除了_Source文件夹的所有文件，点击Put按钮上传文件到服务器。你可以点击Files面板右上角的Local View to Remote View按钮切换视图。即使使用其他方式上传文件你也可以使用Dreamweaver的Files面板管理本地文件。

修改编辑流程

创建网站工作完成了，但现实生活中你需要考虑修改更新网页。下面来看看修改的工作流程。

更换图片

CS4流程不支持直接编辑修改图片，但更新图片还是非常简单，这里指的是单独的图片。如果你想更新Fireworks原型中的一个图片，删除旧图片，重新导入一张新图片替代旧的就可以了。删除旧图片之前记录一下其大小和位置是非常重要的。如果要更新FLA文件，你可以通过Library的图片的属性来更新，一般FLA文件结构比原型要复杂，使用这个特性比较方便。 下面来更换SWF中标题的背景图片：

Figure 17. 位图属性对话框

1. 用Photoshop打开city_background.psd文件并修改图片。
2. 点击File > Save For The Web将文件保存为JPG格式city_background.jpg，保存在CS4_Project/_Source/Photoshop文件夹中。
3. 在Flash中打开promo_header.fla文件。
4. 在Library中双击Bitmap 1打开Bitmap Properties对话框，如图Figure 17，点击Update并指定到刚保存的JPEG文件。Bitmap 1图片内容就更新了。
5. 保存文件并发布SWF，这样SWF文件就可以上传了。
6. 与之对应，用保存的JPEG文件更新Fireworks原型。

你自己决定是在Fireworks文件中还是FLA文件中更新图片。通常为了保持一致性也同时更新Fireworks原型，但实际上FLA文件完成后Fireworks原型可以不需要了。

修改音频文件

内嵌于Flash的ASND文件是可以直接编辑修改的。ASND源文件保存了修改历史记录，你可以在源文件中任意增加或删除修改的历史记录。 下面来编辑修改SWF文件中的音频：

1. 在Library中右击或Ctrl点击声音文件选择Edit With Soundbooth CS4，ASND文件将在Soundbooth中打开。
2. 如图Figure 18，在History面板中删除上次修改的记录或再次修改编辑文件。
3. 保存ASND文件。
4. 回到FLA文件，发布SWF更新声音文件。
5. 保存FLA文件。

Figure 18.在ASND文件中保存编辑记录

修改网页文字或格式

在Dreamweaver中修改文字和CSS样式非常容易。在开始阶段多试试各种文字和样式的组合是一种常用的手段。可以遵循前面介绍的修改CSS部分方式编辑修改，完成后检查编辑Site设置。

上传更新的文件

记住文件更新后要重新上传到服务器以更新服务器上的文件。可以使用任何FTP工具或Dreamweaver的Site面板上传更新。通常情况下先将文件上传到一个不公开的测试目录，这样可以先检查一下发布的文件有什么问题没有。

总结

好了，你已经学习了如何使用Adobe CS4的几种工具创建一个网站，项目准备过程，建立原型，制作互动影片，整合生成网页。以后可以考虑一下如何用CS4产品创建布局模板和在工作流程中定义增加其他类似方法。

关于作者

Dan Carr是旧金山Dan Carr Design工作室老板，兼开发人员和培训师，拥有多年的Macromedia和Adobe开发经验，创建了大量的Flash作品，包括e-learning模板，UI组件和Developer Resource Kit extensions。Dan在旧金山开设Flash设计和ActionScript编程的课程，同时开发e-learning和web应用程序。