[AS3編程教學]鼠標滾輪縮放中級教程?

在上一片鼠標滾輪縮放初級教程中，我們給大家介紹了最簡單的滾輪縮放效果，侷限性在於無法解決註冊點不居中的影片剪輯，當縮小到很小時，圖片會反向，該問題也沒有解決，本片教程中級教程就要教大家解決這個問題。

工具/原料

FlashCS3(及其以上版本)

步驟/方法

首先我們打開Flash軟件，利用歡迎界面來新建一個空白文檔：

導入一張位圖到舞臺上，單擊選中位圖，按住Q鍵，縮放到合適的大小。

選中圖片，按下F8轉換成影片剪輯，請注意下圖操作，將註冊點選中在左上角：

給影片剪輯一個實例名為mcDog，以便程序調用：

新建一個圖層，命名為as，然後在第一幀按下F9，在動作面板裡寫入以下代碼：
stage.addEventListener(MouseEvent.MOUSE_WHEEL,changeDogScale);
function changeDogScale(e:MouseEvent):void
{
var delt:int = int(e.delta);
mcDog.scaleX = mcDog.scaleY += delt/20;
}

此時你發佈測試影片，發現滾輪縮放已經實現了，但是有一個問題，圖片保持左上角不動，放大後向右下方延伸，效果很不爽！

接下來我們要改變這種局面，簡單說來，我們所要做的就是擠下圖片一開始所處的中心位置，縮放圖片的時候，順便把放大了或者縮小了的圖片重新移回到中心位置，視覺上便覺得是居中放大的，所以我們加入以下代碼：//記錄小狗出示位置
var dogInitx:Number = mcDog.x + mcDog.width/2;
var dogInity:Number = mcDog.y + mcDog.height/2;
//添加滾輪偵聽
stage.addEventListener(MouseEvent.MOUSE_WHEEL,changeDogScale);
function changeDogScale(e:MouseEvent):void
{
var delt:int = int(e.delta);
mcDog.scaleX = mcDog.scaleY += delt/20;
//記錄小狗得當前位置
var curDogx:Number = mcDog.x+ mcDog.width/2;
var curDogy:Number = mcDog.y+ mcDog.height/2;
}
這段代碼記錄了小狗一開始的中心位置和小狗放大後的中心位置：

接下來知道小狗初始的中心位置和放大後的中心位置，我們把這個位置之間的差值算出來，然後讓小狗的位置實時加上這個差值，應該就OK了，所以我們繼續寫本教材最關鍵的幾行計算代碼：
//記錄小狗出示位置
var dogInitx:Number = mcDog.x + mcDog.width/2;
var dogInity:Number = mcDog.y + mcDog.height/2;
//添加滾輪偵聽
stage.addEventListener(MouseEvent.MOUSE_WHEEL,changeDogScale);
function changeDogScale(e:MouseEvent):void
{
var delt:int = int(e.delta);
mcDog.scaleX = mcDog.scaleY += delt/20;
//記錄小狗得當前位置
var curDogx:Number = mcDog.x+ mcDog.width/2;
var curDogy:Number = mcDog.y+ mcDog.height/2;
//將改變大小尺寸後的小狗圖片中心實時移動到原始的中心
var dx:Number = dogInitx - curDogx;
var dy:Number = dogInity - curDogy;
mcDog.x +=dx;
mcDog.y +=dy;
}

此時按下Ctrl+Enter，發佈影片測試，發現圖片縮放居中了，正常了。非常好，沒有什麼比現實和夢想一致更讓人興奮的了：

但是別高興的太早，很快你就發現有個問題，當圖片縮小的足夠小時，圖片變反向了，倒置了，這顯然不是我們希望的結果：
出現這種現象原因是因為圖片在持續縮小時，scaleX和scaleY屬性變成了負數，我們知道，AS3裡面影片剪輯的scaleX取值範圍是0-1，為負就反向了。

我們需要避免這種反向，所以可以在滾輪偵聽函數里加入一個判斷，當圖像縮放值小於0的時候，我們就讓圖像等於一個很小的最小值0.1，這樣就不會反向了，最小也就是原來1/10：//記錄小狗初始中心位置
var dogInitx:Number = mcDog.x + mcDog.width/2;
var dogInity:Number = mcDog.y + mcDog.height/2;
//添加滾輪偵聽
stage.addEventListener(MouseEvent.MOUSE_WHEEL,changeDogScale);
function changeDogScale(e:MouseEvent):void
{
var delt:int = int(e.delta);
mcDog.scaleX = mcDog.scaleY += delt/20;
//判斷當小狗尺寸變負時賦予它最小值
if(mcDog.scaleX < 0)
{
mcDog.scaleX = mcDog.scaleY = 0.1;
return;
}
//記錄小狗得當前中心位置
var curDogx:Number = mcDog.x+ mcDog.width/2;
var curDogy:Number = mcDog.y+ mcDog.height/2;
//將改變大小尺寸後的小狗圖片中心實時移動到原始的中心
var dx:Number = dogInitx - curDogx;
var dy:Number = dogInity - curDogy;
mcDog.x +=dx;
mcDog.y +=dy;
}

此時測試影片，不但能正常縮放，而且不會再出現倒置的現象了，充其量像下圖一樣變到最小的時候保持不動：

注意事項

一次做不好，多做幾次！

如果有問題可以留言發問！

期待鼠標滾輪縮放的“進階教程”吧！