Flash AS 實(shí)例進(jìn)階圖片滾動(dòng)效果

2020-07-17 13:14:03

字體：大中小

來(lái)源：轉(zhuǎn)載

供稿：網(wǎng)友

　　源文件下載

　　>點(diǎn)擊查看動(dòng)畫(huà)效果< 實(shí)例2-５圖片滾動(dòng)

　　基本思路

　　① 在 MC 的中心點(diǎn)的左右兩側(cè)，同時(shí)擺放相同的一組圖片，中心點(diǎn)也是首尾相接處

　　② 測(cè)得鼠標(biāo)和場(chǎng)景水平中心點(diǎn)的距離，判斷 MC 向左或右及以怎樣速度運(yùn)動(dòng)。

　　③ 當(dāng) MC 左端抵場(chǎng)景左端或 MC 右端抵場(chǎng)景右端時(shí)，令 MC 回到一定位置，實(shí)現(xiàn)持續(xù)循環(huán)滾動(dòng)

新知識(shí)點(diǎn)

　　Stage.width// 場(chǎng)景的寬度，是隨意老師教我的，我找半天都沒(méi)找到。

　　Stage.height// 場(chǎng)景的高度，練習(xí)要用到。

　　MovieClip._width//MC 的寬度。

　　MovieClip._height // MC 的高度。

　　實(shí)例說(shuō)明

　　①在 MC 注冊(cè)點(diǎn)的左右都擺放同一組圖片，在主場(chǎng)景中若 MC 運(yùn)動(dòng)到邊端時(shí)刻，即由中心點(diǎn)替代，播放影片時(shí)看圖片是一致的，但又不是盡頭，會(huì)形成循環(huán)播放的效果。

　　② 取得場(chǎng)景和 MC 的寬度，以進(jìn)行計(jì)算比較，用鼠標(biāo)偏離場(chǎng)景水平中線的距離作 MC 移動(dòng)的參數(shù)，當(dāng)鼠標(biāo)正在此線，數(shù)值為 0 ， MC 靜止不動(dòng)，距離大運(yùn)動(dòng)速度則快。

　　③ 設(shè) 2 個(gè)條件判斷，是在 MC 運(yùn)動(dòng)到邊端時(shí)，重新定位。

　　編寫(xiě)動(dòng)作腳本

　　① 在第 1 幀上輸入：

復(fù)制代碼

代碼如下:

　　m=Stage.width;// 取得場(chǎng)景的寬度
　　 n=tu._width/2;// 取得 MC 的寬度的 1/2 的值
　　 tu._x = tu._x-(m/2-_xmouse)/10;// 將鼠標(biāo)與水平中心線的差值的 1/10 加到 MC 的位置上，再賦值到新的 MC 位置。
　　 ② 在第 2 幀上輸入：
　　 if (tu._x>=n) {//MC 左端抵場(chǎng)景左端時(shí)
　　　　 tu._x = tu._x-n;//MC 重新定位到自身中心點(diǎn)在場(chǎng)景左端
　　 }
　　 if (tu._x<=(m-n)) {//MC 右端抵場(chǎng)景右端時(shí)
　　　　 tu._x = tu._x+n; //MC 重新定位到自身中心點(diǎn)在場(chǎng)景右端
　　 }

　　要點(diǎn)分析

　　①圖片 MC 的制作，中心點(diǎn)是該元件的注冊(cè)點(diǎn)，又是圖片首尾交接處，依據(jù)這點(diǎn)判斷元件位置，在重新定位后又可以保證圖片的準(zhǔn)確銜接。

　　② tu._x = tu._x-(m/2-_xmouse)/10 ，依鼠標(biāo)在中心點(diǎn)的左側(cè)或右側(cè)及距離的大小，為 MC 設(shè)定運(yùn)動(dòng)方向及步長(zhǎng)。

小結(jié)

　　本講語(yǔ)句不多，用最簡(jiǎn)潔的腳本實(shí)現(xiàn)所需效果正是我們學(xué)習(xí)的方向，課后可以在網(wǎng)上搜索一些圖片滾動(dòng)的源文件進(jìn)行比較分析，從而開(kāi)拓出自己的編程思路。

課后練習(xí)

　　還是老套路：由橫向改為縱向，范例效果：

　　>點(diǎn)擊查看動(dòng)畫(huà)效果< 練習(xí)2-5　　　

補(bǔ)充實(shí)例

　　有更多的時(shí)候我們希望有一組圖片自動(dòng)勻速滾動(dòng)，點(diǎn)擊某張圖片即進(jìn)入相應(yīng)網(wǎng)頁(yè)，這里用上面腳本作一點(diǎn)改動(dòng)實(shí)現(xiàn)如下的效果：

　　>點(diǎn)擊查看動(dòng)畫(huà)效果< 補(bǔ)充實(shí)例

　　源文件下載

　　①將原來(lái)兩幀上的語(yǔ)句改寫(xiě)到MC上.

復(fù)制代碼

代碼如下:

onClipEvent (load) {
　　 m = Stage.width;
　　 n = this._width/2;
　　 x = 1;
}
onClipEvent (enterFrame) {
　　 this._x -= x; //要向右移動(dòng)就改"-="為"+=".
　　 if (this._x>=n) { //向右移動(dòng)此句起作用
　　　　 this._x = this._x-n;
　　 }
　　 if (this._x<=(m-n)) { //向左移動(dòng)此句起作用
　　　　 this._x = this._x+n;
　　 }
}

　　②分別在各小圖上加隱形按鈕寫(xiě)腳本，下例是第一個(gè)圖的按鈕上的命令：

復(fù)制代碼

代碼如下:

on (rollOver) {
　　 x = 0;
}
on (rollOut) {
　　 x = 1;
}
on (press) {
　　 getURL(“http://www.5lwq4hdr.cn”, "_blank");
}

　　查看全套"Flash AS 實(shí)例進(jìn)階教程"教程>>>>。