1. 網路遊戲設計 Web Game Design 授課教師 江素貞

2. Chapter 3 AS3 and FlashDevelop Using FlashDevelop 3 for ElectroServer Client Development

3. Client-side Development Environment (附件：Client-side Development Environment.docx) Working with the Flash IDE The main thing to set up when working with the IDE is the ElectroServerclasspath. Open up Flash and then go to the Edit Menu and select Preferences. Select Actionscript as the Category. Working with the FlashDevelop Open FlashDevelop then go to the Tools menu and select Global Classpaths. Select AS3 from the drop down list and select Add classpath.

4. ActionScript 3 and FlashDevelop FlashDevelop is a free editing tool. All client code discussed and found in our example files is ActionScript 3, targeting Adobe Flash Player 10. All Projects will be compiled using the Flex compiler. If you install Flash Develop, you’ll be able to easily open and compile all projects.

5. Using FlashDevelop 3 Autocomplete is when the code editor anticipates what variable, function, property, or method you are trying to type and gives you a convenient list to choose from. The Flash IDE has a very limited autocomplete built-in that by default will only work with code provided by Adobe during installation. Autocomplete, when done right, is invaluable. It can literally save you hours of time looking things up.

6. Using FlashDevelop 3 When using a robust API such as the ActionScript 2 and ActionScript 3 ElectroServer 4 APIs you will quickly go nuts if you have to constantly look up every class name, method name, and property. That is why we suggest using an external code editor such as FlashDevelop 3.

7. Using FlashDevelop 3 By installing FD3 and adding the correct API to your classpath, you will be amazed at how much more quickly you can develop and avoid typos.

8. Chapter 3 AS3 and FlashDevelop 物件導向概念

9. 語言概觀 物件是 ActionScript 3.0 語言的核心要素，也是基本的建構單元。您所宣告的每一個變數、所撰寫的每一個函數，以及所建立的每一個類別實體都是物件。 您可以將 ActionScript 3.0 程式視為一組執行工作的物件，這些物件會回應事件，並且彼此進行通訊。 ActionScript中的類別與 Java 或 C++ 中的類別之間有一些微妙的差異。

10. 物件和類別 在 ActionScript 3.0 中，每一個物件都是由類別所定義。類別可視為物件類型的範本或藍圖。類別定義可以包含變數和常數 ( 保存資料值) 以及方法 ( 封裝繫結至類別之行為的函數)。儲存在屬性中的值可以是「基本值」或其它物件。基本值是數字、字串或 Boolean 值。

11. 物件和類別 您可以使用 class 關鍵字，自行定義類別。您可以使用三種方式宣告類別屬性： 常數可以用const 關鍵字定義 變數是用 var關鍵字定義 getter 和 setter 屬性則是在方法宣告中使用get 和 set 特質定義。 您可以用 function 關鍵字宣告方法。 類別實體是使用 new 運算子建立，下列範例會建立 Date 類別的實體，稱為 myBirthday。 varmyBirthday:Date = new Date();

12. 套件和命名空間 套件和命名空間是相關的概念。套件可以讓您將類別定義合併在一起，以加強程式碼共享，並降低命名衝突。 命名空間可以讓您控制識別名稱的可見性，例如屬性和方法名稱，而且不管位於套件之內或之外，都可以套用至程式碼。 套件可以讓您組織類別檔案，而命名空間可以讓您管理各個屬性和方法的可見性。

13. 匯入套件 若要使用位於套件中的類別，您必須匯入套件或特定的類別。 若類別位於名為 samples的套件中，您必須先使用下列其中一項 import 陳述式，才能使用 SampleCode類別： import samples.*; 或 import samples.SampleCode; 要使用ElectroServer4之 ElectroServer類別，則需要有以下陳述式 import com.electrotank.electroserver4.ElectroServer;

14. 類別 類別是物件的抽象形式，類別儲存有關物件可保存之資料類型以及物件所能展現之行為方式的資訊。 若曾經以程式設計語言，如 Java、C++ 或 C# 等，建立類別，就會發現 ActionScript提供似曾相識的熟悉經驗。ActionScript有很多相同的關鍵字和特質名稱，例如 class、extends 和 public。

15. 類別定義 類別定義語法必須要有 class 關鍵字，後面再加上類別名稱。 package public class Shape { varvisible:Boolean = true; }

16. Chapter 3 AS3 and FlashDevelop ActionScript 3Review

17. 命名 萬物皆具名， 才能與其互動 物件 影格 設定名稱 點選需要建立識別名稱的影格或物件 在屬性面板輸入名稱

19. 像是使用者以滑鼠按一下按鈕、移動滑鼠、在文字框中輸入文字、使用者按下特定按鍵…等等。

20. 若要具備「互動」能力, 就要能對使用者的操作有回應。

21. 處理事件的流程 必須要指定事件, 以及當該事件發生時需要進行的動作, 然後把這兩個資訊註冊給特定的物件(MovieClip、按鈕…等)。

22. 處理事件簡介 在ActionScript 3.0 中，每一個事件都會由事件物件所代表，而事件物件就是 Event 類別或其子類別的實體。事件物件不只會儲存關於特定事件的資訊，也包含了協助處理此事件物件的方法。 例如，當 Flash Player 偵測到滑鼠按一下的動作時，便會建立事件物件 (MouseEvent類別的實體) 來代表該特定的滑鼠按一下事件。 在建立事件物件之後，Flash Player 便會「傳送」該事件物件，這表示會將該事件物件傳遞給做為該事件之目標的物件。其中，做為所傳送事件物件之目的地的物件，便稱為「事件目標」。

23. 處理事件簡介 您可以使用事件偵聽程式，「偵聽」程式碼中的事件物件。「事件偵聽程式」是您撰寫用來回應特定事件的函數或方法。若要確保程式會對事件做出回應，您必須將事件偵聽程式加入至事件目標，或加入至任何顯示清單物件 ( 為事件物件之事件流程的一部分) 中。

25. 函式 函式的基本觀念：函式是一組要連續執行的程式碼。 建立函式： //定義名稱為 printReport 的函式 function printReport(){ //列印月報表所做的事情 } printReport(); //呼叫 printReport函式

26. 函式 函式的參數 /*定義名為 power 的函式, 它含有一個名為 num 之參數, 且參數之資料類型為數字*/ function power(num:Number){ trace(num*num); //輸出 num 參數平方值 } //呼叫 power 函式, 並傳入 5 做為參數值 power(5); //輸出 25

27. URLRequest 此類別物件用於傳遞變數到伺服器，以及URLLoader、Loader物件要載入文件檔案的目標路徑轉換。 建構 URLRequest物件 varURLRequest物件名稱:URLRequest; URLRequest物件名稱=new URLRequest (目標路徑)

28. URLRequest練習 設定超連結 利用navigateToURL函數載入指定的URL文件 透過URLRequest物件設定url及data屬性 Example varreq:URLRequest=new URLRequest(); req.url="http://www.google.com.tw/search"; req.data=“q=育達” navigateToURL(req);

29. URLLoader 此類別物件用於載入外部的文字檔、 二進制資料或外部的變數值 將資料載入完成後，這些資料會存放在data屬性中 純文字檔：data回傳字串物件 二進制：data回傳一個ByteArray物件 外部變數集合：data回傳一個URLVariables物件 必須在外部的資料載入完成後 (Event.COMPLETE事件發生時)才可使用URLLoader物件的data屬性

30. URLLoader練習 讀取XML格式檔案 透過URLRequest物件設定檔案來源 載入完成後，將data 屬性轉換成XML物件 後取得資料 Example //loader為URLLoader物件 varsvr:XML = new XML(loader.data); //抓取檔案中的資料 varip:String = svr.conn.@ip; varport:Number = Number(svr.conn.@port); <server> <conn ip="120.106.29.101" port="9899" /> </server>

31. Loader 提供從本機磁碟機或HTTP位址載入 SWF檔與圖片檔(JPG, PNG, GIF)到當前影片的相關方法 1個 Loader類別物件只能載入1個外部 SWF檔或圖片檔 Loader物件載入的外部檔案不會直接加入舞台中，必須透過addChild()等方法附加到可見物件中。

32. 顯示物件的結構 顯示物件容器除了可以有自己的視覺化內容可呈現外，還可以包含其他的顯示物件，做為自己的子物件。可利用的顯示物件容器包括以下等類別 Stage MovieClip Loader Sprite

33. LoaderInfo 透過Loader物件的 contentLoaderInfo屬性取得 此類別可以取得Loader物件載入之部SWF或圖片檔的相關資訊 必須在Event.INIT事件發生時才可讀取屬性資料，例如檔案大小、寬及高。 Example: varpicInfo:LoaderInfo=loader.contentLoaderInfo; trace(picInfo.width); trace(picInfo.bytesTotal);

34. 練習 addChild removeChild Loader Example: var file:URLRequest=new URLRequest("butterfly.jpg"); varloader:Loader=new Loader(); loader.load(file); addChild(loader);

35. Chapter 3 AS3 and FlashDevelop Flash匯出 SWC 格式

36. SWC 將 FLASH 中繪製元件轉成 SWC 給 FlashDevelop使用 簡單來說，組件就是一個視覺元件與AS的結合體，完整安裝包，類似於系統的 DLL 檔，其副檔名為SWC。這樣就可以在FlashDevelop中直接使用new 類別的方式建構。 組件的優點在於其將所有資源包裝起來，使用時無需外連任何元件或 class，對於程式苦手的美術人員可謂一大利器。 程式人員可將重覆性高的功能包裝成組件，於開發專案時直接載入使用節省大量時間。

37. SWCFiles A SWC file is an archive file for Flex components and other assets. SWC files contain a SWF file and a catalog.xml file. The SWF file inside the SWC file implements the compiled component or group of components and includes embedded resources as symbols. Flex applications extract the SWF file from a SWC file, and use the SWF file's contents when the application refers to resources in that SWC file. The catalog.xml file lists of the contents of the component package and its individual components.

38. Export SWC File 開啟Flash Library面版，選擇要匯出的元件，先設定類別名稱

39. Export SWC File 定義組件

40. Export SWC File 點選 FLASH ，並且將匯出 SWC 打勾

41. Component Libraries To include a SWC file in your application at compile time, it must be located in the library path. For more information about SWC files, see About SWC files. 開啟FlashDevelop，把該swc放在專案的資料夾下, 在該swc上按右鍵選擇add to Library

42. Chapter 3 AS3 and FlashDevelop First FlashDevelop Project

43. Create Flash Develop Project (附件：Client-side Development Environment.docx) Creating a Sample Project Open Flash Develop Go to the Project Menu and select New Project. Select AS3 project.

44. SWC ─ Login Dialog named login_btn

45. Show Login Dialog import flash.events.MouseEvent; import org.flashdevelop.utils.FlashConnect; public class Main extends Sprite { private varloginscreen:LoginScreen; public function Main():void { loginscreen = new LoginScreen(); addChild(loginscreen); FlashConnect.trace(stage.stageWidth); loginscreen.x = stage.stageWidth/2-loginscreen.width/2; loginscreen.y = stage.stageHeight / 2 - loginscreen.height / 2; loginscreen.login_btn.addEventListener(MouseEvent.CLICK, onOK); } }