著作權所有 © 旗標出版股份有限公司
Flash 網頁設計與特效
November 25, 2007
本章提要
•
13-1 使用發佈功能•
13-2 HTML 頁次設定•
13-3 其他各頁次設定•
13-4 發佈預覽•
13-5 列印動畫Page 3 November 25, 2007
13-1 使用發佈功能
•
如果把 Flash 動畫當成一般的動態影像檔處理,那麼把它放上網頁的基本方法,就是將它匯出
成 .swf 的 Flash 影片檔,然後再將影片檔插入網 頁中即可。
•
不過,由於 Flash 的效果繁多,因此要讓 Flash 影片在網頁上正常播放出來,還需要許多環節的 配合。使用發佈功能
•
例如,當某些網友的瀏覽器沒有安裝 Flash Player 時,要 不要加入一個 Script 程式來偵測瀏覽者的瀏覽器能不能 播放 Flash 影片,並在無法播放 Flash 影片時準備好替代 影像檔。•
這些 HTML 與 Script ...難道都要我們自己處理嗎?其實這 些雜事 Flash 已經幫你想好了,你只要專心做動畫,其餘 如插入 Flash 影片檔、匯出影像檔、加入 HTML 標籤、加 入偵測的 Script 程式等工作,就全交給 Flash 的發佈功能,讓它幫你一氣呵成處理好吧!
Page 5 November 25, 2007
發佈網頁的流程
•
首先,讓我們說明一下使用發佈(Publish)功能發佈網 頁的流程。之後,我們再解釋各個頁次與相關選項的意 義。1.
開啟要發佈的 Flash 動畫檔(在此,你可 以開啟課程中 任一練習檔),
接著執行『檔 案/發佈設定』
命令,進行發 佈網頁前的相 關設定︰
發佈網頁的流程
Page 7 November 25, 2007
發佈網頁的流程
2.
在發佈設定/格式頁次勾選想要匯出的檔案格式後,發 佈設定交談窗就會顯示各匯出檔案格式的設定頁次,讓 你在各頁次中設定相關選項︰發佈網頁的流程
3.
按下發佈鈕即可發佈!執行發佈功能所建立的 各個檔案,若不特別指定,都會存放在該 Flash 動畫檔所在的資料夾中。Page 9 November 25, 2007
管理發佈格式與路徑
•
在發佈設定/格式頁次中,還可管理動畫發佈的格 式和路徑。您在底下所勾選的檔案類型、與指定 的檔名和路徑都會存放在預設描述檔中。•
如果您有好幾組不同的發佈設定,則可以按下建 立新描述檔鈕,新增一個描述檔,然後再依據你 的需求修改要發佈的檔案格式、檔名、路徑,日 後即可從目前的描述檔列示窗切換到各組發佈設 定值了。管理發佈格式與路徑
Page 11 November 25, 2007
管理發佈格式與路徑
13-2 HTML 頁次設定
•
發佈設定/ HTML 頁次的功能主要是提供一些 HTML 語法 的設定,這些 HTML 語法可用來控制 Flash 影片檔在網頁 中播放的狀況。例如︰ Flash 影片檔的尺寸、是否重複播 放、Flash 影片的畫質等屬性設定。•
其中有一項最重要的設定項目,那就是「樣版(Template)」。此處的樣版所指為何呢?它就像是文 書處理軟體、排版軟體的範本一樣,是一種事先將版面、
格式等部分都安排妥當的文件。依範本所建立的網頁,不 需要再另外設計版面,只要填入內容即可!
Page 13 November 25, 2007
HTML 頁次設定
樣版
•
Flash 提供了數種 HTML 樣版(Template),按下資訊 鈕,則可以看到關於該樣版的說明,包含了主要用途與需 要配合匯出的檔案格式等︰Page 15 November 25, 2007
樣版
•
記得選取樣版之後,要按下資訊鈕看看該樣版的 說明,以確定要配合匯出哪些影像、影片檔,以 免有所遺漏。•
以下是各種樣版的用途說明,我們同時將該樣版 所需匯出之檔案表列出來,供你參考。•
僅限 Flash︰這是預設的樣版,包含了發佈 Flash 影片網 頁所需的最基本內容。•
Flash For Pocket PC 2003:專為Pocket PC 2003 作業 系統設計的樣版,針對 Pocket PC 2003 做了專用的對 齊設計。適用於 Pocket PC 中的 2003 Pocket IE 瀏覽 器,也適用於 IE 和 Netscape 瀏覽器。樣版
Page 17 November 25, 2007
•
Flash HTTPS:若顯示 Flash 影片時,找不到 Flash Player,則連結到 HTTPS 伺服器下載。•
QuickTime︰如果要將 Flash 動畫匯出成 QuickTime 影 片檔,並發佈成網頁,那就選此網頁樣版。樣版
•
包含 FSCommand 的 Flash:如果Flash動畫中有用到 FS Command 的 ActionScript 語法,那就要選這個網 頁樣版。•
包含命名錨點的 Flash:插入 Script 程式,以便發揮錨 點的功能,讓裝有 Flash Player 6 以上版本的使用者可 以在瀏覽含有 Flash 影片的網頁時,利用瀏覽器的上一 頁、下一頁或我的最愛功能來選擇觀賞製作者所指定的 幾個不同片段之影片。樣版
Page 19 November 25, 2007
關於 Flash 的錨點功能
•
以往觀賞含有 Flash 影片的網頁時,無法使用瀏覽器來控 制 Flash 影片的播放,只能靠 Flash 製作者設定倒轉按鈕 或利用 Flash 影片的快顯功能表來控制。而當使用者使用 我的最愛等功能記錄下此網頁,下次再連結到此網頁時,動畫也只能從頭開始播放:
關於 Flash 的錨點功能
•
若使用錨點功能,則可由 Flash 製作者事先在動畫影格中 設定幾個錨點,那麼使用者不僅可記錄下此網頁,還能進 一步記錄下錨點位置,這樣下次要連結到此網頁時,便可 以選擇要從影片的哪個錨點開始播放:Page 21 November 25, 2007
關於 Flash 的錨點功能
•
錨點只能設置在含有影格標籤的關鍵影格上,而影格標籤就會成為該錨點在瀏覽器中的名稱:
樣版
•
具有 AICC 追蹤的 Flash:支援 AICC-HACP 追蹤標準,當使用 Flash 內建的課程互動(Learning Interactions)元件製作線上學習 網頁時,可選用此樣版來發佈。
Page 23 November 25, 2007
樣版
•
具有 SCORM 2004 追蹤的 Flash:支援最新版 SCORM 2004 標準的發佈樣版,可初始化 ADL API 物件。SCORM 是一種規範數位學習的標準,若你使用 Flash 內建的課程互動元件製作線上學 習網頁時,可選用此一樣版。
•
具有 SCORM 追蹤的 Flash:與上者的差異在於只支援 到比較舊版的 SCORM 1.2 標準。•
影像地圖:如果動畫中的按鈕元件使用了 getURL 的 ActionScript 語法來設定超連結,而且想要把它轉換成 影像地圖,則可選這個樣版!樣版
Page 25 November 25, 2007
樣版
•
偵測 Flash 版本:若勾選此項,當瀏覽者開啟Flash 動畫網頁時,會先偵測電腦的 Flash Player 版本,如果是可接受的 Flash Player 版本,SWF 就會順利播放;如果電腦中沒有檢視 SWF 所需的 Flash Player版本,就會看到一個內含連結的網 頁,提醒瀏覽者去下載最新版本 Flash Player。
樣版
Page 27 November 25, 2007
樣版
•
以下就是提醒瀏覽者到 Macromedia 下載新版 Flash Player 的畫面:尺寸
在發佈設定/HTML交談窗的尺寸(Dimensions)區 中,你可以設定 Flash 影片檔的顯示區方框大小,
它共包含了 3 個選項。
•
符合影片(Match Movie)▫
與 Flash 動畫的舞台尺寸一致。選擇這項的好處是 不會看到舞台之外的工作區域內容,一般建議使用 此選項即可。Page 29 November 25, 2007
尺寸
尺寸
•
像素(Pixels)▫
以像素為單位來設定顯示區方框大小。如果設定的寬高大於 舞台,且比例與舞台不同,那麼就會顯示出工作區域來!以 像素為單位做設定,Flash 影片的顯示區域方框不會隨瀏覽 器視窗縮放而改變尺寸。Page 31 November 25, 2007
尺寸
•
百分比(Percent)▫
以瀏覽器視窗大小的百分比來設定。不過選取此項時,若遇 到所設之寬高比與瀏覽器寬高比不一致的情況,也有可能會 在 Flash 影片顯示區方框中露出工作區域喔!播放
播放(Playback)區有4個選項,說明如下︰
•
開始時先暫停(Paused At Start)▫
勾選此項,則不會自動播放 Flash 影片檔。•
重複(Loop)▫
勾選此項,重複播放 Flash 影片檔。Page 33 November 25, 2007
播放
•
顯示選單(Display Menu)▫
勾選此項,在 Flash 影片顯示區方框內按滑鼠右鈕 時,所出現的快顯功能表會顯示出完整的命令,以 供播放控制用。不然就只會顯示『設定』、『顯示 重繪區域』、『除錯程式』和『關於Flash Player 8』命令。
•
裝置字體(Device Font)▫
勾選此項,當瀏覽者沒有安裝 Flash 影片中使用的 字型時,會用反鋸齒的True Type
系統字型來替代。品質
•
品質(Quality)列示窗的設定是以「是否啟動反鋸齒功 能」,來調配 Flash 影片檔的處理時間︰▫
低(Low)︰永遠關閉反鋸齒功能。▫
自動低(Auto Low)︰先關閉反鋸齒功能,若Flash 影片檔下載速 率與播放速率相等,就自動開啟反鋸齒功能。▫
自動高(Auto High)︰先開啟反鋸齒功能,若 Flash 影片檔下載 速率無法達到播放速率(就是播放時有延遲的情形)時,就自動關 閉反鋸齒功能。▫
中(Medium):會開啟反鋸齒功能,但點陣圖的顯示品質較差。▫
高(High)︰永遠開啟反鋸齒功能。如果動畫含有點陣圖,同時 該點陣圖也有設定動畫效果時,點陣圖的顯示品質低;若沒有動畫Page 35 November 25, 2007
品質
•
最佳(Best)︰永遠開啟反鋸齒功能,而且動畫 中的點陣圖顯示品質佳!視窗模式
視窗模式(Window Mode)區提供 3 種顯示
Flash 影片檔的模式( IE 4.0 以上版本才支援)︰
•
視窗(Window)▫
在方框中顯示 Flash 影片,不論在 Flash 影片下層 或上層的網頁內容都無法顯示出來,會被 Flash 影 片遮住。Page 37 November 25, 2007
視窗模式
•
不透明無視窗(Opaque Windowless)︰在 Flash 影片 檔下層的網頁內容不會顯示出來,但在上層的網頁內容(例如以 <DIV> 或 <SPAN> 等 HTML 標籤製作的網頁內 容),可以顯示出來。
視窗模式
•
透明無視窗(Transparent Windowless)︰隱藏動畫的 背景顏色,讓 Flash 影片檔之下的網頁內容與背景,從 Flash 影片中透明的部分顯露出來。而在上層的網頁內容 也可以顯示出來。Page 39 November 25, 2007
測試「視窗模式」的技巧
•
要測試以上 3 種視窗模式的效果,必須先指定好 發佈的視窗模式,然後發佈成 html 文件。接著 再用網頁製作軟體,如:FrontPage,開啟剛剛 發佈的 html 文件,修改網頁背景顏色或指定背 景圖檔,並試著在網頁中加入一些網頁內容,再 以瀏覽器預覽即可看出視窗模式的效果了。HTML 對齊
•
HTML 對齊(HTML Alignment)是設定在網頁 中,Flash 影片顯示區方框與其旁邊其他網頁物 件(圖片、文字)的對齊方式:Page 41 November 25, 2007
HTML 對齊
HTML 對齊
Page 43 November 25, 2007
縮放
縮放(Scale)可設定 Flash 影片檔在其顯示區方框 中的縮放方式(但如果在尺寸項目中選用符合影片 選項的話,此處設定便不發生作用)。共有 4 種︰
•
預設值(顯示全部 Default( Show all ))▫
在顯示區方框中,以寬高等比例的方式顯示出舞台 完整內容。所以當方框與舞台尺寸不等比例時,就 會顯示出工作區內容。•
無縮放(No Scale)▫
強制不縮放 Flash 影片內容。縮放
•
無邊框(No border)▫
顯示區方框中,以寬高 等比例的方式顯示舞台 內容,並強制只能顯示 舞台內容。所以要是方 框與舞台尺寸不等比例 時,動畫內容可能會被 裁切。Page 45 November 25, 2007
縮放
•
精確符合(Exact fit)▫
在顯示區方框中完整顯示舞台內容,並強制只能顯 示舞台內容。所以方框要是與舞台尺寸不等比例,動畫內容就會變形!
Flash 對齊方式
如果顯示區方框中除了顯示舞台之外還有空間,或 是方框中只顯示舞台部分內容時,就可以在這裡設 定舞台在顯示區方框中的對齊方式(Flash
Alignment)。
•
在水平(Horizontal)中選擇水平對齊方式▫
齊左(Left)、置中(Center)、齊右(Right)•
在垂直(Vertical)中選擇垂直對齊方式▫
上方(Top)、置中(Center)、下方(Bottom)Page 47 November 25, 2007
顯示警告訊息
•
勾選顯示警告訊息(Show WarningMessages),會出現錯誤訊息來提醒你修改此 交談窗中錯誤的設定!
13-3 其他各頁次設定
•
在發佈流程中,當你在 HTML 頁次決定好樣版後,接著就 要到格式頁次勾選需匯出的檔案格式,而發佈設定交談窗 就會依勾選格式,顯示出對應的設定頁次:Page 49 November 25, 2007
13-4 發佈預覽
•
當你在發佈設定交談窗中設定好所有發佈網頁的 選項之後,除了按下發佈鈕直接執行發佈的動作 外,也可按下確定鈕,先關閉發佈設定交談窗,再用發佈預覽功能來發佈網頁,這樣 Flash 會同 時幫您開啟網頁來預覽效果。
•
執行『檔案/發佈預覽』命令,在子功能表中會列 出所有在發佈設定/格式頁次勾選的檔案格式發佈預覽
Page 51 November 25, 2007
13-5 列印動畫
•
Flash 動畫是由連續影格組合而成,有時我們可 能想將動畫逐格列印出來,以便觀察影格變化的 情形;或者碰到要跟別人講解動畫製作過程,也 可以將動畫印出來做說明。•
要列印影格內容,請先執行『檔案/版面設定』命 令,設定好紙張尺寸、列印邊界、方向、與版面 排列方式,都設定好之後再執行『檔案/列印』命 令實際列印下來。底下為你詳細說明。版面設定
•
首先執行『檔案/版面設定』命令進入頁面設定 交談窗:Page 53 November 25, 2007
版面設定
•
實際大小:依動畫實際尺寸來列印,不過旁邊會 出現縮放欄,你也可以設定放大或縮小列印。版面設定
•
調整至一頁:假如動畫的尺寸大於一張紙張所能 列印的範圍,則自動將動畫縮小列印在一張紙裡 面。•
分鏡板 – 方框、分鏡板 – 格線、分鏡板 – 空白:這 3 個選項適用在列印全部影格的時候,可以將 動畫列印成縮圖目錄來檢視。選這 3 個選項時,
旁邊都會出現影格跨越與影格邊界欄供你設定一 排要列印幾個影格,以及每個影格的間距。
Page 55 November 25, 2007
版面設定
版面設定
Page 57 November 25, 2007
執行列印
•
版面確認設定無誤後,即可回到動畫中執行『檔案/列印』命令,選擇要使用的印表機與列印份數,
即可依據剛才頁面設定交談窗中的設定值進行列 印了!