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