• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Les3
 

Les3

on

  • 1,684 views

 

Statistics

Views

Total Views
1,684
Views on SlideShare
1,675
Embed Views
9

Actions

Likes
0
Downloads
3
Comments
0

3 Embeds 9

http://www.slideshare.net 5
http://caviarcan.miroko.com.tw 3
http://120.106.19.33:8090 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 熟悉 Java 或 C++ 物件導向程式設計 (OOP) 的程式設計人員可能會將物件視為模組,其中包含兩種成員:儲存在成員變數或屬性的資料,以及可透過方法存取的行為指令。 ECMAScript 第 4 版草稿是 ActionScript 3.0 所依據的標準,其定義物件的方式與此類似,但稍有差異。在 ECMAScript 草稿中,物件只是屬性的集合;這些屬性是容器,不但能保存資料,也能保存函數或其它物件。若函數是以這種方式附加到物件上,則稱為方法。 ActionScript 中的類別與 Java 或 C++ 中的類別之間有一項微妙的差異,就是在 ActionScript 中,類別不僅只是抽象實體。 ActionScript 類別是以儲存類別之屬性和方法的「類別物件」來代表,因此能夠運用 Java 和 C++ 程式設計人員可能會覺得性質很不相同的技巧,例如,在類別或套件的 最高階包含陳述式或可執行的程式碼。 ActionScript 類別與 Java 或 C++ 類別之間還有另外一項差異,就是每一個 ActionScript 類別都有所謂的「原型物件」。在舊版 ActionScript 中,原型物件連結在一起形成「原型鏈」,而整體做為整個類別繼承階層的基礎;但是在 ActionScript 3.0 中,原型物件在繼承系統中只扮演份量很輕的小角色,原型物件仍然會很有用,若要在類別的所有實體間共享屬性及其值,它可以替代靜態屬性和方法。

Les3 Les3 Presentation Transcript

  • 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 FlashDevelop
      • Open 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 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.
  • 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.
  • 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.
  • 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.
    • 物件導向概念
  • 語言概觀
    • 物件是 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 可取出其名字
  • 常用的滑鼠事件 eventTarget.addEventListener(MouseEvent.CLICK, myFunction); 事件名稱 說明 CLICK 物件發生按一下滑鼠鈕的動作時 DOUBLE_CLICK 物件發生雙按滑鼠鈕的動作時 MOUSE_DOWN 物件發生按下滑鼠鈕的動作時 MOUSE_MOVE 當滑鼠指標在物件範圍內移動時 MOUSE_OUT 當滑鼠指標移開物件範圍時 MOUSE_OVER 當滑鼠指標移入物件的範圍時 MOUSE_UP 物件發生放開滑鼠鈕的動作時 MOUSE_WHEEL 物件發生滑鼠滾輪捲動的動作時
    • 函式的基本觀念:函式是一組要連續執行的程式碼。
    • 建立函式:
    // 定義名稱為 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 屬性
    • Example
    • var 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=&quot;120.106.29.101&quot; port=&quot;9899&quot; /> </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 方法目前正在進行的載入動作
  • 顯示物件的結構
    • 顯示物件容器除了可以有自己的視覺化內容可呈現外,還可以包含其他的顯示物件,做為自己的子物件。可利用的顯示物件容器包括以下等類別
      • Stage
      • MovieClip
      • Loader
      • Sprite
  • LoaderInfo
    • 透過 Loader 物件的 contentLoaderInfo 屬性取得
    • 此類別可以取得 Loader 物件載入之部 SWF 或圖片檔的相關資訊
    • 必須在 Event.INIT 事件發生時才可讀取屬性資料,例如檔案大小、寬及高。
    • Example:
    • var picInfo:LoaderInfo=loader.contentLoaderInfo;
    • trace(picInfo.width);
    • trace(picInfo.bytesTotal);
  • 練習
    • addChild
    • removeChild
    • Loader
    • Example:
    • var file:URLRequest=new URLRequest(&quot;butterfly.jpg&quot;);
    • var loader:Loader=new Loader();
    • loader.load(file);
    • addChild(loader);
    • Flash 匯出 SWC 格式
  • SWC
    • 將 FLASH 中繪製元件轉成 SWC 給 FlashDevelop 使用
    • 簡單來說,組件就是一個視覺元件與 AS 的結合體,完整安裝包,類似於系統的 DLL 檔,其副檔名為 SWC 。這樣就可以在 FlashDevelop 中直接使用 new 類別的方式建構。
    • 組件的優點在於其將所有資源包裝起來,使用時無需外連任何元件或 class ,對於程式苦手的美術人員可謂一大利器。
    • 程式人員可將重覆性高的功能包裝成組件,於開發專案時直接載入使用節省大量時間。
  • SWC Files
    • 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.
  • Export SWC File
    • 開啟 Flash Library 面版,選擇要匯出的元件,先設定類別名稱
  • Export SWC File
    • 定義組件
  • Export SWC File
    • 點選 FLASH ,並且將匯出 SWC 打勾
  • 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
    • First FlashDevelop Project
  • Create Flash Develop Project
    • Open Flash Develop
    • Go 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 Dialog
    • import 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);
    • }
    • }