flash 網頁設計與特效 - csie.ntu.edu.twr92045/csietrain/fp-slides/flash/flash_ch01-02.pdf ·...

著作權所有 © 旗標出版股份有限公司

Flash 網頁設計與特效January 26, 2008

January 26, 2008

本章提要

• 1-1 認識操作環境• 1-2 開新檔案、開啟舊檔與儲存檔案• 1-3 檢視動畫文件視窗• 1-4 面板的操作• 1-5 場景• 1-6 動畫的文件屬性• 1-7 動畫的匯出與發佈

January 26, 2008

1-1 認識操作環境

• 請執行『開始/所有程式/Macromedia/ Macromedia Flash 8』命令啟動 Flash，預設在程式開始時會顯示起始頁的開檔選單畫面，選單內容依類型分為 3 個區域，分別是開啟最近使用的檔案、建立新檔案和從樣板建立，供使用者自行選擇要執行的檔案。

January 26, 2008

認識操作環境

January 26, 2008

認識操作環境

• 請按下起始頁中建立新檔案區的 Flash 文件（第1 個項目），即可看到如下圖的預設版面配置，我們就透過它來認識 Flash 的操作環境：

January 26, 2008

認識操作環境

January 26, 2008

認識操作環境

• Flash 的操作環境主要分成 3 大部份：▫ Flash 主視窗▫ 動畫文件視窗▫ 散佈四處的面板。

• 主視窗界定出 Flash 程式的工作範圍；動畫文件視窗是編輯動畫內容的場所；面板則是製作動畫時所使用的各種工具箱。

January 26, 2008

1-2 檔案開啟與儲存

• 開新檔案• 開啟舊檔與關閉檔案• 儲存檔案• 切換與排列動畫文件視窗

January 26, 2008

開新檔案

• 在起始頁中選擇 Flash 文件項目，或在Flash 主視窗執行『檔案/開新檔案』命令皆可建立新檔案。

• 兩者的差異是選擇前者的方式開啟，會立即建立一個新的空白文件檔；執行後者的命令，則會出現如下的新增文件交談窗，讓您選擇要開啟的檔案類型：

January 26, 2008

開新檔案• 檔案預設會從未命名-1開始編號，接著是未命名

-2、未命名-3…依此類推，當你儲存檔案時，Flash 則會讓你重新為檔案命名。

January 26, 2008

開啟舊檔與關閉檔案

• 要開啟儲存在磁碟中的動畫檔，可執行『檔案/開啟舊檔』命令將檔案重新載入Flash 中來編輯；也可以在起始頁中選擇開啟最近使用的檔案項目或開啟舊檔，同樣可以由開啟舊檔交談窗讓您選擇要開啟的檔案。

January 26, 2008

開啟舊檔與關閉檔案

• 編輯完畢並儲存檔案後，可執行『檔案/關閉檔案』命令（或是按下動畫文件視窗標題列右側的鈕）關閉。

• 若按下主視窗的關閉鈕，則會關閉所有動畫文件視窗並結束 Flash。

January 26, 2008

儲存檔案

• 做好的Flash 動畫一定要儲存起來，以後才能再載入 Flash 中繼續編輯。

• 執行『檔案/儲存檔案』命令便可存檔。從未存檔過的 Flash 動畫，在執行『檔案/儲存檔案』命令後，會顯示另存新檔交談窗，讓你為檔案命名後再存檔，之後即直接儲存。

January 26, 2008

儲存檔案

• 要以其它檔案儲存時，請執行『檔案/另存新檔』命令，為動畫重新命名再儲存。

• Flash 所儲存的檔案格式是 .fla，這是Flash 動畫的原生檔案格式，只有 .fla 格式的檔案才能在Flash 中編輯、修改。

January 26, 2008

切換與排列動畫文件視窗

• 開啟多個檔案時，預設會將檔案名稱以頁次標籤顯示，按一下想要編輯的檔案頁次標籤，即可切換至該檔案。

• 『視窗』功能表最下方亦會列出目前開啟的檔案，選取檔案名稱可切換該檔案到最上層來編輯。

• 若執行『視窗/重疊顯示』命令，會將動畫檔顯示成一個個的獨立視窗，點選要編輯的檔案即可切換。

January 26, 2008

1-3 檢視動畫文件視窗

• 動畫文件視窗是編輯動畫內容的場所，所以在正式製作動畫之前，我們要花點時間來認識並熟悉這個工作環境。

• 首先我們要仔細瀏覽動畫文件視窗，了解其內部的組成，再熟悉檢視動畫的技巧。

January 26, 2008

文件視窗

• 開啟檔案時，動畫文件視窗預設是最大化的狀態，且填滿 Flash 的主視窗。

• 為了讓畫面變單純，使我們更清楚看到文件視窗的組成，請按下鈕，將文件視窗與主視窗分離，就可以看到如下的文件視窗。

January 26, 2008

文件視窗

January 26, 2008

文件視窗

• 文件視窗主要分成兩大塊，上面是時間軸面板，只有這個面板會嵌在文件視窗中。下方整個區域稱為編輯區，我們可以在此區進行繪圖、編輯動畫的內容；其中又分為兩個部份：白色的區域是舞台（Stage），即動畫真正的播放範圍，灰色部份稱為工作區域（Work Area），我們亦可在工作區域編輯物件，但在播放動畫時看不到此區的內容。

January 26, 2008

調整顯示比例

• 我們可以從編輯區右上方的顯示比例列示窗，或『檢視/顯示比例』子功能表中，選擇編輯區的顯示比例。

• 除了以數字改變顯示的比例外，也可以選擇顯示影格（Show Frame）、顯示全部（Show All）與符合視窗大小（Fin in Windows）3 個選項，其顯示狀況如右：

January 26, 2008

調整顯示比例

January 26, 2008

調整顯示比例

• 也可以直接在顯示比例列示窗中輸入想要的比例值（% 可以省略），或利用『檢視』功能表的『放大顯示』或『縮小顯示』命令來調整顯示比例。

January 26, 2008

顯示/ 隱藏工作區域

• 在編輯動畫時，預設會顯示工作區域，執行『檢視/工作區域』命令則可切換工作區域的顯示或隱藏（勾選該命令表示顯示）。隱藏工作區域時，位於工作區域中的物件便不會顯示，想預覽動畫播放的實際畫面便可這麼做。

January 26, 2008

顯示/ 隱藏工作區域

January 26, 2008

使用「縮放工具」調整顯示比例

• 利用工具面板上檢視區的縮放工具（Zoom Tool），可以針對特定區域進行縮放：

January 26, 2008

使用「縮放工具」調整顯示比例

January 26, 2008

使用「手掌工具」移動畫面

• 使用手掌工具（Hand Tool）可以拉曳編輯區的畫面，以顯示出想要檢視的部份，且不會改變顯示比例：

January 26, 2008

預覽模式─加快畫面顯示速度• Flash 提供5 種預覽模式，可以讓你根據電腦效能調整畫面的顯示速度。

• 請執行『檢視/預覽模式』

January 26, 2008

外框（Outlines）

• 此模式只會顯示物件的外框輪廓，所以顯示速度最快。當你要改變圖形物件的造型時，選此模式可以方便作業。

January 26, 2008

快速（Fast）

• 此模式可顯示物件原來的顏色，但不啟用反鋸齒（Anti-aliasting）功能，所以顯示的速度較快，但會出現鋸齒狀邊緣的現象。

January 26, 2008

消除鋸齒（Antialias）

• 此模式可顯示物件原色，並開啟了圖像物件的反鋸齒功能，所以看起來比較平滑，但顯示速度比快速模式慢。

January 26, 2008

消除文字鋸齒（Antialias Text）• 此模式比消除鋸齒模式多了文字物件的反鋸齒功能，即使文字物件放大顯示，看起來也很平滑。

January 26, 2008

完整（Full）

• 此模式中所有物件皆以最佳效果呈現，但會因此讓顯示的速度變得緩慢。

January 26, 2008

1-4 面板的操作

• Flash 的操作環境是可以彈性配置的，其重點就在於各式面板的靈活調度。想要有個舒適又適合自己的編輯環境，那你先得學會面板的各項基本操作。

January 26, 2008

開啟、切換與關閉面板

• Flash 的面板可以隨時視作業需求自由開啟或關閉，從『視窗』功能表即可看到Flash 提供的各面板。

January 26, 2008


• 各面板都有對應的快速鍵，所以你也可以利用快速鍵來開啟、展開或摺疊、關閉面板，例如按下[Ctrl] + [K] 鍵，可開啟對齊面板。

• 當面板標題列包含 2 至 3 個面板時稱為面板群組，按下群組內的面板標題，即可切換至該面板進行設定。

January 26, 2008


January 26, 2008


• 對於已開啟，但暫時不需使用的面板，除了可由『視窗』命令將該面板關閉（再點選一次面板名稱）外，還可以利用如下的方法關閉面板，騰出更大的編輯空間：

January 26, 2008


• 如果只是想要暫時隱藏所有的面板，可按下 [F4] 鍵（或執行『視窗/隱藏面板』命令），將目前操作環境中所有已開啟的面板全部隱藏起來；再按一次 [F4] 鍵，又可恢復原狀。

January 26, 2008

摺疊與展開面板

• 在操作的過程中，面板有可能擋住太多編輯區域，但又要隨時開啟該面板時，可利用標題列上左邊的三角圖示來摺疊或展開面板：

January 26, 2008

摺疊與展開面板

• 如果想要一次摺疊右側（或下方）的所有面板，可按下鈕（或鈕），即可一次摺疊右側（或下方）的面板區，再按一次可展開該面板區。

January 26, 2008

移動與組合面板

• 面板可以嵌在主視窗上，也可以變成浮動面板，還可以將多個面板組合成面板群組。按住滑鼠左鈕拉曳面板標題列左側的移動把手，即可移動面板位置

January 26, 2008


January 26, 2008


• 不過，面板群組中的面板無法直接拉曳來調整位置，只能整個面板群組一起移動。為了提供更方便的操作環境，我們還可以將多個面板組合在一起，組成更適合自己使用的專屬面板群組。

• 請按下面板標題列右邊的鈕

January 26, 2008


January 26, 2008


• 如果希望調色盤面板，不再隸屬於顏色面板群組之下，可執行上圖中的『新面版群組』命令，使調色盤面板獨立顯示成一個面板，或是在其它面板進行如上的合併操作，將經常使用的面板集合在一起，就成為自己專屬的面板群組囉！

January 26, 2008

儲存與管理版面配置

• Flash 會記憶關閉時的環境配置（包括各面板的組合、開啟狀態），待下次啟動時仍會顯示上次關閉前的狀態。

• 若想保留調配好的面板配置，可執行『視窗/工作區版面/儲存目前版面』命令，將目前的操作環境配置命名存檔，日後即可於『視窗/ 工作區版面』子功能表中直接選取套用。

January 26, 2008


• 執行『視窗/工作區版面』命令，可以看到預設及自訂的面板配置，選取要套用的面板配置名稱，工作環境即可調整至該配置：

January 26, 2008


• 一旦儲存了太多的版面配置，反而可能失去選擇的便利性，你可以執行『視窗/工作區版面/管理版面』命令，從中刪除不需要的版面配置：

January 26, 2008

1-5 場景

• 場景（Scene）是 Flash 動畫中的一個重要觀念，這個觀念是從電影、影片延伸而來，例如我們在電影中，看到女主角在家門口與男主角道別後，接著鏡頭一轉，男主角馬上到機場要坐飛機了... 。

• 短短幾句話，我們就看到了兩個場景，第1 個場景是「女主角在家門口與男主角道別」，第 2 個場景是「男主角到機場坐飛機」。

January 26, 2008

何謂場景

• 所謂的場景，就是指整個影片中的一個片段。一個 Flash 動畫中可以有多個場景，而場景之間最大的不同通常是背景，也就是除了主角之外的環境。

• 兩個連續播放的場景，可以沒有任何關聯，尤其在 Flash 中，場景的播放順序還可以透過ActionScript 來控制，因此我們可以說，場景是用來區隔不同的動畫，以方便安排故事情節。

January 26, 2008

新增與切換場景

• 新開啟的空白文件預設只有一個場景，如果需要增加場景，執行『插入/場景』命令即可新增，而新增的場景會依順序編號，例如預設的場景為場景1，那麼新增的場景便從場景2、場景3... 依序編號。

January 26, 2008

場景的安排與操作

• 使用場景面板（Scene panel）可以新增、複製、刪除、重新命名場景，以及調整各場景的順序。

• 請執行『視窗/其他面板/場景』

January 26, 2008

1-6 動畫的文件屬性

• 舞台是動畫實際播放的畫面，所以舞台的大小與長寬比例對將來動畫的呈現有很大的影響。

• Flash 預設的舞台尺寸是550 Pixels × 400 Pixels，背景為白色

• 如果要更改舞台大小與背景色，請執行『修改/文件』，開啟文件屬性交談窗

January 26, 2008

動畫的文件屬性

January 26, 2008


• 標題（Title）：輸入動畫的標題。• 說明（Description）：新增動畫的描述及說明文字。

• 尺寸（Dimensions）：此設定舞台的寬、高度，尺寸單位可由下方的尺規單位欄設定。舞台的寬、高度必須設定在 1 Pixels 至 2880 Pixels 之間。

January 26, 2008


• 符合（Match）：此處提供 3 個選項來設定舞台尺寸。

• 背景顏色（Background Color）：設定舞台背景色。

January 26, 2008


• 影格速率（Frame Rate）：設定動畫播放速率• 尺規單位（Ruler Unites）：設定舞台尺寸的單位，一般建議使用預設值（像素）即可。

• 設成預設：按此鈕可將目前的設定存成預設值，以後開啟新檔案都會套用這個預設值。

January 26, 2008


• 由於將 Flash 動畫發佈成網頁時，還可以另行調整顯示區域、大小...，所以若一開始不知如何決定舞台尺寸，使用預設值（550 Pixels × 400 Pixels）即可。

January 26, 2008

1-7 動畫的匯出與發佈

• 做好的 Flash 動畫除了要儲存起來，方便日後再載入 Flash 中編輯外，想要讓 Flash 動畫能夠在其它應用程式播放，例如用Microsoft Media Player 播放，還得進一步將動畫匯出成適當的格式。

• 若是要將動畫應用在網頁上，那麼可由 Flash 的發佈功能設定所有細節。

January 26, 2008

動畫的匯出與發佈

• Flash 動畫的原生檔案格式為 .fla，發佈成動畫檔後檔案格式為 .swf，預設可在 Flash Player 進行播放（安裝 Flash 程式時即會進行安裝）。

January 26, 2008

本章提要

• 2-1 快速建立移動動畫• 2-2 製作逐一影格動畫

January 26, 2008

2-1 快速建立移動動畫

• Flash 能讓製作網頁動畫的人趨之若鶩，有大半功勞都要歸給補間動畫（Tweened）。它是最方便又容易的一種動畫製作方式，我們只要製作連續動作的開始和結束的內容，中間的動畫過程就交給 Flash 自動完成。

January 26, 2008

快速建立移動動畫

January 26, 2008


• 運用補間動畫可以輕易製作出具有移動、縮放、旋轉、形狀漸變、色彩漸變等效果的動畫，還能控制移動速度變慢或變快…等。

• Flash 的補間動畫分為形狀補間動畫（Shape Tweening）和移動補間動畫（Motion Tweening）2 種，此處我們先介紹移動補間動畫的製作方法，讓您搶先體驗補間動畫的魅力。

January 26, 2008


1. 開啟檔案 Sample02.fla；2. 我們要製作第 1 格影格的內容。請先按一下時間軸面板上圖層 1的影格 1 ，再執行『視窗/元件庫』命令開啟元件庫面板，其中小汽車是我們準備好的圖形，請從元件庫面板將小汽車拉曳到舞台左邊的位置：

January 26, 2008


January 26, 2008


3. 接下來我們要製作結束影格的內容。假設動畫共有 10 格影格，請在時間軸面板上圖層 1的影格 10 處按下滑鼠右鈕，執行『插入關鍵影格』命令（快速鍵：F6）：關鍵影格：影格 10 的動作會延續影格 1 的動作

January 26, 2008

「播放磁頭」的作用

• 我們可由播放磁頭得知目前舞台上播放的是哪一格影格的內容。請先按一下影格 1 的位置，將播放磁頭移至動畫的最前面，再按下 [Enter] 鍵，此時播放磁頭會依序由影格 1 移動至影格 10，不過由於我們尚未進行移動的設定，因此舞台上的小汽車沒有任何的移動或變化。

January 26, 2008


4. 選取圖層 1的影格 10，然後按下工具箱的選取工具，再將舞台左邊的小汽車拉曳到舞台的右邊，代表小汽車的行徑路線。移動時請儘量保持水平移動，如果擔心無法維持在相同的水平位置，請在拉曳前先按下 [Shift] 鍵不放再進行拉曳，小汽車就會維持在相同的水平位置囉！

January 26, 2008


January 26, 2008


• 請在影格 1 上按右鈕，執行『建立移動補間動畫』命令，影格 1 到影格10 之間便會顯示一個箭頭圖示，箭頭穿過的影格，就是 Flash 幫我們完成的，這些自動完成的影格稱之為補間動畫影格：

January 26, 2008


• 動畫設定到此就完成了，請按下時間軸面板上的影格 1，將播放磁頭移至影格 1 的位置，再按下[Enter] 鍵，即可藉由播放磁頭的移動來檢視小汽車的移動效果。

January 26, 2008

調整影格速率

• 預設影格播放速率為 12 fps（frame per second，每秒影格）

• 在時間軸下方顯示影格數字的欄位雙擊，即可開啟文件屬性視窗，修改影格播放速率使動畫達到最佳表現效果。

January 26, 2008

2-2 製作逐一影格動畫

• 除了補間動畫的製作方式，我們也可以一格一格的繪製影格內容，這種類似傳統卡通的繪製方法，我們稱之為連續影格動畫（Frame by Frame）。

• 連續影格動畫所採用的製作方式，是將要表現動態的部份分解成多個動作，然後一個個的製作，再將這些動作連續播放，就形成了動態效果。

January 26, 2008

製作逐一影格動畫

• Smaple03.fla

January 26, 2008


• 連續影格動畫需要繪製很多內容不同的影格，適合用來表現細膩的動作，例如︰人物的跑步各階段動作（Sample04.fla）

• 缺點▫ 製作費時▫ 檔案體積較大

• 如果動畫要應用在網頁上，最好盡量減少使用連續影格動畫，以免增加網頁下載時間。

January 26, 2008


• 在 Flash 中製作連續影格動畫有 2 種方式▫ 在 Flash 中逐格地繪製分解動作或▫ 直接匯入由其它軟體（如︰Illustrator、

Photoshop...）所製作的分解動作連續圖檔。• 在此，我們使用的是第 1 種方式，在 Flash 中逐格繪製動作。

January 26, 2008


1. 開啟檔案 Sample03.fla 後，即可在元件庫面板（執行『視窗/元件庫』命令可開啟元件庫面板）看到我們事先準備好的 7 個分解動作圖檔。請拉曳動作 1至舞台中靠近右邊的位置：

January 26, 2008


January 26, 2008


2. 請點選時間軸面板圖層 1的影格 2 再按下 [F7] 鍵（或在影格 2 上按右鈕，執行『插入空白關鍵影格』命令），將影格 2 設定為空白關鍵影格。

January 26, 2008

製作逐一影格動畫3. 按下時間軸面板下方的描圖紙，再將動作 2由元件庫拉至舞台上動作 1的左邊位置。啟動描圖紙的好處，就是可以參考影格 1 中動作1的位置來安排影格 2 的內容，使動作 2的位置能更準確，動畫的效果更流暢。

January 26, 2008

製作逐一影格動畫4. 重覆步驟 2 及步驟 3 的操作，一一設定好每個影格的動作，每設定一個影格就要往左邊移動一點，才會有走向左邊的效果。請設定到動作 7，整個動畫會有 7 個影格。

January 26, 2008


• 完成後請在影格 1 的位置按一下，將播放磁頭移到影格 1 的位置，即可按下 [Enter] 鍵瀏覽每個影格的設定結果，並檢查動畫的流暢度再做適當的調整；或是先儲存檔案，再執行『控制/測試動畫』命令，檢視動畫的播放效果。

January 26, 2008

常用快速鍵

• 開新檔案 Ctrl + N• 開啟舊檔 Ctrl + O• 儲存檔案 Ctrl + S• 插入影格 F5• 插入關鍵影格 F6• 插入空白關鍵影格 F7• 測試動畫 Ctrl + Enter

January 26, 2008

HW #01

• 簡易動畫製作▫ 移動補間動畫製作 24 影格長度（約 2 秒）動畫

▫ 逐一影格動畫製作 36 影格長度（約 3 秒）動畫

• 作業完成後，請將兩個 Flash 原始檔（.fla）壓縮成一個壓縮檔（.7z、.zip、.rar、…），以附件Email 給老師▫ 信件主旨：FW55學號:HW01

Flash 網頁設計與特效本章提要1-1 認識操作環境認識操作環境認識操作環境認識操作環境認識操作環境1-2 檔案開啟與儲存開新檔案開新檔案開啟舊檔與關閉檔案開啟舊檔與關閉檔案儲存檔案儲存檔案切換與排列動畫文件視窗1-3 檢視動畫文件視窗文件視窗文件視窗文件視窗調整顯示比例調整顯示比例調整顯示比例調整顯示比例調整顯示比例顯示/ 隱藏工作區域顯示/ 隱藏工作區域使用「縮放工具」調整顯示比例使用「縮放工具」調整顯示比例使用「縮放工具」調整顯示比例使用「手掌工具」移動畫面預覽模式─加快畫面顯示速度外框（Outlines）快速（Fast）消除鋸齒（Antialias）消除文字鋸齒 �（Antialias Text）完整（Full）1-4 面板的操作開啟、切換與關閉面板開啟、切換與關閉面板開啟、切換與關閉面板開啟、切換與關閉面板開啟、切換與關閉面板摺疊與展開面板摺疊與展開面板移動與組合面板移動與組合面板移動與組合面板移動與組合面板移動與組合面板移動與組合面板儲存與管理版面配置儲存與管理版面配置儲存與管理版面配置1-5 場景何謂場景新增與切換場景場景的安排與操作1-6 動畫的文件屬性動畫的文件屬性動畫的文件屬性動畫的文件屬性動畫的文件屬性動畫的文件屬性1-7 動畫的匯出與發佈動畫的匯出與發佈Flash 網頁設計與特效本章提要2-1 快速建立移動動畫快速建立移動動畫快速建立移動動畫快速建立移動動畫快速建立移動動畫快速建立移動動畫「播放磁頭」的作用快速建立移動動畫快速建立移動動畫快速建立移動動畫快速建立移動動畫調整影格速率2-2 製作逐一影格動畫製作逐一影格動畫製作逐一影格動畫製作逐一影格動畫製作逐一影格動畫製作逐一影格動畫製作逐一影格動畫製作逐一影格動畫製作逐一影格動畫製作逐一影格動畫常用快速鍵HW #01

flash 網頁設計與特效 - csie.ntu.edu.twr92045/csietrain/fp-slides/flash/flash_ch01-02.pdf ·...

Documents