flash 基本操作

 

最簡單的鼠標跟隨 (老手不宜)

    我學習動畫的時間不長,對代碼的學習更是一半解,下面的內容,僅供初學flash朋友參考。                       

                   第一節   單元件的鼠標跟隨  
    鼠標跟隨,是flash動畫裏很有意思的一個內容。單元件鼠標跟隨,是不能再簡單的跟隨示例,其製作過程如下:

1,打開flash面板,點文件---導入到庫,導入一個GIF格式的小動畫(注意這類小動畫不要直接導入現場)。

2,在現場第一層第一楨,將上面的小動畫從庫裏導入現場,同時在屬性面板裏影片剪輯下面的空格里,填寫影片剪輯名稱(實例名稱):mc。這個名稱可以隨意起,但一定要記住和後面代碼裏保持一致。

3,點黑第一楨,打開動作面板,填寫以下代碼:

mc._x=mc._x+(_xmouse-mc._x)/4;
mc._y=mc._y+(_ymouse-mc._y)/4;

在上面的代碼中,mc._x 代表元件mc 的x 座標,mc._y 代表元件mc 的y 座標,_xmouse代表鼠標的x座標,_ymouse代表鼠標的y 座標。 

從公式中可以看出,新的x座標,等於原來的x座標加上:鼠標的x座標減去原x座標的差再除以4所得的商數。就是說,鼠標的x座標移動a釐米,元件的x座標就要跟進a/4釐米。y座標同此理。

4,在第二楨插入關鍵鎮,打開屬性面板,填寫如下代碼:

gotoAndPlay(1);

動畫完成,測試,導出。

說明:1,第一楨的公式可簡化爲:

mc._x+=(_xmouse-mc._x)/4;
mc._y+=(_ymouse-mc._y)/4;

           2,除數4要根據現場效果改變,如2,5 ,7,8等等。

 

 

                  第二節 多元件鼠標跟隨 
  我們現在再來做一個多元件的鼠標跟隨: 
1,寫四個字:向你學習,並且把它們分別轉換爲4個元件。 
2,在第一楨,把4個元件,導入現場,影片剪輯名稱分別命名爲:m1,m2,m3,m4。 
導入時最好從第4個開始依次導入。因爲最後一個總是在最上面。 
3,點第一楨,打開動作面板,填寫以下代碼: 
m1._x+=(_xmouse-m1._x)/4; 
m1._y+=(_ymouse-m1._y)/4; 
m2._x+=(m1._x-m2._x)/4; 
m2._y+=(m1._y-m2._y)/4; 
m3._x+=(m2._x-m3._x)/4; 
m3._y+=(m2._y-m3._y)/4; 
m4._x+=(m3._x-m4._x)/4; 
m4._y+=(m3._y-m4._y)/4;

   上面的代碼,其道理和我在上一篇所講的是一樣的,元件1跟鼠標,元件2跟元件1,元件3跟元件2- - - 。 
4,在第二楨插入關鍵楨,加動作代碼: 
gotoAndPlay(1);

第二楨代碼很簡單,但萬萬不能缺少。

 

              第三節 需要左右轉向的鼠標跟隨 
有時候,鼠標牽引的對象,是需要適時轉向的,例如上面的例子。當鼠標向右時,馬就要跟着回頭,否則就要退着走。這就要求我們給元件定一個條件,要它在適當的時候轉身。這個條件是通過if(如果)語句來下達的,在下面的製作過程中,我會詳細介紹。 
    動畫製作過程如下: 
1,將一個動物行走的GIF動畫導入庫,再從庫裏導入到現場,在屬性面板中填寫影片剪輯名稱(也叫實例名稱):h。 
2,點第一楨,打開動作面板,填寫代碼: 
h._x+=(_xmouse-h._x)/10; 
h._y+=(_ymouse-h._y)/10; 
if (_xmouse>h._x) {h._xscale=100;

}else{h._xscale=-100;}

   除了影片剪輯名稱不同,上面兩行代碼和第一節幾乎是一樣的。因爲這一個例子也是一個元件跟隨鼠標。除號下邊的數字,要根據測試的情況調整,這個數越大,元件距鼠標越遠。 
  下面兩行給出了轉向的條件。式中,h._xscale表示元件h的方向。當_xscale=100時,元件方向爲正(即導入時的方向,當_xscale=-100時元件爲反方向。 
   爲了便於大家理解,我把這兩行的內容翻譯成中文: 
如果(鼠標的x座標大於元件h的x座標){元件h的方向爲正}否則{元件h的方向爲反}

3,在第二楨,插入關鍵楨,加代碼: 
gotoAndPlay(1);

測試,導出。

                第四節 多元件左右轉向鼠標跟隨
  在上面3節的基礎上,多元件的左右轉向鼠標跟隨,應當不是很難的問題了。我上面作了一個3元件的轉向鼠標跟隨,更多的元件,依次類推就是了,3元件的轉向鼠標跟隨製作過程如下:
1,導入元件,填寫實例名:m1,m2,m3。
2,在第一楨填寫動作代碼:
m1._x+=(_xmouse-m1._x)/6; 
m1._y+=(_ymouse-m1._y)/6; 
m2._x+=(m1._x-m2._x)/4; 
m2._y+=(m1._y-m2._y)/4; 
m3._x+=(m2._x-m3._x)/4; 
m3._y+=(m2._y-m3._y)/4;

if (_xmouse>m1._x) {m1._xscale=100;
}else{m1._xscale=-100;} 
if (_xmouse>m2._x) {m2._xscale=100;
}else{m2._xscale=-100;} 
if (_xmouse>m3._x) {m3._xscale=100;
}else{m3._xscale=-100;} 
 
上面6行,是說明互相跟隨關係的。
下面的6行,要求所有元件根據和鼠標的位置關係,適時轉向,寫好前兩行,後面可以複製,再改一下元件名稱就可以了。

3,在第二楨插入關鍵楨,填寫代碼:
gotoAndPlay(1);

測試,導出。

 代碼解釋:
1, _xscale :表示在x 軸上的縮放比例和方向。大小從-100到100。
  當_xscale 的值爲正數時,方向爲正方向, 當_xscale 的值爲負數時,方向爲反方向。例如:
 -xscale=50,表示元件的寬度縮小到百分之五十,運動方向爲正方向。
 
2,_yscale :表示在y 軸上的縮放比例和方向。大小從-100到100。 當_yscale 的值爲正數時,方向爲上方向, 當_yscale 的值爲負數時,方向爲下方向。例如:
 -yscale=-50,表示元件的高度縮小到百分之五十,運動方向向下方。

3,m1._x : 最簡單,但是最基本的!分解如下: 
m1---元件m1。元件名稱可以隨意起,最好是英文字母。
.  -----  的。
_x----x座標。
m1._x ----解釋爲: 元件m1  的 x座標。
n._y   ---- 解釋爲: 元件n  的 y座標。
中間那個英語的句號很重要,我專門用“的”來表述它。

 
4,_xmouse:鼠標的x座標。 注意和元件寫法的區別,第一是次序不同,第二是中間沒有哪個點(英語中的句號)
  mouse——中文詞義是老鼠,鼠標。
  _ymouse: 鼠標的y座標。

 

                 第五節 單元件轉向鼠標跟隨

   單元件轉向鼠標跟隨,在做完上面4節的練習之後,x,y座標的跟隨,已經沒有問題,這時你只需再加上轉向的命令,讓元件轉動,並且轉動的角度和鼠標轉動的角度一樣。轉動的圖例,用在如小魚游水類的動作效果很好。我因爲沒有這類小動畫,只好自己畫了一個。製作過程: 
1,圖層1第一楨導入元件,填寫實例名稱,填寫動作代碼: 
mc._x+=(_xmouse-mc._x)/6; 
mc._y+=(_ymouse-mc._y)/6; 
mc._rotation=57.3*Math.atan2(_ymouse-mc._y,_xmouse-mc._x);

2,在第二楨插入關鍵楨,加如下代碼: 
gotoAndPlay(1);

測試,導出。

說明: 
上面的代碼中: 
mc._rotation --- 元件mc 的轉動(角度),轉動的角度是以度數爲單位的。 
57.3--- 與一弧度(弧度也是角度的單位)相當的角度數。 
Math --- 這裏可理解爲數學表達式。 
atan2--- 在flash 軟件裏,atan2和它後面小括號裏的內容,是一個和與反正切函數有關的,求角度的表達式。稍後我會專門解釋,您現在可以先照抄,以後慢慢理解。

gotoAndPlay(1); 
這句話用的最多,我來分解以下: 
go --- 動詞,走,去,離開 ---。 
to --- 介詞,往,向,到---。 
And---連詞, 和,並且 ---。 
Play---動詞,播放,玩,扮演 ---。 
(1)--- 第一楨。 
   這是一個命令句, 可理解爲:走,去播放第一楨!這樣影片就會不斷接到這個命令,並且按第一楨的動作代碼執行,在用楨動作代碼的動畫中,如果沒有這一個看似簡單的命令,光有第一楨,任何動畫都懂不起來!

 

                   第六節 多元件轉動鼠標跟隨 
多元件轉動的鼠標跟隨,和多元件轉向的跟隨的道理一致,這裏就不贅述。上面,我做了個只有兩個元件的例子,在這幅圖中,只有魚身和魚頭兩個元件,但已經可以說明問題。其製作過程如下: 
1,導入元件,注意要先導入魚身(ys),再導入魚頭(yt),因爲後導入的在上層。第一楨的動作代碼: 
yt._x+=(_xmouse-yt._x)/6; 
yt._y+=(_ymouse-yt._y)/6; 
yt._rotation=57.3*Math.atan2(_ymouse-yt._y,_xmouse-yt._x); 
ys._x+=(yt._x-ys._x)/2; 
ys._y+=(yt._y-ys._y)/2; 
ys._rotation=57.3*Math.atan2(yt._y-ys._y,yt._x-ys._x);

  在上面的代碼中可以看到:魚頭跟着鼠標轉,魚身跟着魚頭轉。元件yt和ys的距離可以通過改變式中的除數(本例中爲2),或改變元件的註冊點來改變。

2,第二楨的代碼: 
gotoAndPlay(1);

說明: 
本例中魚身轉動的代碼也可以用魚身直接跟着鼠標轉動的形式來寫,效果一樣。 
ys._rotation=57.3*Math.atan2(_ymouse-ys._y,_xmouse-ys._x); 
在有多元件跟轉的情況下(如同時拉動幾條魚),建議採用這種方法,因爲可以彼此複製,更方便一些。

 

        最簡單的鼠標跟隨第一至第七小節的總結:
   在以上的六節中,我講述了3種跟隨的動作:
1,行走跟隨。
2,轉向跟隨。
3,轉動跟隨。
  行走跟隨的一般原則:
元件1跟着鼠標走,元件2 跟着元件1走,元件3跟着元件2走。
  轉向跟隨的一般原則:
元件1跟着鼠標轉向,元件2 跟着元件轉向,元件3跟着元件轉向。
 轉動跟隨的一般原則:
元件1跟着鼠標轉動,元件2 跟着元件轉動,元件3跟着元件轉動。
  在實際運用中,常常可以採用簡化的原則:
即:所有元件跟着鼠標走,所有元件跟着鼠標轉向,所有元件跟着鼠標轉動,其效果往往與按一般原則作出的相差無幾。
  簡化的行走代碼:
  m1._x+=(_xmouse-m1._x)/3;
   m1._y+=(_ymouse-m1._y)/3; 
   m2._x+=(_xmouse-m2._x)/4; 
   m2._y+=(_ymouse-m2._y)/4; 
   m3._x+=(_xmouse-m3._x)/5;
   m3._y+=(_ymouse-m3._y)/5;
  以下類推。 注意改變最右邊的除數,以調整元件的先後。除數越大,元件離鼠標越遠!
   簡化的轉向代碼:
  if(_xmouse>m1._x)  {m1._xscale=100}else{m1._scale=-100};
   if(_xmouse>m2._x)  {m2._xscale=100}else{m2._scale=-100};
   if(_xmouse>m3._x)  {m3._xscale=100}else{m3._scale=-100};
  以下類推。我在第4節的實例中就用了上面的辦法。 
   簡化的轉動代碼:
  m1._rotation=57.3*Math.atan2(_ymouse-m1._y,_xmouse-m1._x); 
   m2._rotation=57.3*Math.atan2(_ymouse-m2._y,_xmouse-m2._x); 
   m3._rotation=57.3*Math.atan3(_ymouse-m3._y,_xmouse-m3._x);
   以下類推。
  簡化的代碼,在填寫時,先寫完一行後,下面的可以採用複製,粘貼的辦法完成。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章