網域查詢: www.
返回首頁
當前位置: 首頁 > 站長學院 > 平面設計 > Flash >

進入FlashMX組件時代之二內置組件的使用(中)

時間:2010-02-12 02:13來源: 作者: 點擊:
2.5 PushButton(推動按鈕) PushButton相對于其它內置組件來說其設置與功能相對比較簡單,但它卻與常規按鈕劃出了一道界線。在FlashMX中許多地方講求的都是事件機制,而PushButton就是將原
  

2.5 PushButton(推動按鈕)

PushButton相對于其它內置組件來說其設置與功能相對比較簡單,但它卻與常規按鈕劃出了一道界線。在FlashMX中許多地方講求的都是事件機制,而PushButton就是將原來普通按鈕的對象觸發機制封裝成了事件觸發機制。

現在我們從Components面板中拖拽一個PushButton組件到場景中,然後打開它的參數設置面板,如圖23所示。

圖23 PushButton組件的參數面板

Labels(標簽)︰PushButton顯示的提示名稱。

ChangeHandler︰執行用戶自定義的函數。該參數選項的參數為用戶定義函數的函數名。

顯然PushButton的參數設置內容比較少,而下面我們將舉一實例來分析簡單區別一下

普通按鈕與PushButton的不同,在此例中我們將自定義一個函數RotateTriangle(),利用此函數我們將控制場景中的一個三角形實體物件Triangle,我們可控制該實體旋轉角度,當角度大于等于100度時則PushButton失效,但普通按鈕卻可繼續工作。

圖24 PushButton實體場景內容

如上圖所示,如果我們要控制Triangle的旋轉角度按通常的方法一般是︰新建一個普通按鈕,然後可在按鈕的代碼操作區寫上如下代碼。

on(press){

Triangle._rotation = Triangle._rotation+10;

}

這樣我們就可以輕松的對Triangle對象進行角度旋轉控制。

然而,現在由于有了PushButton按鈕,我們就可以將控制的操作代碼移至到Frame上,

我們現在編寫一個簡單的自定義函數RotateTriangle(),其代碼如下︰

function RotateTriangle() {

Triangle._rotation = Triangle._rotation+10;

if (Triangle._rotation>=100) {

pushTriangle.setEnabled(false);

}

}

我們在控制Triangle實體對象旋轉的同時作了一個簡單的條件判斷,當Triangle的旋

轉角度大于等于100的時候我們規定PushButton將不再可以控制,即︰可用性為否。此時對于PushButton的操作只需將它的ChangeHandler參數設置為RotateTriangle即可而無需再編寫任何代碼,但倘若普通按鈕要調用此函數則需添加如下內容代碼︰

on(press){

RotateTriangle()

}

在此實例中我們函數的代碼量十分的少,控制的內容也相當的少,因而似乎沒有感覺到

普通按鈕與PushButton的區別所在。但是我們絕不能光光看到上面對PushButton的可用性進行控制的內容區別,其實普通按鈕與PushButton的區別還在于代碼編寫機制的改變,由此我們完全可以將場景中的按鈕操作代碼放置在Frame中,而用PushButton的ChangeHandler來調用,可以擺脫以往那種單個按鈕中進行操作代碼分別編寫的時代,這樣做的好處不光光是提高代碼管理能力(在按鈕控制內容相當多,按鈕控制代碼相當多的情況十更顯有效)而且對于提高影片執行效率也相當有益處。

2.6 ScrollBar(滾動條)

應該說ScrollBar組件是應用最為廣泛的組件,我們只需在場景中放置動態文本框,然

後將ScrollBar組件拖拽到場景中並將它粘縛在相應的動態文本框上,再利用LoadVariables或是其它的方法將文本內容導入到該文本框內就可以利用ScrollBar直接控制文本的滾動顯示了,相對于Flash4與Flash5的歷史,我們再也無需自己編寫那麼多繁重的代碼內容,類似的操作已顯得這般的輕松與簡單。

現在我們從Components面板中拖拽一個ScrollBar組件到場景中,然後打開它的參數設置面板,如圖25所示。

圖25 ScrollBar組件的參數面板

Target TextField(文件對象)︰粘縛的文本對象在場景中的實體名稱。

Horizontal(水平)︰判斷滾動條的狀態是水平或是垂直狀態。False︰滾動條為垂直狀態;True︰滾動條為水平狀態。

下面我們會將一段文本信息載入到場景中的動態文本內,然後直接利用ScrollBar控制

文本框內的文本進行上下滾動顯示。

首先放置一個動態文本框,將實體名稱命名為ScrollBarDemo,並將文本顯示設置為Multiline(多行顯示),如下圖26所示︰

圖26 場景中的動態文本框及ScrollBar組件

然後從Components中拖拽ScrollBar組件到文本框上,此時我們需選中Snap to Ojbect

選項則ScrollBar會自動粘縛到文本上,ScrollBar的Paramters中的Target TextField會自動切變為文本框在場景中的實體名稱,此處為ScrollBarDemo。

然後我們在場景中新建一個ActionScript層,並在關鍵幀中輸入如下的代碼內容︰

//-----------------------------------------------------------------------------

//函 數 名:loadTextMX();

//功 能︰文本的導入

//所需技術︰xml,load,onLoad,htmlText

//所需參數︰url,textbox

//適用版本︰FlashMX

System.useCodepage = true;

//自定義函數loadTextMX,loadTextMX將文本解析為XML格式並支持文本Html的顯示

movieclip.prototype.loadTextMX = function(url, textbox) {

loadVarsText = new XML();

loadVarsText.load(url);

loadVarsText.onLoad = function(success) {

if (success) {

textbox.html = true;

textbox.htmlText = this;

} else {

textbox.html = true;

textbox.htmlText = "< br>< font color=\"#ff0000\">提示︰未找到相應文件!< /font >";

}

};

};

//利用自定義函數將ScrollBarDemo.txt文本內容載入到ScrollBarDemo文本框內

loadTextMx("ScrollBarDemo.txt", ScrollBarDemo);

本例的測試結果如圖27所示,我們可以看到ScrollBar已經綁定了文本框,我們可以拖動滾動條來對文本進行翻動控制,而文本框內的“PushButton”字樣則以Html標準紅色顯示。

圖27 ScrollBar實例成品樣式

2.7 ScrollPane(滾動面板)

FlashMX在諸多方面較之Flash5都有了重大的突破,而對于圖片的載入則是這些突破中非常顯著的一點,而在此我們還可以利用ScrollPane組件對動態載入的圖片進行顯示操作,我們不僅可以利用上下左右滾動對ScrollPane中圖片進行區域顯示,還可以用鼠標直接拖動ScrollPane中的圖片來進行局部內容顯示。

現在我們從Components面板中拖拽一個ScrollPane組件到場景中,然後打開它的參數設置面板,如圖28所示。

圖28 ScrollPane組件的參數面板

Scroll Content(滾動對象)︰鏈接一個Lirbary庫中的MC對象到ScrollPane中進行顯示,而此處的Scroll Content內容則是被綁定對象的Linkage的名稱。

Horizontal Scroll︰水平滾動條。Auto︰自動判斷是否需要水平滾動條;Ture︰顯示水平滾動條;False︰不顯示水平滾動條。

Vertical Scroll︰垂直滾動條。Auto︰自動判斷是否需要垂直滾動條;Ture︰顯示垂直滾動條;False︰不顯示垂直滾動條。

Drag Content︰是否可以手動拖動ScrollPane中的內容。True︰支持手動拖動;False︰不允許手動拖動。

下面我們將介紹兩個實例來分析一下ScrollPane的實際應用,實例一將利用Scroll
Content來綁定一個MC並在ScrollPane中顯示,而實例二將利用簡單的Action代碼動態載入外部的Jpg圖形並在ScrollPane中顯示。

ScrollPane實例一︰

首先我們按下Ctrl+R導入一個外部圖形到實例的Library中,並新建一個MovieClip將此圖形放置于內,如下圖29所示︰

圖29 導入的外部圖形及新建的MovieClip

我們右鍵點擊exampleMC(MovieClip),然後選中Linkage,在彈出的對話框內將Identifiy的內容填寫為exampleMC。

然後我們再次返回ScrollPane的參數設置面板,將Scroll Content的內容設置為exampleMC,Horizontal Scroll 、Vertical Scroll設置為True,Drag Content設置為否,則該實例的成品樣式如下圖30所示,我們將鼠標移動至ScrollPane中則無法拖動查看ScrollPane中內容。

圖30 ScrollPane實例1成品樣式

ScrollPane實例二︰

我們仍舊新建一個ScrollPane組件,將它拖放至主場景內,並灌以實體名為ScrollPaneDemo,然後我們需確認在該實例的相同目錄下有example.jpg此圖形,接下來我們再新建一個ActionScript層並在此關鍵幀中輸入如下代碼︰

//用with來操作場景下名稱為ScrollPaneDemo的ScrollPane組件

//用loadScrollContent將example.jpg從外部載入到ScrollPane中

//設置水平、垂直滾動條為不可見,但支持鼠標拖放顯示ScrollPane中的內容

with (ScrollPaneDemo) {

loadScrollContent("example.jpg");

setDragContent(true);

setHScroll(false);

setVScroll(false);

}

簡單幾行代碼就完成了此實例的全部操作,具體成品如下圖31所示,鼠標在圖片顯示區域內顯示為手的形狀,我們可以用“手”來播放顯示example.jpg圖形。

0 圖31 ScrollPane實例2成品樣式(出處︰pConline)
頂一下
(0)
0%
踩一下
(0)
0%
------分隔線----------------------------
最新評論 查看所有評論
發表評論 查看所有評論
請自覺遵守互聯網相關的政策法規,嚴禁發佈色情、暴力、反動的言論。
評價:
表情:
用戶名: 密碼: 驗證碼:
推薦內容