基于動作腳本制作的雷達掃描效果

蔣維

摘要：該文介紹了在Flash中如何利用動作腳本實現雷達掃描效果的交互式動畫的設計。

關鍵詞：Flash;動作腳本;雷達

中圖分類號：TP37 ? ? ? ?文獻標識碼：A

文章編號：1009-3044（2020）24-0211-02

開放科學（資源服務）標識碼（OSID）：

引言

本設計中實現的雷達掃描效果是需要用動作腳本畫出扇形的掃描波，但Flash中并沒有提供可以直接畫扇形的API.由于貝塞爾方程式所具有的特性，使用cubicCurveTo（）函數或curveTo（）函數畫的也只是弧線并不是圓弧線，并且由它們繪制出的弧形在扇形填充和旋轉方面也難以實現。

1 程序的設計與實現

1.1 程序設計的目標

程序設計的目標是實現扇形的雷達掃描波在圓形的儀表盤上以圓心為中心點進行360度旋轉掃描，并且當鼠標從掃描波上滑過時掃描波會有波動交互效果。在雷達的掃描過程中掃描波還要呈現由強變弱的趨勢以實現雷達的余暉效果。

1.2 程序的實現

1.2.1 制作的原理

雷達效果圖是由兩部分組成：雷達儀表盤和扇形掃描波，我們在繪制這兩部分圖形時都利用到了同心圓原理。在制作圓形儀表盤上的刻度時是利用了兩個同心圓：一個半徑為sr的內部圓，一個半徑為br的外部圓，從圓心引出一條線段分別交于內外圓上的兩點：（xb，yb）、（xs，ys），在（xb，yb）和（xs，ys）兩點之間繪制直線畫出刻度，要繪制出整個圓盤刻度，只需把這條線段以圓心為旋轉中心按一定角度旋轉繪制出各交點直線至360度即可。繪制儀表盤上的盤面時只繪制出同心的外部圓，同心的內部圓不需繪制。雷達儀表盤的繪制效果如圖1所示。在制作扇形掃描波時同樣也是做N 個同心圓，這些同心圓只顯示圓心角為指定度數a度的圓弧。圓弧的繪制是把度數為a度的圓心角分解成n個小角，這n個角的每條邊都會與N 個同心圓在圓上交于一點，畫出所有相交點即得圓弧，所以每段圓弧是由n個小點構成，按此繪制原理會畫出N條亮度不一樣的圓弧，越接近于圓心的圓弧，點越密集、顏色越亮，反之圓弧離圓心越遠，點越疏散、顏色越暗，這N條圓弧隨著距離的增加逐漸變暗從而形成扇形波。以點代線繪制圓弧的方式正好也能實現雷達的余輝效果。繪制扇形波時N值取得越大扇形波越密集，n值取得越大扇形波越亮。在Flash中繪制出的組成圓弧的點是用近似于圓點的小線段代替的。扇形掃描波的繪制效果如圖2所示。為了使繪制出的扇形波能以圓心為旋轉中心，并且當鼠標滑過扇形波時有波動交互效果，我們利用Sprite類來繪制圖形。Sprite類繪制的圖形默認的注冊點坐標值是在（0，0）位置，利用Sprite類繪制完圖形后需要把圖形坐標值移動到圓心坐標（h，k）處。對于鼠標滑過扇形波引起的波動交互，我們使用小范圍的放大縮小扇形波來實現其交互效果，并設置鼠標的偵聽事件以便在鼠標的移動過程中做出相應的交互處理。

1.2.2 實現過程

新建一個Flash文檔，選中時間軸面板上圖層1的第一幀，打開動作面板輸入以下代碼，實現圓形儀表盤的制作：

var bbr，br，sr，h，k，angle，xb，yb，xs，ys：Number;

bbr = 120;br = 110;sr = 105;h = 260;k = 200;

with （this.graphics）

{ ? lineStyle（1，0x00ff00）;

drawCircle（h，k，bbr）;drawCircle（h，k，br）; ? ? ? ? ?//繪制儀表盤的盤面

angle = 0;

while （angle<=2*Math.PI） ? ? ? ? ? ? ? ? ? ? ? ? //while循環繪制儀表盤刻度

{ ? xb = h + br * Math.cos（angle）;

yb = k + br * Math.sin（angle）; ? ? ? ? ? ? ? //外圓交點坐標值

xs = h + sr * Math.cos（angle）;

ys = k + sr * Math.sin（angle）; ? ? ? ? ? ? ? //內圓交點坐標值

moveTo（xb，yb）;lineTo（xs，ys）; ? ? ? ? ? ? ? ? //繪制儀表盤刻度

angle += 0.1; ? ?} } ? ? ? ? ? ? ? ? ? ? ? ? //angle值決定刻度的疏密

angle = 0;

選中時間軸面板上圖層1的第二幀創建關鍵幀，在此關鍵幀上打開動作面板輸入以下代碼，以實現扇形掃描波的制作：

var s：Sprite=new Sprite（）; ? ? ? ? ? ? ? ? ? ? ? ? ? //建立Sprite容器s