實例四、Device Font Masking
一、涉及特性
本實例主要涉及遮照效果的制作和Scroll Pane組件的利用，都是一些有趣的特性，跟之前在Flash MX中的制作思路有比較大的不同。初初一看，文本內容都在圖庫當中，但讓人迷惑的是在場景中會顯示文本的內容。這就涉及到Scroll Pane組件的屬性了。
二、制作過程
1、按“Ctrl + F8”新建一個Clip，命名為“textClip”，類型為Movie Clip，選取“Export for Action Script”（這個就是文本內容不在場景中，但可以顯示在場景中的秘密了），在Identifier中輸入“textClip”。在此Clip的場景中用文本工具輸入比較多的文本，以便在最后結果中可以明顯地看到效果。
2、按“Ctrl + F8”新建一個Clip，命名為“Frame”，類型為Movie Clip，用矩形工具繪制一個正方形邊框。
3、按“Ctrl + F8”新建一個Clip，命名為“mask”，類型為Movie Clip，用矩形工具繪制一個與第二步中的大小差不多的正方形邊框，并用填充工具填充為黑色。
4、按“Ctrl + F8”新建一個Clip，命名為“maskClip”，類型為Movie Clip，選取“Export for Action Script”，在Identifier中輸入“maskClip”。
5、在maskClip中，在Time Line中新建一個層，命名為“mask”，將圖庫中的Frame 拖到此層中，在屬性面板上命名為“box”。在“mask”層上面再建一個層，命名為“frame”，將圖庫中的mask拖到此層，在屬性面板上命名為“frame”。在“frame”層上面再建一個層，命名為“actions”，在它的action面板上添加下面的語句：
textClip.setMask(box); // 注釋1
this.onEnterFrame = function () { // 注釋2
box._x = _root._xmouse - this._parent._x; // 注釋3
box._y = _root._ymouse - this._parent._y;
frame._x = _root._xmouse - this._parent._x;
frame._y = _root._ymouse - this._parent._y;
}
注釋1：將在場景中的box Clip設置為textClip的遮照。從這里也可以看出，現(xiàn)在可以直接在Action Script中創(chuàng)建遮照了。
注釋2：設置函數(shù)，當進入此Movie Clip幀的時候，觸發(fā)此函數(shù)。
注釋3：設置遮照用的box的位置跟隨鼠標移動，frame的位置也跟隨移動。
6、回到主場景中，將兩個Radio Button組件拖到場景中，將其中一個設置參數(shù)如下：命名為“rComponents”，data的值為“component”，“Group Name”為radioGroup，“l(fā)abel”為Masking with Components。將另一個設置如下：命名為“rGraphics”，data的值為“graphic”，“Group Name”為radioGroup，“l(fā)abel”為Masking with Graphics。
7、將一個Scroll Pane組件拖到場景中，將其參數(shù)設置如下：命名為“spMasking”，contentPath為“textClip”，hLineScrollSize為5，hPageScrollSize為20，hScrollPolicy為auto。ScrollDarg為false，vLineScrollSize為5，vPageScrollSize為20，vScrollPolicy為auto。
8、在Time Line中新建一個層，命名為“action”，在它的Action面板上增加下面的語句：
/* Copyright 2003 Macromedia, Inc. All rights reserved.
The following is Sample Code and is subject to all restrictions
on such code as contained in the End User License Agreement
accompanying this product.
*/
function switchExample (evt) { //注釋1
var choice = evt.target.selectedRadio.data; //注釋2
if (choice == "component") { //注釋3
spMasking.contentPath = "textClip"; //注釋4
spMasking.hScrollPolicy = "on"; //注釋5
spMasking.vScrollPolicy = "on";
} else if (choice == "graphic") { //注釋6
spMasking.contentPath = "maskClip"; //注釋7
spMasking.hScrollPolicy = "off";
spMasking.vScrollPolicy = "off";
}
}
radioGroup.addEventListener("click", switchExample); //注釋8
rComponents.selected = true; //注釋9
來解釋一下上面的代碼：
注釋1： 定義一個函數(shù)，參數(shù)為evt。
注釋2： 定義一個變量，它的值是場景中的所選擇的radio的值。
注釋3： 如果選取的radio的值是component，則執(zhí)行下面的語句。
注釋4： 將場景中的Scroll Pane的contentPath設置為“textClip”，textClip是在圖庫中的，這個是Scroll Pane的特性。
注釋5：設置Scroll Pane的滾動條為顯示。
注釋6：如果選取的radio的值是graphic，則執(zhí)行下面的語句。
注釋7：將場景中的Scroll Pane的contentPath設置為“maskClip”，maskClip是在圖庫中的一個遮照效果。
注釋8：為場景中的兩個Radio添加監(jiān)聽函數(shù)，當點擊的時候觸發(fā)。
注釋9：默認選擇的Radio為rComponents。
三、實際用途
本實例的用途廣泛，可以直接在Scroll Pane中放置Clip，Graphic，swf文件等等，用Action Script控制起來也比較方便。所以可以制作文本框，圖片框，也可以做Flash movie的播放框，而且是帶滾動條的喔。
