一、涉及特性
這里主要涉及的是MovieClip.setMask()的應(yīng)用和Window組件的應(yīng)用，都是在Flash MX 2004中才出現(xiàn)的新特性。在實例的制作過程中，要先準備三個差不多大小的圖片，而且在制作中，要創(chuàng)建很多的Movie Clip，如果不想全部制作的話，可以用打開圖庫的方式打開源文件，直接用相應(yīng)的Clip就是了。
二、制作過程
1、先準備好三個差不多大小的圖片，按Ctrl + F8新建一個Movie Clip，命名為“Angel”，按Ctrl + R，在此Clip的場景中導(dǎo)入一個圖片。
2、按Ctrl + F8新建一個Movie Clip，命名為“City Scape”，按Ctrl + R，在此Clip的場景中導(dǎo)入一個圖片。
3、按Ctrl + F8新建一個Movie Clip，命名為“Garden”，按Ctrl + R，在此Clip的場景中導(dǎo)入一個圖片。
4、在TimeLine中新建一個圖層，命名為“Angel”，將圖庫中的Angel Clip放在此層中，將其命名為angel。
5、在TimeLine中新建一個圖層，命名為“Garden”，將圖庫中的Garden Clip放在此層，將其命名為garden。
6、在TimeLine中新建一個圖層，命名為“Cityscape”，將圖庫中的City Scape Clip放在此層，將其命名為city。
7、接下來制作遮照的Mask層，也有三個效果。按Ctrl + F8，新建一個Graphic，命名為“Triangle”。在該Graphic的場景中用矩形工具和線條工具繪制一個倒三角形。按Ctrl + F8，新建一個Movie Clip，命名為“One Spiral”。在該Clip的場景中用矩形工具繪制一個矩形，將圖庫中的Triangle拖四次到場景中。
8、按Ctrl + F8新建一個Movie Clip，命名為“Complex Mask”。在該Clip的場景中用圓形工具繪制一個圓。在該Clip的TimeLine中新增一個圖層，命名為“Spiral3”。將圖庫中的One Spiral拖到該層的場景中，在該層的第45幀和第85幀上面插入關(guān)鍵幀，并用旋轉(zhuǎn)工具旋轉(zhuǎn)One Spiral一定的角度。然后分別用鼠標點擊第1幀和第45幀，在幀的屬性面板上面的Tween中選擇Motion效果。同理在TimeLine中增加Spiral2和Spiral1圖層，圖層的處理跟Spiral 3 中的一樣，但要注意旋轉(zhuǎn)的角度要適當錯開，并可以利用縮放工具適當調(diào)整。此時的Complex Mask如圖2所示。
9、按Ctrl + F8新建一個Movie Clip，命名為“Circle”。在該Clip的場景中用圓形工具繪制一個圓。
10、按Ctrl + F8新建一個Movie Clip，命名為“Circles”。先在該Clip的場景中用圓形工具繪制一個圓，然后將圖庫中的Circle Clip拖到場景中，在第15幀和30幀上插入關(guān)鍵幀，并將第15幀中的Clip往偏離圓心的方向移動一定的位置。分別用鼠標點擊第1幀和第15幀，在幀的屬性面板上面的Tween中選擇Motion效果。再將圖庫中的Circle Clip拖三個到場景中，進行相同的操作。此時的Circles Clip如圖3所示。
11、按Ctrl + F8新建一個Movie Clip，命名為“Stripe”。在該Clip的場景中用矩形工具繪制幾個長方形。
12、按Ctrl + F8新建一個Movie Clip，命名為“Stripes1”。將圖庫中的Stripe Clip拖到該Clip的場景中。在圖層的第60幀和120幀上面插入關(guān)鍵幀，并調(diào)整各幀上面的Stripe Clip的位置。點擊第1幀和第60幀，在它們的幀屬性面板上面Tween中選擇Motion效果，形成一個Stripe Clip從場景外運動到場景中間的效果。
13、按Ctrl + F8新建一個Movie Clip，命名為“Stripes”。將圖庫中的Stripes1 Clip拖兩次到該Clip的場景中，適當調(diào)整其位置。
14、回到主場景中，在TimeLine中新建一個圖層，圖層命名為“Complex”，將圖庫中的Complex Mask Clip拖到場景中，將其命名為“complex”。同樣，在TimeLine中新建兩個圖層，分別命名為“Circles”和“Stripes”，將圖庫中的Circles Clip和Stripes Clip分別拖到各層的場景中，并分別命名為circles和stripes。
15、至此，三個遮照效果的原材料是準備好了，下面我們來制作控制這些效果的Clip。按Ctrl + F8新建一個Movie Clip，命名為Cpinfo，并在Link age中選定“Export for Action script”，設(shè)置Identifier為Cpinfo。在該Clip的場景中，從組件庫中拖6個Radio Button出來，分別命名為“rCity”、“rAngel”、“rGarden”、“rStripes”、“rComplex”、“rCircles”，依次設(shè)置data屬性為“city”、“angel”、“garden”、“stripes”、“complex”、“circles”，依次設(shè)置Label屬性為“Cityscape”、“Angel”、“Garden”、“Stripes”、“Complex”、“Circles”，最后將前三個Button的groupName屬性設(shè)置為“maskeeGroup”，后三個Button的groupName屬性設(shè)置為“maskGroup”。從組件庫中拖一個Check Box出來，命名為“cbDrag”，設(shè)置Label為“Drag Mask”。排列這些組件如圖4所示。
16、回到主場景中，在TimeLine中新增一個圖層，從組件庫中拖一個Window組件出來，命名為“controlPanel”，設(shè)置contentPath為“cpinfo”，Title為“Control Panel”。再從組件庫中拖一個Check Box到場景中，命名為“hideCP”，設(shè)置Label為“Show control panel”。
17、在主場景中的TimeLine上增加一個新的圖層，命名為“Actions”，在該層的第2幀上插入關(guān)鍵幀，相應(yīng)調(diào)整其他圖層的幀數(shù)。在Actions層的第1幀的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.
*/
var maskees:Array = [city, angel, garden]; //注釋1
for (var i in maskees) maskees[i]._visible = false; //注釋2
var masks:Array = [stripes, circles, complex]; //注釋3
for (var i in masks) masks[i]._visible = false; //注釋4
注釋1：定義一個數(shù)組，里面放的是三個遮照的背景。
注釋2：這里是設(shè)置三個遮的背景都為不可見。
注釋3：定義一個數(shù)組，里面放的是三個遮照的效果。
注釋4：這里是設(shè)置三個遮照的效果都為不可見。
將各種效果放在數(shù)組中來操作，是一種很值得學(xué)習(xí)的編程習(xí)慣。
18、在Actions層的第2幀的Action面板上增加下面的語句：
function handleHideControlPanel (evt) {
controlPanel._visible = !evt.target.selected;
}
hideCP.addEventListener("click", handleHideControlPanel); //注釋1
function handleMaskeeSelect (evt) {
for (var i in maskees) { //注釋2
if (maskees[i] == eval(evt.target.selectedRadio.data)) { //注釋3
currentMaskee.setMask(); //注釋4
maskees[i].setMask(currentMask); //注釋5
eval(maskees[i])._visible = true; //注釋6
currentMaskee = maskees[i]; //注釋7
} else {
eval(maskees[i])._visible = false;
}
}
}
controlPanel.content.maskeeGroup.addEventListener("click", handleMaskeeSelect); //注釋8
function handleMaskSelect (evt) {
for (var i in masks) {
if (masks[i] == eval(evt.target.selectedRadio.data)) { //注釋9
currentMaskee.setMask(masks[i]); //注釋10
eval(masks[i])._visible = true;
currentMask = masks[i];
} else {
eval(masks[i])._visible = false;
}
}
}
controlPanel.content.maskGroup.addEventListener("click", handleMaskSelect); //注釋11
function handleDragging (evt) {
if (evt.target.selected) {
this.onEnterFrame = function () { //注釋12
with (currentMask) {
_rotation += 5;
_x += (_root._xmouse - _x) * .3;
_y += (_root._ymouse - _y) * .3;
}
}
} else {
delete this.onEnterFrame;
currentMask._x = 275;
currentMask._y = 200;
}
}
controlPanel.content.cbDrag.addEventListener("click", handleDragging);
var currentMaskee:MovieClip; //注釋13
var currentMask:MovieClip;
controlPanel.content.rCity.selected = true;
city._visible = true;
controlPanel.content.rStripes.selected = true;
stripes._visible = true;
currentMaskee = city;
currentMask = stripes;
currentMaskee.setMask(currentMask);
stop();
注釋1：這里是檢查是否顯示W(wǎng)indow組件。
注釋2：對maskees數(shù)組中的每一個元素都去檢查一次，也就是所謂的遍歷了。
注釋3：檢查選中的Button的值是否與數(shù)組中的元素相匹配。
注釋4：setMask()的參數(shù)為空的話，就是清除之前的遮照效果。
注釋5：設(shè)置新的遮照背景。
注釋6：顯示新的遮照背景。
注釋7：將當前的遮照背景保存到currentMaskee，以便操作。
注釋8：這里是偵聽Window中前面三個Radio的鼠標點擊情況。
注釋9：檢查選中的Button的值是否與數(shù)組中的元素相匹配。
注釋10：設(shè)置新的遮照效果。
注釋11：這里是偵聽Window中后面三個Radio的鼠標點擊情況。
注釋12：這些代碼是設(shè)置遮照效果跟隨鼠標而運動。
注釋13：初始化，設(shè)置最初的遮照效果為City效果。
三、實際用途
本實例中的setMask()方法在制作遮照效果的時候很有用。其用法為my_mc.setMask(mask_mc)，其中my_mc是遮照的背景，mask_mc是遮照的效果（為空的話則是清除遮照效果）。
