106
Flash 網頁設計與特效 December 29, 2007

Flash 網頁設計與特效 - 國立臺灣大學 資訊 ...r92045/csieTrain/fp-slides/flash/flash_ch04-05.pdf · • 4-6 用魔術棒替點陣圖去背 . December 29, 2007 Page 3

  • Upload
    others

  • View
    12

  • Download
    0

Embed Size (px)

Citation preview

  • Flash 網頁設計與特效December 29, 2007

  • Page 2December 29, 2007

    本章提要

    • 4-1 墨水瓶工具• 4-2 油漆桶工具• 4-3 滴管工具• 4-4 顏色面板的使用• 4-5 調整漸層填色• 4-6 用魔術棒替點陣圖去背

  • Page 3December 29, 2007

    4-1 墨水瓶工具

    • Flash 提供了墨水瓶工具(Ink Bottle Tool)和油漆桶工具(Paint Bucket Tool) 2 種填色工具,一個用來填筆畫顏色,另一個則是用來填填色區域。

    • 使用鉛筆工具(Pencil Tool)、線段工具(Line Tool)所繪製的筆畫,以及用橢圓形工具(Oval Tool)、矩形工具所繪製的橢圓形與矩形的外框筆畫,由於都屬於筆畫,若想要更改其筆畫粗細、顏色或樣式,使用的就是墨水瓶工具!

  • Page 4December 29, 2007

    墨水瓶工具

  • Page 5December 29, 2007

    用選取法改變筆畫與顏色

    • 使用墨水瓶工具,只要直接在筆畫上按一下就可以變更筆畫的屬性。但若要變更部分的筆畫,或是同時變更多個筆畫,就需先進行選取的動作,再用墨水瓶工具變更筆畫屬性。

    • 我們可以先選取物件,然後在屬性、調色盤、或顏色色票面板中調整各項屬性,就能改變被選取物件的屬性,同時看到改變後的結果呢!

  • Page 6December 29, 2007

    用選取法改變筆畫與顏色

  • Page 7December 29, 2007

    4-2 油漆桶工具• 按下油漆桶工具(Paint Bucket Tool)鈕,並在封閉區域內按一下,該封閉區域即可填滿顏色。所以若要改變任何填色區域,都可以使用油漆桶工具喔!

  • Page 8December 29, 2007

    關於填色時的空隙大小填色樣式

    • 當封閉區域有空隙時,只要設定空隙大小的限度,油漆桶工具便會依其限度來填入顏色。

  • Page 9December 29, 2007

    4-3 滴管工具

    • 滴管工具(Eyedropper Tool)的功能是用來測知物件是屬於筆畫、填色區域、或是文字物件。此外,還能一併測知圖形物件的顏色、筆畫粗細、樣式以及文字物件的屬性,並將之套用在其他圖形物件或文字物件上。

  • Page 10December 29, 2007

    • 至於要怎麼用呢?請按下滴管工具,然後將指標靠近物件,由指標旁出現的圖示可以判斷是筆畫 、填色區域 還是文字物件 。

    • 這時再用滴管工具按一下物件,就會自動選取可編輯該物件的對應工具,並將測知的屬性顯示在各個相關面板,以後便可以直接套用在其他物件上啦!

    滴管工具

  • Page 11December 29, 2007

    使用滴管工具偵測筆畫

  • Page 12December 29, 2007

    使用滴管工具偵測填色區域

  • Page 13December 29, 2007

    使用滴管工具偵測文字物件

  • Page 14December 29, 2007

    4-4 顏色面板的使用

    • 調色盤面板(Color Mixer)和顏色色票面板(Color Swatches)是 Flash 用來編輯顏色和色彩集的面板。

  • Page 15December 29, 2007

    色彩集

    • 「色彩集(Color Set)」是什麼?其實就像小時候買的 46 色色筆一樣,拿到繪圖軟體中來比擬,它就是一個 46 色的色彩集囉!

    • 當然,Flash 中色彩集的顏色不會這麼少,也不可能只有固定的顏色可用。Flash 的色彩集除了預設的之外還可以自己新增顏色、編輯色彩集,並把它存起來以供日後使用呢!

  • Page 16December 29, 2007

    色彩集

    • 「可是如此說來,既然 Flash 可以新增很多很多的顏色,那麼又為什麼要定義一個色彩集,而這個色彩集卻不是包含所有的顏色呢?每次都用一個最大的,什麼顏色都有的色彩集不就好了嗎?」

  • Page 17December 29, 2007

    色彩集

    • 定義色彩集通常有下列 3 個目的:▫ 一是減少檔案大小,因為記錄顏色種類也是要占空間的。

    ▫ 二是確保觀賞者也能看到正確的顏色,像網頁216色彩集(Web 216)就是這個用途。

    ▫ 三是方便製作,因為通常我們畫畫時,不會什麼顏色都用,總是會有較常用的顏色,也會有用不到的顏色,所以與其在 "色海" 中搜尋顏色,還不如定義一兩個常用色彩集,這樣可以加速動畫製作的速度喔!

  • Page 18December 29, 2007

    色彩集

    • 基本上,Flash 提供了一個預設色彩集,而預設色彩集分成單色色彩集和漸層色色彩集兩種。筆畫和填色區域都可以使用單色、漸層色、不填色或填入點陣圖,因此設定筆畫和填色區域顏色時,會同時出現單色與漸層色色彩集

  • Page 19December 29, 2007

    預設色彩集是瀏覽器標準顏色

    • Flash 製作的動畫主要是應用在網頁上,此時最好使用預設的瀏覽器標準顏色,如此一來便可以確保使用瀏覽器觀賞 Flash 動畫時,顏色不會失真。

    • 但如果你的 Flash 動畫不是要用在網頁上,如製作 Flash 的放映檔,或是製作 AVI 視訊檔、QuickTime 影片檔,當色彩集中的顏色不能滿足需求時,你就可以利用調色盤面板與顏色色票面板來編輯出適合自己使用的色彩集喔!

  • Page 20December 29, 2007

    調色盤面板• 調色盤(Color Mixer)面板是 Flash 用來做細部顏色編輯的面板,可編輯單色/漸層顏色,或是選出 Flash 預設色彩集中沒有的顏色(單色),並新增到色彩集中以供使用。

    • 它長得和工具面板顏色區很像,不過功能更多更強一些。請執行『視窗/調色盤』命令,開啟調色盤面板:

  • Page 21December 29, 2007

    調色盤面板

    • 上圖中我們看到調色盤面板提供了 5 種填色樣式:無(None)、純色(Solid)、線性(Linear)、放射狀(Radial)、與點陣圖(Bitmap)填色樣式。

    • 關於這些填色樣式的效果,分述如下。

  • Page 22December 29, 2007

    無填色樣式

    • 無(None)填色樣式表示不填色;當圖像物件是以橢圓形工具、矩形工具繪製出來時,才能選擇無填色樣式。

  • Page 23December 29, 2007

    純色填色樣式

    • 純色(Solid)填色樣式主要用來編輯單色顏色,我們可選擇 RGB 或 HSB 來編輯顏色。

    • RGB 利用色光三原色紅R,綠G,藍 B 做為調色的基礎,就像調水彩一樣,該色的數值越高則該色的比例越重。

    • HSB 則可讓我們利用 Hue(色相)、Saturation(飽和度)、Brightness(亮度)3 種方式調整顏色,如果 B 的數值為 0,則如處暗房,任何顏色都呈現黑色。

  • Page 24December 29, 2007

    純色填色樣式

  • Page 25December 29, 2007

    線性填色樣式

    • 選擇線性填色樣式,可填入自訂的線性漸層色(若要選用色彩集中預設的漸層色,可利用顏色色票面板或工具面板中的顏色區)。

  • Page 26December 29, 2007

    • 每個漸層指標 即可設定一種色彩,以增加漸層色的變化,只要在漸層定義列上按滑鼠左鈕便可新增漸層指標;如要刪除,則按住 [Ctrl] 不放,再將滑鼠指標移至要刪除的漸層指標上,滑鼠指標變成 樣子時,按下滑鼠左鈕即可刪除。

    • 但要注意的是,每個漸層色至少要有 2 個漸層指標,最多不能超過 15 個。

    線性填色樣式

  • Page 27December 29, 2007

    漸層色的儲存方法

    • 編輯完漸層色後,你可以將其新增到顏色色票面板中,方便日後使用。不過從調色盤面板新增到顏色色票面板的漸層色只會記錄在該動畫檔(.fla )中,其它的檔案無法使用。

    • 若要讓每個檔案都能利用到它,則必須儲存該色彩集。

  • Page 28December 29, 2007

    漸層色的儲存方法

  • Page 29December 29, 2007

    放射狀填色樣式• 放射狀(Radial)填色樣式與線性填色樣式相似,都可以自行編輯漸層顏色,只是漸層的方式不同。此外,如果以油漆桶工具或墨水瓶工具點選區域進行放射狀填色,填色會以點選的位置做為放射狀的中心。如果以其他方式進行,則放射狀的中心會落在該區域的中心位置。

  • Page 30December 29, 2007

    點陣圖填色樣式

    • 選擇點陣圖(Bitmap)填色樣式,可在填色區域中填入點陣圖。當元件庫中含有點陣圖時,便可選此填色樣式;填色的時候,如果是先點選填色區域,再從調色盤中選取點陣圖樣式,則點陣圖會以所選區域的大小為範圍等比例呈現;如果是以油漆桶工具點選區域進行點陣圖填色,則點陣圖會以小圖案的模樣陣列佈滿該區域。

    • 若是元件庫中不包含任何點陣圖,在選擇點陣圖填色樣式時,會開啟交談窗要求你匯入點陣圖。

  • Page 31December 29, 2007

    點陣圖填色樣式

  • Page 32December 29, 2007

    顏色色票面板

    • 顏色色票(Color Swatches)面板是編輯色彩集的中心,色彩集的編輯、儲存、匯入...工作,都在這裡進行。請執行『視窗/顏色色票』命令以開啟顏色色票面板:

  • Page 33December 29, 2007

    顏色色票面板

    選項選單中各項命令的操作說明:

    • 複製色票(Duplicate Swatch)︰點選色彩集中任一顏色,再執行此命令,可複製一個同樣的色票出來。

    • 刪除色票(Delete Swatch)︰點選色彩集中任一顏色,再執行此命令,可刪除該色票。

    • 增加顏色(Add Colors)︰執行此命令,可匯入顏色加入目前色彩集中。

  • Page 34December 29, 2007

    顏色色票面板

  • Page 35December 29, 2007

    關於色彩集檔案的格式

    • clr(Flash Color Set)是 Flash 專屬的色彩集檔案格式,它可以包含漸層色彩集,所以適合用於Flash 文件間交流用的色彩集檔案格式。

    • act(Color Table)只能輸出單色色彩集,不能輸出漸層色彩集,適合做為 Flash 與其他應用軟體,如 Fireworks、Photoshop 之間交流用的色彩集檔案格式。

  • Page 36December 29, 2007

    顏色色票面板

    • 取代顏色(Replace Colors)︰執行此命令,會移除目前的色彩集,改成匯入的色彩集(其操作方式同『增加顏色』命令)。

    • 載入預設顏色(Load Default Colors)︰執行此命令可以開啟預設的色彩集。

    • 儲存顏色(Save Colors)︰執行此命令,可以把目前色彩集中的顏色匯出,存成色彩集檔案以方便日後使用。

  • Page 37December 29, 2007

    顏色色票面板

    • 另存成預設值(Save as Default)︰把目前自訂的色彩集存成預設色彩集,以後所有新開啟的Flash 文件,其預設色彩集都會變成此色彩集。

    • 清除顏色(Clear Colors)︰執行此命令會清除目前色彩集中的顏色,只留下黑、白兩色與一個黑白漸層色。

  • Page 38December 29, 2007

    顏色色票面板

    • 網頁 216 色(Web 216)︰執行此命令,會開啟網頁 216 色安全色彩集。不過,由於 Flash 預設的色彩集就是網頁 216 色,所以只有將自訂的色彩集儲存為預設色彩集時,此功能才會突顯。

    • 依顏色排序(Sort by color)︰把目前色彩集裡的顏色依 HUE(色相)來排序。

  • Page 39December 29, 2007

    4-5 調整漸層填色

    • 不論是筆畫或者是填色區域都可以填入漸層色,而填入漸層色的方法又可分為線性及放射狀這 2 種,下面我們以填色區域為例,來說明線性及放射狀的漸層填色方式有哪些不同。

  • Page 40December 29, 2007

    • 選擇油漆桶工具,按下 鈕取消填色鎖定,並在顏色區中選取一種漸層填色:

    線性漸層填色

  • Page 41December 29, 2007

    放射狀漸層填色

    • [實做] 開啟 exercise/ex01.fla▫ 完成如上圖之撞球

  • Page 42December 29, 2007

    鎖定填色功能

    • 使用筆刷工具或油漆桶工具時,工具面板下方的選項區都會有一個鎖定填色(Lock Fill)鈕。此鈕可以啟動鎖定填色功能,將多個填色區域視為同一區域來填色。

    • 筆刷工具和油漆桶工具的鎖定漸層填色操作方式相同,以下我們以油漆桶工具來示範︰

  • Page 43December 29, 2007

    填色變形工具

    • 工具面板有個填色變形工具(Fill Transform Tool)鈕,可用來修改已填入的漸層色的中心點、範圍以及角度,或是對已填入的點陣圖做變形、旋轉的動作。

  • Page 44December 29, 2007

    修改線性漸層填色

    • 線性漸層色可修改的部分包括漸層的中心點、漸層的角度與範圍。

    • 請在封閉區域中填入線性漸層色後,再按下填色變形工具鈕啟動修改漸層填色功能,按一下線性漸層填色區域,會出現線性漸層的範圍及 3 個控制點:

  • Page 45December 29, 2007

    修改線性漸層填色

  • Page 46December 29, 2007

    修改放射狀漸層填色

    • 放射狀漸層可以調整其中心點、形狀、範圍及角度,按一下放射狀漸層填色區域會出現放射狀漸層的範圍以及 4 個控制點。

  • Page 47December 29, 2007

    修改放射狀漸層填色

  • Page 48December 29, 2007

    修改放射狀漸層填色

  • Page 49December 29, 2007

    修改漸層溢出填色

    • 我們一般在填色區域填入的漸層色,都是在漸層定義列範圍內的填色,當調整漸層的角度、縮小漸層的範圍或者是改變漸層色的中心點位置後,有可能會顯露填色區域範圍外的顏色。

  • Page 50December 29, 2007

    修改漸層溢出填色

    • 你可以在調色盤面板的溢出(Overflow)功能中,選擇填色區域範圍外的填色方式,下面以放射狀漸層色為例來說明。

  • Page 51December 29, 2007

    修改漸層溢出填色

  • Page 52December 29, 2007

    修改漸層溢出填色

  • Page 53December 29, 2007

    修改漸層溢出填色

    • 接下來我們再來嚐試選擇線性漸層填色後,看看線性漸層色會產生什麼樣的溢出效果。請先縮小線性漸層的範圍,讓溢出範圍顯露出來。

  • Page 54December 29, 2007

    修改漸層溢出填色

    • 選擇各項溢出範圍後的線性漸層顏色變化:

  • Page 55December 29, 2007

    修改點陣圖填色

    • 點陣圖填色有一個特色,就是填入的點陣圖會以舞台的左上角為起點,像磁磚一樣重複排列來填滿填色區域。所以,假如你用同一個點陣圖填入同一舞台裡的不同填色區域的話,該點陣圖會連續排列。而點陣圖只要一經填色變形工具修改,他的每一個分身(重複排成磁磚般)都會跟著改變,實際操作狀況與效果如下︰

  • Page 56December 29, 2007

    修改點陣圖填色

  • Page 57December 29, 2007

    修改點陣圖填色

  • Page 58December 29, 2007

    修改點陣圖填色

  • Page 59December 29, 2007

    想要點陣圖不連續排列?

  • Page 60December 29, 2007

    4-6 用魔術棒替點陣圖去背

    • 點陣圖的去背是一般最常用到的點陣圖編輯功能,同時也是在網頁應用上一項不可或缺的技巧。在Flash 中要替點陣圖去背,必須先執行『修改/打散』命令,然後用套索工具(Lasso Tool)來選取要去背的區域,再執行刪除的動作。

    • 使用套索工具搭配選項區的魔術棒可以選取點陣圖填色區域中顏色相似的區域。它的操作方法如下︰

  • Page 61December 29, 2007

    用魔術棒替點陣圖去背1. 首先讓我們先設定一下魔術棒的相關屬性值。請按下套索工具,然後再按一下選項區中的魔術棒屬性鈕。

  • Page 62December 29, 2007

    用魔術棒替點陣圖去背

    2. 接著開始去背:

  • Page 63December 29, 2007

    用魔術棒替點陣圖去背

  • Flash 網頁設計與特效December 29, 2007

  • Page 65December 29, 2007

    本章提要

    • 5-1 輸入文字• 5-2 編輯與修改文字物件的屬性• 5-3 指定替代字體• 5-4 將文字轉為圖形

  • Page 66December 29, 2007

    5-1 輸入文字• 文字工具(Text Tool)是用來新增文字的工具鈕,可建立的文字物件分成以下 3 種類別:▫ 靜態文字(Static Text):靜態文字是一般最常用的文字物件,通常用來製作成動畫中的標題、內文,也可加上超連結位址,做成超連結文字。

    ▫ 動態文字(Dynamic Text):可配合 ActionScript 來製作動態顯示的文字。

    ▫ 輸入文字(Input Text):可供瀏覽者輸入資料,並配合ActionScript 製作出互動表單或 Flash 遊戲... 等等。

    • 這 3 種文字物件的性質與功能雖然不同,但建立與編輯方式大致相同。文字工具預設建立的文字物件是靜態文字,以下我們便以靜態文字為例,說明如何建立文字物件。

  • Page 67December 29, 2007

    建立文字物件

    • 請開啟一份新文件,再按下工具面板的文字工具鈕,然後按一下編輯區,出現可輸入文字的區塊後,就可以輸入文字了。

    • 輸入的文字會容納在一個文字區塊中,這個區塊就是一個文字物件。你可以先確定文字區塊的寬度再輸入文字,也可以隨文字輸入的多寡來增加文字區塊的寬度。

  • Page 68December 29, 2007

    • 按下文字工具鈕後,滑鼠指標在編輯區會變成圖示,接著在編輯區域按一下會立即出現文字區塊,且文字插入點在文字區塊中會不停閃爍:

    隨文字變化寬度的文字區塊

  • Page 69December 29, 2007

    隨文字變化寬度的文字區塊

    • 雖然文字區塊的寬度不受限制,但是當文字寬度超出舞台範圍,檔案匯出後,超出的部份會被截斷;因此輸入文字時,仍要避免超過舞台範圍。

  • Page 70December 29, 2007

    已定義寬度的文字區塊

    • 按下文字工具鈕後,若在編輯區域按住滑鼠左鈕不放,拉曳出預定的文字區塊寬度,當輸入的文字超過文字區塊寬度時,文字將會自動換行。

  • Page 71December 29, 2007

    • 如果想要增減文字區塊的寬度,只要將滑鼠指標移到方形控制點上,當指標變成雙向箭頭 時,再拉曳控制點即可改變文字區塊寬度。

    • 文字輸入完畢,按一下文字區塊以外的編輯區域,可結束此文字物件的編輯狀態,文字區塊的框線也會隨之消失。

    已定義寬度的文字區塊

  • Page 72December 29, 2007

    5-2 編輯與修改文字物件的屬性

    • 由於 Flash 預設會將文字做消除鋸齒(Anti-alias)的處理,因此在結束文字的編輯狀態時,會感覺文字邊緣平滑,但有些字型的邊緣則可能產生模糊的現象,此時可設定字體顯示方式來改善此現象。

    • 建立文字物件之後,還可以進一步修改文字的顏色、字級、間距...等屬性,這些設定都可以在屬性面板中修改。

  • Page 73December 29, 2007

    選取文字

    • 依選取的文字範圍不同,編輯的結果也不同。若點選整個文字物件,編輯的效果會套用到整個文字物件;若雙按文字物件進入編輯文字的狀態,則可選取單一或部份文字,並針對所選取的文字設定屬性:

  • Page 74December 29, 2007

    設定文字屬性

    • 以下我們針對文字物件的各項屬性加以說明:

  • Page 75December 29, 2007

    文字類型、大小與位置

    • 文字類型、寬/高及 X/Y (位置)3 個屬性都屬於整個文字物件,我們無法針對物件中選取的文字進行修改:

  • Page 76December 29, 2007

    設定個別文字的類型、寬/高及位置• 輸入了一段文字後,若要針對其中個別的文字設定類型、寬/高或位置,必須先將這段文字的每個文字拆成個別物件,再一一進行設定。要將文字拆成個別物件時,請選取整個文字物件,再執行『修改/打散』命令,即可將整個文字物件拆成一個個的文字物件。

  • Page 77December 29, 2007

    • 文字類型:可將選取的文字物件設為靜態文字、動態文字或輸入文字 3 種類型。

    • 文字物件的寬度與高度:單位為像素(Pixel),可手動輸入數值來指定目前選取文字物件的寬、高,也可以設定是否強制等比例縮放,當欄位左側為解鎖狀態 時,表示寬度與長度可以個別輸入互不影響;當鎖定比例 時,只要輸入其中一項的數值,整個文字物件將會等比例放大或縮小。

    文字類型、大小與位置

  • Page 78December 29, 2007

    文字類型、大小與位置

    • 修改文字物件的寬度、高度時,將會使其中的文字隨之放大、縮小或變形;若要更改文字物件的寬度、高度,但不想更動文字的級數,那麼請雙按文字物件,然後重新拉曳控點來改變文字物件的區塊大小。

  • Page 79December 29, 2007

    文字類型、大小與位置

    • X 軸與 Y 軸座標位置:從整個動畫舞台的左上角算起,X 軸座標為橫向往右遞增;Y 軸座標為垂直往下遞增。單位為像素,可手動輸入數值來指定所選文字物件的位置。

  • Page 80December 29, 2007

    字體、字元間距、字級、顏色

    • 字體:指定文字物件要使用的字體。在此特別提醒您,若使用內建的裝置字體(Device Fonts,如 _sans、_serif、_typewriter),由於不是向量字型(True Type),因此在經過變形等處理,並發佈成 .swf 影片檔後,文字可能會消失或無法正常顯示。

  • Page 81December 29, 2007

    字體、字元間距、字級、顏色

    • 建議您在動畫中使用向量字體,或將文字打散成圖像物件,以確保文字能正常顯示。

  • Page 82December 29, 2007

    「裝置字體」的作用

    • 要在 Flash 處理文字,主要有 2 種方法:第 1 種方式是內嵌,就是將製作動畫時選用的字體(非裝置字體)附在 .swf 檔中一起發佈,此種方式的缺點是動畫檔案較大,但可確保動畫中的字體在每台電腦中播放時,看到的字體都一樣。

  • Page 83December 29, 2007

    「裝置字體」的作用

    • 另一個方式則是選用觀賞動畫者電腦中最接近裝置字體的任一字體來顯示,例如較接近 _sans 的是 Arial 或 Helvetica,這就是裝置字體基本的意義。

    • 經由這種方式處理的動畫檔體積較小,但缺點是在不同電腦播放時,顯示的字體可能會不一樣,且當瀏覽者電腦中的裝置字體屬於非向量文字,而動畫中的文字物件又剛好經過變形處理,仍會有文字無法正常顯示的可能。

  • Page 84December 29, 2007

    字體、字元間距、字級、顏色

    • 字元位置:當文字內容需要使用到數學的平方項目,或是化學元素等特殊字元時,便可藉由調整字元位置來達成

    • 字級:可直接輸入數值來設定文字級數,或是按下右方 鈕拉曳滑動桿來設定大小。

  • Page 85December 29, 2007

    設定字體的顯示方式

    • 結束文字的輸入狀態後,可能會覺得文字有些模糊,這是因為 Flash 預設將文字做消除鋸齒(Anti-alias)的處理,使文字的邊緣能呈現圓滑、平順的效果。

  • Page 86December 29, 2007

    設定字體的顯示方式

    • 只是這樣的做法使用在較小字級上,消除鋸齒的效果卻可能讓文字變得不易辨識。此時,我們便可藉由字體顯示方式欄位來設定想要的顯示效果:

  • Page 87December 29, 2007

    設定字體的顯示方式

    • 使用裝置字體(Use device fonts):當我們將字體設定為 Flash 內建的 3 種裝置字體(_sans、_serif、_typewriter),Flash 在播放動畫時會在瀏覽者電腦中既有的字體裡選擇一個最接近的字體來顯示,例如較接近 _sans 的是 Arial 或Helvetica、_serif 接近 Times Roman、_typewriter 近似 Courier。不過,裝置字體只能使用在靜態文字及水平文字上。

  • Page 88December 29, 2007

    設定字體的顯示方式

    • 點陣字(無消除鋸齒)(Bitmap text (no anti-alias)):關閉消除鋸齒功能,將文字以點陣化方式顯示,選用此項動畫檔案會比使用裝置字體大。

    • 消除動畫鋸齒(Anti-alias for animation):選擇此項,文字邊緣會有較佳的平滑效果,但必須使用在內嵌字體的方式上,因此會增加檔案的體積。此外,消除動畫鋸齒的顯示方式不適用在太小的字級,建議您將文字設定在 10 級以上。

  • Page 89December 29, 2007

    設定字體的顯示方式

    • 消除鋸齒增加易讀性(Anti-alias for readability):此項設定可使較小字級的文字更容易辨識,提供比消除動畫鋸齒更佳的文字效果,但同樣需要內嵌字體,檔案將比使用消除動畫鋸齒還要來得大。

    • 自訂消除鋸齒(Custom Anti-Aliasing):如果對於以上的顯示方式都不滿意,可選擇此項自行定義文字的顯示方式。

  • Page 90December 29, 2007

    設定字體的顯示方式

  • Page 91December 29, 2007

    設定字體的顯示方式

    • 以下我們將 5 種文字效果列於表格中(部份的文字顯示方式差異不大,例:消除動畫鋸齒與消除鋸齒增加易讀性,需於製作時才能仔細辨別不同效果)

  • Page 92December 29, 2007

    文字格式、方向與對齊

  • Page 93December 29, 2007

    • 對齊:選取文字或整個文字物件,再按下鈕可設定文字段落的對齊方式。按下

    編輯格式選項鈕,則可針對文字的對齊位置做進一步的設定:

    文字格式、方向與對齊

  • Page 94December 29, 2007

    文字格式、方向與對齊• 更改文字方向:文字預設為水平排列(Horizontal,由左至右排列),亦可設定為垂直,由左到右(Vertical,Left to Right )及垂直,由右到左(Vertical,Right to Left)2 種垂直排列的方式。

  • Page 95December 29, 2007

    其他特殊屬性

    • 屬性面板還會依文字類型不同,提供不同的屬性供調整,我們以靜態文字的特殊屬性為例進行說明:

  • Page 96December 29, 2007

    其他特殊屬性

  • Page 97December 29, 2007

    5-3 指定替代字體• 如果開啟檔案時會顯示遺失字體警告交談窗,這表示目前開啟的動畫檔案,使用了您電腦中沒有安裝的字體,導致 Flash 無法找到正確的字體來顯示文字:

  • Page 98December 29, 2007

    指定替代字體

    • 在上圖中按下使用預設鈕,表示套用 Flash 預設的字體(更改預設字體的操作,我們將稍後說明),按下按鈕後即可開啟檔案;你也可以按下選擇替代字體鈕,檢視目前動畫中哪些字體無法顯示,並自己選擇要替代的字體:

  • Page 99December 29, 2007

    指定替代字體

    • 如果不想用預設字體,我們也可以指定要替換的字體,請選擇一個找不到字體所列的字體,此例為華康儷粗黑:

  • Page 100December 29, 2007

    指定替代字體

    • 開啟檔案後,該檔案中套用華康儷粗黑字體的文字,將會以新細明體顯示。此外,即使設定了對應字體,下次開啟檔案時仍會再次顯示此交談窗,除非系統中安裝了動畫中套用的字體,或是您在開啟動畫檔後,重新將文字套用成系統中已安裝的字體。

  • Page 101December 29, 2007

    設定預設字體

    • 在預設的情況下,動畫中使用的預設字體會是裝置字體(例如 _sans)。如果覺得預設字體不好看,或是有自己想要使用的預設字體,可在偏好設定中進行調整。

    • 請執行『編輯/偏好設定』命令,切換至文字頁次,由字體對應預設欄進行設定。

  • Page 102December 29, 2007

    5-4 將文字轉為圖形

    • 為了確保動畫中選用的字體,在任何電腦都可以正常顯示,我們可以將文字轉換為圖像,讓文字以圖形的方式呈現。不過,將文字轉為圖形之後,雖然在播放動畫時可以正常顯示字體,但由於已經失去文字的屬性,將無法進行編輯文字、套用字型...等修改,因此建議您在確定不需要修改文字內容時,再將文字轉為圖形。

  • Page 103December 29, 2007

    將文字轉為圖形

    • 以下說明將文字轉換為圖形的操作步驟。

  • Page 104December 29, 2007

    • 接下來,我們就可以像處理圖形一般的進行編輯了,例如利用油漆桶工具改變顏色,或是填入漸層色等。

    將文字轉為圖形

  • Page 105December 29, 2007

    打散文字時產生不正常的黏合

    • 當您將文字轉換為圖形時,轉換後的文字有可能產生不正常的黏合狀態:

  • Page 106December 29, 2007

    打散文字時產生不正常的黏合

    • 此時請您利用復原的方式(執行『編輯/復原』命令,或按下 [Ctrl] + [Z] 鍵)回到文字轉換為圖形前的狀態,將文字改套用其它的字體(例如華康、文鼎、全真...等字型),再進行打散,以減少文字黏合的情況。

    Flash 網頁設計與特效本章提要4-1 墨水瓶工具墨水瓶工具用選取法改變筆畫與顏色用選取法改變筆畫與顏色4-2 油漆桶工具關於填色時的空隙大小填色樣式4-3 滴管工具滴管工具使用滴管工具偵測筆畫使用滴管工具偵測填色區域使用滴管工具偵測文字物件4-4 顏色面板的使用色彩集色彩集色彩集色彩集預設色彩集是瀏覽器標準顏色調色盤面板調色盤面板無填色樣式純色填色樣式純色填色樣式線性填色樣式線性填色樣式漸層色的儲存方法漸層色的儲存方法放射狀填色樣式點陣圖填色樣式點陣圖填色樣式顏色色票面板顏色色票面板顏色色票面板關於色彩集檔案的格式顏色色票面板顏色色票面板顏色色票面板4-5 調整漸層填色線性漸層填色放射狀漸層填色鎖定填色功能填色變形工具修改線性漸層填色修改線性漸層填色修改放射狀漸層填色修改放射狀漸層填色修改放射狀漸層填色修改漸層溢出填色修改漸層溢出填色修改漸層溢出填色修改漸層溢出填色修改漸層溢出填色修改漸層溢出填色修改點陣圖填色修改點陣圖填色修改點陣圖填色修改點陣圖填色想要點陣圖不連續排列?4-6 用魔術棒替點陣圖去背用魔術棒替點陣圖去背用魔術棒替點陣圖去背用魔術棒替點陣圖去背Flash 網頁設計與特效本章提要5-1 輸入文字建立文字物件隨文字變化寬度的文字區塊隨文字變化寬度的文字區塊已定義寬度的文字區塊已定義寬度的文字區塊5-2 編輯與修改文字物件的屬性選取文字設定文字屬性文字類型、大小與位置設定個別文字的類型、寬/高及位置文字類型、大小與位置文字類型、大小與位置文字類型、大小與位置字體、字元間距、字級、顏色字體、字元間距、字級、顏色「裝置字體」的作用「裝置字體」的作用字體、字元間距、字級、顏色設定字體的顯示方式設定字體的顯示方式設定字體的顯示方式設定字體的顯示方式設定字體的顯示方式設定字體的顯示方式設定字體的顯示方式文字格式、方向與對齊文字格式、方向與對齊文字格式、方向與對齊其他特殊屬性其他特殊屬性5-3 指定替代字體指定替代字體指定替代字體指定替代字體設定預設字體5-4 將文字轉為圖形將文字轉為圖形將文字轉為圖形打散文字時產生不正常的黏合打散文字時產生不正常的黏合