Les 3 ppt
- 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 IDEThe 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 FlashDevelopOpen 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 FlashDevelopFlashDevelop 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 3Autocomplete 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 3When 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 3By 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();
- 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
- 18. 事件事件的基本觀念：
- 22. 處理事件簡介在ActionScript 3.0 中，每一個事件都會由事件物件所代表，而事件物件就是 Event 類別或其子類別的實體。事件物件不只會儲存關於特定事件的資訊，也包含了協助處理此事件物件的方法。例如，當 Flash Player 偵測到滑鼠按一下的動作時，便會建立事件物件 (MouseEvent類別的實體) 來代表該特定的滑鼠按一下事件。在建立事件物件之後，Flash Player 便會「傳送」該事件物件，這表示會將該事件物件傳遞給做為該事件之目標的物件。其中，做為所傳送事件物件之目的地的物件，便稱為「事件目標」。
- 24. 處理事件不管您在何時撰寫事件偵聽程式程式碼，它都會遵循此基本結構：function eventResponse(eventObject:EventType):void{//要進行的動作}//把事件和要進行的動作註冊給特定物件知道eventTarget.addEventListener(EventType.EVENT _ NAME, eventResponse);若為MouseEvent.CLICK事件觸發，eventObject具有target屬性，此屬性代表事件觸發的對象，也就是滑鼠點到的物件，eventObject.target.name可取出其名字常用的滑鼠事件eventTarget.addEventListener(MouseEvent.CLICK, myFunction);
- 25. 函式函式的基本觀念：函式是一組要連續執行的程式碼。建立函式：//定義名稱為 printReport 的函式function printReport(){ //列印月報表所做的事情}printReport(); //呼叫 printReport函式
- 26. 函式函式的參數/*定義名為 power 的函式, 它含有一個名為 num 之參數, 且參數之資料類型為數字*/function power(num:Number){trace(num*num); //輸出 num 參數平方值}//呼叫 power 函式, 並傳入 5 做為參數值power(5); //輸出 25
- 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. 顯示物件的結構顯示物件容器除了可以有自己的視覺化內容可呈現外，還可以包含其他的顯示物件，做為自己的子物件。可利用的顯示物件容器包括以下等類別StageMovieClipLoaderSprite
- 34. 練習addChildremoveChildLoaderExample: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. SWCFilesA 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面版，選擇要匯出的元件，先設定類別名稱
- 40. Export SWC File點選 FLASH ，並且將匯出 SWC 打勾
- 41. Component LibrariesTo 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 ProjectOpen Flash DevelopGo to the Project Menu and select New Project. Select AS3 project.
- 44. SWC ─ Login Dialognamed 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); } }