1、東南科技大學專用 PowerPoint 檔案數位教材東南科技大學專用PowerPoint 檔案數位教材旗標出版股份有限公司 製作本著作含書附光碟之內容(不含 GPL 軟體)，僅授權合法持有本書之讀者（包含個人及法人）非商業用途之使用，切勿置放在網路上播放或供人下載，除此之外，未經授權不得將全部或局部內容以任何形式重製、轉載、散佈或以其他任何形式、基於任何目的加以利用。東南科技大學專用 PowerPoint 檔案數位教材時間軸特效與ActionScript 特效精品展示網站第第 14 章章東南科技大學專用 PowerPoint 檔案數位教材3本堂課重點提要本堂課重點提要14-1 範例內容分析14
2、-2 用時間軸特效製作網站的開場動畫14-3 製作跑馬燈輪轉顯示商品的效果14-4 跑馬燈輪轉並顯示產品說明14-5 用滑鼠控制跑馬燈的方向及速度14-6 將各個產品頁面連結到主頁面東南科技大學專用 PowerPoint 檔案數位教材414-1 範例內容分析範例內容分析在第 9 堂課已經介紹過如何用 Flash 製作一個美食餐廳網站。這一堂課要製作的珠寶網站,其規劃的要領和美食餐廳網站大致相同,因此我們直接來看網站的架構：東南科技大學專用 PowerPoint 檔案數位教材5範例內容分析範例內容分析本堂課的重點在製作各種展示產品的特效,因此範例將介紹如何製作主頁的開場動畫,及 necklace
3、、ring、bracelet、earrings 這幾個產品頁的展示特效,最後再將產品頁連結到網站主頁。先來看一下範例的內容吧！請開啟 Ch14完成檔14-fin01.swf：東南科技大學專用 PowerPoint 檔案數位教材614-2 用時間軸特效製作網站的開用時間軸特效製作網站的開場動畫場動畫時間軸特效時間軸特效是 Flash 內建的特效工具,其功能就像自動產生特效的機器,只要選擇要套用特效的元件,並設好相關的參數後,就能自動產生特效動畫及所需的影格,而不必自己設置關鍵影格、調整影格內容及建立補間動畫。本節將利用 3種時間軸特效,製作網站的開場動畫。現在就來介紹第 1 個時間軸特效吧！轉場
4、特效製作主頁的動畫轉場特效製作主頁的動畫模糊效果製作版權宣告的動畫模糊效果製作版權宣告的動畫變形特效製作選單的動畫變形特效製作選單的動畫東南科技大學專用 PowerPoint 檔案數位教材7轉場特效製作主頁的動畫轉場特效製作主頁的動畫請開啟範例檔 14-ex01.fla,為了簡化操作過程,範例中已經安排好網站主頁的內容及相關元件。首先要加入時間軸特效中的轉場轉場特效,讓網站主頁表現出淡入淡入及擦去擦去(像布幕拉開一樣)的效果。操作方法如下：1.轉場轉場效果要套用到背景圖背景圖元件上。請選取背背景圖景圖圖層,執行插入插入/時間軸特效時間軸特效/(變形變形/轉轉場場)/轉場轉場命令,然後在轉場轉場
5、交談窗如下設定：東南科技大學專用 PowerPoint 檔案數位教材814-3 製作跑馬燈輪轉顯示商品的效果製作跑馬燈輪轉顯示商品的效果用來展示戒指、手鍊的 ring 與 bracelet,兩個頁面使用相同的特效,內容是將所有圖片排成一列,以跑馬燈的方式來展示產品；而瀏覽者將滑鼠指標移到跑馬燈上,就會暫時停止以便於鑑賞產品；移開滑鼠指標跑馬燈就會繼續轉動。本節將以 ring 頁面為例,介紹這個特效的製作方式。跑馬燈循環動畫的製作方法跑馬燈循環動畫的製作方法製作產品跑馬燈的循環動畫製作產品跑馬燈的循環動畫東南科技大學專用 PowerPoint 檔案數位教材9跑馬燈循環動畫的製作方法跑馬燈循環動畫
6、的製作方法跑馬燈特效的製作方法,是先做出一個不斷循環的跑馬燈動畫,再加入用滑鼠指標控制跑馬燈播放或暫停的程式。請先開啟範例檔 14-ex03.fla,我們來看一下內容。舞台中已經安排了 moving 元件,而這個元件是由 3 個產品、4 個按鈕所組成的：東南科技大學專用 PowerPoint 檔案數位教材1014-4 跑馬燈輪轉並顯示產品說明跑馬燈輪轉並顯示產品說明用來展示項鍊產品的 necklace 頁面也是用跑馬燈的方式展示產品,和 ring、bracelet 的差別是,necklace 頁面的產品說明會先隱藏起來,當滑鼠移到跑馬燈上,才會顯示產品的說明,同時暫停跑馬燈：設置東南科技大學專
7、用 PowerPoint 檔案數位教材11跑馬燈輪轉並顯示產品說明跑馬燈輪轉並顯示產品說明東南科技大學專用 PowerPoint 檔案數位教材1214-5 用滑鼠控制跑馬燈的方向及速度用滑鼠控制跑馬燈的方向及速度展示耳環的 earrings 頁面也是用捲動的方式呈現產品,相較於之前 ring、necklace 頁面的跑馬燈只能固定往一個方向捲動；而 earrings 頁面則可以透過滑鼠的控制向左或向右捲動,並調整捲動的速度。滑鼠控制捲動方向、速度的製作方法滑鼠控制捲動方向、速度的製作方法3 張以上的圖片該怎麼安排？張以上的圖片該怎麼安排？製作滑鼠控制跑馬燈的效果製作滑鼠控制跑馬燈的效果東南科技
8、大學專用 PowerPoint 檔案數位教材13滑鼠控制捲動方向、速度的製作方法滑鼠控制捲動方向、速度的製作方法首先來了解一下怎麼用滑鼠控制跑馬燈捲動方向。在 earrings 頁面中,我們撰寫的程式將以舞台的中間線為基準,偵測滑鼠指標的位置。若滑鼠指標在中間線右方,則產品圖會向左捲動,反之則向右捲動。至於捲動的速度,則是以滑鼠與中間線的距離來控制,距離愈遠、捲動速度愈快,反之則速度愈慢；若滑鼠指標正好位於中間線,則靜止不動：東南科技大學專用 PowerPoint 檔案數位教材1414-6 將各個產品頁面連結到主頁面將各個產品頁面連結到主頁面先前的操作中,我們已經將各產品的頁面發佈成 swf 動畫檔(您也可以在完成檔完成檔資料夾找到這些動畫檔),現在就要將這些動畫檔和主頁連結,成為完整的網站。在第 9 堂課中已經介紹過如何連結動畫檔,因此以下簡單列出程式的寫法。您可以使用 14-2 節完成的檔案,或是開啟範例檔 14-ex07.fla 來進行操作。1.我們先來看看主頁的配置、按鈕的實體名稱(以紅色字表示)及要連結的動畫檔名(以藍色字表示),以便於稍後撰寫程式。東南科技大學專用 PowerPoint 檔案數位教材15將各個產品頁面連結到主頁面將各個產品頁面連結到主頁面
