• 创建工作流程原型

  • 创建基于 CSS 的布局

  • 创建 Flex 应用程序原型

  • 创建 Adobe AIR 应用程序原型

创建工作流程原型                  

                               

通过组合“页面”面板与其它强大的 Fireworks 功能，您可以快速创建交互 Web 和软件原型。若要将已完成的原型转换到正常运行的网站，只需将原型导出到 Adobe Flash®、Adobe Flex®、Adobe AIR™ 或 Adobe Dreamweaver® 即可。

有关建立原型工作流程的常规提示，请参阅 Fireworks 开发人员中心的下列文章：

  • Nick Myers 关于使用 Fireworks 设计交互产品的文章：http://www.adobe.com/go/learn_fw_interactiveproducts_cn

  • Dave Cronin 关于原型创建行业趋势的文章：http://www.adobe.com/go/learn_fw_prototypingtrends_cn

  • Matt Stow 关于在 Fireworks 中使用预构建 CSS 模板的文章：在 Fireworks CS4 中预构建 CSS 模板。

  • Jim Babbage 的文章：Fireworks CS4 操作摘录：导入、导出、元件、原型创建、缩放。

  • Dave Hogue 关于使用 Fireworks 进行交互设计和快速创建原型的视频教程：

    • 将 Fireworks 用于信息和交互设计：http://www.adobe.com/go/learn_fw_infointeract_cn

    • 使用 Fireworks 创建交互原型：http://www.adobe.com/go/learn_fw_creatinginteractivepro_cn

    • 使用 Fireworks 快速创建原型：http://www.adobe.com/go/learn_fw_rapidpro_cn

    • Fireworks 作为整个设计流程的一部分：http://www.adobe.com/go/learn_fw_completedesignpro_cn

  • 关于使用 Fireworks 设计网站应用程序的文章：http://www.adobe.com/go/learn_fw_designwebsiteapp_cn

  • Kumar Vivek 关于使用 Fireworks 面向移动设备设计的文章：http://www.adobe.com/go/learn_fw_designmobiledevices_cn

有关如何创建应用程序界面原型的视频教程，请参阅 www.adobe.com/go/lrvid4034_fw_cn。

创建页面

在“页面”面板中，为您的初始设计创建所需的页数或屏幕数。随着设计的改进，您可以根据需要添加或去除页面。

构造公用设计元素布局

在画布上，构造您要在多个页面之间共享的设计元素（如导航栏和背景图像）的布局。若要对齐元素，请使用“智能辅助线”。为获得最大的灵活性，请使用 CSS 构造您的布局。（请参阅智能辅助线和创建基于 CSS 的布局。）

在多个页面间共享公用元素

在共享公用元素时，单个更改会自动更新所有受影响的页面。使用主页共享它包含的所有元素，或共享层来复制元素的子集。（请参阅使用主页和共享层。）

向各个页面添加独特的元素

在每个页面上，添加独特的设计、导航或表单元素。在“公用库”面板中，您会发现许多可加快设计过程的按钮、文本框和弹出菜单。Flex 组件、HTML、Mac、Win、Web & Application 以及 Menu Bars 文件夹中的组件元件包括您可以为各个元件实例自定义的属性。（请参阅创建和使用组件元件。）

使用链接模拟用户导航

利用切片、热点或导航按钮等网页对象，链接原型的各个页面。（请参阅链接到 Fireworks 文档中的页面。）

导出已完成的交互式原型

Fireworks 为您的原型提供了多种输出格式，所有输出格式都为页面导航保留了超文本链接。请参阅以下文章：

  • 要与客户端共享基于 CSS 的灵活原型或在 Adobe Dreamweaver 中做进一步编辑，请参阅导出 CSS 布局。

  • 要创建更传统的基于表的原型，请参阅导出 Fireworks HTML。

  • 要将 PDF 版本分发以进行注释或打印，请参阅导出 Adobe PDF 文件。

  • 要创建 Flex 应用程序原型，请参阅创建 Flex 应用程序原型。要创建 Adobe AIR 应用程序，请参阅创建 Adobe AIR 应用程序。


创建基于 CSS 的布局                  

您可以在 Fireworks 文档中设计基于 CSS 的布局，然后将它们转换为具有 CSS 规则（用于复制布局）的 HTML 页。基于 CSS 的布局提供基于标准的方法并提供跨浏览器的友好代码。

有关如何创建基于 CSS 的 HTML 页面布局的视频教程，请参阅 www.adobe.com/go/lrvid4035_fw_cn。另请参阅以下资源：

  • 在 Fireworks 中导出 CSS 和图像的教程：http://www.adobe.com/go/learn_fw_exportcssimages_cn。

  • 使用 Fireworks 创建符合标准的 Web 设计的教程：http://www.adobe.com/go/learn_fw_standardscompliantdesign_cn。


关于 CSS 页面布局                  

Fireworks 可以设计页面并使用导出引擎（分析对象的位置）立即导出 HTML 和 CSS 代码。另外，还可以设置页面对齐并指定重复出现的背景图像。

可以使用公用库的 HTML 文件夹中的 HTML 元素。HTML 文件夹包含按钮、下拉列表对象和文本字段等 HTML 元素。可以使用“元件属性”面板编辑这些元素的属性。当您将任何表单元素拖到页面后，导出引擎将在导出基于 CSS 的布局时插入 <form> 标签。

已在其上放置切片的任何文本在导出的 HTML 中都将显示为图像。如果希望将此文本显示为文字，请使用公共库中的 HTML 组件。HTML 组件包括标题 1-6 和链接元素。

基于 CSS 的布局适用的规则                  

创建基于 CSS 的布局时，需遵循几条规则以获得预期的效果。

规则 1：使用矩形导出文本和切片，以导出图像


导出引擎导出置于矩形中的文本。因为仅导出矩形切片覆盖的图像，所以只有将切片放在图像上才能将其导出。这些切片会“告知”导出引擎这些图像所在的位置。


规则 2：避免对象相互重叠


导出引擎将文本、图像和矩形视为矩形块。它会检查这些对象的大小和位置，以便确定将其置入布局中所需的逻辑行和列。放置这些对象请务必小心，不要让它们的边界相互重叠。


规则 3：计划布局所需的行和列


导出引擎会查找可以在对象或对象组之间放置清晰视线的逻辑分区。请将列布局包含在矩形中，以防止导出引擎插入破坏列布局的逻辑行。


规则 4：将文档视为二维文档


设计页面时，请使用矩形将要视为矩形子级的对象包含在内。导出引擎会检测这样的父子关系。导出引擎会像在规则 3 中一样，扫描逻辑行和逻辑列的子元素。


除这些规则外，请遵循下列规则：

  • 导出引擎仅导出原始矩形。若要导出矩形的圆角，请在这些圆角上放置矩形切片。

  • 若要导出矩形的笔触，请将矩形切片放在拥有这些笔触的矩形上。

  • 若要导出元件，请在其上放置矩形切片。

  • 若要导出已应用到文本或矩形的滤镜，请在其上放置矩形切片。


导出 CSS 布局                  

Fireworks 可以将您创建的布局导出为基于 CSS 的文件。然后，您可以在 Dreamweaver 或其它与 CSS 兼容的编辑器中打开并编辑这些基于 CSS 的文件。

    • 选择“文件”>“导出”。

    • 从“导出”弹出菜单中选择“CSS 和图像”。

    • 单击“选项”以设置 HTML 页面属性。

    • 单击“浏览”以指定背景图像并设置背景图像平铺：

      • 选择“无重复”以便仅显示一次图像。

      • 选择“重复”，以便横向和纵向重复或平铺图像。

      • 选择“横向重复”，以便横向平铺图像。

      • 选择“纵向重复”选项，以便纵向平铺图像。

    • 选择在浏览器中使页面左对齐、居中对齐或右对齐。

    • 将附件滚动方式选择为固定或滚动。

    • 单击“确定”，然后单击“保存”。

创建文档演示                  

您可以创建正在处理的 Fireworks 文档的演示。该演示将在浏览器中打开以展现相应功能，并允许您在页面中导航。

  1. 选择“命令”>“演示当前文档”。

  2. 选择要为其创建演示的页面，并单击“创建演示”。

  3. 选择文件夹并单击“打开”。


创建 Flex 应用程序原型                  

为 Flex 创建原型的过程类似于用于创建网站和软件界面的工作流程。（请参阅创建工作流程原型。）使用 Fireworks，您可以将 Flex 组件拖动到画布上，指定其属性，并将生成的用户界面导出到 MXML。然后，您可以在 Flex Builder 中细化这类用户界面。

创建 Flex 用户界面

使用“页面”面板，为您的初始设计创建所需数目的界面屏幕。

将 Flex 设计组件插入布局中

在画布上，在“公用库”面板中插入来自 Flex 文件夹的 Flex 组件。这些组件元件专门用于执行 MXML 导出，目的是确保您获得预期效果。将文档导出为 MXML 时，这些元件中的每一个都被转换为它们各自的 MXML 标签。 而没有被识别为 Flex 组件的对象则导出为位图，这些位图通过 <mx:Image> 标签链接至 MXML。（请参阅创建和使用组件元件。）

在 Fireworks 中编辑 Flex 设计组件时，您可以将已修改的 XML 代码复制到 Flex 项目中。如果您要复制项目中已修改的组件行为，这样做可以节省时间。


“光标”、“滚动条”、“制表符”和“工具提示”元件在 MXML 输出期间将被忽略，因为这些组件不会从 Fireworks 直接转换为 MXML。例如，可以滚动 Flex 容器实例的内容时，“滚动条”元件将自动出现在 Flex 容器实例中。在 Fireworks 中，这些元件仅作为指示器，指示界面设计的各个部分如何发挥作用。

 

注意：          

图像切片、变换图像和热点仅适用于基于 HTML 的原型。创建 Flex 原型时避免这些 Web 对象。


跨多个页面共享公用 Flex 组件

跨多个页面共享一个 Flex 组件时，一次更改会自动更新所有受影响的页面（或屏幕）。您可以使用主页共享它包含的所有 Flex 组件，或共享层来复制组件的子集。（请参阅使用主页和共享层。）

指定 Flex 组件的属性

在“元件属性”面板（“窗口”>“元件属性”）中，为已插入画布的每个 Flex 组件指定属性和事件。

将 Flex 布局导出到 MXML

导出 Flex 用户界面布局，并在 Flex 中打开生成的 MXML 文件。Fireworks 将导出必要的 MXML，同时保持所有样式和绝对位置。Flex 开发人员可以使用此界面，而不必在 Flex 中重新创建布局。

编辑 Flex 组件属性                  

您可以在“元件属性”面板中编辑 Flex 组件的属性和事件。

    • 在画布中选择 Flex 组件。

    • 打开“元件属性”面板（“窗口”>“元件属性”）。

    • 在“元件属性”面板中设置组件的属性和事件。

将 Fireworks 文档导出到 MXML                  

Fireworks 可启用导出公用库资源（如 Adobe Flex Builder 中使用的已知组件），藉以帮助您创建丰富 Internet 应用程序 (RIA) 的布局。Fireworks 导出所需的 Flex 代码 (MXML)，同时保留样式设置和绝对定位。

完成 Flex 应用程序原型后，将其导出到 MXML 以便进一步在 Flex Builder 中进行编辑。在“设计”视图中，除了未导出的组件（例如光标和滚动条）之外，原型看起来很像其在 Fireworks 中的显示效果。

    • 选择“文件”>“导出”。

    • 从“导出”弹出菜单中选择“MXML 和图像”。

    • 如果要将图像保存在与 MXML 代码所在不同的文件夹中，请选择“将图像放入子文件夹”。

    • 若要仅导出当前选定页面，请选择“仅限当前页面”。

    • 单击“保存”完成导出。

      所有与原型关联的图像都被导出到图像文件夹。此外，还可以使用其它图像文件创建全部 MXML 页面的图像。MXML 页面不需要这些预览图像，因此可以将这些图像删除。

创建并导出 Flex 外观                  

您可以在 Fireworks 中设置 Flex 组件的外观，然后导出它们，以用于生成基于 Flex 的网站和应用程序界面。

设置 Flex 组件                  

您可以根据 Flex 外观模板为范围广泛的各种 Flex 组件创建外观，以及在 Fireworks 中对其进行编辑。

  1. 选择“命令”>“Flex 外观”>“新建 Flex 外观”。

  2. 执行下列操作之一：

    • 若要为所有可用组件创建 Flex 外观，请选择“多个组件”。

      Fireworks 将创建一个包含所有可用 Flex 组件的文档。

    • 若要指定要为其创建外观的组件，请选择“特定组件”。

      仅选择附带特定样式的组件，或者选择组件的所有实例。

  3. 单击“确定”。


导出 Flex 外观                  

    • 选择“命令”>“Flex 外观”>“导出 Flex 外观”。

    • 选择要将 Fireworks 文档导出到的文件夹并单击“打开”。

MXML 导出限制                  

在使用 Flex MXML 导出功能之前，请务必了解其功能和限制：

导出 MXML 并不会创建组件的外观


在 Flex 中导出 MXML 并不会创建组件的外观，即使您已在 Fireworks 中修改过这些组件。导出 MXML 仅生成用于 Flex 的 MXML 文档。这些文档还可以包括无法转换为 MXML 标签的 Fireworks 对象的链接图像。这些图像将通过 <mx:Image> 标签添加到 MXML 文档中。


导出 MXML 时会忽略切片


由于导出 MXML 旨在生成基于标签的文档以用于 Flex，因此在创建图像或表单元格时不会考虑切片。导出 MXML 创建图像时，将使用文档的优化设置来确定图像格式和压缩方法。


MXML 属性限于丰富的元件属性


MXML 导出功能根据 Fireworks 中的 Flex 组件来确定 MXML 标签的属性。Fireworks 提供了具有有限数量属性的 Flex 组件的子集。


采用嵌入样式


识别为样式的属性会与所创建的 MXML 标签分开，但保留在 <mx:Style> 标签内的同一 MXML 文档中。Fireworks 无法在外部 CSS 文件中定义样式。


不支持帧


创建用于 MXML 输出的设计和布局时，请不要使用帧。如果要在一个文档中使用不同的设计，请使用页面。


创建 Adobe AIR 应用程序原型                  

适用于 Fireworks 的 Adobe® AIR™ 允许您将 Fireworks 原型变换为桌面应用程序。例如，某些原型页面通过彼此交互来显示数据。您可以使用 Adobe AIR 将这组页面打包到一个可在用户计算机上安装的小型应用程序中。用户从桌面运行应用程序时，该应用程序将在其自身的应用程序窗口中加载并显示原型，而不需浏览器。然后，用户可以在本机上浏览原型，而无需连接到 Internet。

请参阅 Ethan Eismann 关于 Adobe AIR 和品牌体验的文章：http://www.adobe.com/go/learn_fw_airexperiencebrand_cn。

添加 Adobe AIR 鼠标事件                  

                               

您可以将预定义的 Adobe AIR 鼠标事件添加到文档中的对象。Fireworks 提供四种预定义鼠标事件：关闭窗口、拖动窗口、最大化窗口和最小化窗口。

  1. 选择画布上要应用鼠标事件行为的对象。

  2. 选择“命令”>“AIR 鼠标事件”并选择事件。


预览 Adobe AIR 应用程序                  

预览 Adobe AIR 应用程序时，无须设置任何 Adobe AIR 应用程序参数。

    • 选择“命令”>“创建 AIR 包”，然后单击“预览”。

创建 Adobe AIR 应用程序                  

    • 选择“命令”>“创建 AIR 包”，并设置以下选项：

      应用程序名称


      指定在用户安装应用程序时显示在安装屏幕上的名称。默认情况下，扩展名指定 Fireworks 站点的名称。


      应用程序 ID


      输入应用程序的唯一 ID。请勿在 ID 中使用空格或特殊字符。 仅下列字符有效：0-9、a-z、A-Z、.（点）和 -（短划线）。此设置是必需的。


      版本


      指定应用程序的版本号。此设置是必需的。


      程序菜单文件夹


      在 Windows“开始”菜单中指定一个文件夹，用于在其中创建应用程序的快捷方式。（此方法在 Mac OS 上不适用）


      描述


      指定在用户安装应用程序时显示的有关应用程序的说明。


      版权所有


      指定在 Mac OS 中安装 Adobe AIR 应用程序时,“关于”信息中显示的版权声明。此信息不适用于在 Windows 上安装的应用程序。


      程序包内容


      选择“当前文档”以自动选择要包含其文件的文件夹。


      根内容


      单击“浏览”以选择作为根内容出现的页面。如果已选择“当前文档”，则自动设置根内容。


      包括的文件


      指定要在应用程序中包括的文件或文件夹。您可以添加 HTML 和 CSS 文件、图像文件和 JavaScript 库文件。单击加号 (+) 按钮可添加文件，单击文件夹图标可添加文件夹。若要从列表中删除文件或文件夹，请选择对应的文件或文件夹并单击减号 (-) 按钮。选择包含在 Adobe AIR 包中的文件或文件夹必须属于根内容文件夹。


      系统窗口样式和透明


      指定用户在其计算机上运行应用程序时使用的窗口样式。系统窗口样式使用操作系统的标准窗口控件来配置应用程序。透明的窗口样式会消除标准系统窗口样式并允许您为应用程序创建自己的窗口样式。通过透明功能，可以创建形状非矩形的应用程序窗口。


      宽度和高度


      指定应用程序在打开时其窗口的尺寸（以像素为单位）。


      选择图标图像


      单击以选择用于应用程序图标的自定义图像。选择每个图标大小的文件夹并选择要使用的图像文件。仅支持 PNG 文件作为应用程序的图标图像。



       

      注意：          

      选定的自定义图像必须驻留在应用程序站点中，其路径必须相对于站点根。


      数字签名


      单击“设置”以使用数字签名为应用程序签署。此设置是必需的。有关详细信息，请参阅下面的部分。


      包文件


      指定用于保存新应用程序安装程序（.air 文件）的文件夹。默认位置为站点根目录。单击“浏览”按钮以选择其它位置。默认文件名基于站点名称，但扩展名为 .air。此设置是必需的。


使用数字证书签署 Adobe AIR 应用程序                  

数字签名可确保应用程序在由软件作者创建之后，其代码未遭更改或损坏。所有的 Adobe AIR 应用程序都需要一个数字签名，且没有数字签名将无法进行安装。

    • 在“创建 AIR 包”对话框中，单击“数字签名”选项旁边的“设置”按钮。

    • 在“数字签名”对话框中，执行下列操作之一：

      • 若要使用预先购买的数字证书为应用程序签名，请单击“浏览”按钮，选择证书，输入对应的密码，然后单击“确定”。

      • 若要创建您自己的自签名数字证书，请单击“创建”按钮并完成对话框中的操作。证书的“密钥类型”选项是指证书的安全级别：1024-RSA 使用 1024 位密钥（安全性较低），2048-RSA 使用 2048 位密钥（安全性较高）。完成后，单击“创建”。然后，在“数字签名”对话框中输入对应的密码，然后单击“确定”。

        注意：必须在计算机上安装 Java® 运行时环境 (JRE)。

                                                                                       

                                       

,