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