Flash MX 2004新特性執行個體學習三

來源:互聯網
上載者:User

    執行個體四、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的播放框,而且是帶捲軸的喔。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。