萬盛學電腦網

 萬盛學電腦網 >> 圖文處理 >> Flash教程 >> FLASH跟隨鼠標的旋轉星星

FLASH跟隨鼠標的旋轉星星

   第一步:

  打開FLASH,新建一個影片剪輯元件,命名為“星星”,在裡面繪制一個星星出來,並且把它的中心點和舞台注冊點對齊,在第20幀和第40處各插入一個關鍵幀。選中第20幀,在它的中心點和舞台的注冊點對齊的情況下按住SHIFT鍵進行等比例縮小(你認為差不多就行了),然後選中第1到20幀的任意一幀創建補間動畫,打開屬性面板把它的轉調成逆時針,選中第20到40幀的任意一幀創建補間動畫,打開屬性面板把它的轉調成順時針。

  第二步:

  在新建一個影片剪輯元件,命名為“轉圈的星星”,在圖層面板的地方找到“添加運動引導層”添加一個引導層出來,在選中該圖層的情況下按住AIT+SHIFT鍵在舞台上繪制一個有邊框無填充色的圓(大小你認為合適就OK),然後用鼠標圈住它的一點邊選中後刪除(這樣做是給它一缺口),選中繪制好的圓,把它的左和上對齊舞台中心的注冊點,選中第40幀處添加一個幀,鎖定該圖層,選擇第一個圖層把我們庫中的星星拖進來並把它的中心點對齊引導層中圓的上邊的那個缺口的地方,選中第四十幀插入一個關鍵幀把它的中心點對齊引導層中圓的下邊的那個缺口的地方。回到舞台,把庫中轉圈的星星放到舞台任意位置,並給它一個實例名稱mc。

  第三步:

  繼續插入一個影片剪輯元件,命名為“as",選中第一幀添加以下代碼:

  var k:Number=64;//用來定義星星的個數;

  var n:Number=16;//用來定義一圈星星的個數;

  var r:Number=2;X坐標和Y坐標的緩動,值越大跟隨鼠標移動時就越慢;

  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);

  選中第二幀處插入一個空白關鍵幀添加以下代碼:

  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);

  }

  選中第三幀處插入一個空白關鍵幀添加以下代碼:

  gotoAndPlay(2);

  添加完代碼以後回到主場景;

  第四步:

  把庫中名為as的元件拖放到舞台上,給它一個實例名稱mc0.在主場景內添加一個圖層在第一幀加上拖動代碼:

  startDrag("_root.mc0",true);

  注意這裡是mc0不是mc,雖然你拖動的影片裡面沒有東西,在下面我後細說的;

  做到現在就算完工了,我在這裡就把重點的地方說一下。N為什麼是它的一圈星星的個數

  在第一個for循環語句裡有這樣一段,

  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份,它們的角度就是這個值,360/16=22.5。

  第一個MC的角度是從原MC角度22.5的地方開始復制出來的,第二個MC的角度是從原MC角度45的地方開始復制出來的,第三個MC的角度是從原MC角度67.5的地方開始復制出來的,直到乘到17的時候就重疊了,因為360/16*6=382.5,角最大值是360,當到382.5的時候它就把360看成0來計算了,結果就是22.5,當你把N的值調大的時候,比如36它就會有36個星星圍成一圈了,360/36*i 也就是mc1角度是10*1,mc2的角度是10*2 ,mc3的角度是10*3 當乘到37的時候它的角度多了10也就是370,第37個MC的角度會是原MC角度的370-360也就是10,這就是N的值等於一圈星星的原因。

  我們在主場景第一幀裡放的代碼明明是拖動的MC0,為什麼MC復制出來的影片會跟著鼠標走,把在AS第二幀設置X、Y坐標的循環代碼拿下來分析一下:

  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坐標,

  setProperty("_root.mc"+j,_x,_root["mc"+j]._x+(_root["mc"+(j-1)]._x-_root["mc"+j]._x)/2);

  setProperty這句話是說設置括號內(目標,目標的屬性,該屬性的值);

  我們現在的目標就是主場景上面的mc1,mc2,mc3,mc4,mc5......mc64;

  它們的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

  假設mc1現在的坐標是300

  也就是mc1._x=300+(mc+(j-1)._x-300)/2

  現在我們已經得到兩個數字了,還有一個mc+(j-1)._x,先算括號內,j-1第一次運行循環的時候j的值是1,就是1-1,也就是0;也就是mc+0,也就是mc0,也就是我們拖動的那個沒有東西的影片剪輯。mc0是跟著我們的鼠標動的,上面搞清楚後,我們就在給mc0也就是我們鼠標的坐標假設一個值。隨便設定一個我們就假設100吧,值有了我們在接著做算術。

  mc1._x=300+(100-300)/2

  也就是

  mc1._x=300+負200/2

  也就是

  mc1._x=300+負100 //注意下負值是越乘負的越多,越除負的越少,加減相反

  也就是

  mc1._x=200;

  當計算機運行到這裡時,mc1的坐標是200了,但200還不符合我們所看到的效果,我們運行的時候是它的坐標是跟著鼠標走的,那麼程序會接著往下走,它就會執行設定MC2的坐標了,MC2的坐標會是250,接著是MC3的坐標是275,總之是越往下它們坐標的間隔就會越小,你自己可以測試下看。

  當循環完64次以後程序跳出循環了,那麼就會TOGO到下一幀,執行gotoAndPlay(2);

  又回來了,接著又是循環64次,代碼還是相同的代碼,不一樣的是這次的坐標都是已經設置過的了,我們在看一下MC1現在的坐標是多少了,上次設置過後是200,那麼現在是

  mc1._x=200+(100-200)/2

  也就是

  150

  這個坐標值會離鼠標越來越近的,直到和鼠標的坐標一樣,那麼相同後面的MC也一樣會近,直到它們的坐標和鼠標相等為止,而且它們的坐標永遠也不會小於鼠標的坐標。

copyright © 萬盛學電腦網 all rights reserved