Flash 網頁設計與特效

(1)

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

Flash 網頁設計與特效

November 25, 2007

(2)

本章提要

•

13-1 使用發佈功能

•

13-2 HTML 頁次設定

•

13-3 其他各頁次設定

•

13-4 發佈預覽

•

13-5 列印動畫

(3)

Page 3 November 25, 2007

13-1 使用發佈功能

•

如果把 Flash 動畫當成一般的動態影像檔處理，

那麼把它放上網頁的基本方法，就是將它匯出

成 .swf 的 Flash 影片檔，然後再將影片檔插入網頁中即可。

•

不過，由於 Flash 的效果繁多，因此要讓 Flash 影片在網頁上正常播放出來，還需要許多環節的配合。

(4)

使用發佈功能

•

例如，當某些網友的瀏覽器沒有安裝 Flash Player 時，要不要加入一個 Script 程式來偵測瀏覽者的瀏覽器能不能播放 Flash 影片，並在無法播放 Flash 影片時準備好替代影像檔。

•

這些 HTML 與 Script ...難道都要我們自己處理嗎？其實這些雜事 Flash 已經幫你想好了，你只要專心做動畫，其餘如插入 Flash 影片檔、匯出影像檔、加入 HTML 標籤、加入偵測的 Script 程式等工作，就全交給 Flash 的發佈功能，

讓它幫你一氣呵成處理好吧！

(5)

發佈網頁的流程

•

首先，讓我們說明一下使用發佈（Publish）功能發佈網頁的流程。之後，我們再解釋各個頁次與相關選項的意義。

1.

開啟要發佈的 Flash 動畫檔

（在此，你可以開啟課程中任一練習檔），

接著執行『檔案/發佈設定』

命令，進行發佈網頁前的相關設定︰

(6)

發佈網頁的流程

(7)

發佈網頁的流程

2.

在發佈設定/格式頁次勾選想要匯出的檔案格式後，發佈設定交談窗就會顯示各匯出檔案格式的設定頁次，讓你在各頁次中設定相關選項︰

(8)

發佈網頁的流程

3.

按下發佈鈕即可發佈！執行發佈功能所建立的各個檔案，若不特別指定，都會存放在該 Flash 動畫檔所在的資料夾中。

(9)

管理發佈格式與路徑

•

在發佈設定/格式頁次中，還可管理動畫發佈的格式和路徑。您在底下所勾選的檔案類型、與指定的檔名和路徑都會存放在預設描述檔中。

•

如果您有好幾組不同的發佈設定，則可以按下建立新描述檔鈕，新增一個描述檔，然後再依據你的需求修改要發佈的檔案格式、檔名、路徑，日後即可從目前的描述檔列示窗切換到各組發佈設定值了。

(10)

管理發佈格式與路徑

(11)

管理發佈格式與路徑

(12)

13-2 HTML 頁次設定

•

發佈設定/ HTML 頁次的功能主要是提供一些 HTML 語法的設定，這些 HTML 語法可用來控制 Flash 影片檔在網頁中播放的狀況。例如︰ Flash 影片檔的尺寸、是否重複播放、Flash 影片的畫質等屬性設定。

•

其中有一項最重要的設定項目，那就是「樣版

（Template）」。此處的樣版所指為何呢？它就像是文書處理軟體、排版軟體的範本一樣，是一種事先將版面、

格式等部分都安排妥當的文件。依範本所建立的網頁，不需要再另外設計版面，只要填入內容即可！

(13)

HTML 頁次設定

(14)

樣版

•

Flash 提供了數種 HTML 樣版（Template），按下資訊鈕，則可以看到關於該樣版的說明，包含了主要用途與需要配合匯出的檔案格式等︰

(15)

樣版

•

記得選取樣版之後，要按下資訊鈕看看該樣版的說明，以確定要配合匯出哪些影像、影片檔，以免有所遺漏。

•

以下是各種樣版的用途說明，我們同時將該樣版所需匯出之檔案表列出來，供你參考。

(16)

•

僅限 Flash︰這是預設的樣版，包含了發佈 Flash 影片網頁所需的最基本內容。

•

Flash For Pocket PC 2003：專為Pocket PC 2003 作業 系統設計的樣版，針對 Pocket PC 2003 做了專用的對齊設計。適用於 Pocket PC 中的 2003 Pocket IE 瀏覽器，也適用於 IE 和 Netscape 瀏覽器。

樣版

(17)

•

Flash HTTPS：若顯示 Flash 影片時，找不到 Flash Player，則連結到 HTTPS 伺服器下載。

•

QuickTime︰如果要將 Flash 動畫匯出成 QuickTime 影片檔，並發佈成網頁，那就選此網頁樣版。

樣版

(18)

•

包含 FSCommand 的 Flash：如果Flash動畫中有用到 FS Command 的 ActionScript 語法，那就要選這個網頁樣版。

•

包含命名錨點的 Flash：插入 Script 程式，以便發揮錨點的功能，讓裝有 Flash Player 6 以上版本的使用者可以在瀏覽含有 Flash 影片的網頁時，利用瀏覽器的上一頁、下一頁或我的最愛功能來選擇觀賞製作者所指定的幾個不同片段之影片。

樣版

(19)

關於 Flash 的錨點功能

•

以往觀賞含有 Flash 影片的網頁時，無法使用瀏覽器來控制 Flash 影片的播放，只能靠 Flash 製作者設定倒轉按鈕或利用 Flash 影片的快顯功能表來控制。而當使用者使用我的最愛等功能記錄下此網頁，下次再連結到此網頁時，

動畫也只能從頭開始播放：

(20)

關於 Flash 的錨點功能

•

若使用錨點功能，則可由 Flash 製作者事先在動畫影格中設定幾個錨點，那麼使用者不僅可記錄下此網頁，還能進一步記錄下錨點位置，這樣下次要連結到此網頁時，便可以選擇要從影片的哪個錨點開始播放：

(21)

關於 Flash 的錨點功能

•

錨點只能設置在含有影格標籤的關鍵影格上，

而影格標籤就會成為該錨點在瀏覽器中的名稱：

(22)

樣版

•

具有 AICC 追蹤的 Flash：支援 AICC-HACP 追蹤標準，當使用 Flash 內建的課程互動

（Learning Interactions）元件製作線上學習網頁時，可選用此樣版來發佈。

(23)

樣版

•

具有 SCORM 2004 追蹤的 Flash：支援最新版 SCORM 2004 標準的發佈樣版，可初始化 ADL API 物件。SCORM 是一種規範數位學習的標準，

若你使用 Flash 內建的課程互動元件製作線上學習網頁時，可選用此一樣版。

(24)

•

具有 SCORM 追蹤的 Flash：與上者的差異在於只支援 到比較舊版的 SCORM 1.2 標準。

•

影像地圖：如果動畫中的按鈕元件使用了 getURL 的 ActionScript 語法來設定超連結，而且想要把它轉換成影像地圖，則可選這個樣版！

樣版

(25)

樣版

•

偵測 Flash 版本：若勾選此項，當瀏覽者開啟

Flash 動畫網頁時，會先偵測電腦的 Flash Player 版本，如果是可接受的 Flash Player 版本，SWF 就會順利播放；如果電腦中沒有檢視 SWF 所需的 Flash Player版本，就會看到一個內含連結的網頁，提醒瀏覽者去下載最新版本 Flash Player。

(26)

樣版

(27)

樣版

•

以下就是提醒瀏覽者到 Macromedia 下載新版 Flash Player 的畫面：

(28)

尺寸

在發佈設定/HTML交談窗的尺寸（Dimensions）區中，你可以設定 Flash 影片檔的顯示區方框大小，

它共包含了 3 個選項。

•

符合影片（Match Movie）

▫

與 Flash 動畫的舞台尺寸一致。選擇這項的好處是不會看到舞台之外的工作區域內容，一般建議使用此選項即可。

(29)

尺寸

(30)

尺寸

•

像素（Pixels）

▫

以像素為單位來設定顯示區方框大小。如果設定的寬高大於舞台，且比例與舞台不同，那麼就會顯示出工作區域來！以像素為單位做設定，Flash 影片的顯示區域方框不會隨瀏覽器視窗縮放而改變尺寸。

(31)

尺寸

•

百分比（Percent）

▫

以瀏覽器視窗大小的百分比來設定。不過選取此項時，若遇到所設之寬高比與瀏覽器寬高比不一致的情況，也有可能會在 Flash 影片顯示區方框中露出工作區域喔！

(32)

播放

播放（Playback）區有4個選項，說明如下︰

•

開始時先暫停（Paused At Start）

▫

勾選此項，則不會自動播放 Flash 影片檔。

•

重複（Loop）

▫

勾選此項，重複播放 Flash 影片檔。

(33)

播放

•

顯示選單（Display Menu）

▫

勾選此項，在 Flash 影片顯示區方框內按滑鼠右鈕時，所出現的快顯功能表會顯示出完整的命令，以供播放控制用。不然就只會顯示『設定』、『顯示重繪區域』、『除錯程式』和『關於

Flash Player 8』命令。

•

裝置字體（Device Font）

▫

勾選此項，當瀏覽者沒有安裝 Flash 影片中使用的字型時，會用反鋸齒的

True Type

系統字型來替代。

(34)

品質

•

品質（Quality）列示窗的設定是以「是否啟動反鋸齒功能」，來調配 Flash 影片檔的處理時間︰

▫

低（Low）︰永遠關閉反鋸齒功能。

▫

自動低（Auto Low）︰先關閉反鋸齒功能，若Flash 影片檔下載速率與播放速率相等，就自動開啟反鋸齒功能。

▫

自動高（Auto High）︰先開啟反鋸齒功能，若 Flash 影片檔下載速率無法達到播放速率（就是播放時有延遲的情形）時，就自動關閉反鋸齒功能。

▫

中（Medium）：會開啟反鋸齒功能，但點陣圖的顯示品質較差。

▫

高（High）︰永遠開啟反鋸齒功能。如果動畫含有點陣圖，同時該點陣圖也有設定動畫效果時，點陣圖的顯示品質低；若沒有動畫

(35)

品質

•

最佳（Best）︰永遠開啟反鋸齒功能，而且動畫中的點陣圖顯示品質佳！

(36)

視窗模式

視窗模式（Window Mode）區提供 3 種顯示

Flash 影片檔的模式（ IE 4.0 以上版本才支援）︰

•

視窗（Window）

▫

在方框中顯示 Flash 影片，不論在 Flash 影片下層或上層的網頁內容都無法顯示出來，會被 Flash 影片遮住。

(37)

視窗模式

•

不透明無視窗（Opaque Windowless）︰在 Flash 影片檔下層的網頁內容不會顯示出來，但在上層的網頁內容

（例如以 <DIV> 或 <SPAN> 等 HTML 標籤製作的網頁內容），可以顯示出來。

(38)

視窗模式

•

透明無視窗（Transparent Windowless）︰隱藏動畫的背景顏色，讓 Flash 影片檔之下的網頁內容與背景，從 Flash 影片中透明的部分顯露出來。而在上層的網頁內容也可以顯示出來。

(39)

測試「視窗模式」的技巧

•

要測試以上 3 種視窗模式的效果，必須先指定好發佈的視窗模式，然後發佈成 html 文件。接著再用網頁製作軟體，如：FrontPage，開啟剛剛發佈的 html 文件，修改網頁背景顏色或指定背景圖檔，並試著在網頁中加入一些網頁內容，再以瀏覽器預覽即可看出視窗模式的效果了。

(40)

HTML 對齊

•

HTML 對齊（HTML Alignment）是設定在網頁中，Flash 影片顯示區方框與其旁邊其他網頁物件（圖片、文字）的對齊方式：

(41)

HTML 對齊

(42)

HTML 對齊

(43)

縮放

縮放（Scale）可設定 Flash 影片檔在其顯示區方框中的縮放方式（但如果在尺寸項目中選用符合影片選項的話，此處設定便不發生作用）。共有 4 種︰

•

預設值（顯示全部 Default（ Show all ））

▫

在顯示區方框中，以寬高等比例的方式顯示出舞台完整內容。所以當方框與舞台尺寸不等比例時，就會顯示出工作區內容。

•

無縮放（No Scale）

▫

強制不縮放 Flash 影片內容。

(44)

縮放

•

無邊框（No border）

▫

顯示區方框中，以寬高等比例的方式顯示舞台內容，並強制只能顯示舞台內容。所以要是方框與舞台尺寸不等比例時，動畫內容可能會被裁切。

(45)

縮放

•

精確符合（Exact fit）

▫

在顯示區方框中完整顯示舞台內容，並強制只能顯示舞台內容。所以方框要是與舞台尺寸不等比例，

動畫內容就會變形！

(46)

Flash 對齊方式

如果顯示區方框中除了顯示舞台之外還有空間，或是方框中只顯示舞台部分內容時，就可以在這裡設定舞台在顯示區方框中的對齊方式（Flash

Alignment）。

•

在水平（Horizontal）中選擇水平對齊方式

▫

齊左（Left）、置中（Center）、齊右（Right）

•

在垂直（Vertical）中選擇垂直對齊方式

▫

上方（Top）、置中（Center）、下方（Bottom）

(47)

顯示警告訊息

•

勾選顯示警告訊息（Show Warning

Messages），會出現錯誤訊息來提醒你修改此交談窗中錯誤的設定！

(48)

13-3 其他各頁次設定

•

在發佈流程中，當你在 HTML 頁次決定好樣版後，接著就要到格式頁次勾選需匯出的檔案格式，而發佈設定交談窗就會依勾選格式，顯示出對應的設定頁次：

(49)

13-4 發佈預覽

•

當你在發佈設定交談窗中設定好所有發佈網頁的選項之後，除了按下發佈鈕直接執行發佈的動作外，也可按下確定鈕，先關閉發佈設定交談窗，

再用發佈預覽功能來發佈網頁，這樣 Flash 會同時幫您開啟網頁來預覽效果。

•

執行『檔案/發佈預覽』命令，在子功能表中會列出所有在發佈設定/格式頁次勾選的檔案格式

(50)

發佈預覽

(51)

13-5 列印動畫

•

Flash 動畫是由連續影格組合而成，有時我們可能想將動畫逐格列印出來，以便觀察影格變化的情形；或者碰到要跟別人講解動畫製作過程，也可以將動畫印出來做說明。

•

要列印影格內容，請先執行『檔案/版面設定』命令，設定好紙張尺寸、列印邊界、方向、與版面排列方式，都設定好之後再執行『檔案/列印』命令實際列印下來。底下為你詳細說明。

(52)

版面設定

•

首先執行『檔案/版面設定』命令進入頁面設定交談窗：

(53)

版面設定

•

實際大小：依動畫實際尺寸來列印，不過旁邊會出現縮放欄，你也可以設定放大或縮小列印。

(54)

版面設定

•

調整至一頁：假如動畫的尺寸大於一張紙張所能列印的範圍，則自動將動畫縮小列印在一張紙裡面。

•

分鏡板 – 方框、分鏡板 – 格線、分鏡板 – 空白：

這 3 個選項適用在列印全部影格的時候，可以將動畫列印成縮圖目錄來檢視。選這 3 個選項時，

旁邊都會出現影格跨越與影格邊界欄供你設定一排要列印幾個影格，以及每個影格的間距。

(55)

版面設定

(56)

版面設定

(57)

執行列印

•

版面確認設定無誤後，即可回到動畫中執行『檔

案/列印』命令，選擇要使用的印表機與列印份數，

即可依據剛才頁面設定交談窗中的設定值進行列印了！