FLASH跟隨鼠標(biāo)的旋轉(zhuǎn)星星
若水221147由 分享
時(shí)間：
第一步：
打開FLASH，新建一個(gè)影片剪輯元件，命名為“星星”，在里面繪制一個(gè)星星出來，并且把它的中心點(diǎn)和舞臺(tái)注冊(cè)點(diǎn)對(duì)齊，在第20幀和第40處各插入一個(gè)關(guān)鍵幀。選中第20幀，在它的中心點(diǎn)和舞臺(tái)的注冊(cè)點(diǎn)對(duì)齊的情況下按住SHIFT鍵進(jìn)行等比例縮?。阏J(rèn)為差不多就行了），然后選中第1到20幀的任意一幀創(chuàng)建補(bǔ)間動(dòng)畫，打開屬性面板把它的轉(zhuǎn)調(diào)成逆時(shí)針，選中第20到40幀的任意一幀創(chuàng)建補(bǔ)間動(dòng)畫，打開屬性面板把它的轉(zhuǎn)調(diào)成順時(shí)針。
第二步：
在新建一個(gè)影片剪輯元件，命名為“轉(zhuǎn)圈的星星”，在圖層面板的地方找到“添加運(yùn)動(dòng)引導(dǎo)層”添加一個(gè)引導(dǎo)層出來，在選中該圖層的情況下按住AIT+SHIFT鍵在舞臺(tái)上繪制一個(gè)有邊框無填充色的圓（大小你認(rèn)為合適就OK），然后用鼠標(biāo)圈住它的一點(diǎn)邊選中后刪除（這樣做是給它一缺口），選中繪制好的圓，把它的左和上對(duì)齊舞臺(tái)中心的注冊(cè)點(diǎn)，選中第40幀處添加一個(gè)幀，鎖定該圖層，選擇第一個(gè)圖層把我們庫中的星星拖進(jìn)來并把它的中心點(diǎn)對(duì)齊引導(dǎo)層中圓的上邊的那個(gè)缺口的地方，選中第四十幀插入一個(gè)關(guān)鍵幀把它的中心點(diǎn)對(duì)齊引導(dǎo)層中圓的下邊的那個(gè)缺口的地方?；氐轿枧_(tái)，把庫中轉(zhuǎn)圈的星星放到舞臺(tái)任意位置，并給它一個(gè)實(shí)例名稱mc。
第三步：
繼續(xù)插入一個(gè)影片剪輯元件，命名為“as"，選中第一幀添加以下代碼：
var k:Number=64;//用來定義星星的個(gè)數(shù)；
var n:Number=16;//用來定義一圈星星的個(gè)數(shù)；
var r:Number=2;X坐標(biāo)和Y坐標(biāo)的緩動(dòng)，值越大跟隨鼠標(biāo)移動(dòng)時(shí)就越慢；
for(var i=1;i<=k;i++){
duplicateMovieClip("_root.mc","mc"+i,i);
setProperty("_root.mc"+i,_rotation,360/n*i);
setProperty("_root.mc"+i,_alpha,100/k*i);
}
setProperty(_root.mc,_visible,0);
選中第二幀處插入一個(gè)空白關(guān)鍵幀添加以下代碼：
for(var j=1;j<=k;j++){
setProperty("_root.mc"+j,_x,_root["mc"+j]._x+(_root["mc"+(j-1)]._x-_root["mc"+j]._x)/r);
setProperty("_root.mc"+j,_y,_root["mc"+j]._y+(_root["mc"+(j-1)]._y-_root["mc"+j]._y)/r);
}
選中第三幀處插入一個(gè)空白關(guān)鍵幀添加以下代碼：
gotoAndPlay(2);
添加完代碼以后回到主場(chǎng)景；
第四步：
把庫中名為as的元件拖放到舞臺(tái)上，給它一個(gè)實(shí)例名稱mc0.在主場(chǎng)景內(nèi)添加一個(gè)圖層在第一幀加上拖動(dòng)代碼：
startDrag("_root.mc0",true);
注意這里是mc0不是mc，雖然你拖動(dòng)的影片里面沒有東西,在下面我后細(xì)說的；
做到現(xiàn)在就算完工了，我在這里就把重點(diǎn)的地方說一下。N為什么是它的一圈星星的個(gè)數(shù)
在第一個(gè)for循環(huán)語句里有這樣一段，
setProperty("_root.mc"+i,_rotation,360/n*i);
看它的_rotation的值是360/n*i
也就是"_root.mc"+i,_rotation=360/16*i
也就是
_root.mc1._rotation=360/16*1
_root.mc2._rotation=360/16*2
_root.mc3._rotation=360/16*3
_root.mc4._rotation=360/16*4
_root.mc5._rotation=360/16*5
_root.mc6._rotation=360/16*6
_root.mc7._rotation=360/16*7
_root.mc8._rotation=360/16*8
_root.mc9._rotation=360/16*9
_root.mc10._rotation=360/16*10
.............._root.mc64._rotation=360/16*64
也就是說把360度平均分成16份，它們的角度就是這個(gè)值，360/16=22.5。
第一個(gè)MC的角度是從原MC角度22.5的地方開始復(fù)制出來的，第二個(gè)MC的角度是從原MC角度45的地方開始復(fù)制出來的，第三個(gè)MC的角度是從原MC角度67.5的地方開始復(fù)制出來的，直到乘到17的時(shí)候就重疊了，因?yàn)?60/16*6=382.5，角最大值是360，當(dāng)?shù)?82.5的時(shí)候它就把360看成0來計(jì)算了，結(jié)果就是22.5，當(dāng)你把N的值調(diào)大的時(shí)候，比如36它就會(huì)有36個(gè)星星圍成一圈了，360/36*i 也就是mc1角度是10*1，mc2的角度是10*2 ，mc3的角度是10*3 當(dāng)乘到37的時(shí)候它的角度多了10也就是370，第37個(gè)MC的角度會(huì)是原MC角度的370-360也就是10，這就是N的值等于一圈星星的原因。
我們?cè)谥鲌?chǎng)景第一幀里放的代碼明明是拖動(dòng)的MC0，為什么MC復(fù)制出來的影片會(huì)跟著鼠標(biāo)走，把在AS第二幀設(shè)置X、Y坐標(biāo)的循環(huán)代碼拿下來分析一下：
for(var j=1;j<=k;j++){
setProperty("_root.mc"+j,_x,_root["mc"+j]._x+(_root["mc"+(j-1)]._x-_root["mc"+j]._x)/2);
setProperty("_root.mc"+j,_y,_root["mc"+j]._y+(_root["mc"+(j-1)]._y-_root["mc"+j]._y)/2);
}
看它的X坐標(biāo)，
setProperty("_root.mc"+j,_x,_root["mc"+j]._x+(_root["mc"+(j-1)]._x-_root["mc"+j]._x)/2);
setProperty這句話是說設(shè)置括號(hào)內(nèi)（目標(biāo)，目標(biāo)的屬性，該屬性的值）；
我們現(xiàn)在的目標(biāo)就是主場(chǎng)景上面的mc1,mc2,mc3,mc4,mc5......mc64;
它們的X坐標(biāo)值各是多少，為什么會(huì)跟隨鼠標(biāo)移動(dòng)，我們來仔細(xì)地看下它們的值
_root.mc+i._x_root["mc"+j]._x+(_root["mc"+(j-1)]._x-_root["mc"+j]._x)/2
也就是
mc1._x=mc1._x+(mc+(j-1)._x-mc1._x)/2
假設(shè)mc1現(xiàn)在的坐標(biāo)是300
也就是mc1._x=300+(mc+(j-1)._x-300)/2
現(xiàn)在我們已經(jīng)得到兩個(gè)數(shù)字了，還有一個(gè)mc+(j-1)._x，先算括號(hào)內(nèi)，j-1第一次運(yùn)行循環(huán)的時(shí)候j的值是1，就是1-1,也就是0;也就是mc+0，也就是mc0，也就是我們拖動(dòng)的那個(gè)沒有東西的影片剪輯。mc0是跟著我們的鼠標(biāo)動(dòng)的，上面搞清楚后，我們就在給mc0也就是我們鼠標(biāo)的坐標(biāo)假設(shè)一個(gè)值。隨便設(shè)定一個(gè)我們就假設(shè)100吧，值有了我們?cè)诮又鏊阈g(shù)。
mc1._x=300+(100-300)/2
也就是
mc1._x=300+負(fù)200/2
也就是
mc1._x=300+負(fù)100 //注意下負(fù)值是越乘負(fù)的越多，越除負(fù)的越少，加減相反
也就是
mc1._x=200;
當(dāng)計(jì)算機(jī)運(yùn)行到這里時(shí)，mc1的坐標(biāo)是200了，但200還不符合我們所看到的效果，我們運(yùn)行的時(shí)候是它的坐標(biāo)是跟著鼠標(biāo)走的，那么程序會(huì)接著往下走，它就會(huì)執(zhí)行設(shè)定MC2的坐標(biāo)了，MC2的坐標(biāo)會(huì)是250，接著是MC3的坐標(biāo)是275，總之是越往下它們坐標(biāo)的間隔就會(huì)越小，你自己可以測(cè)試下看。
當(dāng)循環(huán)完64次以后程序跳出循環(huán)了，那么就會(huì)TOGO到下一幀，執(zhí)行g(shù)otoAndPlay(2);
又回來了，接著又是循環(huán)64次，代碼還是相同的代碼，不一樣的是這次的坐標(biāo)都是已經(jīng)設(shè)置過的了，我們?cè)诳匆幌翸C1現(xiàn)在的坐標(biāo)是多少了,上次設(shè)置過后是200,那么現(xiàn)在是
mc1._x=200+(100-200)/2
也就是
150
這個(gè)坐標(biāo)值會(huì)離鼠標(biāo)越來越近的，直到和鼠標(biāo)的坐標(biāo)一樣，那么相同后面的MC也一樣會(huì)近，直到它們的坐標(biāo)和鼠標(biāo)相等為止，而且它們的坐標(biāo)永遠(yuǎn)也不會(huì)小于鼠標(biāo)的坐標(biāo)。
打開FLASH，新建一個(gè)影片剪輯元件，命名為“星星”，在里面繪制一個(gè)星星出來，并且把它的中心點(diǎn)和舞臺(tái)注冊(cè)點(diǎn)對(duì)齊，在第20幀和第40處各插入一個(gè)關(guān)鍵幀。選中第20幀，在它的中心點(diǎn)和舞臺(tái)的注冊(cè)點(diǎn)對(duì)齊的情況下按住SHIFT鍵進(jìn)行等比例縮?。阏J(rèn)為差不多就行了），然后選中第1到20幀的任意一幀創(chuàng)建補(bǔ)間動(dòng)畫，打開屬性面板把它的轉(zhuǎn)調(diào)成逆時(shí)針，選中第20到40幀的任意一幀創(chuàng)建補(bǔ)間動(dòng)畫，打開屬性面板把它的轉(zhuǎn)調(diào)成順時(shí)針。
第二步：
在新建一個(gè)影片剪輯元件，命名為“轉(zhuǎn)圈的星星”，在圖層面板的地方找到“添加運(yùn)動(dòng)引導(dǎo)層”添加一個(gè)引導(dǎo)層出來，在選中該圖層的情況下按住AIT+SHIFT鍵在舞臺(tái)上繪制一個(gè)有邊框無填充色的圓（大小你認(rèn)為合適就OK），然后用鼠標(biāo)圈住它的一點(diǎn)邊選中后刪除（這樣做是給它一缺口），選中繪制好的圓，把它的左和上對(duì)齊舞臺(tái)中心的注冊(cè)點(diǎn)，選中第40幀處添加一個(gè)幀，鎖定該圖層，選擇第一個(gè)圖層把我們庫中的星星拖進(jìn)來并把它的中心點(diǎn)對(duì)齊引導(dǎo)層中圓的上邊的那個(gè)缺口的地方，選中第四十幀插入一個(gè)關(guān)鍵幀把它的中心點(diǎn)對(duì)齊引導(dǎo)層中圓的下邊的那個(gè)缺口的地方?；氐轿枧_(tái)，把庫中轉(zhuǎn)圈的星星放到舞臺(tái)任意位置，并給它一個(gè)實(shí)例名稱mc。
第三步：
繼續(xù)插入一個(gè)影片剪輯元件，命名為“as"，選中第一幀添加以下代碼：
var k:Number=64;//用來定義星星的個(gè)數(shù)；
var n:Number=16;//用來定義一圈星星的個(gè)數(shù)；
var r:Number=2;X坐標(biāo)和Y坐標(biāo)的緩動(dòng)，值越大跟隨鼠標(biāo)移動(dòng)時(shí)就越慢；
for(var i=1;i<=k;i++){
duplicateMovieClip("_root.mc","mc"+i,i);
setProperty("_root.mc"+i,_rotation,360/n*i);
setProperty("_root.mc"+i,_alpha,100/k*i);
}
setProperty(_root.mc,_visible,0);
選中第二幀處插入一個(gè)空白關(guān)鍵幀添加以下代碼：
for(var j=1;j<=k;j++){
setProperty("_root.mc"+j,_x,_root["mc"+j]._x+(_root["mc"+(j-1)]._x-_root["mc"+j]._x)/r);
setProperty("_root.mc"+j,_y,_root["mc"+j]._y+(_root["mc"+(j-1)]._y-_root["mc"+j]._y)/r);
}
選中第三幀處插入一個(gè)空白關(guān)鍵幀添加以下代碼：
gotoAndPlay(2);
添加完代碼以后回到主場(chǎng)景；
第四步：
把庫中名為as的元件拖放到舞臺(tái)上，給它一個(gè)實(shí)例名稱mc0.在主場(chǎng)景內(nèi)添加一個(gè)圖層在第一幀加上拖動(dòng)代碼：
startDrag("_root.mc0",true);
注意這里是mc0不是mc，雖然你拖動(dòng)的影片里面沒有東西,在下面我后細(xì)說的；
做到現(xiàn)在就算完工了，我在這里就把重點(diǎn)的地方說一下。N為什么是它的一圈星星的個(gè)數(shù)
在第一個(gè)for循環(huán)語句里有這樣一段，
setProperty("_root.mc"+i,_rotation,360/n*i);
看它的_rotation的值是360/n*i
也就是"_root.mc"+i,_rotation=360/16*i
也就是
_root.mc1._rotation=360/16*1
_root.mc2._rotation=360/16*2
_root.mc3._rotation=360/16*3
_root.mc4._rotation=360/16*4
_root.mc5._rotation=360/16*5
_root.mc6._rotation=360/16*6
_root.mc7._rotation=360/16*7
_root.mc8._rotation=360/16*8
_root.mc9._rotation=360/16*9
_root.mc10._rotation=360/16*10
.............._root.mc64._rotation=360/16*64
也就是說把360度平均分成16份，它們的角度就是這個(gè)值，360/16=22.5。
第一個(gè)MC的角度是從原MC角度22.5的地方開始復(fù)制出來的，第二個(gè)MC的角度是從原MC角度45的地方開始復(fù)制出來的，第三個(gè)MC的角度是從原MC角度67.5的地方開始復(fù)制出來的，直到乘到17的時(shí)候就重疊了，因?yàn)?60/16*6=382.5，角最大值是360，當(dāng)?shù)?82.5的時(shí)候它就把360看成0來計(jì)算了，結(jié)果就是22.5，當(dāng)你把N的值調(diào)大的時(shí)候，比如36它就會(huì)有36個(gè)星星圍成一圈了，360/36*i 也就是mc1角度是10*1，mc2的角度是10*2 ，mc3的角度是10*3 當(dāng)乘到37的時(shí)候它的角度多了10也就是370，第37個(gè)MC的角度會(huì)是原MC角度的370-360也就是10，這就是N的值等于一圈星星的原因。
我們?cè)谥鲌?chǎng)景第一幀里放的代碼明明是拖動(dòng)的MC0，為什么MC復(fù)制出來的影片會(huì)跟著鼠標(biāo)走，把在AS第二幀設(shè)置X、Y坐標(biāo)的循環(huán)代碼拿下來分析一下：
for(var j=1;j<=k;j++){
setProperty("_root.mc"+j,_x,_root["mc"+j]._x+(_root["mc"+(j-1)]._x-_root["mc"+j]._x)/2);
setProperty("_root.mc"+j,_y,_root["mc"+j]._y+(_root["mc"+(j-1)]._y-_root["mc"+j]._y)/2);
}
看它的X坐標(biāo)，
setProperty("_root.mc"+j,_x,_root["mc"+j]._x+(_root["mc"+(j-1)]._x-_root["mc"+j]._x)/2);
setProperty這句話是說設(shè)置括號(hào)內(nèi)（目標(biāo)，目標(biāo)的屬性，該屬性的值）；
我們現(xiàn)在的目標(biāo)就是主場(chǎng)景上面的mc1,mc2,mc3,mc4,mc5......mc64;
它們的X坐標(biāo)值各是多少，為什么會(huì)跟隨鼠標(biāo)移動(dòng)，我們來仔細(xì)地看下它們的值
_root.mc+i._x_root["mc"+j]._x+(_root["mc"+(j-1)]._x-_root["mc"+j]._x)/2
也就是
mc1._x=mc1._x+(mc+(j-1)._x-mc1._x)/2
假設(shè)mc1現(xiàn)在的坐標(biāo)是300
也就是mc1._x=300+(mc+(j-1)._x-300)/2
現(xiàn)在我們已經(jīng)得到兩個(gè)數(shù)字了，還有一個(gè)mc+(j-1)._x，先算括號(hào)內(nèi)，j-1第一次運(yùn)行循環(huán)的時(shí)候j的值是1，就是1-1,也就是0;也就是mc+0，也就是mc0，也就是我們拖動(dòng)的那個(gè)沒有東西的影片剪輯。mc0是跟著我們的鼠標(biāo)動(dòng)的，上面搞清楚后，我們就在給mc0也就是我們鼠標(biāo)的坐標(biāo)假設(shè)一個(gè)值。隨便設(shè)定一個(gè)我們就假設(shè)100吧，值有了我們?cè)诮又鏊阈g(shù)。
mc1._x=300+(100-300)/2
也就是
mc1._x=300+負(fù)200/2
也就是
mc1._x=300+負(fù)100 //注意下負(fù)值是越乘負(fù)的越多，越除負(fù)的越少，加減相反
也就是
mc1._x=200;
當(dāng)計(jì)算機(jī)運(yùn)行到這里時(shí)，mc1的坐標(biāo)是200了，但200還不符合我們所看到的效果，我們運(yùn)行的時(shí)候是它的坐標(biāo)是跟著鼠標(biāo)走的，那么程序會(huì)接著往下走，它就會(huì)執(zhí)行設(shè)定MC2的坐標(biāo)了，MC2的坐標(biāo)會(huì)是250，接著是MC3的坐標(biāo)是275，總之是越往下它們坐標(biāo)的間隔就會(huì)越小，你自己可以測(cè)試下看。
當(dāng)循環(huán)完64次以后程序跳出循環(huán)了，那么就會(huì)TOGO到下一幀，執(zhí)行g(shù)otoAndPlay(2);
又回來了，接著又是循環(huán)64次，代碼還是相同的代碼，不一樣的是這次的坐標(biāo)都是已經(jīng)設(shè)置過的了，我們?cè)诳匆幌翸C1現(xiàn)在的坐標(biāo)是多少了,上次設(shè)置過后是200,那么現(xiàn)在是
mc1._x=200+(100-200)/2
也就是
150
這個(gè)坐標(biāo)值會(huì)離鼠標(biāo)越來越近的，直到和鼠標(biāo)的坐標(biāo)一樣，那么相同后面的MC也一樣會(huì)近，直到它們的坐標(biāo)和鼠標(biāo)相等為止，而且它們的坐標(biāo)永遠(yuǎn)也不會(huì)小于鼠標(biāo)的坐標(biāo)。