故宮的專案裡有個互動區，是要給參觀者以放大鏡的方式觀看畫作的紋理，承辦的老師希望不只是站遠遠的觀看畫作，還希望參觀者能以較微觀的方式了解印象派的畫家是如何以不同的色點呈現出色塊(有點像電腦的抖色)。
放大鏡在AS2是個已經被做爛的特效，大概每本Flash的工具書裡都會提到，因為這個特效包含了滑鼠拖動、遮罩，是個不錯的題材。
不過我在AS3裡還沒寫過，先來小試一下身手。
移動滑鼠，放大鏡會跟著移動。這支Flash由於是測試加上到時是在本機執行，所以我懶得做呼叫外部圖檔，直接將所有圖放入元件庫中。這也是一個好的練習，練習如何取用元件庫中的資源。AS3元件庫中的元件取用方式和AS2不同，每個元件都是一個類別，在程式中引用的方式與類別是一樣的，而且還可自行為這些元件加入屬性與方法，彈性大很多。
承上，也懶得做載入進度，剛讀取時可能會有一陣空白，耐心等他下載吧，檔案其實不大，不到300KB。
這支程式裡包含幾項觀念：
滑鼠事件、遮罩、隱藏滑鼠游標、引用元件庫資源(這部份請配合原始fla檔，查看元件庫裡各資源的連結設定)
AS只有一支，程式碼如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | package { import flash.display.Sprite; import flash.events.MouseEvent; import flash.ui.Mouse; // import元件庫裡的類別 import magnifier; // 放大鏡 import magMask; // 遮罩 import pic001; // 小圖 import pic001_2; // 大圖 public class magTest extends Sprite { var sPic:Sprite; var sMag:Sprite; var sScaled:Sprite; var sMask:Sprite; var mag:magnifier; var magRange:magMask; var imgPic001:pic001; var imgPic001S2:pic001_2; public function magTest() { sPic = new Sprite(); sScaled = new Sprite(); sMag = new Sprite(); sMask = new Sprite(); addChild(sPic); addChild(sScaled); addChild(sMask); addChild(sMag); mag = new magnifier(); magRange = new magMask(); imgPic001 = new pic001(); imgPic001S2 = new pic001_2(); sMag.addChild(mag); sMask.addChild(magRange); sPic.addChild(imgPic001); sScaled.addChild(imgPic001S2); Mouse.hide(); mag.startDrag(true); // 設定遮罩 imgPic001S2.mask = magRange; // 建立滑鼠事件監聽者 addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove); } private function onMouseMove(evt:MouseEvent):void{ var posx:Number = mag.x; var posy:Number = mag.y; // 算出滑鼠座標與原始圖片尺寸的百分比 var pw:Number = posx / 800; var ph:Number = posy / 600; // 由上面算出的比例，算出放大圖被對準的座標 var sx:Number = imgPic001S2.width * pw; var sy:Number = imgPic001S2.height * ph; // 再由放大鏡中心座標算出放大圖相對於舞台的座標 imgPic001S2.x = posx - sx; imgPic001S2.y = posy - sy; // 移動遮罩 magRange.x = posx; magRange.y = posy; } } } |
原始檔案在這，有興趣的可以下載回去。
1 Response