理解 Flash 中的 ActionScript 3 調試

調試是一個解決從應用程序已知問題或測試未知錯誤和性能問題的過程。這個過程通常最終決定了項目的成敗。本文旨在幫助您理解調試過程以及在 Adobe Flash Professional CS5 中的 ActionScript 3 環境中進行開發的常見問題。html

本文中的主體和工做流程建議針對設計人員和開發人員。您的目的是找出並解釋問題、適應錯誤處理流程以及定義一個工做流程(用於在出錯時解決錯誤)。您將使用 Flash Professional CS5 並體驗與 Adobe Flash Builder 4 的全新集成效果。程序員

注意:若是您使用的是 Flash CS4,請參閱本文的先前版本:理解 Flash CS4 Professional 中的 ActionScript 3 調試web

爲了使這個流程更形象,我提供了一系列範例文件,每一個文件都包含一個受損版本和一個修復版本。修復版本可供參考,但您能夠在閱讀本文時瞭解具體的解決方法。編程

什麼是錯誤?爲何揮之不去?

當開始使用 ActionScript 3 時,我留意到的第一點是它對輸出錯誤的寬容度遠不及 ActionScript 2。但這最終是一件好事,我已經習覺得常,它甚至已成爲個人優點。但有一點能夠確定,它與使用 ActionScript 2 大相徑庭。數組

本部分將歸納您將處理哪些 Adobe Flash Player 問題以及如何在 Flash Professional 工做區中將它們形象化。瀏覽器

理解 ActionScript 3 環境

ActionScript 3 架構以一個新引擎 ActionScript Virtual Machine 2 爲運行基礎,它解決了先前版本的 Adobe Flash 中累積的許多歷史問題。更新幅度很大,以致於它須要一個可在 Flash Player 9 及更高版本中查看的新文件格式。緩存

有關全新 ActionScript 引擎的技術概述,請閱讀如下文章:安全

在 Flash Professional CS5 中,ActionScript 3 環境分爲兩部分:ActionScript 3 FLA 文件和 ActionScript 3 編程語言。服務器

默認狀況下,當您在 Flash Professional 中建立新文件時,使用的是 ActionScript 3 FLA 文件。文件中的元素外觀以及整體感受與 ActionScript 2 FLA 文件相同,但 Flash Professional 工做區通過更新,可在 ActionScript 3 FLA 處於焦點時,顯示 ActionScript 3 功能。最明顯的是,您將看到「組件」面板中的整套組件都不一樣於以往。架構

處理 ActionScript 3 FLA 文件時,管理資源和建立元件的過程與 ActionScript 2 基本相同,但編碼規則有所改變。您能夠將代碼沿時間軸添加到關鍵幀,或使用外部 ActionScript 文件將它連接到主時間軸或元件。(沒法再將代碼附加到舞臺中的實例。)

發佈影片時,ActionScript 代碼將編譯到生成的 SWF 文件中。ActionScript 3 編譯器經過檢查確保代碼結構及代碼分配都符合 ActionScript 3 語言嚴格的規則,從而處理 ActionScript 代碼。

每次發佈影片時,您一般都在編譯時處理錯誤。

理解什麼是錯誤

錯誤是 ActionScript 語言和編譯器進程內建的通知。錯誤分三種:編譯器錯誤、運行時錯誤(ActionScript 例外或錯誤事件)以及警告:

當發佈文件並將 ActionScript 編譯爲 SWF 文件時,會發生編譯器錯誤。編譯器錯誤強制實施規則,這些規則容許 ActionScript 代碼以最佳的指望方式運行。發生編譯器錯誤時,SWF 文件將沒法導出,直至修復錯誤。

在編譯時以後的回放過程當中發生問題時,ActionScript 對象將生成運行時錯誤。運行時錯誤以錯誤事件或包含錯誤描述對象的 ActionScript 例外形式出現。Flash Player 會嘗試忽略運行時錯誤,讓它們在後臺靜默失敗,可是若是發生致命錯誤,它會在「輸出」面板上顯示大量消息並中止影片回放。

警告出如今編譯時,但一般不會中止影片導出或回放。

如何解釋錯誤和警告

首先要理解您在 Flash Professional 中看到的可視反饋類型。錯誤在工做區中將以兩種形式之一出現:

  • 「輸出」面板
  • 「編譯器錯誤」面板

「輸出」面板和「編譯器錯誤」面板都出如今 Flash Professional 工做區中。我一般將這兩個面板納入一組,並拖到第二臺顯示器的一側。個人計劃是本身能夠在編譯器錯誤造成時同時看到它們以及本身的跟蹤動做,因此我會將這些面板放在視野內,而不受干擾。

看到這些形式的錯誤反饋時,您確定會停下來讀取相關的錯誤文本。文本可能不太容易理解,但一般老是足覺得您指明方向。您還應當花點時間觀察本身在文件中的位置。缺陷報告和調試的一個重要部分是能準肯定義問題以及形成該問題的步驟。

編譯器錯誤

編譯器錯誤通常比運行時錯誤更容易處理,由於在發佈過程當中,能夠藉助指向問題源頭的行號清晰地看到它們。將 ActionScript 代碼編譯到 SWF 文件時,會發生編譯器錯誤。當您運行「測試影片」或「發佈」命令時會發生這一狀況(請參閱圖 1)。

在 Flash Professional CS5 的「編譯器錯誤」面板中能夠看到一個編譯器錯誤
圖 1.在 Flash Professional CS5 的「編譯器錯誤」面板中能夠看到一個編譯器錯誤

有關完整的錯誤類型列表,請參閱 Adobe Flash Platform 的 ActionScript 3 參考中的編譯器錯誤

運行時錯誤

在調試播放器、獨立播放器或 ActiveX 播放器中運行已發佈的 SWF 文件時,會發生運行時錯誤(請參閱圖 2)。運行時錯誤通常以某種形式告訴您應用程序存在問題。若是您對此不予理睬,Flash Player 會嘗試容許腳本靜默失敗,但可能暫停 SWF 文件回放,從而致使沒法預測的可視結果。

在 Flash Professional CS5 的「輸出」面板中能夠看到一個運行時錯誤
圖 2.在 Flash Professional CS5 的「輸出」面板中能夠看到一個運行時錯誤

有關更多信息,請參閱 Adobe Flash Platform 的 ActionScript 3 參考中的運行時錯誤。有關運行時錯誤概念的進一步細分,另請參閱 ActionScript 3 開發人員指南中的錯誤處理基礎知識

警告

當您發佈 SWF 時,會出現警告,它們以某種形式告訴您違反了 ActionScript 中的某個規則,但嚴重程度還不足以致使錯誤(請參閱圖 3)。我最常看到的是重複變量名以及舊版內容遷移問題的警告。

在 Flash CS4 的「輸出」面板中能夠看到一個警告消息
圖 3.在 Flash CS4 的「輸出」面板中能夠看到一個警告消息

有關更多信息,請參閱 Adobe Flash Platform 的 ActionScript 3 參考中的編譯時警告

性能問題

雖然評估性能以及處理性能問題在技術上與 ActionScript 錯誤及編譯器錯誤無關,但它們是調試流程的一部分。即便設計人員和程序員可能對這個主題持不一樣的觀點,它仍是會影響他們。

常見的性能問題包括:

  • Flash Player 中影片剪輯超載
  • 矢量使用和位圖緩存
  • Flash Player 9 和 10 中的硬件加速
  • 內容加載和垃圾回收

SWF 文件最多見的超載狀況是過量使用影片剪輯或過多的重疊動畫矢量。ActionScript 3 中提升了影片剪輯效率,容許在任何特定時刻使用幾百個影片剪輯,但我發現矢量圖形超載可能致使播放器在回放過程當中播放不暢。要解決這個問題,一般須要根據圖形的重疊方式、屏幕上動畫的大小和數量以及所使用的不透明度找出問題。簡化內容以及使用 Flash Player 的 BitmapData 類或位圖緩存功能增長柵格優化有助於提升性能。

將 Flash Player 硬件加速功能與全屏渲染一塊兒使用時,也會出現性能問題。較新的計算機以及設置爲高清視頻回放的計算機一般能夠處理好硬件加速。可是,顯卡較舊的計算機可能會遇到問題,這些問題與 Flash Player 如何使用計算機視頻硬件進行圖像縮放有關。症狀可能表現爲全屏模式中的圖形扭曲、屏幕凍結或幀頻變化。用戶端的變通方法是關閉「Flash Player 設置」對話框中的硬件加速功能。

有關硬件加速相關問題的更多信息,請參閱 Tinic Uro 的博客文章解釋部分此類問題

最後要提的是內容載入和緩存問題。Flash Player 使用垃圾回收例程,它們在嘗試卸載內容時可能會致使問題。垃圾回收是 Flash Player 中的進程,它將再也不使用的內容從內存中釋放出來。若是內容仍有引用,Flash Player 將它視爲正在使用。這可能影響嵌套 SWF 文件中的聲音、視頻和內容。例如,某些狀況下,您要卸載正在播放聲音或視頻的 SWF 文件,即便屏幕已經不顯示 SWF 文件,聲音卻沒有停下。這類問題的解決方法是在卸載 SWF 文件以前嘗試中止聲音,或使用 Loader 對象中的 unloadAndStop API(Flash Player 10 或更高版本)。unloadAndStop 命令將強制 Flash Player 在卸載 SWF 文件時從內存中刪除媒體。

垃圾回收會影響應用程序的性能。最佳作法是在嘗試刪除對象以前,刪除對它的全部引用。這包括刪除指定到該對象的全部事件監聽器。

Flash Player 缺陷

Flash Player 小組致力於不斷改進 Flash Player 的功能、性能和安全性。Flash Player 缺陷和已知問題會不斷出現。這些狀況的最佳處理方法是爲找出和記錄缺陷制定一個流程,以便您區分這是文件內部問題仍是 Flash Player 的較大問題。發現問題後,我一般在社區中搜索相關文章。若是其餘人遇到相同問題而且手足無措,我會開始查找 Adobe 的官方技術文件或缺陷報告。

若是能夠肯定您遇到的是播放器的已知問題,您的最佳選擇一般是搜索一個變通方法或將問題做爲文檔問題進行處理。大多數狀況下,缺陷能夠獲得解決,由於 Flash Player 會遞增循環經過版本更新。

有關搜索現有缺陷和報告新缺陷的更多信息,請參閱文章 Flash Player 缺陷和問題管理系統介紹

設計人員的調試提示

雖然大多數狀況下我在文本編輯器中編寫 ActionScript 代碼,個人全部 ActionScript 文件都關聯到一個 ActionScript 3 FLA 文件和文檔庫。每一個項目首先要處理圖形生產並組織庫中的資源。所以,根據我要執行的任務,個人職位在 ActionScript 程序員和用戶界面設計員之間切換。

我發現從用戶界面設計員的角度調試 ActionScript 3 FLA 文件時須要注意許多問題。大多數狀況下,您的主要目標是理解 ActionScript 3 環境的指望以及代碼的放置位置。而且,在將文件從 ActionScript 1/2 升級到 ActionScript 3 時,處理遷移問題是一個常見任務。

本部分歸納了使用 ActionScript 3 FLA 文件中的資源時要處理的問題的類型,而且主要處理舊版 ActionScript 的遷移問題。

設計人員遇到的常見問題

設計人員的角色一般更側重於資源管理和 FLA 文件製做,而不是複雜的編碼語法。設計人員還須要處理一些編程要求和概念,所以必須具有必定的代碼相關知識。

從設計角度出發,最多見的問題包括:

  • 代碼位置錯誤
    • 代碼沒法再放入實例中
  • 與按鈕及影片剪輯相關的錯誤
    • 缺乏實例名
    • 實例名拼寫錯誤
    • 實例名與幀腳本變量名衝突
    • 事件處理代碼位置錯誤
  • 文本字段相關錯誤
    • 再也不支持變量字段
    • 再也不支持 URL 字段
  • 組件相關錯誤
    • UILoader 和 FLVPlayback 組件的載入錯誤
    • FLVPlayback 組件的視頻錯誤
  • ActionScript 賦值相關錯誤
    • 導入類的可用性
    • 缺乏變量聲明、名稱衝突和數據類型問題
    • 元件連接已替換爲元件屬性中的「類」字段
  • 性能問題
  • 舊版 ActionScript 的遷移問題

ActionScript 3 中的變化

ActionScript 3 環境實現了全部編碼工做流程的標準化,這樣能夠消除舊版 ActionScript 的許多不一致性。這最終是件好事;但它也使 FLA 文件的設置方式發生了一些變化。

從設計人員的角度出發,最重要的變化包括如下幾項:

  • 代碼沒法再放入影片剪輯或按鈕實例中。ActionScript 3 中的全部代碼位置必須沿時間軸(稱爲幀腳本)出如今關鍵幀或外部 ActionScript 文件中(稱爲 ActionScript 類)。
  • 事件處理結構已更新。它影響按鈕和影片剪輯代碼的處理方式。將事件處理函數指定到按鈕和影片剪輯已發生變化。您沒法再將代碼附加到舞臺中的實例。您將使用 addEventListener 方法將監聽器一致指定到全部對象。(這樣作的優點可能並非立竿見影的,但系統要靈活得多。)
  • 在 Flash CS5 workspace 中以可視方式使用時間軸與以前基本相同,但 ActionScript 3 編程如今將時間軸視爲顯示列表。若是要處理使用 ActionScript 的實例,您須要注意顯示列表的時間和用法。
  • ActionScript 3 中再也不有元件連接。元件屬性如今能夠經過惟一類名(或類引用)標識。您能夠在元件的「元件屬性」對話框中,將 ActionScript 類指定到元件。還能夠將 ActionScript 類指定到與主時間軸的「舞臺」屬性關聯的「文檔類」字段。

調試工具

Flash Professional CS5 提供一些工具,可以使用它們管理文件資源和搜索問題區域:

  • Flash Professional 工做區、「動做」面板和跟蹤動做
  • 「影片瀏覽器」面板
  • 調試控制檯、「變量」面板和「調試」菜單
  • 「測試影片」命令和帶寬設置

使用 Flash Professional 工做區瀏覽文件。您可使用「影片瀏覽器」面板搜索資源(請參閱圖 4)。可以使用調試面板跟蹤 ActionScript 變量和函數的問題。

「影片瀏覽器」面板容許您快速搜索資源和代碼位置;將舊版 FLA 文件遷移到 ActionScript 3 格式時,它尤其實用
圖 4.「影片瀏覽器」面板容許您快速搜索資源和代碼位置;將舊版 FLA 文件遷移到 ActionScript 3 格式時,它尤其實用

預覽工做成果以及檢查錯誤和警告最快的方式是使用「控制」>「測試影片」命令。當 SWF 文件顯示在調試面板中時,選擇「視圖」>「帶寬設置」選項便可查看 SWF 文件的配置文件信息概況(請參閱圖 5)。

使用「測試影片」時,「視圖」菜單提供帶寬設置
圖 5.使用「測試影片」時,「視圖」菜單提供帶寬設置

提示:SWF 文件的「視圖」菜單中還提供「模擬下載」和「模擬流」選項,但它們不精確。最好使用服務器上實時運行的文件執行基準測試。

調試工做流程

使用文件處理缺陷和問題是設計人員的平常工做的一部分。處理問題時,最好有一個層次分明的方法並在計劃中規劃好時間。

從設計角度出發,一個常見的工做流程可能包括:

  1. 找出問題(問題是什麼?)。
  2. 找到問題源頭(問題在哪裏?)。
  3. 查找相關文檔,定義解決方案選項。
  4. 根據須要,在一個單獨文件中重構問題區域。
  5. 應用解決方案並測試工做成果(使用「測試影片」和帶寬設置)。

提示:我發如今一個新文件中解決問題比在一個完整的項目中處理細節速度更快。定義問題後,獲取一個用於單獨文件的範例,而後將有效解決方案集成到您的項目中。

設計人員的調試範例

如下範例在您將文件從 ActionScript 1 或 2 遷移到 ActionScript 3 格式時,指導您逐步完成常規工做流程。提供的文件在 solutions 文件夾中包含各個範例的 ActionScript 2 版本和 ActionScript 3 版本。

這些步驟將指導您逐步將各個 ActionScript 2 FLA 文件遷移到 ActionScript 3 格式。您將看到錯誤、查找錯誤的源頭並解決問題。

首先按照這些步驟操做:

  1. 從介紹頁面下載 as3_debugging_issues_cs5.zip 文件(若是您還未這樣作)。
  2. 將文件解壓縮到桌面上的某個位置。在接下來的步驟中將要求您打開提供的特定文件。
  3. 若是須要參考,能夠打開 solutions 文件夾中的成品文件。

範例 1:遷移變量

ActionScript 3 環境要求您使用 var 關鍵字聲明全部變量實例,甚至在時間軸上。這是一個簡單的想法,但在舊版 ActionScript 中它不在要求範圍內。

除了添加 var 關鍵字,這個範例還說明如何處理數據類型以及引用 root  stage 對象的新方法。

按照這些步驟操做,更新一個包含過時幀代碼的 ActionScript 2 文件:

  1. 在 Flash Professional CS5 中打開文件 designer_sample1.fla。
  2. 運行「測試影片」便可查看有效的 ActionScript 2 文件。您會發現,主時間軸上的代碼只是扭曲圖像並將它放在舞臺中央。
  3. 關閉 SWF 文件。
  4. 選擇「文件」>「發佈設置」,將該文件轉換爲 ActionScript 3 格式。在「發佈設置」對話框中,單擊「Flash」選項卡並將「腳本」菜單切換爲「ActionScript 3」。單擊「肯定」。
  5. 再次運行「測試影片」。您會發現「編譯器錯誤」面板中顯示一個編譯器錯誤和幾個警告,而且 SWF 文件未能載入:

Symbol 'Circle', Layer 'actions', Frame 1, Line 2 1120: Access of undefined property _root.

  1. 首先要修復對 _root 的引用,它生成了第一個錯誤。您能夠經過「位置」字段看到源頭位於第 2 行 Circle 元件的時間軸中。雙擊舞臺中的 Circle 實例進入它的時間軸,選擇時間軸第一幀的動做關鍵幀。雖然您能夠嘗試使用對根或父級的參考,這種方法在 ActionScript 3 中的效果並不理想。從主時間軸代碼中設置該實例的 alpha 屬性效果更好(在該代碼中設置它的大小和位置)。註釋掉或刪除第 2 行中的代碼,而後返回主時間軸。
  2. 在剩餘錯誤和警告行中往下。在主時間軸上選擇動做關鍵幀。ActionScript 3 中的影片剪輯屬性再也不如下劃線 (_) 開頭。刪除 x、y、寬度和高度屬性前的下劃線。
  3. 再次運行「測試影片」。您會發現「編譯器錯誤」面板中出現一系列新的錯誤。此次又多了兩個有待解決的問題。首先,須要使用 var 關鍵字聲明時間軸上的每一個變量。其次,對舞臺高度和寬度的引用對於 ActionScript 3 而言格式再也不正確:

Scene 1, Layer 'actions', Frame 1, Line 2 1120: Access of undefined property ovalWidth. Scene 1, Layer 'actions', Frame 1, Line 3 1120: Access of undefined property ovalHeight. Scene 1, Layer 'actions', Frame 1, Line 4 1120: Access of undefined property ovalAlpha. Scene 1, Layer 'actions', Frame 1, Line 7 1120: Access of undefined property ovalWidth. Scene 1, Layer 'actions', Frame 1, Line 8 1120: Access of undefined property ovalHeight. Scene 1, Layer 'actions', Frame 1, Line 9 1119: Access of possibly undefined property width through a reference with static type Class. Scene 1, Layer 'actions', Frame 1, Line 9 1120: Access of undefined property ovalWidth. Scene 1, Layer 'actions', Frame 1, Line 10 1119: Access of possibly undefined property height through a reference with static type Class. Scene 1, Layer 'actions', Frame 1, Line 10 1120: Access of undefined property ovalHeight. Scene 1, Layer 'actions', Frame 1, Line 11 1120: Access of undefined property ovalAlpha.

  1. 更新代碼,使它與如下內容匹配:

// Settings var ovalWidth:Number = 400; var ovalHeight:Number = 100; var ovalAlpha:Number = .5; // Notice that alpha ranges from 0 to 1 // Set size circle_mc.width = ovalWidth; circle_mc.height = ovalHeight; circle_mc.x = (stage.stageWidth - ovalWidth) / 2; circle_mc.y = (stage.stageHeight - ovalHeight) / 2; circle_mc.alpha = ovalAlpha;

  1. 更新主時間軸的第 1 幀上的代碼,使它與如下腳本匹配。請注意,attachMovie 命令已替換爲新的關鍵字。如今以新方法建立包括元件實例在內的全部實例:

// Create first clip var circle1_mc:MovieClip = new CircleAS3(); circle1_mc.x = 100; circle1_mc.y = 50; addChild(circle1_mc); // Create second clip var circle2_mc:MovieClip = new CircleAS3(); circle2_mc.x = 300; circle2_mc.y = 50; addChild(circle2_mc);

  1. 再次運行「測試影片」。此次未出現任何錯誤。您能夠根據 ActionScript 3 語法成功更新該文件。

範例 2:遷移按鈕和影片剪輯代碼位置

在 ActionScript 3 以前,將按鈕事件處理代碼和影片剪輯事件處理代碼直接放到要影響的實例上很常見。這種方法有一個問題,即代碼較難找到而且會分散到多個對象。

ActionScript 3 經過如下方法解決了這個問題:若是將代碼放到對象實例上,則將它視爲非法。這個概念很簡單,可是若是您準備更新一箇舊版文件或剛開始接觸 ActionScript 3 環境,它會變成一個難題。

按照這些步驟操做,更新一個包含附加到實例的代碼的 ActionScript 2 文件:

  1. 在 Flash Professional CS5 中打開文件 designer_sample2.fla。
  2. 運行「測試影片」便可查看有效的 ActionScript 2 文件。注意,單擊這兩個按鈕就能夠開始和中止圓圈動畫。
  3. 關閉 SWF 文件。
  4. 選擇「文件」>「發佈設置」,將該文件轉換爲 ActionScript 3 格式。在「發佈設置」對話框中,單擊「Flash」選項卡並將「腳本」菜單切換爲「ActionScript 3」。單擊「肯定」。
  5. 再次運行「測試影片」。請注意「輸出」面板中出現的警告:

Warning: Actions on button or MovieClip instances are not supported in ActionScript 3. All scripts on object instances will be ignored.

  1. 警告很明顯,您忽略了放到實例上的代碼。首先要找到代碼的位置。這個範例很簡單,您只需單擊舞臺上的對象並查看「動做」面板。在更復雜一些的文件中,您能夠打開「影片瀏覽器」面板,在整個時間軸或庫內的項中搜索代碼位置。不管使用哪一種方法,找到放到影片剪輯實例上的代碼和各個按鈕實例,而後在「動做」面板中刪除 ActionScript。
  2. 在主時間軸中添加一個新層,將它命名爲 actions
  3. 在 actions 層中選擇關鍵幀,而後打開「動做」面板。單擊面板底部的圖釘圖標釘住腳本。
  4. 單擊開始按鈕,並將代碼剪切到剪貼板。將代碼粘貼到「動做」面板中。爲中止按鈕和影片剪輯代碼重複這個過程。
  5. 此時,您須要使用 ActionScript 3 語法重寫代碼。在動手以前,請確保舞臺上的每一個實例都有一個實例名;start_btnstop_btn  circle_mc
  6. 在「動做」面板中更新腳本,使它看上去像如下代碼同樣:

var animate:Boolean = false; var speed:Number = 10; // Enterframe... function enterFrameHandler(event:Event) { if( animate ){ circle_mc.x += speed; if( circle_mc.x >= stage.stageWidth ){ circle_mc.x = -circle_mc.width; } } } addEventListener(Event.ENTER_FRAME, enterFrameHandler); // Button events function clickHandler(event:MouseEvent) { if( event.target == start_btn ){ animate = true; }else if( event.target == stop_btn ){ animate = false; } } start_btn.addEventListener(MouseEvent.CLICK, clickHandler); stop_btn.addEventListener(MouseEvent.CLICK, clickHandler);

  1. 運行「測試影片」。使用針對 ActionScript 3 更新的代碼語法和代碼位置後,按鈕和動畫應當可使用。
範例 3:遷移文本字段變量和連接設置

從 Macromedia Flash 5 開始已經不推薦對文本字段對象使用變量和連接字段,但我依然發如今更新舊版內容文件時,使用這個功能會遇到遷移問題。

按照這些步驟操做,更新一個包含不推薦文本字段的 ActionScript 2 文件:

  1. 在 Flash Professional CS5 中打開文件 designer_sample3.fla。
  2. 運行「測試影片」便可查看有效的 ActionScript 2 文件。您會發現,每當單擊按鈕時,文本字段中的文本都會更新。若是要在瀏覽器中查看 SWF 文件,您能夠單擊字段激活嵌入的連接。
  3. 關閉 SWF 文件,並看一下 FLA 文件。
  4. 選擇「文件」>「發佈設置」,將該文件轉換爲 ActionScript 3 格式。在「發佈設置」對話框中,單擊「Flash」選項卡並將「腳本」菜單切換爲「ActionScript 3」。單擊「肯定」。
  5. 再次運行「測試影片」。請注意「輸出」面板中出現的警告:

Warning: Text field variable names are not supported in ActionScript 3. The variable buttonState used for an unnamed text field will not be exported. Warning: Actions on button or MovieClip instances are not supported in ActionScript 3. All scripts on object instances will be ignored.

  1. 經過警告能夠發現這裏出現兩個問題。第一個問題是,文本字段實例使用了一個不受支持的功能。第二個問題是,事件代碼直接放到了按鈕上。
  2. 選擇文本字段,而後在屬性檢查器中修改它的屬性,便可從新設置文本字段的格式。將字段的「文本」類型從「動態」更改成「靜態」,而後再改回「動態」。這個步驟能夠清除與該字段關聯的變量和連接數據。爲字段指定<Instance Name> 字段中的實例名 status_txt
  3. 單擊「字符樣式」字段旁的「嵌入」按鈕,選中「基本拉丁語」選項以嵌入 Arial 字樣。這個步驟能夠避免一個字體嵌入的相關警告。
  4. 選擇「開始」按鈕,使用「動做」面板從中刪除代碼。在屬性檢查器中將按鈕實例命名爲 start_btn
  5. 選擇「中止」按鈕,從中刪除代碼。將實例命名爲 stop_btn
  6. 在主時間軸中添加一個新層,將它命名爲 actions
  7. 在 actions 層中選擇關鍵幀,而後在「動做」面板中輸入如下代碼:

// Button clicks set text field function clickHandler(event:MouseEvent):void { if( event.target == start_btn ){ status_txt.text = "Start"; }else if( event.target == stop_btn ){ status_txt.text = "Stop"; } } start_btn.addEventListener(MouseEvent.CLICK, clickHandler); stop_btn.addEventListener(MouseEvent.CLICK, clickHandler); // Text clicks launch link in browser function textClickHandler(event:MouseEvent):void { navigateToURL(new URLRequest("http://www.adobe.com"),"_blank"); } status_txt.addEventListener(MouseEvent.CLICK, textClickHandler);

  1. 運行「測試影片」。您應當看到文件能夠正常運行而且不出錯,按鈕能夠在單擊時更新文本字段。單擊文本字段啓動 Adobe 站點。

範例 4:遷移連接設置和元件實例化

ActionScript 3 FLA 文件中的元件沒法再使用連接標識符字段。而是藉助元件屬性中的「類」和「基類」字段採用一個類似的流程。

按照這些步驟操做,更新一個包含過時連接標識符的 ActionScript 2 文件:

  1. 在 Flash Professional CS5 中打開文件 designer_sample4.fla。
  2. 運行「測試影片」便可查看有效的 ActionScript 2 文件。注意,您能夠單擊某個圓圈並在舞臺中拖動它。在本例中,經過一個外部 ActionScript 類 (Circle.as) 定義拖動功能,並經過元件的連接標識符屬性將它指定到庫中的 Circle 元件。
  3. 關閉 SWF 文件,並看一下 FLA 文件。
  4. 選擇「文件」>「發佈設置」,將該文件轉換爲 ActionScript 3 格式。在「發佈設置」對話框中,單擊「Flash」選項卡並將「腳本」菜單切換爲「ActionScript 3」。單擊「肯定」。
  5. 再次運行「測試影片」。請注意「輸出」面板中出現一個錯誤:

5007: An ActionScript file must have at least one externally visible definition.

  1. 這裏要解決的第一個問題是 Circle.as 類是使用 ActionScript 2 語法編寫的,所以當 ActionScript 3 編譯器運行時,它會致使錯誤。在 Flash Professional 中打開 Circle.as 並檢查該文件。
  2. 新建一個 ActionScript 文件,並將如下代碼粘貼到其中:

package { import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; public class CircleAS3 extends MovieClip { //****************** // Constructor: public function CircleAS3() { trace("INIT: "+this.name); addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler); } //****************** // Events: private function addedToStageHandler(event:Event):void { addEventListener(MouseEvent.MOUSE_DOWN, onPressHandler); stage.addEventListener(MouseEvent.MOUSE_UP, onReleaseHandler); } private function onPressHandler(event:MouseEvent):void { this.startDrag(false); } private function onReleaseHandler(event:MouseEvent):void { this.stopDrag(); } } }

  1. 比較代碼。請注意類構造和事件處理函數賦值的差別。
  2. 將該文件另存爲 CircleAS3.as,做爲 FLA 文件保存在同一文件夾中。
  3. 右鍵單擊「庫」中的 Circle 元件,選擇「屬性」選項啓動「元件屬性」對話框。若是未顯示「高級」選項,單擊「高級」按鈕可顯示它們。請注意,ActionScript 2.0 連接標識符字段此時爲禁用狀態。將「ActionScript 3.0 類」字段更改成 CircleAS3。它針對您剛纔建立的 ActionScript 3 類。
  4. 再次運行「測試影片」。此次請注意,您能夠看到一系列與主時間軸的第 1 幀上的代碼相關的錯誤。動態建立的實例還未聲明它們的名稱,而且 ActionScript 3 中再也不提供 attachMovie  getNextHighestDepth 方法。須要重寫這個腳本:

Scene 1, Layer 'actions', Frame 1, Line 4 1120: Access of undefined property circle1_mc. Scene 1, Layer 'actions', Frame 1, Line 5 1120: Access of undefined property circle1_mc. Scene 1, Layer 'actions', Frame 1, Line 10 1120: Access of undefined property circle2_mc. Scene 1, Layer 'actions', Frame 1, Line 11 1120: Access of undefined property circle2_mc.

  1. 更新主時間軸的第 1 幀上的代碼,使它與如下腳本匹配。請注意,attachMovie 命令已替換爲新的關鍵字。如今以新方法建立包括元件實例在內的全部實例:

// Create first clip var circle1_mc:MovieClip = new CircleAS3(); circle1_mc.x = 100; circle1_mc.y = 50; addChild(circle1_mc); // Create second clip var circle2_mc:MovieClip = new CircleAS3(); circle2_mc.x = 300; circle2_mc.y = 50; addChild(circle2_mc);

  1. 再次運行「測試影片」。此次,影片導出沒有任何錯誤。

提示:ActionScript 3 語言實現了任務標準化。您將使用新的關鍵字爲使用 ActionScript 的全部對象建立新實例。再也不使用 attachMovie 和 createEmptyMovieClip 命令動態建立影片剪輯實例。

開發人員的調試提示

理解 ActionScript 3 FLA 文件環境是調試項目所必需的,可是理解它以後,它就變爲一個至關簡單的主題。若是要使用過多的代碼,您將把大部分時間用於調試 ActionScript 相關問題。

本部分歸納了在 Flash Professional 中使用 ActionScript 3 編程語言時您將處理的問題類型。

ActionScript 開發人員遇到的常見問題

ActionScript 3 開發人員在開發過程當中一般會遇到錯誤和警告。通常而言,這沒有什麼能夠擔憂的,您能夠靜靜欣賞應用程序在開發過程當中找出問題。

您一般須要處理與如下各項相關的錯誤和警告:

  • 編譯時錯誤和運行時錯誤
  • 幀腳本錯誤和 ActionScript 類錯誤
  • 空的和未定義的數據錯誤
  • 類型錯誤
  • CPU 相關問題/垃圾回收問題

注意:有關 Flash Player 中的 CPU 問題和垃圾回收的更多信息,請參閱 Grant Skinner 的文章理解 Flash Player 9 中的垃圾回收

避免錯誤以及在出錯時處理它們的最佳作法

您可使用幾種技術準備用於處理錯誤的 ActionScript 代碼。經過實施適當的錯誤處理,您能夠改善應用程序的性能和相關的用戶體驗:

  1. 按期測試工做成果。
  2. 儘量多監聽錯誤事件。
  3. 使用 try catch 語句處理 ActionScript 例外。

在編寫 ActionScript 代碼時常常運行「測試影片」命令,儘管這聽上去很乏味。逐行測試更容易找出問題。當您熟悉 ActionScript 3 語言的前因後果後,就沒必要如此頻繁地進行測試了。

ActionScript 中的對象經過錯誤事件或 ActionScript 例外提供錯誤通知。儘量多監聽錯誤及狀態變化的相關事件。您不只能夠防止應用程序流中的意外奔潰,還能夠訪問計時鉤(可以使用它們在出現問題時提供適當的用戶體驗)。

當錯誤事件不可用時,可以使用 try catch 語句處理 ActionScript 錯誤。您可能會問,「try catch 語句的使用密度應該爲多少?」某些開發人員使用較多,而其餘開發人員根本不使用這個功能。我一般會在問題區域附近放置 try catch 語句。

調試工具

ActionScript 程序員傾向於創造新的應用程序測試和調試方法。在 Flash Professional CS5 工做區中,您可使用如下工具:

  • Flash Professional CS5 工做區
  • Flash Builder 4 工做區

有關 Flash Professional 中的 ActionScript 調試器面板和調試工做流程的完整概述,請參閱 Peter Elst 的文章ActionScript 3 調試器介紹

除了 Flash Professional 工做區,ActionScript 開發人員還將 Flash Builder 調試工具套件用於他們的 ActionScript 項目。Flash Builder 4 工具容許您以 Flex SDK 項目、ActionScript 項目或 Flash Professional 項目形式構建和調試 Flash 內容。Flash Professional CS5 與 Flash Builder 4 之間新的開發和調試工做流程有助於將代碼更快地集成到 Flash 影片中並提供更多調試選項。您將在本文的最後部分仔細查看 Flash Builder 工做流程。

有關 Flash Builder 項目的概述,請參閱 Flash Builder 4 在線文檔中的關於 Flash Builder 項目

調試工做流程

ActionScript 問題的調試工做流程相似於設計工做流程,惟一不一樣之處是與 FLA 相關問題相比,您更注重於查找代碼問題。

要在 Flash Professional 中創做時調試 ActionScript 代碼:

  1. 發佈 FLA 文件。
  2. 觀察「輸出」和「編譯器錯誤」面板中的錯誤。
  3. 在代碼的可疑問題區域將斷點添加到幀腳本或 ActionScript 類。
  4. 運行 ActionScript 3 調試器找出問題。
  5. 修復代碼並測試輸出。

要在 Flash Builder 中工做時調試 ActionScript 代碼:

  1. 在 Flash Builder 中建立一個 Flash Professional 項目,將 Flash Builder 與您的 FLA 文件及項目文件夾關聯在一塊兒。
  2. 在 Flash Builder 中編寫並編輯代碼。
  3. 在編碼時,使用 Flash Builder 中的「問題」面板找出問題。
  4. 啓動 Flash 調試器調試 Flash Professional 中的運行時錯誤,或安裝調試播放器並使用 Flash Builder 中的 Flash Debug 透視得到更多運行時調試工具。

要調試一個已部署到服務器的 SWF 文件:

  1. 在 Flash Professional 中編輯 ActionScript 3 發佈設置屬性。
  2. 啓用遠程調試。
  3. 將 SWF 文件發佈到服務器。
  4. 在瀏覽器中右鍵單擊 SWF 文件,啓動遠程調試器。
  5. 觀察並找出問題。

提示:根據錯誤狀況,您可能須要使用 ActionScript 3 調試器。當空值或堆棧溢出導出回放奔潰時,調試器最實用。

開發人員的調試範例

如下範例說明了 ActionScript 3 常見問題。每一個範例帶有兩個文件,一個代表問題,另外一個代表解決方法。如下步驟將指導您逐步解決各個問題。您將體驗錯誤、找到錯誤來源並解決 ActionScript 的使用問題。

首先按照這些步驟操做:

  • 從介紹頁面下載 as3_debugging_issues_cs5.zip 文件(若是您還未這樣作)。
  • 將文件解壓縮到桌面上的某個位置。在接下來的步驟中將要求您打開提供的特定文件。
  • 有關更多參考,請查看 solutions 文件夾中的成品文件。

範例 1:未定義的值和空值

您極可能常常遇到這個問題。若是嘗試訪問不存在的某個屬性或函數,您將觸發錯誤。這個問題通常很容易修復,但「輸出」面板一般不會告訴您哪一個屬性未定義。這種狀況下,最快的解決方法是使用 ActionScript 3 調試器找到問題的源頭。

按照這些步驟操做,找到並解決值未定義的問題:

  1. 在 Flash Professional CS5 中打開文件 developer_sample1.fla。
  2. 運行「測試影片」便可查看範例。將顯示一個錯誤,代表值爲空或未定義。而且某個做者名顯示爲未定義:

TypeError: Error #1010: A term is undefined and has no properties. at developer_sample1_fla::MainTimeline/frame1()[developer_sample1_fla.MainTimeline::frame1:12]

  1. 關閉 SWF 文件。
  2. 查看 actions 層上的代碼。很容易發現這個範例中有幾個問題,可是若是列表較大、較複雜,要立刻找到它們可能並不容易。可以使用調試器搜索問題。單擊第 12 行左側的列,爲腳本添加一個斷點(請參閱圖 6)。該步驟使調試器能停在代碼執行的這一位置,以便您檢查變量。

您能夠將斷點添加到腳本行號的左側
圖 6.您能夠將斷點添加到腳本行號的左側

  1. 打開「變量」面板和調試控制檯(若是它們還沒有打開)。
  2. 選擇「調試」>「調試影片」>「調試」(在 Flash Professional 中),啓動調試器會話。請注意,「變量」面板在斷點位置填入主時間軸上的有效變量(請參閱圖 7)。擴展書籍列表並瀏覽值。您能夠看到,列表只包含三項,而循環卻設置爲運行四次。這是錯誤的源頭(而且,在調試器視圖中,有一個箭頭指向包含循環定義的代碼行)。而且,第三項不包含做者值。單擊「調試控制檯」面板中的「結束調試會話」按鈕以結束會話。

「變量」面板是檢查影片中的變量狀態的好方法;當搜索空值或未定義的值時,它尤其實用
圖 7.「變量」面板是檢查影片中的變量狀態的好方法;當搜索空值或未定義的值時,它尤其實用

  1. 更新腳本,使它與如下內容匹配:

// Declare array variable var books:Array = new Array(); books.push({title:"ActionScript 3 Cookbook",author:"Joey Lott"}); books.push({title:"Essential ActionScript 3",author:"Colin Moock"}); books.push({title:"Adobe AIR 1.5 Cookbook",author:"David Tucker"}); // Loop through array and display text... var len:uint = 3; // it's better to use books.length here... for(var n:uint=0; n<len; n++) { books_txt.appendText(books[n].title+", by "+books[n].author+"\n"); }

  1. 再次運行「測試影片」。此次,腳本運行時未出現任何錯誤。

提示:前一個範例設計爲生成一個錯誤。您一般不會爲 len 變量硬編碼一個值。您將使用數組的長度屬性,使循環執行時不生成錯誤。

範例 2:顯示列表參考和計時錯誤

使用 ActionScript 實例化的對象不會自動放到舞臺(顯示列表)。這個概念其實很實用,由於您如今能夠在預處理例程變爲可見以前運行它們;不過雖然很棒,您仍是須要慢慢適應它。

您將使用 addChild 方法,將實例添加到時間軸的顯示列表。一旦這樣作,實例就能夠訪問舞臺、根和父級屬性。按照這些步驟操做,修復一個有顯示列表實例化問題的文件:

  1. 在 Flash Professional CS5 中打開文件 developer_sample2.fla。
  2. 運行「測試影片」便可查看範例。請注意「輸出」面板中出現一個顯示列表相關錯誤。該錯誤未定義問題源頭的確切位置,但它會提示您問題出在 getChildIndex 方法。接下來天然應當返回代碼並搜索 ActionScript 語句:

ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller. at flash.display::DisplayObjectContainer/getChildIndex() at developer_sample2_fla::MainTimeline/frame1()

  1. 關閉 SWF 文件,並仔細研究一下主時間軸的第 1 幀上的腳本。您會發現,腳本新建了一個 Sprite 實例,而後嘗試在顯示列表中檢索它的索引(以前稱爲深度)。問題在於,還沒有將實例添加到舞臺,因此顯示列表中尚未它。
  2. 更新代碼,使它與如下內容匹配:

// Create a black rectangle var myClip:Sprite = new Sprite(); myClip.graphics.beginFill(0); myClip.graphics.drawRect(0,0,100,100); myClip.graphics.endFill(); // Add the instance to the Stage addChild(myClip); // Get the instance's depth in the display list... var myClipDepth:uint = getChildIndex(myClip);

  1. 再次運行「測試影片」。此次您應當能夠看到影片導出時沒有錯誤,在舞臺上顯示一個黑色矩形。

提示:爲了防止 ActionScript 類中出現顯示列表計時問題,可以使用 ADDED_TO_STAGE 事件延遲顯示列表處理,直至將對象添加到舞臺。

範例 3:類型錯誤

ActionScript 3 是一種嚴格的類型語言。要改善編譯器的性能以及影片的運行時回放,最佳作法是在聲明變量和函數時爲它們設置數據類型。爲聲明添加數據類型將定義變量或函數將處理數據的類型。

提示:Flash Professional CS5 新增了一個功能,即在「動做」面板中爲對象設置數據類型時,自動生成導入語句。

按照這些步驟操做,使用不正確的數據類型條目更新文件:

  1. 在 Flash Professional CS5 中打開文件 developer_sample3.fla。
  2. 運行「測試影片」便可查看範例。您會發現生成了 3 個編譯器錯誤(請參閱圖 8)。編譯器錯誤的優勢在於,它們會確切地告訴您代碼中的問題源頭在哪裏。

「編譯器錯誤」面板代表生成錯誤的代碼的位置和行號
圖 8.「編譯器錯誤」面板代表生成錯誤的代碼的位置和行號

  1. 關閉 SWF 文件。
  2. 在「編譯器錯誤」面板中右鍵單擊第一個錯誤的描述,而後選擇「轉到源」。將打開「動做」面板,而且突出顯示addToScore 函數的右括號。您將從這裏讀取錯誤,並逐行往下修復代碼。
  3. 更新代碼,使它與如下腳本匹配。您會發現,score  increment 值更改成 Number 數據類型(Number而不是 uint,由於數字包含小數),而且函數的返回值更改成 void 數據類型(表示它不返回任何內容)。而且,事件對象更新爲 MouseEvent 數據類型。這沒有致使錯誤,由於 MouseEvent 是一個 Event,但它顯然能夠添色很多。

// Create Number variable var score:Number = 0; var increment:Number = .2; function addToScore(event:MouseEvent):void { score += increment; score_txt.text = "Score = "+score; } add_btn.addEventListener(MouseEvent.CLICK, addToScore);

  1. 再次運行「測試影片」。此次,影片導出時沒有任何錯誤。

範例 4:IO 錯誤

當您嘗試載入一個外部文件,但過程失敗時會發生 IO 錯誤。在 ActionScript 3 中,您將使用錯誤事件或 try catch 語句優雅地處理這些錯誤,併爲用戶體驗提供有意義的反饋。

按照這些步驟操做,處理載入 SWF 文件時產生的問題:

  1. 在 Flash Professional CS5 中打開文件 developer_sample4.fla。
  2. 運行「測試影片」便可查看範例。您會發現當腳本沒法載入圖像時出錯。由於這是一個異步錯誤,因此最佳作法是使用 Loader 的 contentLoaderInfo IOError 事件和 HTTPStatus 事件。這能夠解決當前生成的未處理的 IOErrorEvent:

Error opening URL 'http://www.dancarrdesign.com/images/test.jpg' Error #2044: Unhandled IOErrorEvent:. text=Error #2036: Load Never Completed.

  1. 關閉 SWF 文件。
  2. 更新第 1 幀上的代碼,使它與如下腳本匹配。請注意,更新包含完成載入或失敗嘗試的事件處理函數:

import flash.events.*; function completeHandler(event:Event):void { // Add image to the Stage when loaded... addChild(event.target.content); } function statusHandler(event:HTTPStatusEvent):void { // Respond to status notifications... trace("HTTP Status: "+event.status); } function errorHandler(event:IOErrorEvent):void { // The image failed to load. Show feedback and proceed... trace("IOERROR: "+event.text); } // Create a Loader to load an image... var loader:Loader = new Loader(); loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler); loader.contentLoaderInfo.addEventListener(HTTPStatusEvent.HTTP_STATUS, statusHandler); loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorHandler); loader.load(new URLRequest("http://www.dancarrdesign.com/images/test.jpg"));

  1. 再次運行「測試影片」。您將看到腳本再次失敗,但此次會觸發一個跟蹤動做,代表您能夠控制事件。您將根據這一狀況編寫反饋,向用戶明確代表發生的狀況。

範例 5:安全錯誤

Flash Player 採用一個安全模型,它保護各個 SWF 文件和您的計算機免遭惡意攻擊。若是全部文件運行在同一個域中,您通常不會遇到任何安全錯誤。可是,您可能但願將運行於不一樣域的不一樣服務器上的內容和數據聚合在一塊兒。這種狀況下,您極可能遇到安全錯誤。

按照這些步驟操做,解決數據載入安全問題:

  1. 在 Flash Professional CS5 中打開文件 developer_sample5.fla。
  2. 運行「測試影片」便可查看範例。影片嘗試從個人服務器上的一個文件載入 XML 數據。由於個人域 dancarrdesign.com 位於您查看 SWF 文件所在的域以外,因此可能會出現安全問題。爲了令狀況更難以理解,除非在 Internet 上運行測試文件,不然您極可能不會遇到安全錯誤。這意味着當您在本地開發環境中測試文件時,文件使用的一組安全規則不一樣於從 Internet 運行時使用的規則。這種狀況下的最佳選項是從爲數據提供服務的域載入一個權限文件。
  3. 看一下提供的範例。在本例中,我載入一個名爲 crossdomain.xml 的權限文件,它包含一個容許與全部域進行數據交換的全局標記。
  4. 關閉文件。

從不一樣的域載入數據或在載入其餘 SWF 文件的一個 SWF 文件之間交叉編寫腳本時,安全限制最爲苛刻。從不一樣的域載入數據時,使用權限文件是最佳選項(提供的文件包含一個 crossdomain.xml 文件範例)。在 SWF 文件之間交叉編制腳本時,您能夠在 ActionScript 中使用 Security 對象的 allowDomain 方法。

提示:我發現遇到安全問題時,個人應用程序會靜默失敗而且彷佛沒法解釋。我一般假設這是一個安全相關問題並嘗試容許權限,或者記錄從 ActionScript 到 JavaScript 的調用,以在運行時暴露安全錯誤事件或相似的信息。您可使用 ActionScript 中的 ExternalInterface 對象,或經過獲取第三方資源設置這類記錄例程。

使用 Flash Professional 和 Flash Builder 分析代碼

Flash Professional CS5 爲使用 ActionScript 3 調試器提供兩個選項:能夠從 Flash Professional 直接運行調試器,也能夠經過從 Flash Builder 4 啓動它來運行調試器。此外,Flash Builder 有一套本身的調試工具,它們能夠與調試版 Flash Player 結合使用,爲您提供更多調試選項。

Flash Professional CS5 與 Flash Builder 4 之間的全新集成旨在幫助您輕鬆發揮 Eclipse 文本編輯器的強大功能並完成 Flash Professional 中的常見任務。爲了充分利用 Flash Builder,您將在 ActionScript 類中編寫代碼,它能夠連接到 FLA 文件的主時間軸或 FLA 文件庫中的任何影片剪輯元件。

本部分將向您展現調試器工做流程的不一樣選項。

在 Flash Professional 中查看動態應用程序中的變量狀態

該範例說明如何使用 Flash Professional 瀏覽一個腳本,每當您單擊舞臺時,該腳本會隨機生成一系列形狀。效果至關不錯,可是若是要分析生成的隨機值以便對參數進行微調呢?您能夠在循環中設置一個斷點,它能夠生成形狀,以便您在調試器中執行時觀察隨機值的實時狀況。

按照這些步驟操做,瞭解 ActionScript 循環內生成的變量值:

  1. 在 Flash Professional CS5 中打開文件 developer_sample6.fla 和 ShapeRamdomizer.as。
  2. 運行「測試影片」便可查看範例。您會發現屏幕上畫了一個隨機橢圓圖案。單擊舞臺上的任何位置,能夠看到該圖案隨機重畫本身。
  3. 關閉 SWF 文件,並看一下文件 ShapeRandomizer.as。您會發現 draw 函數經過遍歷一個循環生成形狀。而且隨機生成幾個變量,用於定義形狀的 xywidthheightcolor 和邊框粗細。
  4. 在第 42 行左側的列中單擊,爲該行添加一個斷點。這樣,每當您經過循環時,能夠暫停調試播放器;並在同時取出變量狀態。
  5. 返回文件 developer_sample6.fla。從「窗口」菜單打開「調試控制檯」和「變量」面板(若是它們還沒有打開)。
  6. 選擇「調試」>「調試影片」>「調試」,啓動調試會話。請注意,「變量」面板會更新顯示第一次經過循環的隨機值(請參閱圖 9)。

「變量」和「調試控制檯」面板過去在發生循環時逐步經過並分析變量狀態
圖 9.「變量」和「調試控制檯」面板過去在發生循環時逐步經過並分析變量狀態

  1. 單擊「調試控制檯」面板左上角的「繼續」按鈕進到下一個經過循環。重複該過程,並觀察數字範圍。您將根據它們決定變量設置是否生成您要的結果。
  2. 單擊「結束調試會話」按鈕關閉會話。
  3. 單擊第 42 行中的斷點以刪除它。「動做」面板中的點此時應消失。

提示:您能夠經過如下方法嘗試變量值:在「變量」面板中更新變量值,而後進到代碼執行。

有關使用 Flash Professional 調試器的更多信息,請參閱 Flash 在線文檔的調試 ActionScript 3 部分。

從 Flash Builder 啓動 ActionScript 3 調試器

Flash Builder 4 和 Flash Professional CS5 爲新的編碼工做流程創造了可能性,這些工做流程將 Flash Builder 用做文本編輯器,將 Flash Professional 用做內容編輯器。Flash Builder 用於快速編寫 ActionScript 類,並根據須要調試代碼。Flash Professional 用於管理內容和實施代碼(經過將代碼指定到 FLA 文件中的時間軸)。

這個範例說明如何使用上一個示例中使用的文件在 Flash Builder 中生成一個 Flash Professional 項目。此次,您將在 Flash Builder 中更新代碼,從 Flash Builder 工做區啓動 Flash Professional 調試器。

注意:該範例假設您的計算機上已安裝 Flash Builder 4。

按照這些步驟操做,設置您的 Flash Builder 項目:

  1. 返回 Flash Professional CS5 中的文件 developer_sample6.fla。打開「屬性」面板(若是它還沒有打開),這樣能夠查看「文檔」屬性。
  2. 單擊「屬性」面板中的「類」字段旁的「編輯類定義」按鈕(鉛筆圖標)。在「編輯 ActionScript 3.0 類」對話框中(請參閱圖 10),選擇「Flash Builder」並單擊「肯定」啓動 Flash Builder。

「編輯 ActionScript 3.0 類」對話框顯示將 Flash Builder 做爲代碼編輯器啓動的選項
圖 10. 「編輯 ActionScript 3.0 類」對話框顯示將 Flash Builder 做爲代碼編輯器啓動的選項

  1. 當 Flash Builder 啓動時,將顯示「新建 Flash Professional 項目」對話框,要求您選擇目標 FLA 文件。您的 FLA 文件已經選中,因此單擊「完成」便可生成 Flash Professional 項目。
  2. 請注意,將自動生成一個與 FLA 文件同名的 ActionScript 文件,並打開文件 ShapeRandomizer.as 進行編輯。在 Flash Builder 中,可以使用包資源管理器導航項目中的文件、使用「輪廓」窗格導航 ActionScript 類的部分、使用「問題」窗格在工做時找出問題(請參閱圖 11)。

Flash Builder 4 工做區
圖 11. Flash Builder 4 工做區

  1. 更新文件 ShapeRandomizer.as 中的代碼,使它看上去像如下代碼那樣:

package { import flash.display.MovieClip; import flash.events.MouseEvent; public class ShapeRandomizer extends MovieClip { //******************* // Properties: private var _numShapes:uint = 25; private var _maxWidth:Number = 200; private var _maxHeight:Number = 200; //******************* // Constructor: public function ShapeRandomizer():void { draw(); // Initialize... stage.addEventListener(MouseEvent.MOUSE_DOWN, draw); } //******************* // Events: private function draw(event:MouseEvent=null):void { this.graphics.clear(); for(var n:uint=0; n<_numShapes; n++) { var w:Number = Math.random()*_maxWidth; var h:Number = Math.random()*_maxHeight; package x:Number = Math.random()*(stage.stageWidth/2); var y:Number = Math.random()*(stage.stageHeight/2); var c:Number = Math.random()*255; var b:Number = Math.random()*10; this.graphics.lineStyle(b, c); this.graphics.drawRect(x, y, w, h); this.graphics.endFill(); } } } }

  1. 從 Flash Builder 啓動「測試影片」命令,測試更新。能夠單擊工具欄中的「在 Flash Professional 中測試影片」按鈕,也能夠像在 Flash 中那樣直接按 Ctrl + Enter(Mac 中爲 Cmd + Enter)。視圖將切換回 Flash Professional,而且 SWF 文件像您指望的那樣導出以上 FLA 文件。請注意形狀渲染的變化。
  2. 關閉 SWF 文件。注意,您將自動返回 Flash Builder。

按照這些步驟操做,在 Flash Professional 中調試代碼:

  1. 若是還沒有這樣作,請在 Flash Builder 中返回文件 ShapeRandomizer.as。首先,執行您在本部分的第一部分中執行的相同分析(僅限這次),從 Flash Builder 啓動 Flash Professional 調試器。
  2. 要在 Flash Builder 中爲腳本添加一個斷點,雙擊 42(第 42 行)左側的灰色區域。行號旁將出現一個點,代表已添加斷點。
  3. 單擊工具欄中的「在 Flash Professional 中調試影片」按鈕(flash 和缺陷圖標),在 Flash Professional 中啓動調試模式。狀況與以前示例相同。逐步經過循環,瀏覽隨機生成的變量值。
  4. 單擊調試器中的「結束調試會話」按鈕以結束會話。注意,焦點將返回 Flash Builder 中的腳本。

在 Flash Builder 中使用「Flash 調試」透視進行代碼分析和調試

至此,您已嘗試 Flash Builder 與 Flash Professional 工做區的集成。您也可使用 Flash Builder 4 的「Flash 調試」透視提供的擴展調試工具。Flash Builder 透視是有助於執行任務的一組面板。在上例中,您使用的是 Flash Builder 中的「Flash 透視」。若是切換到「Flash 調試」工做區(請參閱圖 12),將顯示一組新的調試視圖。

Flash Builder 4 的「Flash 調試」透視
圖 12.Flash Builder 4 的「Flash 調試」透視

「Flash 調試」透視包含如下視圖:

  • 腳本視圖:用於設置斷點和編輯代碼
  • 調試視圖:用於控制代碼執行,逐步經過斷點
  • 變量視圖:用於分析斷點處的變量
  • 斷點視圖:用於管理斷點
  • 表達式視圖:用於經過定義待測試變量的表達式觀察變量
  • 控制檯視圖:顯示調試器的跟蹤語句、運行時錯誤和消息

如您所見,Flash Builder 包含 Flash Professional 的基本調試元素,其中包括用於控制逐步經過斷點的調試控制檯,用於分析變量(發生斷點或運行時錯誤處)的變量視圖。Flash Builder 還經過添加工具擴展了調試可能性,這些工具容許您更細緻地管理斷點和設置條件斷點。

要使用 Flash Builder 的調試工具,您首先須要安裝調試版 Flash Player。調試播放器是標準 Flash Player 的一個變體,它容許您跟蹤動做和調試功能,從而在瀏覽器中處理 SWF 文件。您可使用 Flash Professional CS5 安裝隨附的安裝程序或訪問 Flash Player 下載站點安裝調試播放器。

按照這些步驟操做,安裝調試播放器:

  1. 關閉計算機上正在運行的全部應用程序。
  2. 從計算機卸載現有的 Flash Player 版本。
  3. 從新啓動計算機。
  4. 打開計算機上的 applications 文件夾中的 Adobe Flash CS5 文件夾。依次導航到 Players 文件夾和其中的 Debug 文件夾。根據您的操做系統,啓動 Windows 或 Mac 版安裝程序(有關安裝程序的更多詳細信息,請參閱 Adobe Flash Player 10.1 Read Me.pdf 文件)。
  5. 在瀏覽器中瀏覽到某個 Flash 影片,確保安裝成功。

注意:您能夠根據須要在常規 Flash Player 和調試播放器之間隨意切換。若是遇到問題,請參閱如下任何一個技術文件:

按照這些步驟操做,在「Flash 調試」透視中啓動調試會話:

  1. 啓動 Flash Builder 調試器很簡單。在 Flash Builder 中的 Flash 透視中,選擇包資源管理器中的 developer_sample6 項目。
  2. 單擊工具欄中的「調試」按鈕(缺陷圖標)。請務必單擊「在 Flash Professional 中調試」按鈕,它顯示爲一個帶有缺陷的 Flash 圖標。
  3. 單擊「調試」時,Flash Builder 將切換爲「Flash 調試」透視並啓動一個包含用於開始會話的 SWF 文件的瀏覽器。
  4. 您會發現,隨機變量值像 Flash Professional 調試器中那樣出如今「變量」視圖中。單擊「調試」視圖中的「繼續」按鈕(播放圖標),容許循環前進到下一個斷點。請注意如何在「變量」視圖中分析變量和更改變量值(請參閱圖 13)。

調試會話過程當中看到的「調試」和「變量」視圖
圖 13.調試會話過程當中看到的「調試」和「變量」視圖

  1. 單擊「調試」視圖中的「終止」按鈕(中止圖標)可結束調試會話。
  2. 最後,單擊工具欄右上角的「Flash 透視」按鈕,返回標準 Flash Professional 項目透視。您能夠從這裏運行「測試影片」命令,繼續 Flash Professional 工做流程。

有關 Flash Builder 中的項目調試選項的更多信息,請參閱 Flash Builder 4 在線文檔的調試應用程序部分。

後續工做

至此,您已經對 Flash Professional 和 Flash Builder 中與應用程序開發相關的常見問題及調試技術有了進一步瞭解。不管您是設計人員仍是 ActionScript 程序員,這些工做流程均可以幫助您解決問題並在 ActionScript 3 環境中更自信地工做。

相關文章
相關標籤/搜索