Flash鼠標(biāo)事件控制實(shí)例繞定點(diǎn)旋轉(zhuǎn)技巧

Flash鼠標(biāo)事件控制實(shí)例繞定點(diǎn)旋轉(zhuǎn)技巧/摘要：在flash中通過在時間軸上插入關(guān)鍵幀和創(chuàng)建補(bǔ)間動畫可以輕松實(shí)現(xiàn)實(shí)例的旋轉(zhuǎn)功能，通過編輯實(shí)例的中點(diǎn)還可進(jìn)一步實(shí)現(xiàn)實(shí)例繞定點(diǎn)旋轉(zhuǎn)，進(jìn)而可以方便的引用到其它軟件中。

關(guān)鍵詞：關(guān)鍵幀；切點(diǎn)；中心點(diǎn)

在flashplayer中為增強(qiáng)交互性，可以嘗試?yán)檬髽?biāo)事件來控制實(shí)例旋轉(zhuǎn)的角度，但這并不輕松，筆者發(fā)現(xiàn)在鼠標(biāo)事件中設(shè)置實(shí)例的_rotation屬性時，旋轉(zhuǎn)的中心并不是預(yù)先編輯的實(shí)例中心，而是按照flash默認(rèn)的元件的基準(zhǔn)點(diǎn)（左上角）來旋轉(zhuǎn)，所以在確定旋轉(zhuǎn)角度的同時還應(yīng)對實(shí)例的位置（_x與_y屬性）進(jìn)行調(diào)整。以下通過一個簡例來說明這一技巧。

目標(biāo)：通過鼠標(biāo)移動實(shí)現(xiàn)切線繞切點(diǎn)任意旋轉(zhuǎn)，達(dá)到切線隨鼠標(biāo)移動而旋轉(zhuǎn)的視覺效果。

步驟：1）新建文件“qiexian”，設(shè)置背景為藍(lán)色，在圖層“背景”上插入關(guān)鍵幀，添加坐標(biāo)系、曲線、切點(diǎn)等背景元件，并在幀動作中加入代碼stop()；如圖1。

圖1

2）增加圖層，命名為“轉(zhuǎn)動”，插入關(guān)鍵幀，添加影片剪輯元件“qiexian”，并命名實(shí)例名為“qiexian”；如圖2。

圖2

3）提取切點(diǎn)M0的屬性信息，如圖3，提取切線屬性信息，如圖4；

圖3

圖4

4）為影片實(shí)例“qiexian”動作填寫代碼，保存并發(fā)布文件。

代碼釋義：

onClipEvent(mouseMove){

//鼠標(biāo)事件

xx=_root._xmouse;yy=_root._ymouse;

//變量xx，yy分別記錄鼠標(biāo)位置的橫坐標(biāo)與縱坐標(biāo)

if((xx-249.9)*(xx-249.9)+(yy-295.4)*(yy-295.4)<=52885.5){

//(249.9,295.4)為M0點(diǎn)的坐標(biāo)，52885.5為M0D的長度的平方，用于設(shè)定鼠標(biāo)的響應(yīng)區(qū)域?yàn)橐訫0為圓心，以M0D為半徑的圓形區(qū)域。

if((xx>=161.7)&&(yy<=216.2)){

//（161.7，216.2）是A點(diǎn)的坐標(biāo)，以A為坐標(biāo)原點(diǎn)建立直角坐標(biāo)系，分四個象限分別處理（如圖5），因?yàn)镸ath.atan()的返回值在

_Rotation的范圍為，各個象限表達(dá)式不統(tǒng)一。

setProperty(“/qiexian”,_rotation,(Math.atan((yy-216.2)/(xx-161.7))*57.2975));

//旋轉(zhuǎn)角度為鼠標(biāo)位置相對于A點(diǎn)的傾角（如圖5），乘以57.2975將弧度轉(zhuǎn)化為角度。

setProperty(“/qiexian”,_x,161.7-(Math.cos(Math.atan((yy-216.2)/(xx-161.7))+0.73168)-Math.cos(0.73168))*118.541);

setProperty(“/qiexian”,_y,216.2-(Math.sin(Math.atan((yy-216.2)/(xx-161.7))+0.73168)-Math.sin(0.73168))*118.541);}//（如圖6）旋轉(zhuǎn)后切點(diǎn)的位置由M0移至M1，不能達(dá)到繞定點(diǎn)旋轉(zhuǎn)的視覺效果，須將直線平移，使M1與M0重合，其中0.73168為AM0的斜率，118.541為AM0長度。

elseif((xx<=161.7)&&(yy<=216.2)){

//第二象限

setProperty(“/qiexian”,_rotation,(-90-Math.atan((xx-161.7)/(yy-216.2))*57.2975));

setProperty(“/qiexian”,_x,161.7+(Math.cos(0.73168)-Math.sin(0.73168-Math.atan((xx-161.7)/(yy-216.2))))*118.541);

SetProperty(“/qiexian”,_y,216.2+(Math.sin(0.73168)+Math.cos

(0.73168-Math.atan((xx-161.7)/(yy-216.2))))*118.541);}

圖5

Elseif((xx<=161.7)&&(yy>=216.2)){

//第三象限

setProperty(“/qiexian”,_rotation,(180+Math.atan((yy-216.2)/(xx-161.7))*57.2975));

setProperty(“/qiexian”,_x,161.7+(Math.cos(Math.atan((yy-216.2)/(xx-161.7))+0.73168)+Math.cos(0.73168))*118.541);

setProperty(“/qiexian”,_y,216.2+(Math.sin(Math.atan((yy-216.2)/(xx-161.7))+0.73168)+Math.sin(0.73168))*118.541);}

elseif((xx>=161.7)&&(yy>=216.2)){

//第四象限

setProperty(“/qiexian”,_rotation,(90-Math.atan((xx-161.7)/(yy-216.2))*57.2975));

setProperty(“/qiexian”,_x,161.7+(Math.cos(0.73168)+Math.sin

(0.73168-Math.atan((xx-161.7)/(yy-216.2))))*118.541);

setProperty(“/qiexian”,_y,216.2-(Math.cos(0.73168-Math.atan((xx-161.7)/(yy-216.2)))-Math.sin(0.73168))*118.541);}}}

作品自評：代碼中將A點(diǎn)作為基準(zhǔn)點(diǎn)劃分象限，確定旋轉(zhuǎn)角度、調(diào)整坐標(biāo)，較為流暢地實(shí)現(xiàn)了目標(biāo)。由于鼠標(biāo)響應(yīng)圓形區(qū)域的圓心與坐標(biāo)系的原點(diǎn)不重合，造成鼠標(biāo)響應(yīng)區(qū)域的不對稱。如果將基準(zhǔn)點(diǎn)選在M0點(diǎn)，而實(shí)際又是以A點(diǎn)作為旋轉(zhuǎn)中心點(diǎn)，造成區(qū)域討論更為復(fù)雜，難以實(shí)現(xiàn)任意旋轉(zhuǎn)。

參考文獻(xiàn)：