用Flash cs3與flex 3讓程序員與設計師分工協作以實現編碼與設計分離的一種方法;

思路:Flash專注於UI設計,Flex實現AS腳本編寫;

方法:Flash裏建立項目,組件界面設計在Flash完成,並且賦予唯一ID,組件關聯到唯一的AS類文件;主場景也關聯到一個AS類,用來進行整個場景的控制;所有的AS類文件存放到一個Package裏(對應於一個目錄);

Flex建立項目,項目裏新建一個鏈接類型的目錄,這個目錄鏈接到Flash項目的Package目錄,這樣就可以直接在Flex打開As文件進行編碼工作了;

思考:這仍舊是種折衷的辦法,Flex裏導入的仍舊是flash.*組件,Flex很多mx.controls.*沒用到,Flex是否可以找到完全替代Flash的方法?

下面有一篇基於這種思路的文章,轉載過來和大家分享:

--------------------------------

用Flash cs3與flex 3讓程序員與設計師分工協作以實現編碼與設計分離

實現編碼與設計的好處是顯而易見的:

一,代碼易於維護與二次開發。所有AS代碼以面向對象的思想在flash外部組織,用notepad即能打開。比起傳統的as2分散於frame之間,以及更早的分散於影片與按紐之上,其優點好處不言而喻。

二,設計獨立於代碼之外。可以在沒有程序員的清況下,修改程序(系統) 的外觀,亦可以新做一批theme;程序沒有變,只是改改圖片和排列位置,大小等,就可以迅速煥然一新。譬如,在春節時,加一些春節的時令元素進去,這將是一件很容易做的事情。

本實例演示如何讓AS程序員與設計師使用Flex與flash協作開發,理想狀態下,設計師只做設計,AS程序員只寫代碼,彼此修改自己的工作內容並不會影響對方或影響極低。在這個demo中,我們在flash文件中看不到一行ActionScript代碼。
軟件要求:Flash cs3 professional, Flex Builder 3 Professional

flex3與flashcs3協作開發之足球場demo.swf

flex3與flashcs3協作開發之足球場demo-flash-source-code

flex3與flashcs3協作開發之足球場demo-flex-source-code 

繼續閱讀以下內容請先下載源碼。

打開flash文件,點擊空白區域,可以在屬性面板中看到文檔類已經指向了 com.pmggroup.ebiz.footballField.DocumentClass。在flash文件中,有兩個影片剪輯實例: oneBall與txtBtn。這兩個剪輯的名稱需要在flash文件的屬性面板中定義,而不能在文檔類中定義,在DocumentClass有以下描述:

//不能這樣定義:
//public var oneBall : Ball;
//public var txtBtn : TextButton;

當點擊 txtBtn時,我們要改變足球的ToolTip,這個邏輯是在文檔類中添加的。代碼如下:

txtBtn.addEventListener(
MouseEvent.CLICK,
function(event : MouseEvent) : void {
trace(”try change tooltip outside.”);
footField.oneBall.toolTip = “modify football outside.”;
}
);

txtBtn並沒有在文檔類中定義,它是在flash文件中指定的。這便是對flash設計的第一個要求,所有非靜態的,有行爲的影片剪輯都要有一個英文名稱。這條原則不單適應於主場景中,同樣適用於影片剪輯中,打開庫面板,footBallField是一個足球影片剪輯,它這個剪輯中,有一個 footBallProxy的實例,名爲oneBall。

當拖動demo中的足球時,足球即滾動,釋放鼠標時滾動停止。關於這個滾動的動畫,它是單獨在football元件時定義,它極其簡單,只是在30 frame之內原地轉動一圈。這便是對flash設計的第二個要求:影片剪輯設計要簡單,一個影片剪輯只做一件事情或一組相關的事情。在一個影片剪輯的時間軸內只定義一個對象的動畫,如果這個影片剪輯行爲複雜,就把它分成幾個小的影片剪輯,如footBallProxy。

flash文件中有一個textButton,這個元件的類綁定在 com.pmggroup.ebiz.footballField.TextButton.demo中有它,旨在說明對於按紐,要繼承自 SimpleButton。在開發中,提倡所有元件都是MovieClip,均要繼承自UIMovieClip。繼承自UIMovieClip的用意在於可以在Flex中使用。

在footBallProxy這個元件中,有一個動態文本,動態文本對應的類是flash.text.TextField。這個元件添加一個動態文本框,旨在提醒程序員注意,如果在flash元件中使用了flash本身提供的組件,一定要在其元件的類中引入它。查看footBallProxy的綁定類com.pmggroup.ebiz.footballField.FootBallProxy中,有如下代碼:

import flash.text.TextField;

查看flex的源碼,裏面沒有任何內容,只有一個對flash文件所在目錄的引用。這個project的作用,僅在於用flex編寫actionscript。用flash編碼太不方便了,用flex可以顯著提高開發效率。由於是用flex編碼,對於沒有用到的引用,如

flash.text.TextField,在智能感知作用下,flex會將它自動清除,造成flash編譯時出現如下錯誤:
1046: 找不到類型,或者它不是編譯時常數: TextField。

錯誤顯示代碼行爲0,這個錯誤提示對程序員調試沒有任何意義。

總結一下,編碼與設計分離對設計師和程序員的要求:

一,對於設計師,在主場景中和複雜的影片剪輯中,所有非靜態的,有行爲的影片剪輯都要有一個英文名稱。

二, 對於設計師,一個影片剪輯只做一件事情或一組相關的事情。

三,對於程序員,用文檔類綁定flash主場景,自定義類綁定flash中有行爲的影片剪輯。

編碼與設計完全分離是一個理想狀態,它要求程序員對面向對象開發的思想有深入的瞭解;同時也要求設計師洞悉協作開發的原理 ,並具有把複雜的影片剪輯化繁爲簡,化整爲零的能力。 需要設計師與程序員有一個磨合的進程,彼此都瞭解對方的開發習慣之後,協作會更加容易些。

程序員未必要做出精美的創意和設計,但卻要可以拿出一個框架來。設計師未必要會編寫AS代碼,但也要了解程序員的用意。程序員在這裏的角色,不單是actionscript programmer,更多的是一個前端分析架構師的角色。

 

在這裏查看原始版本:http://blog.sban.com.cn/2008/03/20/flex3-flash-cs3-work-together-code-design-separate.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章