顯示具有 ActionScript 標籤的文章。 顯示所有文章
顯示具有 ActionScript 標籤的文章。 顯示所有文章

Flash來寫應用程式(八):橡皮擦

要設計電子橡皮擦動畫原理十分簡單,但是要有系統的將資料事先規劃好,才有辦法透過簡單的原理實現。使用橡皮擦的可以分類為下列幾個步驟:
  1. 取得橡皮擦(游標改為橡皮擦圖示)
  2. 移動橡皮擦到想要擦掉的圖形上面(碰撞檢查)
  3. 按下滑鼠清除該圖形(刪除該圖形資料)
原理很簡單,變更游標之前已經會做了,而碰撞檢查我們可以依賴MovieClip內建的hitTest Method來做確定,透過給予座標位置,就可以得知滑鼠是否有碰撞到該圖形。而刪除更是輕鬆只要直接將該MovieClip做removeMovieClip()就搞定了。如果如上述所說這麼輕鬆,那程式設計真是快樂的事情,實際在設計的時候,你會發現刪除的時候怎麼所有的圖形都消失了,沒辦法一塊一塊的去做刪除,這是因為多個圖形都在同一個MovieClip做處理,因此hitTest與removeMovieClip這些對該MovieClip做控制的事情,反而無法切割開來,但是如果不透過現有的method去處理,而考慮手工打造的話,那真是耗時費工喪失了flash原本對於圖形控制的優勢。
但是只要在資料部分必須事先規劃,其實只要每個圖形分散在不同的MovieClip上,我們就可以利用原本基本的原理來處理圖形的刪減了,我們只要在新增每一個圖形的時候,都各自用一個獨立的MovieClip將它包起來,並且集中存放在Array中,當需要檢查碰撞的時候,在用迴圈的方式檢查Array中哪個MovieClip有符合,只要單獨刪除該筆MovieClip,就可以滿足橡皮擦的功能了。

Flash來寫應用程式(七):運用內建的手風琴面板

手風琴面板又名OutlookBar,最初是從Office Outlook中看到的,在有限的空間類,以標題列提供點選的方式,內容以滑動的方式呈現,既生動又擁有足夠的空間來放置圖案與文字。在Flash 8中,Components裡面即存在此功能的元件名為Accordion,雖然可以用屬性的方式填入參數,當然也可以透過ActionScript的描述,以方便微調以及提供預設屬性上無法修改的參數。在Flash中,Accordion內是可以存放一個一個MovieClip來在標題或內容,因此搭配上來可以非常生動活潑。

所以只要有好的圖片與搭配,就可以透過Accordion創造自己所喜歡的手風琴面板,而在這個例子中,我是透過ActionScript在Accordion的onLoad事件中,將參數寫入Accordion元件,產生上述效果,程式碼如下:
on (load) { 
    // 設定選單高度為28
    this.setStyle ("headerHeight", 28);
    // 設定第一個選單內容為NoteTab MovieClip,標題不顯示文字只採用tab1圖示
    var tab1 = this.createChild("NoteTab", "tab1", {label:'', icon:"tab1"});
    // 設定第二個選單內容為SignTab MovieClip,標題不顯示文字只採用tab2圖示
    var tab2 = this.createChild("SignTab", "tab2", {label:'', icon:"tab2"});
    // 設定第三個選單內容為QueryTab MovieClip,標題不顯示文字只採用tab3圖示
    var tab3 = this.createChild("QueryTab", "tab3", {label:'', icon:"tab3"}); 
    tab1.setSize (77, 890 - 28*3); 
    tab2.setSize (77, 890 - 28*3); 
    tab3.setSize (77, 890 - 28*3); 
}

Flash來寫應用程式(六):隨時切換自訂游標

Flash本身實際上只有提供隱藏(顯示)預設游標的功能:Mouse.hide()/Mouse.show(),沒有提供游標變更的Function。所以我們在製造自訂游標的方式,實際上是將原本的游標隱藏之後,透過onMouseMove的事件,持續讓MovieClip定位在滑鼠當時位置來形成新的游標圖是。由於我們跟隨的元件可以完全客製化,因此MovieClip如果直接內含Button元件在內,則使用者觸發onMouseDown事件時,就可以將對應的動畫訊息設計在Button元件的MouseDown frame上。
簡單範例
首先準備好要當游標的圖片,如下圖中,我們設計一個名為Pen的MovieClip,記得指標拿來點擊的位置對準該MovieClip座標(0,0)的位置,以方便ActionScript控制。

先用偷懶的方式來實作,新增一個最上層的Layer,我把它取名為Curor,直接將Pen的圖片拉近該Layers中,並且將Pen圖片的Instance Name取名為:MyCursor。

再來就是實際的控制了,我們在Curor Layer的第1個Keyframe填上下列的ActionScript,在基本使用上,就如果游標是該隻筆一樣了。
Mouse.hide();
this.onMouseMove=function(){
this.MyCursor._x=this._xmouse;
this.MyCursor._y=this._ymouse;
}

隨時切換自訂村夹
不過如果就只有這樣子,對於基本的應用還OK,但是對於需要頻繁變更遊標圖示的時候,就變成需要有系統的去管理它反而比較方便,在此我是設計一個CursorFactory來管理整個游標圖式。程式的原因很簡單,我在Make Method中,將會用到的Cursor圖示載入並且預設隱藏,但是在滑鼠移動時都還是會跟隨滑鼠的移動而修正作標,可以利用Change Method希望目前顯示特定的圖示,或用HideAll將游標回歸預設的箭頭。程式碼如下:

class UI.Control.CursorFactory
{
static var cursors : Array;
private function CursorFactory (){}
static function Make(){
cursors=new Array();
cursors ["drawLine"] = 
_root.attachMovie ("drawLine", "drawLine", _root.getNextHighestDepth ());
cursors ["drawLine"]._visible = false;
cursors ["rubber"] =
_root.attachMovie ("rubber", "rubber", _root.getNextHighestDepth ());
cursors ["rubber"]._visible = false;
cursors ["signature"] =
_root.attachMovie ("signature", "signature", _root.getNextHighestDepth ());
cursors ["signature"]._visible = false;
var thisCursors = cursors;
_root.onMouseMove=function (){
for (var i in thisCursors){
thisCursors [i]._x = _root._xmouse;
thisCursors [i]._y = _root._ymouse;
}
};
}
static function AddCursor (id : String, instance : String){
cursors [id] = _root.attachMovie (instance, id, _root.getNextHighestDepth ());
cursors [id]._visible = false;
}
static function Change (id : String){
//trace("Change:"+id+"/"+cursors [id]);
if (cursors [id] != undefined){
//trace("Change:"+cursors[id]);
cursors [id]._visible = true;
Mouse.hide ();
}
}
static function HideAll (){
for (var i in cursors){
cursors [i]._visible = false;
}
Mouse.show ();
}
}

ActionScript 2.0自訂class的private屬性是騙人的!

在開發Flash的過程中,以程式設計師的角度來看,ActionScript語言本身由於是Script語法,因此在語言的限制上十分鬆散,以class的設計來說,private關鍵字原本是為了避免該member遭到外部原件存取與修改,但是在實際的程式設計過程中,這一個禁止並不是絕對的。只要透過Object型態的變數去接收該Class,則該元件的所有member/method都會喪失限制而可以存取。
class test{ private var str1:String; public var str2:String;
};
var a:text=new test();
a.str2="ok"; // allow
a.str1="fail"; // deny
var b:Object=a;
a.str2="ok"; // allow
a.str1="ok"; // allow

用Flash來寫應用程式(五):Class對應MovieClip使用的時機

什麼時候適合Class對應MovieClip?
當發現MovieClip直接交給Class來控制的時候,我們可以將這個MovieClip的相關事件通通整合給該Class做處理,在獲得程式碼集中以及資源集中控管的優點下,同時也浮現一個新的問題-每個MovieClip都應該擁有自己的Class嗎?答案是否定的,畢竟雖然MovieClip交給Class控制十分便利,但是如果連帶造成過度膨脹太多Class而產生管理問題,也不是一個好的現象。Class在控制的過程中,還是具備原本MovieClip階層性的架構,因此該Class還是可以透過this._parent取得上層元件(MovieClip/Component/Button)的資訊,也可以透過建立的變數去取得下層(MovieClip/Component/Button)的資訊,因此Class可以在適當的位置放置,而其他可以適合放在同一個Class內做控制的子元件,則透過同一個Class直接向下存取與控制即可,不需要再為子元件建立一個獨自的Class。所以以性質或目的來集中管理Event,進而針對該MovieClip寫一個特定的Class來做解決方案,是一個比較有效率並且容易維護但卻又不會造成程式碼過於膨脹的好方法。

用Flash來寫應用程式(四):Class對應MovieClip

東藏西躲的ActionScript

在ActionScript 2.0的程式設計中,程式可以置放的位置十分的自由,只要是Layer上的Keyframe、Keyframe內的MovieClip、Keyframe內的Component、Keyframe內的Button以及各MovieClip/Component/Button裡面的子MovieClip/Component/Button的無窮迴圈,雖然置放的位置自由,但也造就了程式碼的難以維護。每一段ActionScript的執行如果環環相扣的時候,某一個有錯誤可能要翻片散播各地的Code還不一定有線索,這也造就了跟一般程式語言平台不同的開發環境,程式碼的破碎程度不去控制的話會十分嚴重,而最後將造成系統維護跟更新上的困難。

Class!這個MovieClip就交給你了

程式碼的破碎問題,其實是可以去克服的,雖然Flash的ActionScript是可以讓程式碼散播在各地,但是也是有方法可以讓程式碼有系統的整理起來。這裡並不是要規定說程式碼一定要在哪邊寫,畢竟有些程式碼真的適合切成小項目去各自維護。例如該Button的字型跟其他元件不同要特別大一號,這時候只要在該Button的OnLoad事件直接設定就好,統一處理反而是自找麻煩。但是如果一些片段的程式碼可以合併成一個有系統或有意義的行為物件時,這時候合併成一個有意義的Class,不僅是方便程式的撰寫,也會提升此功能的再利用性。
單然,如果只是邏輯上的功能,早就交給SEPY去作函式庫的開發,而片段的程式碼通常是因為Event Control而產生的。因此並不是資料處理問題去撰寫Class,而是針對MovieClip/Button/Component的Event控制而撰寫Class,這時候撰寫的Class必須繼承自MovieClip,並且由Flash Editor設定該Class等同於特定MovieClip之後,該Class內就具備有存取被設定的MovieClip所有資源。
以應用程式(三)的時候,當初建立了一個TestClass,並且我們讓他繼承自MovieClip,此時將利用它當範例在繼續延伸。
在一個Flash的專案中,透過Create New Symbol建立新的MovieClip時,如果需要ActionScript可以動態生成此MovieClip時,都會設定該MovieClip的Identifier,這裡隨便取名為aaa。並且在Class的部分,我們將DataProvider.TestClass填上,表示此MovieClip的生成與運作將與DataProvider.TestClass一起動作。

我們將在此MovieClip上置放一個Text Field的文字方塊,並且將該文字方塊屬性調整為Dynamic,並且取名為TextBox1。首先在該TextBox1的預設文字顯示為AAAA,只要將名為aaaa的MovieClip拉到Flash Editor一開始的圖層內,可以預期出現下列的結果,在畫面中可以看到文字方塊的AAAA,並且從output window中可以看到"TestClass Create"的訊息,表示該Class同時也有建置出來。

確定Class連動之後,我們必須手動的將該MovieClip內的子元件(Movie/Component/Button)手動的在Class上命名該變數,變數的名稱必須跟Instance Name相同,而變數的類型也必須與該子元件的類型相同。以目前的範例來說,必須建立一個名為TextBox1,屬性為TextField的變數在TextClass之中。並且我們在TextClass中建立一個名為onLoad的function,這是MovieClip在整個生成完成之後會呼叫的function,在這裡進行UI的控制才不會發生圖形還沒產生但程式已經要求做變動,進而造成程式的要求都沒有反應。在onLoad的function中,將TextBox1.text修改成"BBBB"。

變動後運作的結果如下:

用Flash來寫應用程式(三):基礎建設

萬丈高樓平地起

在利用Flash開發應用程式時,我們必須考慮到系統未來維護以及修改的過程中,如果具備一般程式語言的好維護以及Flash程式的生動。在此我們還是考量到最簡單的MVC三段架構,透過Flash本身優異的畫面處理能力幫我們解決View的問。Model則透過SEPY建置,寫出解決各種邏輯的元件庫或強大的函釋庫。最後透過Flash元件的Event Control,我們將View與Model做最後的聯繫,達到我們預期的目的在。

Flash在撰寫Class Library的時候,其實可以寫得很類似Java,因為Flash同樣支援Class Path的概念,而SEPY也會根據檔案存放的目錄帶入相對的Class Path,節省對於Class Path的設計自行判斷的困擾。

在Flash的Menu中,通常在Edit->Reference裡面都會存在ActionScript頁面來提供設定Class Path,透過設定Class Path之後,Flash軟體在撰寫ActionScript的時候,就可以透過正確的Namespace索引,直接去使用該Class Path下的每個Class,以下圖的設定中,我將C:\FDISS設定為ActionScript 2.0的Class Path,再來我就要在該目錄下進行程式碼的撰寫,並最後讓Flash File使用。

在開始利用SEPY撰寫ActionScript之前,我們也在新增的WorkSpace中,加入了FIDSS的目錄,並且她立刻會將該目錄下的子目錄與檔案帶入,此時我們就可以透過WorkSpace來管理這個目錄的檔案資料,同時建立更多的class。

如果我們在C:\FIDSS中的DataProvider目錄下,想要建立一個新的Class時,只要在WorkSpace的該目錄上點選右鍵,選擇[Add]選項內的[New ActionScript 2.0 class],就可以開始產生Class之路。

透過SEPY產生新的Class是十分便利的,通常我們不需要異動Package的設定,只要在File Location中設定好預期的Class Name,並且確認是否需要繼承特定元件(如:MovieClip)或引用特定的Interface。引用特定的Interface時,Option功能將會開放點選是否希望直接讓SEPY幫你產生繼承自Interface所需要實作的Method。範例中我在DataProvider中建立了一個TestClass的Class並且繼承自MovieClip。

新建立好的Class將會產生最基礎的框架,來提供程式的撰寫,假設我們在function TestClass的建構式中多加入了trace("TestClass Create");的程式碼來提供Class的測試。

在Flash畫面編輯中,我們直接在Keyframe上新增一小段程式碼來測試,程式碼僅僅單純產生一個新的DataPorivder.TestClass元件,而不做其他的動作。

最後,我們執行該Flash,看看該元件的建立訊息是否有出現於Output Window。

用Flash來寫應用程式(二):SEPY ActionScript Editor

SEPY ActionScript Editor


SEPY ActionScript Edotr畫面
預設左側的分隔區提供:WorkSpace、Snippets、Member、Todo、Flash API、XML Reader等功能,下列為各項做簡單的使用介紹。
WorkSpace - 用SEPY自訂的工作環境定義,可以同時管理多個Project,在每一個Projec內新增修改目錄或檔案時,也同時於檔案系統上變更該目錄與檔案,節省目錄與檔案管理的時間。

Snippets - 這是提供片段程式碼快速帶入的一個小功能,只要將目錄索引到特定目錄,而該目錄下所有的目錄中,只要有.as的檔案都可以提供挑選,挑選出來的程式碼會直接貼到工作中的程式碼內。不過他預設是沒有提供任何的程式片段提供使用,必須要自己手動建立並維護才行。

Member - 在開啟.as檔案撰寫class物件內容的同時,Member頁面會將該class的Method列出,提供快速索引以及查閱。

FlashAPI - Flash API是一個蠻無用的功能,分類出各項關鍵字與API提供點選後自動在編輯中的程式碼內產生,詳細的API還是要看Flash工具本身的F1說明,因此這個功能是可有可無。

Todo - Todo是一個小型備忘錄,在程式碼中如果有使用註解// Todo:的關鍵字留下紀錄時,在Todo頁面就會列出已經開啟的程式碼中,有哪些具備Todo的紀錄來快速跳到該位置繼續作業。

XML Reader - XML Reader是SEPY額外提供簡單卻非常實用的小工具,他允許你選擇一個xml檔案匯入形成一個XML node tree的結構,並且在你點選每個node或點選多個node的時候,告訴你要取得該node所需的ActionScript語法或XPath語法,當然你也可以直接打上語法測試選取的node是否跟預期相同,是一個簡單卻非常好用的小工具。不過要記得ActionScript 2.0對於XPath的支援度有限,所以雖然可以確定選到的node是對的,但不代表ActionScript有支援該XPath的語意,這是需要特別注意的。

用Flash來寫應用程式(一):工具篇

開發工具的選擇

Flash提供一套專用的程式語言ActionScript來控制Flash本身的互動,而ActionScript經由逐漸的擴充下,從原本主要著重於時間控制的簡單函式呼叫逐漸發展成物件導向語言,這對於已經具備物件導向語言基礎的程式設計師來說,在學習ActionScript之前,只要已經學過JavaScript以及物件導向開發方式的情況下,只要再去了解ActionScript所提供的Library以及ActionScript與一般程式語言不同的地方-時間軸概念的程式開發方式,就可以快速入門。
假設語言本身的學習並不複雜的同時,我們就必須要去學習開發平台的使用方式。美中不足的,Flash本身還是屬於美工為主的開發平台,因此在程式的撰寫以及程式的除錯上面,還是不如Visual Studio專業,因此在開發的過程中我們可能要透過第三方的軟體來幫忙節省語法上校正的時間以及管理程式專案來提供程式的再利用。
下列為可以撰寫ActionScript的平台,由於ActionScript除了可以存放在Flash的fla動畫檔外,還可以儲存在.as的純文字檔內。fla動畫檔的ActionScript必須透過Flash開發軟體去撰寫,但as的純文字檔則可以透過其他非官方的開發平台來撰寫。可以撰寫.as檔的軟體如下:
  1. Flash 8 - 可編輯ActionScritp 2.0
  2. Flash CS3 - 可編輯ActionScript 3.0/2.0
  3. SEPY Actioscript Editor - OpenSource開發工具。
  4. FDT - Eclipse Plugin,適合習慣使用Eclipse的程式設計師,此Plugin需購買否則只能試用30天。
  5. PrimalScript - 沒有使用過,也是需購買否則試用45天。
在一個Flash程式設計的過程中,如果以MVC架構來描述開發方式,我將透過SEPY建立程式MODEL,透過Flash內嵌的ActionScript來做Event的Control,最後經由Flash Editor做出生動的動畫提供使用者View。

ASP.NET/Flash應用程式設計概念

基本觀念

在ASP.NET/Flash 開發應用程式時,必須先確定Flash與ASP.NET彼此之運作方式。Flash於web上運作時,會將complie完成之swf檔案下載至 Client端,由Client端的Flash Player執行該swf應用程式,除非事先於Flash內用ActionScript語法設計與Server端溝通,否則Flash本身是獨立運作於 Client端,此運作方式類似Java Applet模式,Flash應用程式下載完畢之後,執行過程將只對於Client端系統產生負擔,與Server端將會有無通訊狀況的情形。與 Server無通訊狀況下,在ASP.NET環境下使用Flash應用程式時,使用Session方式儲存資訊,可能會造成Session timeout而要求使用者重新登入,因此如果長時間使用Flash來提供使用者介面,如果不需與Server端傳遞訊息下,請定期Touch Server端Reset Session,避免Session timeout的情形發生。

Flash傳遞資料的方式

再使用Flash做為前端UI給Client互動時,必須考慮到需儲存資料回傳至Server端的方式。由於Flash本身是類似離線瀏覽的方式運作且獨立執行於Client端,因此如果有資訊需要存放於Server端時,則必須透過ActionScript將資料傳遞出來。
傳遞資料回Server端的方式可以採用下列方式(當然還有其他的方法,但是我比較喜歡這三種):

  • WebService
  • JavaScript
  • Form POST/GET
其中個人最喜歡使用的方式是透過WebService的方式呼叫ASP.NET後端作處理,因為WebService的運作方式,不需要額外開啟網頁而後端 WebService也可提供給非Flash之其他網頁程式做呼叫,讓WebService成為一個獨立的ServiceProvider,對於日後修改上更為簡單便利。
而JavaScript的方是主要是可以在Client端與網頁本身互動為主,當然也可以延伸做AJAX的網頁與 Flash之間溝通,不過由於Flash本身就已經具備AJAX特性中,不重新載入整份網頁,僅讀取部分資料作畫面上變更之效果。因此 JavaScript之間的溝通反而是便利於取得HTTP參數與Cookie資訊,來讓Flash做相對應的呈現。
FORM POST/GET則是一般網頁程式最常使用的傳遞方式,在Flash的呼叫上必須注意,不要讓POST/GET讓Flash的畫面有reload的動作,否則flash當時填寫的資料將會消失,此方法可以利用一個沒有顯示的frameset或彈出視窗的方式做處理,否則必須確認flash本身允許資料的流失。
#07/19/07

Flash用於ASP.NET

今天如果我們讓Flash幫忙ASP.NET處理前端與使用者之網頁互動時,可以預期的目標是,Flash本身即具備AJAX不需要整個網頁重新整理的方式就將資料回傳給後端,個人喜歡用WebService方式去與Flash溝通。而前端交給Flash做畫面上的設計,可以降低HTML/CSS網頁的比重,而Flash本身於網頁排版是屬於Object元件,於圖層深度(Z-index)具備最高層的特性,造成其他的圖層無法高於Flash,因此如果要在Flash上跳出一些彈跳訊息,除了透過Javascript的Alert與InputBox外,建議還是由Flash內自行設計彈跳訊息就好。而 Flash本身是向量型元件,再放置於網頁上如果異動Width/Height時,會自動作比例上的調整,而不需要針對不同的解析度做設計,系統開發的網頁可以自行透過JavaScript檢測目前解析度與瀏覽器可顯示的範圍,於Flash載入時,給予適當的Width/Height,讓整個畫面與瀏覽器做適當的搭配。

橫式廣告