Les3

Web Game Design

授課教師 江素貞

Using FlashDevelop 3 for ElectroServer Client Development

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 ElectroServer classpath. 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.

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.

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.

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.

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.

物件導向概念

語言概觀物件是 ActionScript 3.0 語言的核心要素，也是基本

的建構單元。您所宣告的每一個變數、所撰寫的每一個函數，以及所建立的每一個類別實體都是物件。

您可以將 ActionScript 3.0 程式視為一組執行工作的物件，這些物件會回應事件，並且彼此進行通訊。

ActionScript 中的類別與 Java 或 C++ 中的類別之間有一些微妙的差異。

物件和類別在 ActionScript 3.0 中，每一個物件都是由類別所定

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

物件和類別您可以使用 class 關鍵字，自行定義類別。您可以使

用三種方式宣告類別屬性：常數可以用 const 關鍵字定義變數是用 var 關鍵字定義getter 和 setter 屬性則是在方法宣告中使用 get 和 set

特質定義。您可以用 function 關鍵字宣告方法。類別實體是使用 new 運算子建立，下列範例會建立

Date 類別的實體，稱為 myBirthday 。var myBirthday:Date = new Date();

套件和命名空間套件和命名空間是相關的概念。套件可以讓您將類別

定義合併在一起，以加強程式碼共享，並降低命名衝突。

命名空間可以讓您控制識別名稱的可見性，例如屬性和方法名稱，而且不管位於套件之內或之外，都可以套用至程式碼。

套件可以讓您組織類別檔案，而命名空間可以讓您管理各個屬性和方法的可見性。

匯入套件若要使用位於套件中的類別，您必須匯入套件或特定

的類別。若類別位於名為 samples 的套件中，您必須先使用下

列其中一項 import 陳述式，才能使用 SampleCode 類別：import samples.*;或import samples.SampleCode;

要使用 ElectroServer 4 之 ElectroServer 類別，則需要有以下陳述式import com.electrotank.electroserver4.ElectroServer;

類別類別是物件的抽象形式，類別儲存有關物件可保存之

資料類型以及物件所能展現之行為方式的資訊。若曾經以程式設計語言，如 Java、 C++ 或 C# 等，

建立類別，就會發現 ActionScript 提供似曾相識的熟悉經驗。 ActionScript 有很多相同的關鍵字和特質名稱，例如 class、 extends 和 public 。

類別定義類別定義語法必須要有 class 關鍵字，後面再加上類

別名稱。

package

public class Shape

{

var visible:Boolean = true;

}

ActionScript 3 Review

命名萬物皆具名， 才能與其互動物件影格

設定名稱點選需要建立識別名稱的影格或物件在屬性面板輸入名稱

事件 事件的基本觀念：

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

若要具備「互動」能力 , 就要能對使用者的操作有回應。 處理事件的流程

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

處理事件簡介在 ActionScript 3.0 中，每一個事件都會由事件物件所

代表，而事件物件就是 Event 類別或其子類別的實體。事件物件不只會儲存關於特定事件的資訊，也包含了協助處理此事件物件的方法。

例如，當 Flash Player 偵測到滑鼠按一下的動作時，便會建立事件物件 (MouseEvent 類別的實體 ) 來代表該特定的滑鼠按一下事件。

在建立事件物件之後， Flash Player 便會「傳送」該事件物件，這表示會將該事件物件傳遞給做為該事件之目標的物件。其中，做為所傳送事件物件之目的地的物件，便稱為「事件目標」。

處理事件簡介您可以使用事件偵聽程式，「偵聽」程式碼中的事件

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

處理事件 不管您在何時撰寫事件偵聽程式程式碼，它都會遵循此基本結構：

function eventResponse(eventObject:EventType):void{ //要進行的動作}//把事件和要進行的動作註冊給特定物件知道eventTarget.addEventListener(EventType.EVENT _ NAME, eventResponse);

若為 MouseEvent.CLICK 事件觸發， eventObject 具有 target 屬性，此屬性代表事件觸發的對象，也就是滑鼠點到的物件， eventObject.target.name 可取出其名字

常用的滑鼠事件事件名稱 說明CLICK 物件發生按一下滑鼠鈕的動作時DOUBLE_CLICK 物件發生雙按滑鼠鈕的動作時MOUSE_DOWN 物件發生按下滑鼠鈕的動作時MOUSE_MOVE 當滑鼠指標在物件範圍內移動時MOUSE_OUT 當滑鼠指標移開物件範圍時MOUSE_OVER 當滑鼠指標移入物件的範圍時MOUSE_UP 物件發生放開滑鼠鈕的動作時MOUSE_WHEEL 物件發生滑鼠滾輪捲動的動作時

eventTarget.addEventListener(MouseEvent.CLICK, myFunction);

函式的基本觀念：函式是一組要連續執行的程式碼。建立函式：

// 定義名稱為 printReport 的函式function printReport(){ // 列印月報表所做的事情}

printReport(); //呼叫 printReport 函式

函式

函式的參數

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

// 呼叫 power 函式 , 並傳入 5 做為參數值power(5); // 輸出 25

函式

URLRequest此類別物件用於傳遞變數到伺服器，以及 URLLoader、

Loader 物件要載入文件檔案的目標路徑轉換。建構 URLRequest 物件

var URLRequest 物件名稱 :URLRequest;

URLRequest 物件名稱 =new URLRequest (目標路徑 )

名稱 屬性 說明url 字串 伺服器請求的目標路徑data 物件 傳送到伺服器的變數與變數值… … …

URLRequest練習設定超連結

利用 navigateToURL 函數載入指定的 URL 文件透過 URLRequest 物件設定 url及 data 屬性

Examplevar req:URLRequest=new URLRequest();

req.url="http://www.google.com.tw/search";

req.data=“q=育達”navigateToURL(req);

URLLoader此類別物件用於載入外部的文字檔、 二進制資料或外部的變數值

將資料載入完成後，這些資料會存放在 data 屬性中純文字檔： data 回傳字串物件二進制： data 回傳一個 ByteArray 物件外部變數集合： data 回傳一個 URLVariables 物件

必須在外部的資料載入完成後 (Event.COMPLETE 事件發生時 ) 才可使用 URLLoader 物件的 data 屬性

URLLoader練習讀取 XML 格式檔案

透過 URLRequest 物件設定檔案來源載入完成後，將 data 屬性轉換成 XML 物件 後取得資料

Example//loader為 URLLoader 物件var svr:XML = new XML(loader.data);

//抓取檔案中的資料var ip:String = svr.conn.@ip;

var port:Number = Number(svr.conn.@port);

<server> <conn ip="120.106.29.101" port="9899" /></server>

Loader提供從本機磁碟機或 HTTP 位址載入 SWF 檔與圖片檔

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

名稱 參數 說明Loader() 無 建構 Loader 物件load() 檔案來源 將 swf、 jpeg、 gif、 png 等檔案會入物

件成為 Loader 物件的子物件unload() 無 移除 load 方法所加入的物件close() 無 取消 load 方法目前正在進行的載入動作

顯示物件的結構顯示物件容器除了

可以有自己的視覺化內容可呈現外，還可以包含其他的顯示物件，做為自己的子物件。可利用的顯示物件容器包括以下等類別StageMovieClipLoaderSprite

LoaderInfo透過 Loader 物件的 contentLoaderInfo 屬性取得此類別可以取得 Loader 物件載入之部 SWF 或圖片檔

的相關資訊必須在 Event.INIT 事件發生時才可讀取屬性資料，例

如檔案大小、寬及高。Example:

var picInfo:LoaderInfo=loader.contentLoaderInfo;

trace(picInfo.width);

trace(picInfo.bytesTotal);

練習addChildremoveChildLoaderExample:

var file:URLRequest=new URLRequest("butterfly.jpg");

var loader:Loader=new Loader();

loader.load(file);

addChild(loader);

Flash 匯出 SWC 格式

SWC將 FLASH 中繪製元件轉成 SWC 給 FlashDevelop 使用簡單來說，組件就是一個視覺元件與 AS 的結合體，完整安裝包，類似於系統的 DLL 檔，其副檔名為 SWC 。這樣就可以在 FlashDevelop 中直接使用 new 類別的方式建構。

組件的優點在於其將所有資源包裝起來，使用時無需外連任何元件或 class ，對於程式苦手的美術人員可謂一大利器。

程式人員可將重覆性高的功能包裝成組件，於開發專案時直接載入使用節省大量時間。

SWC FilesA 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.

Export SWC File開啟 Flash Library 面版，選擇要匯出的元件，先設定

類別名稱

Export SWC File定義組件

Export SWC File點選 FLASH ，並且將

匯出 SWC 打勾

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

First FlashDevelop Project

Create Flash Develop ProjectOpen Flash DevelopGo to the Project Menu and select New Project. Select

AS3 project.

( 附件： Client-side Development Environment.docx)Creating a Sample Project

SWC ─ Login Dialog

named login_btn

Show Login Dialogimport flash.events.MouseEvent;

import org.flashdevelop.utils.FlashConnect;

public class Main extends Sprite

{ private var loginscreen: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);

}

}