Flash放大鏡效果相信大家已經(jīng)很熟悉了，很多地方都有介紹：無非是將一張放大的圖像做個遮罩，然后靠拖動遮罩上的圖像使放大的圖像隨鼠標(biāo)的移動顯示出來。這樣的效果很容易實現(xiàn)，但缺點很明顯：在圖像的邊緣，特別是圖像的放大比例比較大時，圖像會發(fā)生比較大的偏移，也就是有時顯示出來的放大圖像并不是你鼠標(biāo)所指的區(qū)域的圖像。
下面是我做好的一個示例，點擊中間的字進入演示，可以按PageUp和PageDown改變放大倍數(shù)。用的是最終幻想電影片的圖片。你可以在文章*下載源代碼。
在我們這個例子里，我們對傳統(tǒng)的放大鏡效果進行了兩處改進：
1.保證顯示的放大圖像與鼠標(biāo)所指區(qū)域相匹配。
2.用戶將可以自己控制放大的比例。
要實現(xiàn)*點，就需要在動畫播放時，根據(jù)鼠標(biāo)位置動態(tài)地改變被遮罩圖片的位置。如何計算圖片應(yīng)在位置的坐標(biāo)是個關(guān)鍵，其實這個算法很簡單，如圖：
藍色區(qū)域就是影片的顯示區(qū)域，顯示的是我們要放大的圖片（小圖），綠色區(qū)域是放大的要被遮罩的圖片。如果此時鼠標(biāo)在小圖中紅點處（x,y)，則該點在放大后的圖片中的坐標(biāo)就應(yīng)該是（x*scale,y*scale)，scale是圖片的放大倍數(shù)。只要在顯示時使小圖中的該點與大圖中的重合，我們就可以在這個效果中實現(xiàn)無論鼠標(biāo)指到哪里，顯示的放大圖像都以鼠標(biāo)所指像素點為中心了。很顯然，此時大圖相對影片區(qū)域的坐標(biāo)為：
（x1=x*(scale-1),y1=y*(scale-1))
好了，關(guān)鍵算法出來了，第二點目標(biāo)就很容易實現(xiàn)了，我們只要在影片播放時改變變量scale就行了。
下面是具體的制作過程。1.導(dǎo)入一張圖片。并以這張圖片為基礎(chǔ)建立一個MovieClip，起名叫“pic”。
2.在場景的*個圖層“pic-small”中擺出這個“pic”的一個實例,大小與場景一樣，作為小圖。
3.新建一個圖層“pic-big”，再擺出“pic”的一個實例，在Instance中輸入“gback”。這張圖將作為大圖。現(xiàn)在先不用管它的大小和位置，因為我們將在影片播放時動態(tài)地用ActionScript來改變它。
4.再新建一個圖層“mask”，在上面畫一個大小合適的圓。將其轉(zhuǎn)變?yōu)橛捌糨嬙?。并將其Instance改為“zoom”。這個圓就是你的“放大鏡”了。在層上點右鍵，選擇“遮蔽”（mask），將這一圖層轉(zhuǎn)化成為遮罩。
*的結(jié)果如下圖：
現(xiàn)在開始寫我們的代碼。
1、點擊“pic-small”，為其加入以下代碼：
onClipEvent(load)
{
scale=2; //初始化放大倍數(shù)
}
onClipEvent(mouseMove) //鼠標(biāo)移動時實時計算和改變大圖的位置
{
_root.gback._x=_xmouse-_xmouse*scale;
_root.gback._y=._ymouse-_ymouse*scale;
}
on(keyPress "
{
scale-=0.1;
if(scale<1) scale=1;
//倍數(shù)改變后應(yīng)該重置圖片大小和位置
_root.gback._xscale=50*scale;
_root.gback._yscale=50*scale;
_root.gback._x=_root._xmouse-_xmouse*scale;
_root.gback._y=_root._ymouse-_ymouse*scale;
}
on(keyPress "
{
scale+=0.1;
if(scale>4) scale=4;
//倍數(shù)改變后應(yīng)該重置圖片大小和位置
_root.gback._xscale=50*scale;
_root.gback._yscale=50*scale;
_root.gback._x=_root._xmouse-_xmouse*scale;
_root.gback._y=_root._ymouse-_ymouse*scale;
}
2、再在影片的*幀加入以下代碼：
startDrag(zoom,true); //拖動“放大鏡”，并將鼠標(biāo)鎖定在其中心。
好了，現(xiàn)在可以按“Ctrl+Enter”測試下我們的影片了。你還可以加入一些創(chuàng)意讓影片更完善。源代碼下載
