實(shí)例四、Device Font Masking
一、涉及特性
本實(shí)例主要涉及遮照效果的制作和Scroll Pane組件的利用，都是一些有趣的特性，跟之前在Flash MX中的制作思路有比較大的不同。初初一看，文本內(nèi)容都在圖庫當(dāng)中，但讓人迷惑的是在場(chǎng)景中會(huì)顯示文本的內(nèi)容。這就涉及到Scroll Pane組件的屬性了。
二、制作過程
1、按“Ctrl + F8”新建一個(gè)Clip，命名為“textClip”，類型為Movie Clip，選取“Export for Action Script”（這個(gè)就是文本內(nèi)容不在場(chǎng)景中，但可以顯示在場(chǎng)景中的秘密了），在Identifier中輸入“textClip”。在此Clip的場(chǎng)景中用文本工具輸入比較多的文本，以便在最后結(jié)果中可以明顯地看到效果。
2、按“Ctrl + F8”新建一個(gè)Clip，命名為“Frame”，類型為Movie Clip，用矩形工具繪制一個(gè)正方形邊框。
3、按“Ctrl + F8”新建一個(gè)Clip，命名為“mask”，類型為Movie Clip，用矩形工具繪制一個(gè)與第二步中的大小差不多的正方形邊框，并用填充工具填充為黑色。
4、按“Ctrl + F8”新建一個(gè)Clip，命名為“maskClip”，類型為Movie Clip，選取“Export for Action Script”，在Identifier中輸入“maskClip”。
5、在maskClip中，在Time Line中新建一個(gè)層，命名為“mask”，將圖庫中的Frame 拖到此層中，在屬性面板上命名為“box”。在“mask”層上面再建一個(gè)層，命名為“frame”，將圖庫中的mask拖到此層，在屬性面板上命名為“frame”。在“frame”層上面再建一個(gè)層，命名為“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：將在場(chǎng)景中的box Clip設(shè)置為textClip的遮照。從這里也可以看出，現(xiàn)在可以直接在Action Script中創(chuàng)建遮照了。
注釋2：設(shè)置函數(shù)，當(dāng)進(jìn)入此Movie Clip幀的時(shí)候，觸發(fā)此函數(shù)。
注釋3：設(shè)置遮照用的box的位置跟隨鼠標(biāo)移動(dòng)，frame的位置也跟隨移動(dòng)。
6、回到主場(chǎng)景中，將兩個(gè)Radio Button組件拖到場(chǎng)景中，將其中一個(gè)設(shè)置參數(shù)如下：命名為“rComponents”，data的值為“component”，“Group Name”為radioGroup，“l(fā)abel”為Masking with Components。將另一個(gè)設(shè)置如下：命名為“rGraphics”，data的值為“graphic”，“Group Name”為radioGroup，“l(fā)abel”為Masking with Graphics。
7、將一個(gè)Scroll Pane組件拖到場(chǎng)景中，將其參數(shù)設(shè)置如下：命名為“spMasking”，contentPath為“textClip”，hLineScrollSize為5，hPageScrollSize為20，hScrollPolicy為auto。ScrollDarg為false，vLineScrollSize為5，vPageScrollSize為20，vScrollPolicy為auto。
8、在Time Line中新建一個(gè)層，命名為“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： 定義一個(gè)函數(shù)，參數(shù)為evt。
注釋2： 定義一個(gè)變量，它的值是場(chǎng)景中的所選擇的radio的值。
注釋3： 如果選取的radio的值是component，則執(zhí)行下面的語句。
注釋4： 將場(chǎng)景中的Scroll Pane的contentPath設(shè)置為“textClip”，textClip是在圖庫中的，這個(gè)是Scroll Pane的特性。
注釋5：設(shè)置Scroll Pane的滾動(dòng)條為顯示。
注釋6：如果選取的radio的值是graphic，則執(zhí)行下面的語句。
注釋7：將場(chǎng)景中的Scroll Pane的contentPath設(shè)置為“maskClip”，maskClip是在圖庫中的一個(gè)遮照效果。
注釋8：為場(chǎng)景中的兩個(gè)Radio添加監(jiān)聽函數(shù)，當(dāng)點(diǎn)擊的時(shí)候觸發(fā)。
注釋9：默認(rèn)選擇的Radio為rComponents。
三、實(shí)際用途
本實(shí)例的用途廣泛，可以直接在Scroll Pane中放置Clip，Graphic，swf文件等等，用Action Script控制起來也比較方便。所以可以制作文本框，圖片框，也可以做Flash movie的播放框，而且是帶滾動(dòng)條的喔。
