天才教育網(wǎng)合作機構(gòu) > 設(shè)計軟件培訓(xùn)機構(gòu) > Flash培訓(xùn)機構(gòu) >

東莞設(shè)計培訓(xùn)網(wǎng)

歡迎您!
朋友圈

400-850-8622

全國統(tǒng)一學(xué)習(xí)專線 9:00-21:00

位置:設(shè)計軟件培訓(xùn)資訊 > Flash培訓(xùn)資訊 > 體驗Flash MX(3):界面組件Components UI

體驗Flash MX(3):界面組件Components UI

日期:2021-07-01 21:16:06     瀏覽:340    來源:東莞設(shè)計培訓(xùn)網(wǎng)

  Flash 的發(fā)展促進了網(wǎng)頁技術(shù)的發(fā)展,直到發(fā)展為至今的Flash MX,Macromedia的Swf格式已經(jīng)基本成為一種新的網(wǎng)頁動畫標(biāo)準(zhǔn)。新的Flash MX加入了Properties Inspector之后,看起來更像可愛的Dreamweaver,而另一主要特色Components 的引入,Macromedia提供了我們更快捷的制作手段。

  我們今天的話題就是界面組件 Components UI,我們將通過幾個例子來看看它的特色和學(xué)習(xí)使用的步驟。

  Macromedia為我們預(yù)設(shè)了7個Components UI,它們分別模擬了網(wǎng)頁中的CheckBox、ComboBox、ListBox、PushButton、RadioButton、ScrollBar,ScrollPane(ScrollBar的圖片形式)。我們一個一個來看。(如圖1)

(圖1)

  Components的使用方法類似v5中的SmartClip(已經(jīng)進入歷史),通過封裝好的結(jié)構(gòu),只要給幾個入口參數(shù)即可達到目的。

  類似網(wǎng)頁中的Checkbox,多用于用戶按照自己的情況選擇不同的內(nèi)容。我們首先按F11打開Components庫,然后用鼠標(biāo)從其中托拽出幾個Checkbox部件,接下來你要做的只是在Properties Inspector中給入不同的參數(shù)即可,Label是修改顯示內(nèi)容,Initial Value是初始點擊狀態(tài),Label Placement是文本出現(xiàn)的位置(左右)。(如圖2)

(圖2)

  Handler是非常有用的,它可以在部件觸發(fā)事件的時候同時激活一個Handler程序,這個程序我們在主場景加入:

  function clickCheckA() {
   trace(a.getValue());
  }

  function clickCheckB() {
   trace(b.getValue());
  }

  Components UI的每個部件在運行的時候都是封裝好的MovieClip,我們也可以通過給予Instance Name來用Action 控制其屬性和方法。

  接著分別寫入Shoping和Music的Change Handler里面,加入后,在程序運行的時候,我們就會發(fā)現(xiàn),在點擊事件的同時,Handler程序也同時運行,并獲取當(dāng)前的點擊狀態(tài)。(圖3)

(圖3)

  Handler程序的目標(biāo)還可以通過setChangeHandler來改變。

  2、ComboBox:

  ComboBox也類似網(wǎng)頁中的ComboList,是當(dāng)用戶需要從中選擇單獨數(shù)據(jù)的時候使用的。從Components庫中拉出一個ComboBox,并放置到適當(dāng)位置,取名Instance為c,這次我們來看看手動加入數(shù)據(jù)和Action加入數(shù)據(jù)的不同:

  在Properties Inspector面板分別打開Label和Data,并加入如下數(shù)據(jù):

(圖4)

  選中c并按F2打開Action面板,在c的Action面板上加入Action:

  onClipEvent (load) {

  this.addItem("china",_root.a);

  this.addItem("usa",123);

  this.addItem("england",false);

  this.sortItemsBy("label","asc");

  }

  兩種方法實現(xiàn)的結(jié)果都是一樣的,但Action更靈活一些,例如動態(tài)加入數(shù)據(jù)和排序。

  3、ListBox

  ListBox和ComboBox十分的相似,而且事件和屬性很多都一樣,只是不同之處在于ComboBox是單行下拉滾動,而ListBox是平鋪滾動。(圖5)

(圖5)

  4、RadioButton:

  通常都是給出一些選擇,但是只可以選擇一個的網(wǎng)頁上總會看到的那種單選框。值得注意的是所有的RadioButton都會歸于某個Group,這個Group組在默認(rèn)狀態(tài)下是radioGroup,每個Group只可以有一個被選中,所以不同的Group也可以有不同的被選中的內(nèi)容,但是相同的Group則不可以。(圖6)

(圖6)

 5、ScrollBar:

  在Flash MX中已經(jīng)把以前經(jīng)常用到的Scroll這個屬性列為垃圾代碼之列,都是因為這個Component的出現(xiàn)導(dǎo)致。首先用Text工具建立一個Input文本區(qū),并且命名為“txt1”,也可以使用來不使文本背景透明,接著,我們放入測試文本的Action在*幀:

  txt1.text="never mind...never mind...never mind...never mind...never mind...never mind...never mind...never mind...never mind...never mind...never mind...never mind...never mind...never mind...never mind...never mind...never mind...";

  雖然有些像無用的代碼,但是只有這樣我們才可以使Scroll狀態(tài)激活。

  文本準(zhǔn)備好了之后,可以拉入一個ScrollBar到場景中,為了和文本區(qū)分的明顯,我們把它和文本間隔一些距離。放好之后只要指定Target TextField為txt1即可,接著可以運行著測試一下,會發(fā)現(xiàn)文本超出自己的*顯示長度時,ScrollBar狀態(tài)會被激活。(圖7)

(圖7)

  6、ScrollPane:

  ScrollPane是非常有創(chuàng)意的ScrollBar改進版,它雖然不支持device文本,但是支持MovieClip對象,這就意味著我們可以把圖片和Swf放入其中(我想只要有這個功能就已經(jīng)很Crazy了)

  馬上拉入一個ScrollPane到場景中,然后就利用昨天那張boy.jpg來用用,在ScrollPane的Instance的Action中寫:

  onClipEvent (load) {
   function checkLoad() {
    trace("loaded");
    this.tempObj=this.getscrollcontent();
    trace(this.tempObj._name);
   }
   this.loadScrollContent("boy.jpg","checkLoad",this);
  }

  方法loadScrollContent是讀入swf或者jpg到一個MovieClip中,讀取過程由checkLoad這個handler處理??墒沁@個MovieClip是什么呢?不可能存在的?帶著問題我們就加入了this.tempObj=this.getscrollcontent(); trace(this.tempObj._name);這兩個語句來測試一下。經(jīng)測試發(fā)現(xiàn)這個MovieClip的Instance名稱是“l(fā)oadTemp”(這個發(fā)現(xiàn)可以利用來控制讀入的swf/jpg屬性)(圖8)

圖8,今天也很多圖……)

  7、PushButton

  這個東西還是沒什么特色(也不可能有什么特色),只是一般遞交內(nèi)容的時候給一個Handler處理/糾錯一下而已。

  Components UI的StyleFormat:

  我們可以直接把它形象的叫做Flash的CSS,經(jīng)常我們要修改的風(fēng)格樣式我們可以定義為一個公用的樣式。例如把這個寫入*幀:

  globalStyleFormat.arrow = 0x088880;

  globalStyleFormat.shadow = 0x123456;

  globalStyleFormat.highlight3D = 0x333300;

  globalStyleFormat.background = 0x456789;

  globalStyleFormat.face = 0x456789;

  globalStyleFormat.textColor = 0x011001;

  globalStyleFormat.applyChanges();

  globalStyleFormat是一個對象,主要存放當(dāng)前ComponentsUI的所有樣式,我們用一些隨機數(shù)據(jù)先看看它的效果(具體的屬性請參看Help文檔),記住修改完后要用applyChanges()方法更新樣式。(圖9)

(圖9)

  我們的Random數(shù)據(jù)看上去還不錯,這證明了ComponentsUI的靈活性特別好,對于喜歡經(jīng)常更改Skin的朋友來說應(yīng)該是個福音。

  Flash MX的世界是精彩的,而更閃亮的世界就在我們的前方……

  文件下載->

  注意:

  ComboBox和ListBox實際上可以作為小型的數(shù)據(jù)庫使用(不要被用戶在屏幕上看到即可),用Label作為Id,用Data存儲所有數(shù)據(jù),并用適當(dāng)?shù)姆指舴蛛x不同字段,就可以達到數(shù)據(jù)庫的效果,如果需要,可以和遠程服務(wù)器連接,或者通過FScommand寫入硬盤。

  ComboBox和ListBox的Label不要超過400行,否則系統(tǒng)會很慢。

  ScrollPane是可以拖動內(nèi)容的,方法是只要修改DragContent為True即可。

  專家模式->普通模式:Ctrl+Shift+N,原來是Ctrl+N;

  普通模式->專家模式:Ctrl+Shift+E,原來是Ctrl+E。

如果本頁不是您要找的課程,您也可以百度查找一下: