按下跑馬燈按鈕就載入大張產品照
載入靜態圖片和載入 SWF 動畫檔的方法完全相同, 不過在這裡必須特別注意物件的層級。例如我們想要的效果是:「按下跑馬燈中的按鈕,
LOADER1_mc就載入指定的圖片」, 然而縮圖按鈕位於載入的動畫內部, 而 LOADER1_mc位於網站主頁上, 兩者其實不在同一個檔案中,
如果直接在網站主頁上寫程式,可能會找不到按鈕, 如下所示:

這種情形下要怎麼設定呢?我們應該將程式碼寫在跑馬燈動畫中, 並且在程式碼中加入「回上一層再執行」的設定。例如設定按下 a1_btn 按鈕後, 要先回上一層 (即網站主頁), 然後才在 LOADER1_mc 中載入 a1 的內容。

這裡用一個 MovieClip 取代上層的主時間軸, 它的路徑相對於 a1_btn 按鈕來說, 寫成 root.parent.root, 你可參考下圖:

因此我們在跑馬燈動畫內寫 MovieClip(root.parent.root).LOADER1_mc,就可以準確地將照片載入到位於上層的 LOADER1_mc 內了。
撰寫程式碼讓跑馬燈按鈕播放對應的照片
瞭解層級概念後, 我們就動手撰寫程式碼, 來為 3 組跑馬燈動畫中的每個按鈕設定連結吧!由於載入的方式大致相同, 底下僅以項鍊類的跑馬燈動畫做示範, 其餘的戒指類、手鍊類動畫就請你自行練習設定。
Step01:請接續 14-3 節完成的項鍊跑馬燈動畫 (14-ex05.fla) 來練習, 先前我們已經將舞台上的跑馬燈元件實體命名為
"moving_mc", 不過其中的 20 個按鈕還沒有實體名稱, 因此請雙按跑馬燈元件, 進入編輯狀態後, 選取每一個按鈕, 依序命名為
a1_btn ~ a20_btn:

Step02:接著請回到場景 1, 選取 Actions 圖層的影格 1, 按F9鍵開啟動作面板, 我們要接續 14-3 節設定好的內容, 繼續輸入如下程式碼

Step03:由於 a11_btn ~ a20_btn 這 10 個按鈕和 a1_btn ~ a10_btn 是重複的, 而且要連結的照片也是相同的, 因此你可如下補上一行程式碼, 讓瀏覽者按下 a1_btn 和 a11_btn 時都載入同一張圖片:

Step04:完成了 a1_btn 和 a11_btn 這組設定, 接下來的程式碼寫法都相同, 你可將上面這段程式碼再複製 9 次 (因為
20 個按鈕分為 10 組), 再分別修改元件實體和變數、函式的名稱即可, 如下所示 (完成檔可參考 necklace.fla):

Step05:設定完成後, 請執行『檔案/匯出/匯出影片』命令, 並將動畫重新命名為necklace.swf 檔案 (覆蓋資料夾中原有的同名檔案), 接著開啟 14-fin.swf 來做測試, 看看按下按鈕時是否可以載入照片:

Step06:戒指、手鍊的動畫做法也相同, 你可開啟 ring.fla 和 bracelet.fla 這 2
個檔案來參考程式碼。設定完成後, 請再匯出為 ring.swf 及 bracelet.swf 檔案, 就大功告成了, 你可再開啟
14-fin.swf 來測試整個網站。


........
更多內容請見《正確學會 FLASH CS5 的 16 堂課》
|