Transcript CH14
14 蘭嶼微旅行網頁預載動畫與選單設計 14.1 14.2 14.3 14.4 14.5 動畫搶先看 設計「載入進度列」 透過程式碼取得載入進度 模擬首頁下載動作 選單 1 - 元素擺放與命名 14.6 14.7 14.8 14.9 透過程式碼設計影像與按鈕效果 選單 2 - 按鈕擺放命名 透過程式碼設計網頁超連結 發佈成網頁檔及安全性設定 14.1 動畫搶先看 網站首頁的「載入進度列」、「開場動畫」，以及內頁的「各單元選 單按鈕」、「回到首頁」、「郵件超連結」、「加入最愛」 ...等設計 項目，均是本章的製作重點，現在就帶您一起來了解如何設計這些 Flash 網站所必備的要素。 動態效果 元件角色 此範例元件庫內的元件主要是協助作品：美化版面、網頁選單按鈕設 計...等動作，分別為以下介紹的主要角色以及其他相關相片與文字元 件： 製作流程 14.2 設計「載入進度列」 開啟由 Flash 設計而成的網站時，常會遇到只能面對黑黑的頁面癡癡 等待下載讀取，不知何年何月才能看到內容？現在就來製作一個載入 進度的動畫，並顯示百分比及進度值，讓等待動畫載入的您清楚了解 目前的進度。 請開啟本章範例原始檔 <14-01.a> 練習，於 場景 1 動手製作「載入 進度列」。 此練習檔已於 場景 1 的 靜態物件、 背景 圖層佈置上「載入進度列」的底 圖、文字...等物件，而後續說明要加 入的元件與程式元素將會一一設計在 其他相關圖層中。 01 製作載入進度百分比數值的文字框 「載入進度百分比」是已下載影片數量除以總數量的百分比數值，請 選按 載入進度 圖層的影格 1，繪製一個動態文字框，待下一節會透 過程式碼求得正確的值並顯示在此動態文字框中。 02 製作載入進度列 載入進度列會依載入進度百分比，以黃色色塊漸近式呈現。 03 開場動畫佈置 14.3 透過程式碼取得載入進度 場景 1 載入進度畫面的部分，相關元素均已安排好，就只差如何指 揮這些元素相互搭配，在此將透過程式碼 LoaderInfo 類別來處理，在 影片未載入時先顯示載入的百分比及進度，載入完成後即進入開場動 畫播放，最後則進入影片主體。 載入進度的原理與說明 網頁中載入 Flash 的 swf 檔是使用串流的方式，那如何知道目前已經 載入的資料量與總資料量為何呢？這裡要使用 LoaderInfo 類別來處理 LoaderInfo 類別會提供有關載入的 SWF 檔案或影像檔 (JPEG、 GIF 或 PNG) 的資訊，任何顯示物件都可以使用 LoaderInfo 類別， 它提供的資訊包括載入進度、載入器的 URL 與載入內容、媒體總位 元組數，以及媒體的表面高度和寬度。 另外，在程式中還可以應用 LoaderInfo 類別的屬性：bytesLoaded 及 bytesTotal 取得已經載入的資料量與總資料量。 bytesLoaded：已經載入的影片片段大小，以位元組為單位。 bytesTotal：影片片段的大小，以位元組為單位。 01 設定不自動播放下一影格內容 02 載入進度百分比的計算與顯示 03 載入進度列的動態效果設計 04 判斷動畫目前是否完全載入 14.4 模擬首頁下載動作 經過前面二節的製作即完成下載頁面設計，請儲存檔案後預覽成果。 但是可能會發現因為作品是放在本機，還沒有看到載入進度的動畫， 就已經跳到載入完成後的內容了！那要如何才能看到載入進度動畫的 執行呢？ 二種方式能夠執行模擬下載 使用 Flash 軟體本身提供的模擬下載功能，即可檢視與執行動畫作 品中所設計的載入動畫。 方法一： 請在完成作品製作後按 + 鍵播放動畫，再按一次 + 鍵即可進入模擬下載的狀態。 方法二： 在第一次按 + 鍵後，在播 放視窗中選按 檢視 \ 模擬下載 即可進入模擬下載的模式。 14.5 選單 1 - 元素擺放與命名 相片與選單的搭配組合是許多飯店與旅遊業者所常使用的設計，經由 不同單元切換而展現出景點的風貌與特色。這個場景要設計的效果為 ：當滑鼠指標移至各選單按鈕上方時，該單元主圖會以透明度 10% 到 100% 的緩出漸變方式出現。 同樣於前面練習的 <14-01.a> 檔案，於 場景 2 動手製作網頁主體與 選單。 此練習檔已於 場景 2 的 選單1、Logo 圖層佈 置上選單列底圖、網站Logo文字...等物件， 而後續說明要加入的元件與程式元素將會 一一設計在其他相關圖層中。 01 相片元素擺放說明 02 佈置相片元素至舞台上 03 為相片元件實體命名 04 佈置選單按鈕至舞台上 05 為選單按鈕元件實體命名 14.6 透過程式碼設計影像與按鈕效果 作品運用 Tween 類別加上 easing 類別，讓 ActionScript 輕易為作品 中的影片片段元件加上移動、淡出及調整大小特效，只要依下語法說 明設定相關屬性與補間動畫即可。 認識 Tween (漸變) 與 easing (特效) 類別 在 ActionScript 3.0 中，Tween、TransitionManager...等類別可用來 將動畫和轉場效果動態加入至影片中，此作品使用了 Tween 類別， 開始編寫程式碼的第一步就是先匯入轉場套件，如果需要使用加減速 功能，則還需匯入加減速套件。 匯入轉場套件與加減速套件的程式碼必須加在 動作 面板中 Script 視 窗的最上方，其寫法如下： Tween 類別可讓您輕鬆在舞台上移動影片片段、調整影片片段大小和 淡出影片片段，類似於沿時間軸建立的漸變，Tween() 類別的基本語 法如下： 物件：要執行此補間動畫的影片片段元件實體。 屬性：屬性的字串名稱，如：“x” 代表 x 座標的屬性。 特效：補間動畫所要採用的 easing 特效類別，如：加減速、彈 性運動...等。 起始值：指示屬性起始值的數字。 結束值：指示屬性結束值的數字 。 持續時間： 補間動畫時間長度的數字。若省略，持續時間會預設 為無限大。 布林值：如果是 true 則持續時間的部分使用秒數來計算，如果是 false 則持續時間的部分使用影格來計算。 補間動作要執行什麼樣的特效就要加上 easing 類別來設定，Flash 透過 easing 類別提供六種加 / 減速效果，可與 Tween 類別搭配使用 Bounce：回彈效果，回彈多少決定於持續時間，時間愈長回彈 次數就相對愈多。 Elastic：彈性效果，彈性的力度不受持續時間的影響。 Back：溢出效果。 Regular：減速動作。 Strong：強力的減速動作。 None：沒有效果。 上述每個特效又分為以下幾種加 / 減速方法 ( 其中 easeNone 效果僅 限於 None 分類可使用)： easeIn (緩進) easeOut (緩出) easeInOut (緩進緩出) easeNone (無) 經過以上的說明不知是否對 Flash 中的 "類別" 較有概念了！別擔心現 在馬上動手實作看看，讓您更清楚了解類別的使用方法。 01 設定不自動播放下一影格內容 02 呼叫指定類別、特效 03 宣告變數與使用迴圈判斷滑鼠指標所在選單按鈕 04 以緩出漸變的方式產生相對的景點影像 05 測試作品完成結果 完成此節程式碼設計後，請儲存檔案再按 品的動態效果 + 鍵，瀏覽整個作 當滑鼠指標移至各選單按鈕上方時，會於後方出現相對應的景點主題影像。 14.7 選單 2 - 按鈕擺放命名 這一節要說明如何製作網頁中常用的「回到首頁」、「郵件超連結」 、「加入最愛」 三個按鈕動作，讓頁面上的選單功能更為完整。 同樣於前面練習的 <14-01.a> 檔案，於 場景 2 動手製作網頁右上角 的選單。 01 佈置選單按鈕至舞台上 02 為選單按鈕元件實體命名 14.8 透過程式碼設計網頁超連結 網頁中使用 Flash，最常遇到的就是 Flash 動畫與 HTML 頁面的互動 。在 Flash 作品中可以利用 navigateToURL() 設定超連結，或是與 網頁中的程式碼溝通，甚至可以將 Flash 中的資料傳送到指定的頁面 。 在網頁瀏覽器中開啟 URL - navigateToURL 函式 將指定 URL 的文件載入視窗中，或是將物件傳遞到位於所定義 URL 的另一個應用程式中，navigateToURL() 函式的基本語法如下： 1. URL ： 取 得 文 件 的 URL 網 址 ， 在 ActionScript 3 中 必 須 利 用 URLRequest 類別來轉換網址路徑。 2. 目標視窗：這是一個選擇性的選項，用來指定要載入文件的視窗或 HTML 頁框。可以輸入特定視窗的名稱，或是從下列保留的目標名 稱中選取： (1) _self ：指定目前視窗中的目前頁框。 (2) _blank：指定新的視窗。 (3) _parent：指定目前頁框的上一層視窗。 (4) _top：指定目前視窗中最上層的頁框。 01 設定 「回到首頁」 鈕 02 設定 「加入我的最愛」 鈕 03 設定 「寫信給站長」 鈕 14.9 發佈成網頁檔及安全性設定 在 Flash 中完成作品，可以藉由發佈的動作匯出所需格式的檔案。請 將先前的檔案做儲存的動作，接著進行發佈 .swf 播放檔及 .html 網頁 檔。 請開啟前面練習的 <14-01.a> 檔案，進行作品發佈設定。 01 設定發佈的格式 02 執行發佈動作 03 設定 Flash 全域安全性設定 04 測試作品完成結果 完成前面的發佈與安全性調 整後，即可完整瀏覽整個作 品的動態效果。