這篇教程為“Flash AS 入門教程”的一部分。查看全套教程>>>>。

　　源文件下載

　　本節(jié)應掌握的知識要點：

　?、?startDrag和stopDrag應用；②with 語句應用；

　　鼠標拖拽也是使用比較多的特效形式，這一節(jié)我們將學習一個簡單的鼠標拖拽動畫。要學習以下幾個新的語句：

　　startDrag();動作，使目標影片剪輯在影片播放過程中可拖動。語法格式是：

　　myMovieClip.startDrag(lock, left, top, right, bottom)；

　　myMovieClip 要拖動的影片剪輯實例名。

　　Lock 是一個用true或false表示的布爾值，true指定可拖動的影片剪輯鎖定到鼠標位置中央，false則為不鎖定。

　　left, top, right, bottom 參數(shù)是 相對于影片剪輯的父級坐標的值，可以設置這些值來指定該影片剪輯拖動的左、上、右、下的矩形范圍。

　　小括號中的這些參數(shù)是可選的。

　　stopDrag() 停止拖動當前影片剪輯（不需要參數(shù)）

　　with 語句，可以在小括號中指定對象（比如影片剪輯）作為參數(shù)，并使用大括號中的語句計算該對象中的表達式和動作。使用with語句，可以簡化代碼的書寫。語法格式是：

　　with (動作腳本對象或影片剪輯的一個實例。) {

　　一個動作或一組動作。 }

　　請看示例動畫“實例1-9”。

　　>>>>>點擊查看動畫效果<<<<<

　　實例1-9 鼠標跟隨

　　這是一個及其簡單的鼠標拖拽效果，畫面上一串彩色星星隨著鼠標的移動而翻卷擺動，當我們點擊一下右下角的按鈕鼠標，星星就不再跟隨著鼠標移動，而定位在了剛才點擊鼠標的位置，當把鼠標滑過按鈕，星星又處于被拖拽狀態(tài)了。實現(xiàn)這個效果其實非常簡單。

　　看看源文件，庫中有兩個影片剪輯和一個按鈕，xing1是一個星圖形的移動漸隱補間動畫，xing2中嵌套了幾個分別改變了色調的xing1的實例。

　　主場景上共3幀，有【按鈕】、【mc】和【as】三個圖層，【mc】圖層上放置的是xing2影片剪輯，其實例名為“xing_mc”，【as】圖層上和按鈕實例上分別添加了如下語句：

　　【as】圖層上的語句：

　　第1幀

　　i = 0;

　　xing_mc._visible = 0;// 設置影片剪輯不可見

　　xing_mc.startDrag(true,0,0,550,400);

　　//在 (0,0)至 (550,400) 的矩形范圍內拖拽xing_mc影片剪輯。

　　第2幀：

　　i = i+1; //變量i每次加1

　　if (i<=36) { //設置條件i小于或者等于36

　　xin_mc.duplicateMovieClip("xin_mc"+i, i);//以新名稱"xin_mc"+i，層深度為i復制影片剪輯

　　with (_root["xing_mc"+i]) {//定義數(shù)組對象_root["xin_mc"+i]為with語句的參數(shù)

　　_rotation = i*20; //設置新復制影片剪輯的旋轉度數(shù)

　　_xscale = xin_mc._xscale+i*5;//設置新復制影片剪輯的橫向縮放比例

　　_yscale = xin_mc._yscale+i*5;//設置新復制影片剪輯的縱向縮放比例

　　}

　　} else {

　　i = 0; //如果不滿足if語句里的條件，則i=0

　　}

　　第3幀

　　gotoAndPlay(2);

　　這段程序的流程很簡單，是前面已經(jīng)學習過的知識，一開始在第1幀定義變量i的初始值為0，設置場景上的影片剪輯實例不可見，并在一個矩形范圍內可以由鼠標拖拽。

　　第2幀先由表達式i=i+1將i的值計算為1，再按照if語句里設定的條件進行判斷，符合當i的值小于或等于36條件時就執(zhí)行大括號“{}”里面的語句塊，復制xing_mc影片剪輯，由參數(shù)sing_mc+i計算出第1次新復制的影片剪輯名為xing_mc1，并由參數(shù)i分配其層深度為1；再由with里面的語句計算出讓新復制的影片剪輯順時針旋轉20度，縱橫向等比例放大5個百分點。

　　第一次執(zhí)行完后，再由第3幀上的語句指令播放頭返回第2幀，于是再第二次進行判斷并復制影片剪輯，每一次反復時i的值遞增1，直至超出設定的條件后由else里面的語句將變量i重新定義為0。

　　由于在第1幀上設置了作為復制父本的影片剪輯由鼠標拖拽，而新復制出的影片剪輯的坐標位置默認是與父本的坐標一致，所以每次新復制出的影片剪輯的坐標位置就會由當時父本影片剪輯的位置而定，這樣就形成了無數(shù)彩色星星跟隨著鼠標翻卷擺動的動畫效果。

　　第2幀出現(xiàn)了一個with語句，利用這個語句，將影片剪輯或其它對象的引用作為其參數(shù)，可以簡化程序語句的書寫，不必在大括號中的每一行語句前面重復書寫對象的名稱。

　　如果不用with語句，要為新復制出的影片剪輯設置屬性就應該寫成：

　　_root["xin_mc"+i]._rotation = i*20;

　　_root["xin_mc"+i]._xscale = xin_mc._xscale+i*5;

　　_root["xin_mc"+i]._yscale = xin_mc._yscale+i*5;

　　當用with語句為相同對象設置指令時，語句行越多就越顯其優(yōu)勢。

　　執(zhí)行了startDrag語句，就可以使指定的影片剪輯在動畫播放過程中保持可拖動狀態(tài)，一次只能拖動一個影片剪輯。直到執(zhí)行 stopDrag() 停止拖動為止?；蛑钡綄ζ渌捌糨嬚{用了 startDrag() 動作為止。

　　現(xiàn)在看看按鈕上的語句：

　　on (rollOver) {

　　xing_mc.startDrag(true,0,0,550,400); //鼠標滑過按鈕時拖拽影片剪輯

　　}

　　on (release) {

　　stopDrag(); //點擊按鈕時停止拖拽當前影片剪輯

　　}

　　通過鼠標滑過按鈕和點擊鼠標，就可以切換xing_mc影片剪輯的拖拽狀態(tài)。

　　課后練習：素材源文件下載

　　下載課后練習素材源文件，按照以下要求做一個鼠標拖拽動畫：

　　1．動畫開始播放時，將場景上的小松鼠翻轉身，由面朝右方變?yōu)槊娉蠓剑ㄌ崾荆嚎s放比例為-100，或者將縮放比例乘以-1）；執(zhí)行拖拽小松鼠影片剪輯，鎖定鼠標中心，設置拖動范圍在場景尺寸之內；隱藏場景上的小松鼠影片剪輯實例。

　　2．用if語句定義條件復制出8個小松鼠影片剪輯，在with語句內設置新復制的影片剪輯的橫坐標位置按50像素遞增，高度和寬度均按4個像素遞減。

　　3．在右下角的按鈕上添加語句，實現(xiàn)當鼠標點擊按鈕時停止拖拽小松鼠，并開始在場景范圍內拖拽右下角的彩環(huán)；當鼠標滑過按鈕時，停止拖拽彩環(huán)，開始在場景范圍內拖拽小松鼠。

　　4．提示：別忘了定義并初始化變量；

　　>>>>>點擊查看動畫效果<<<<<

　　課后練習1-9效果：

　　這篇教程為“Flash AS 入門教程”的一部分。查看全套教程>>>>。

最新評論