實例四、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的遮照。從這裡也可以看出，現在可以直接在Action Script中創建遮照了。

　　註釋2：設置函數，當進入此Movie Clip幀的時候，觸發此函數。

　　註釋3：設置遮照用的box的位置跟隨鼠標移動，frame的位置也跟隨移動。

　　6、回到主場景中，將兩個Radio Button組件拖到場景中，將其中一個設置參數如下：命名為「rComponents」，data的值為「component」，「Group Name」為radioGroup，「label」為Masking with Components。將另一個設置如下：命名為「rGraphics」，data的值為「graphic」，「Group Name」為radioGroup，「label」為Masking with Graphics。

　　7、將一個Scroll Pane組件拖到場景中，將其參數設置如下：命名為「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： 定義一個函數，參數為evt。

　　　　註釋2： 定義一個變量，它的值是場景中的所選擇的radio的值。

　　　　註釋3： 如果選取的radio的值是component，則執行下面的語句。

　　　　註釋4： 將場景中的Scroll Pane的contentPath設置為「textClip」，textClip是在圖庫中的，這個是Scroll Pane的特性。

　　　　註釋5：設置Scroll Pane的滾動條為顯示。

　　　　註釋6：如果選取的radio的值是graphic，則執行下面的語句。

　　　　註釋7：將場景中的Scroll Pane的contentPath設置為「maskClip」，maskClip是在圖庫中的一個遮照效果。

　　　　註釋8：為場景中的兩個Radio添加監聽函數，當點擊的時候觸發。

　　　　註釋9：默認選擇的Radio為rComponents。

　　三、實際用途

　　本實例的用途廣泛，可以直接在Scroll Pane中放置Clip，Graphic，swf文件等等，用Action Script控制起來也比較方便。所以可以製作文本框，圖片框，也可以做Flash movie的播放框，而且是帶滾動條的喔。