製作 Flex 和 Adobe AIR 應用程式的原型

藉由「頁面」面板與其他 Fireworks 強大功能的結合，您可以快速地建立互動式網站和軟體原型。若要將製作完成的原型轉換為運作的網站，您只需要將它匯出到 Adobe Flash^®、Adobe Flex^®、Adobe AIR™ 或 Adobe Dreamweaver^® 中即可。

請參閱 Fireworks 開發人員中心的下列文章，以取得製作原型工作流程的一般提示:

• Nick Myers 之使用 Fireworks 設計互動式產品的文章：http://www.adobe.com/go/learn_fw_interactiveproducts_tw

• Dave Cronin 之原型設計方面的產業趨勢文章：http://www.adobe.com/go/learn_fw_prototypingtrends_tw

• Matt Stow 之在 Fireworks 中使用預先建立的 CSS 範本的文章：在 Fireworks CS4 中預先建立的 CSS 範本。

• Jim Babbage 的文章，Fireworks CS4 作法摘錄：匯入、匯出、元件、製作原型、縮放。

• Dave Hogue 之使用 Fireworks 來進行互動式設計與快速製作原型的視訊教學課程:

  • 使用 Fireworks 處理資訊和互動的設計：http://www.adobe.com/go/learn_fw_infointeract_tw

  • 使用 Fireworks 建立互動式原型：http://www.adobe.com/go/learn_fw_creatinginteractivepro_tw

  • 使用 Fireworks 快速製作原型：http://www.adobe.com/go/learn_fw_rapidpro_tw

  • Fireworks 是完整設計過程的一部分：http://www.adobe.com/go/learn_fw_completedesignpro_tw

• 使用 Fireworks 設計網站應用程式的文章：http://www.adobe.com/go/learn_fw_designwebsiteapp_tw

• Kumar Vivek 之使用 Fireworks 設計行動裝置的文章：http://www.adobe.com/go/learn_fw_designmobiledevices_tw

如需製作應用程式介面原型的視訊教學課程，請參閱 www.adobe.com/go/lrvid4034_fw_tw。

建立頁面

在「頁面」面板中，為您的初始設計建立需要的頁面或畫面數量。隨著設計演進，您可以按照需要增加或去除頁面。

版面常用設計元素

在畫布上，您要在多個頁面中共享的版面設計元素，例如導覽列和背景影像。若要將元素對齊，請使用「智慧型導引線」。為了獲得最多的彈性，請使用 CSS 語言建構您的版面。(請參閱「智慧型導引線」和「建立以 CSS 為基礎的版面」)。

在多個頁面之間共享常用元素

共享常用元素時，單一變更會自動更新所有受影響的頁面。您可以使用主要頁面來共享內含的所有元素或共享圖層，以便複製元素的子集合。(請參閱「使用主要頁面」以及「共享圖層」。)

將唯一的元素加入單一頁面

在每個頁面上，增加唯一的設計、導覽或表格元素。在「通用元件庫」面板上有許多按鈕、文字方塊和彈出式選單，可協助您加速設計過程。在「Flex 元件」、「HTML」、「Mac」、「Win」、「網頁和應用程式」以及「選單列」資料夾中的元件，包含可讓您自訂個別元件實體的屬性。(請參閱「建立和使用元件」。)

利用連結來模擬使用者瀏覽

藉由例如分割、連結區或導覽按鈕等網頁物件，連結您原型中的不同頁面。(請參閱「連結 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_tw。此外，也請參閱下列資源:

• 在 Fireworks 中匯出 CSS 和影像的教學課程，網址為 http://www.adobe.com/go/learn_fw_exportcssimages_tw。

• 使用 Fireworks 建立標準相容的網頁設計之教學課程，網址為 http://www.adobe.com/go/learn_fw_standardscompliantdesign_tw。

關於 CSS 頁面版面

Fireworks 會使用分析物件位置的匯出引擎，讓您能夠設計頁面且立即匯出 HTML 和 CSS 程式碼。此外，您也可以設定頁面對齊方式和指定重複的背景影像。

您可以使用可在「通用元件庫」的 HTML 資料夾中取得的 HTML 元素。HTML 資料夾包含 HTML 元素，例如按鈕、下拉式清單物件和文字欄位。您可以使用「元件屬性」面板，編輯這些元素的屬性。當您將任一表格元素拖曳至頁面時，匯出引擎會在匯出以 CSS 為基礎的版面時插入 <form> 標籤。

您已放置分割的任何文字都會以影像的形式出現在匯出的 HTML 上。如果您想讓此文字顯示為文字，請使用「通用元件庫」的 HTML 元件。HTML 元件包含標題 1-6 與連結元素。

以 CSS 為基礎的版面規則

在建立以 CSS 為基礎的版面以得到預期的結果時，您會注意到有幾項規則。

匯出引擎會將放置在矩形中的文字匯出。因為只會匯出矩形分割所涵蓋的影像，所以請將分割放在影像上以將它們匯出。這些分割會「告訴」匯出引擎影像的所在位置。

匯出引擎會將文字、影像以及矩形視為矩形區塊。它會檢視這些物件的大小和位置，判斷要在版面上放置它們的邏輯橫列與直行。請謹慎放置物件，不要讓邊界重疊。

匯出引擎會在物件之間或物件的群組之間，尋找空曠且可供放置的邏輯分割。在矩形中包含直行版面，可以避免讓匯出引擎插入邏輯橫列而中斷直行版面。

當您設計頁面時，請使用矩形來包含要視為矩形子元素的物件。匯出引擎會偵測出這類的父子關係。匯出引擎會根據規則 3 來進行掃描，找出邏輯橫列與直行的子元素。

除這些規則之外，您還會注意到下列情況：

• 匯出引擎只會匯出原始矩形。若要匯出圓角矩形，請在圓角上放置矩形分割。

• 若要匯出含筆畫的矩形，請在有筆畫的矩形上放置矩形分割。

• 若要匯出元件，請在元件上放置矩形分割。

• 若要匯出您套用到文字或矩形的濾鏡，請在濾鏡上放置矩形分割。

匯出 CSS 版面

Fireworks 可以讓您將建立的版面匯出成以 CSS 為基礎的檔案。接下來，您就可以在 Dreamweaver 或其他與 CSS 相容的編輯器中開啟和編輯這些以 CSS 為基礎的檔案。

建立文件示範

您可以為正在處理的 Fireworks 文件建立示範。該展示會在瀏覽器中開啟，以展示功能預覽功能並讓您瀏覽頁面。

1. 選取「命令 > 示範目前文件」

2. 選取您想要建立示範的頁面，然後按一下「建立示範」。

3. 選取該資料夾，然後按一下「開啟」。

製作 Flex 應用程式原型

Flex 的原型製作程序就如同網站和軟體介面所用的工作流程一樣。(請參閱「製作工作流程原型」。)您可使用 Fireworks 將 Flex 元件拖曳到畫布上、指定其屬性，然後再將產生的使用者介面匯出為 MXML。接下來，您可在 Flex Builder 中美化該使用者介面。

建立 Flex 使用者介面

使用「頁面」面板，為您的初始設計建立需要的介面畫面數量。

將 Flex 設計元件插入版面

在畫布上，將 Flex 資料夾中的 Flex 元件插入「通用元件庫」面板。這些元件可特別搭配 MXML 匯出，確保您能得到預期的結果。當您將文件匯出為 MXML 時，這些文件都會全部轉換成各自的 MXML 標籤。無法識別為 Flex 元件的物件會改成匯出為點陣圖，而這些點陣圖會透過 <mx:Image> 標籤與 MXML 連結。(請參閱「建立和使用元件符號」。

在進行 MXML 輸出時會忽略「游標」、「捲軸」、「索引標籤」和「工具提示」元件，因為這些元件無法直接從 Fireworks 轉換為 MXML。例如，當 Flex 容器實體可捲動時，其中便會自動出現「捲動列」元件。在 Fireworks 中，這些元件只會作為介面設計某部分之運作方式的指示器。

在多個頁面之間共享常用的 Flex 元件

當在多個頁面共享單一 Flex 元件時，一有變更就會自動更新所有影響頁面 (或畫面)。您可以使用主要頁面來共享內含的所有 Flex 元件，或共享圖層來複製元件的子集合。(請參閱「使用主要頁面」以及「共享圖層」。)

指定 Flex 元件的屬性

在「元件屬性」面板 (「Window > 元件屬性」) 中，指定已插入到畫布之各項 Flex 元件的屬性和事件。

將 Flex 版面匯出為 MXML

匯出 Flex 使用者介面版面，並在 Flex 中開啟產生的 MXML 檔案。Fireworks 會匯出所需的 MXML，其中所有的樣式設定和絕對定位都會保留。Flex 開發人員可以使用此介面，而無須在 Flex 中重新建立版面。

編輯 Flex 元件屬性

您可以在「元件屬性」面版中編輯 Flex 元件的屬性和事件。

將 Fireworks 文件匯出為 MXML

Fireworks 可啟用匯出通用元件庫資源 (如 Adobe Flex Builder 中使用的已知元件)，藉以協助您建立多樣化網際網路應用程式 (RIA) 的版面。Fireworks 會匯出所需的 Flex 程式碼 (MXML)，其中所有的樣式設定和絕對定位都會保留。

當完成 Flex 應用程式原型後，將其匯出為 MXML 以供進一步在 Flex Builder 中編輯。在「設計」檢視中，除了沒有匯出的游標和捲軸等元件之外，原型外觀看起來就如同其 Fireworks 副本一樣。

建立和匯出 Flex 面板

您可以在 Fireworks 中建立 Flex 元件的面板，然後將它們匯出來用於建置以 Flex 為基礎的網站及應用程式介面。

包裝 Flex 元件

您可以根據 Flex 面板範本來建立各種 Flex 元件的面板，並在 Fireworks 中編輯它們。

1. 選取「命令 > 建立 Flex 面板 > 新增 Flex 面板」。

2. 請執行下列步驟之一：

   • 若要為所有可用元件建立 Flex 面板，請選取「多個元件」。

     Fireworks 會以所有可用的 Flex 元件建立單一文件。

   • 若要指定您要為其建立面板的元件，請選取「指定元件」。

     您可以僅選取附加了特定樣式的元件，或選取元件的全部實體。

3. 按一下「確定」。

匯出 Flex 面板

MXML 匯出限制

在使用 Flex MXML 匯出功能之前，請務必瞭解其功能與限制：

在 Flex 中匯出 MXML 並不會建立元件的面板，即使您已在 Fireworks 中修改過這些元件。匯出 MXML 只會產生用於 Flex 的 MXML 文件。這些文件也可能包含無法轉換成 MXML 標籤之 Fireworks 物件的連結影像。這些影像會透過 <mx:Image> 標籤新增到 MXML 文件。

因為匯出 MXML 可產生以標籤為基礎的文件以用於 Flex，建立影像或表格儲存格時則不會考慮分割。匯出 MXML 建立影像時，會使用文件的最佳化設定來決定影像格式和壓縮方法。

MXML 匯出功能是以 Fireworks 中的 Flex 元件作為 MXML 標籤屬性的基礎。Fireworks 會將數量有限的屬性提供給 Flex 元件子集合。

識別為樣式的屬性會與建立的 MXML 標籤分開，但會保留在 <mx:Style> 標籤中的相同 MXML 文件內。Fireworks 無法定義外部 CSS 檔案的樣式。

建立要匯出 MXML 的設計與版面時，請勿使用框架。如果您想要一個文件中有不同的設計，請使用頁面。

製作 Adobe AIR 應用程式原型

Fireworks 的 Adobe^® AIR™ 可讓您將 Fireworks 原型轉換為桌面應用程式。例如，某些原型頁面會彼此互動以顯示資料。您可以使用 Adobe AIR 來將此頁面組套成小型應用程式，可安裝在使用者的電腦上。當使用者從桌面執行應用程式時，該應用程式會在其自身的應用程式視窗中載入並顯示原型，而不需瀏覽器。使用者之後便能在電腦本機上瀏覽原型，而不需要網際網路連線。

請參閱 Ethan Eismann 之 Adobe AIR 和品牌體驗的文章：http://www.adobe.com/go/learn_fw_airexperiencebrand_tw。

新增 Adobe AIR 滑鼠事件

您可以對文件中的物件新增預先定義的 Adobe AIR 滑鼠事件。Fireworks 提供四個預先定義的滑鼠事件：關閉視窗、拖曳視窗、最大化視窗以及最小化視窗。

1. 在畫布上選取想要套用滑鼠事件行為的物件。

2. 選取「命令 > AIR 滑鼠事件」，然後選擇事件。

預覽 Adobe AIR 應用程式

您無需設定任何 Adobe AIR 應用程式參數，便可以預覽 Adobe AIR 應用程式。

建立 Adobe AIR 應用程式

使用數位憑證簽署 Adobe AIR 應用程式

數位簽名可保障應用程式在由軟體作者建立後，其程式碼未遭變更或毀損。所有 Adobe AIR 應用程式皆需數位簽名，且若沒有簽名便無法進行安裝。