|
|
|
多個朋友因工作或愛好的需要，詢問如何用flash在有限的頁面內制作大的地圖，并鏈接、顯示有關地點的信息，為此將我自己做的一個記錄旅游地點的flash地圖略作精簡、修改，做了這個flash，并將關鍵部分做法介紹如下（原有的那個包括顯示信息中的文字和采用的旅游照片，將近10 M，太大了，無法上傳）。
作品見下方（好久沒發帖了，不知該怎么發swf文件了，把考屏圖放下面方便了解）
特點：
縮小地圖以適應頁面大小的局限，用放大鏡來放大縮小了的地圖，使能清晰的看到需要的細節。使用AS糾正普通遮罩制作放大鏡錯位較大的缺陷，放大部分在鏡片的中心（紅十字處）沒有錯位。用鼠標經過、離開按鈕的AS來控制顯示有關需要的信息（作品中鼠標在放大鏡的中心紅十字處）。
因為地圖窗口大小同選的地圖長寬要成比例，如果頁面合適，也可以讓信息同時在地圖窗口的右邊或下面顯示，我自己做的記錄旅游地點的地圖，文字信息是在右邊顯示，用組件加滾動條；照片用MC元件，位置在地圖窗口內，循環播放，這樣顯示的信息量可以非常大。圖一（信息顯示另一做法）
本作品僅作為示意，1、各地的朋友千萬不要在地理問題上拍磚哦。2、一些距離太近的城市偷懶沒設定信息顯示鏈接（解決辦法是縮小按鈕的反應面積）。3、為便于上傳，地圖只放大了1倍，圖片的品質也選定得很低。4、同樣，示意中只有北京同時采用顯示1張圖片。
做法簡介：
1、各圖層拷屏如圖2，為了容易看清做法，圖層分得細了些。
舞臺（或地圖窗口）大小同選的地圖長寬要成比例（便于滿舞臺顯示不變形），我用的舞臺是400*330，地圖是800*660（這2個尺寸在下面幀動作中要用），只放大1倍。放大倍數可自己確定，只需在步驟7的幀動作AS中改動相應數據即可。
友情提示：如果地圖窗口小于舞臺，地圖窗口的坐標應該是（0，0）。圖二：
2、新建電影剪輯元件（即MC）“地圖元件”，把選定的地圖圖片導入，圖片的X、Y坐標都是0，即左上角對著元件界面的 + 處。簡單辦法是選中圖片，打開屬性面板，把X、Y 都改為0，然后用Enter鍵確定。
3、把做好的MC拖入場景“小圖”圖層中，在場景的屬性中設定MC坐標為（0，0），寬、高數值同舞臺一致，然后用Enter鍵確定。
4、把做好的MC再拖入場景“大圖”圖層中，MC在場景中的坐標也設定為（0，0），選中“大圖”圖層中的MC，在屬性中命名為aa，
5、做放大鏡
新建MC元件“放大鏡元件”，畫圓，圓的左右上下均必須居中。用剪切、粘貼到當前位置的辦法，把圓的色塊和邊框分別放在2個圖層中。把鏡片圖層中的顏色塊轉換為MC元件“鏡片元件”。在“放大鏡元件”中選中鏡片MC，在屬性中命名為ee。顏色塊是做遮罩用的，在swf文件中看不到它，只是在有顏色的部分能看到被遮蔽的“大圖”圖層中的畫面，所以顏色任意。鏡框在swf文件中是看得到的，顏色、式樣自定。再增加1個圖層放十字線，同鏡框一樣在swf文件中是看得到的。用“極細”線。
友情提示：如果工作中需要比例尺，也可經過計算，把十字線設定為比例尺，計算法如下：
每格標注的距離=每格對應的地圖上兩點間實際距離*每格像素/地圖上該距離的像素。
實際操作，可以測定在地圖上已知距離的水平（或豎直）的兩點之間的像素值，計算出1個像素在地圖上是多少公里，再確定鏡片上每格幾個像素，標定比例尺。
6、把“放大鏡元件”MC拖入場景放大鏡圖層。選中放大鏡MC，命名為ff。
7、AS
回顧一下，上面已經分別為3個MC命名了，命名應該同下面AS中一致，不能搞錯。
場景中大地圖MC命名為aa，
場景中放大鏡MC，命名為ff。
放大鏡元件中放大鏡鏡片MC，命名為ee，
在AS圖層選中幀，寫如下幀動作
_root.onEnterFrame = function() {
Mouse.hide();//隱藏鼠標
startDrag("_root.ff", true);// 控制望遠鏡ff隨鼠標移動
_root.aa.setMask(_root.ff.ee) //用ff中的ee遮蔽aa
_root.aa._x=_root._xmouse*(1-80/40);//用鼠標坐標控制大畫面x坐標跟隨
_root.aa._y=_root._ymouse*(1-66/33);//用鼠標坐標控制大畫面y坐標跟隨
} 因為放大鏡中有看得見與看不見的兩種圖形，所以用AS腳本控制遮罩，
_root.aa.setMask(_root.ff.ee)
即用ff中的ee遮蔽aa——括號內的是遮蔽MC，前邊的是被遮蔽MC。
用鼠標坐標控制大畫面跟隨
_root.aa._x=_root._xmouse*(1-800/400);//用鼠標坐標控制大畫面x坐標跟隨
_root.aa._y=_root._ymouse*(1-660/330);//用鼠標坐標控制大畫面y坐標跟隨
按我的計算，要保持不錯位，放大圖片aa的x坐標應該是：（1—放大倍數）乘以鼠標的x坐標值（同樣，y坐標也是這么計算），現在畫面的放大倍數是800/400，因此
_root.aa._x=_root._xmouse*(1-800/400);
800是本作品的地圖寬，400是flash舞臺寬度（可以約分，怕說明太費事了），制作時要根據自己作品的地圖和flash的實際像素大小更改。
同樣，_root._ymouse*(1-660/330)中也這樣。
8、在“地圖元件”中增加按鈕，在“地圖元件”中增加1個圖層放按鈕。分別選中每一個按鈕，寫上AS。以“北京”為例，AS如下：
on (rollOver) {
_root.gotoAndStop(2);
}
on (rollOut) {
_root.gotoAndStop(1);
} 因為按鍵設在MC地圖元件中，卻是控制場景的動作，所以在AS中加了_root.，on (rollOver)時， gotoAndStop哪一幀，就在那幀上制作需要的信息。本作品北京的信息制作在第2幀，因此gotoAndStop(2)，共在31個城市制作了信息示意。on (rollOut)都是回到第1幀。
友情提示；
按上面的控制地圖移動的辦法，鼠標要停留在某一個特定的點上（例如本例中閃動的紅圓），實際上只能是在flash中的一個特定的位置上。因此，只要避開這個位置，盡可以隨意安排需要顯示的信息的位置、大小及數量。本例中只有1個拉薩的信息因被遮擋放右邊。
如果頁面合適，也可以讓文字、圖片信息同時在地圖窗口之外的右邊或下面顯示，但要在左邊、上邊顯示，則地圖坐標的計算會復雜許多，沒有必要。
|
|
發表留言請先登錄！
|