著作權所有 © 旗標出版股份有限公司
Flash 網頁設計與特效
December 23, 2007
Page 2 December 23, 2007
本章提要
•
3-1 鉛筆工具•
3-2 橡皮擦工具•
3-3 使用幾何繪圖工具•
3-4 筆刷工具•
3-5 選取工具•
3-6 套索工具•
3-7 鋼筆工具與選取細部工具•
3-8 還原與操作記錄面板Page 3 December 23, 2007
3-1 鉛筆工具
•
首先介紹最基本的繪圖工具 ― 鉛筆工具(Pencil Tool)。顧名思義,鉛筆工具就像平常我們畫畫 用的鉛筆一樣,用途在於畫出物件的外框線條,至於上色,就得另外使用水彩之類的工具!
Page 4 December 23, 2007
鉛筆工具
Page 5 December 23, 2007
鉛筆工具
•
使用鉛筆工具繪圖時有幾個要點︰1.
筆畫的顏色2.
線條的模式(直線化、平滑化…)3.
線條的樣式(實線、虛線...)、粗細•
在工具面板上可以直接修改筆畫的顏色和線條 模式,至於線條樣式、粗細則要到屬性面板中 設定Page 6 December 23, 2007
鉛筆工具的 3 種模式
•
選用鉛筆工具時,在工具面板下方的選項區中會 出現鉛筆模式鈕,供你選擇鉛筆的線條樣式。鉛 筆工具共有 3 種線條模式:Page 7 December 23, 2007
鉛筆工具的 3 種模式
•
直線化(Straighten)︰在此模式下,如果你畫 出的線條軌跡接近平直,那麼 Flash 會自動把該 線段變成直線; 軌跡若是有弧度的,那就會變成漂 亮的圓弧!Page 8 December 23, 2007
鉛筆工具的 3 種模式
•
平滑化(Smooth)︰在 這個模式下,你畫的線條 都會自動變得平滑,所以 即使手抖得厲害,也可以 畫出很平滑的線條哩!•
墨水(Ink)︰此模式畫 出的線條最接近手繪,所 以若你對自己手的穩定度 深具信心,就選這個吧!Page 9 December 23, 2007
做好繪圖的偏好設定
•
直線化、平滑化鉛筆模式的自動修飾線條功能,與偏好設定/編輯頁次(可執行 『編輯/偏好設定』
命令開啟)中的設定息息相關,若該頁次中的繪 圖設定各項功能都關閉的話,那這兩個模式就等 於跟墨水模式沒兩樣了。
Page 10 December 23, 2007
鉛筆工具的屬性面板
•
鉛筆工具的屬性面板可以控制鉛筆工具所畫線條 的粗細、色彩、樣式。當選取鉛筆工具後,屬性 面板便會自動切換為鉛筆工具的屬性設定,請先 在此設定所要的屬性後再繪圖。Page 11 December 23, 2007
•
按下端點右邊的 鈕,可以選擇繪製筆畫所呈 現的端點形狀(可選無、圓角、或方形)。當您 分別選擇無及方形繪製出 2 線段時,你會發現端 點都是方形。端點
Page 12 December 23, 2007
端點
•
而方形和無的差別,則必須選取工具面板中的選 取細部工具(Subselection Tool)再同時拉曳框 選 2 線段後才能看出差異之處•
當選擇無時,端點的位置會在錨點上,而選擇方 形的筆畫端點位置則會超出錨點之外Page 13 December 23, 2007
•
按下接合右邊的 鈕,可以選擇兩線段間的接合 角形狀(可選尖角、圓角、或斜角),其中只有 選擇尖角後,接合左邊的尖角欄位才可以輸入尖 角尺寸。接合
Page 14 December 23, 2007
筆畫樣式
•
使用鉛筆工具時,按下屬性面板的自訂鈕,即可 開啟筆畫樣式交談窗自訂筆畫的樣式:Page 15 December 23, 2007
筆畫樣式
•
類形區會因為選用不同的筆畫樣式,而出現對應 的屬性選項,底下即說明各種筆畫樣式的屬性︰▫
實線(Solid)︰沒有可調屬性。▫
虛線(Dashed)Page 16 December 23, 2007
筆畫樣式
▫
點狀線(Dotted)▫
鋸齒狀的(Ragged)Page 17 December 23, 2007
筆畫樣式
▫
點刻線(Stipple)▫
斑馬線(Hatched)Page 18 December 23, 2007
實做練習
•
請按下工具面板中的鉛筆工具鈕後,在屬性面板 中設定筆畫顏色為紅色,線段寬度設定為 20,然 後選擇點狀線筆畫樣式繪製出花朵部分,接著再 選擇綠色筆顏色繪製出莖、葉部分完成一朵小花。Page 19 December 23, 2007
畫壞了怎麼辦?
•
畫壞了怎麼辦?▫
範圍小、易修復的,可以利用稍後介紹的橡皮擦工 具 來擦除。▫
範圍大些,乾脆執行『 編輯/還原』命令(或按主 工具列的還原鈕 ,或按 [Ctrl] + [Z] 鍵)復原整個 步驟。•
不過要注意,不是每個動作都能復原的,而且復 原的次數也是有限的。所以每次動手前,還是要 謹慎點,先存檔為上策!Page 20 December 23, 2007
3-2 橡皮擦工具
•
畫畫難免畫錯,畫錯了就需要橡皮擦來修正一番 囉!使用工具面板中的橡皮擦工具(Eraser Tool)可以擦除筆畫與填色區域︰
Page 21 December 23, 2007
橡皮擦模式
•
橡皮擦模式可以讓你選擇要擦筆畫 線條還是擦填色區域,要擦全部內 容還是部分內容,共有 5 種模式︰Page 22 December 23, 2007
水龍頭
•
按下水龍頭鈕,可以一次把同一填色區域或同色 筆畫清除︰Page 23 December 23, 2007
橡皮擦形狀
•
為了避免擦到不該擦的部 份,使用橡皮擦之前,最 好先依需要調整好橡皮擦 的形狀!Page 24 December 23, 2007
3-3 使用幾何繪圖工具
•
Flash 的幾何繪圖工具包括線段工具(LineTool)、橢圓形工具(Oval Tool)、多邊星形工 具(Rectangle Tool)3 種。
•
這些工具畫出來的幾何圖形包括了筆畫線條和填 色區域,將它們適當地組合加上有技巧地變形與 配色,不但比鉛筆工具簡單,輔助功能也更多。Page 25 December 23, 2007
線段工具
•
使用線段工具可以繪製直線,如果再配合按下主 要工具列的貼齊物件鈕,則可以輕鬆將線段連成 封閉區域:Page 26 December 23, 2007
橢圓形工具
•
使用橢圓形工具可以繪製各式橢圓形。除了可以 設定橢圓形的外框筆畫顏色外,還可以設定內部 填色顏色,直接在橢圓形內填入顏色。Page 27 December 23, 2007
多邊星型工具
•
多邊星型工具包含矩形工具(Rectangle Tool)多邊星型工具(Polygon Tool)兩種模式,此工 具和橢圓形工具一樣,可以分別設定外框筆畫色 彩和內部填色的顏色,設定的方式也相同。
Page 28 December 23, 2007
•
要利用矩形工具畫出圓角矩形,則選取矩形工具 後要按下選項區的 鈕,設定圓角半徑再開始 畫︰圓角矩形
Page 29 December 23, 2007
多邊星型工具
•
多邊星型工具(Polygon Tool)可以輕鬆繪製出 星形和正多邊形,並可以在繪製的同時自由旋轉 角度,不過相對於橢圓形工具和矩形工具都以繪 圖的起始點做為圖形的左上角,多邊星型工具則 是將繪圖的起始點做為圖形的中心點。Page 30 December 23, 2007
多邊形選項
•
使用多邊星型工具,可以按下屬性面板中的選項 鈕,設定不同角數的多邊形或星形。Page 31 December 23, 2007
多邊形選項
Page 32 December 23, 2007
變換顏色與其它屬性
Page 33 December 23, 2007
變換顏色與其它屬性
•
顏色區的下方還有 3 個按鈕,其功能分別是︰▫
黑色和白色︰按此鈕,會自動把筆畫顏色設為黑色,填色顏色設為白色。
▫
無色︰使用矩形工具或橢圓形工具時,若設好填色 顏色再按此鈕,則會變成「內部不填色」;反之,若設好筆畫顏色再按此鈕,則變成「畫矩形或圓形 時不加外框線」。
▫
替換顏色︰按此鈕,則筆畫顏色與填色顏色會互換。Page 34 December 23, 2007
線段、矩形、橢圓形工具的屬性面板
•
工具面板的顏色區只能調整線段工具、矩形工具、橢圓形工具筆畫的顏色,如果想利用這些工具直 接畫出虛線,或是調整筆畫的粗細,那就要到各 工具的屬性面板去設定囉!
Page 35 December 23, 2007
3-4 筆刷工具
•
筆刷工具的使用•
筆刷工具的 5 種模式•
筆刷大小與形狀•
感壓筆的功能繪圖物件Page 36 December 23, 2007
筆刷工具的使用
•
筆刷工具(Brush Tool)能模擬水彩筆、麥克筆 的筆觸,繪製出猶如用水彩或是麥克筆所畫出的 圖形。不過,只有在配備感壓筆的情況下,才能 模擬出有色彩濃度變化的水彩筆觸,沒有感壓筆 的話,只能畫出麥克筆的感覺。Page 37 December 23, 2007
筆刷工具的使用
Page 38 December 23, 2007
筆刷工具的使用
•
在 Flash 裡,筆刷工具也可以做為上色的工具,但它的色彩是由填色顏色控制,而且沒有外框線。
若有需要,可執行『檢視/預覽模式/外框』命令,
來檢視筆刷工具所繪製圖形的輪廓。
Page 39 December 23, 2007
筆刷工具的 5 種模式
•
筆刷工具有 5 種操作模式,當你使用筆刷工具替圖形上 色時,會因選用不同的模式,
而有不同的操作結果。
Page 40 December 23, 2007
筆刷工具的 5 種模式
•
一般繪製(Paint Normal)︰使用此模式為圖形 上色,畫出來的填色區域將會覆蓋住圖形。Page 41 December 23, 2007
筆刷工具的 5 種模式
•
繪製填色(Paint Fill)︰此模式與一般繪製模式 類似,畫出來的填色區域會覆蓋在圖形上,但不 會蓋掉筆畫線條!Page 42 December 23, 2007
筆刷工具的 5 種模式
•
在後面繪製(Paint Behind)︰用此模式只能畫 在空白的地方,不會蓋住圖形的任何一部份,就 像畫在原圖形的後方一般。Page 43 December 23, 2007
筆刷工具的 5 種模式
•
繪製選取範圍(Paint Selection)︰用此模式只 能畫在選取的區域內Page 44 December 23, 2007
筆刷工具的 5 種模式
•
在裡面繪製(Paint Inside)︰筆刷工具只會畫 在一個封閉區域內,而且不會蓋掉筆畫線條。如 果你要在一個封閉區域內填色時,用此模式最合 適!Page 45 December 23, 2007
筆刷大小與形狀
•
筆刷工具的筆頭大小與形狀都可以更改呦!請在 按下筆刷工具後,在選項區中選擇:Page 46 December 23, 2007
•
當你的電腦配備有感壓筆時,你的筆刷工具的選 項區會多出兩個功能鈕,分別是壓力 與傾斜 ,這兩種功能可以同時搭配使用。
•
按下壓力鈕會令筆畫隨著感壓筆的受壓力而變化,產生粗細不同的線條。
感壓筆功能
Page 47 December 23, 2007
感壓筆功能
•
一般來說,使用壓力功能畫出的筆劃,看起來會 比未使用壓力時的預設筆劃來的纖細; 而使用傾斜 功能則會模擬畫筆傾斜的筆觸,不過這項功能會 受感壓筆的等級及設定不同,呈現不同的效果。Page 48 December 23, 2007
繪圖物件
•
無論你是選擇何種繪圖工具來繪製圖形,只要按 下工具面板中的物件繪製鈕,然後在舞台中繪製 出圖形後,就會產生繪圖物件。•
繪圖物件主要功能在於避免當 2 圖形交疊時產生 裁切的狀況。•
此功能僅限一筆畫完成的圖形,也就是說,若放 開滑鼠繪製下一筆畫時,那麼下一筆畫就會是另 一個繪圖物件。Page 49 December 23, 2007
繪圖物件
Page 50 December 23, 2007
繪圖物件
Page 51 December 23, 2007
3-5 選取工具
•
當你想針對舞台上某一物件進行編輯,得先利用 選取工具(Arrow Tool)、套索工具(LassoTool)、或選取細部工具(Subselection Tool)
將其選取起來,然後才能開始動手!
•
選取工具可以使用多種不同的方式,來選取編輯 區中的筆畫、填色區域、文字物件、點陣圖、與 元件的實體(Instance)等物件。Page 52 December 23, 2007
單按滑鼠左鈕選取
•
按下選取工具,然後在物件上按一下就可以選取 單一物件︰Page 53 December 23, 2007
雙按滑鼠左鈕選取
•
在筆畫上雙按滑鼠左鈕,可以將相連的筆畫一併 選取起來;但若相連的筆畫粗細、色彩不同,則 無法同時選取。•
雙按填色區域,則可以將與區域相連的外框線條 一起選取︰Page 54 December 23, 2007
圈選選取
•
用選取工具在編輯區中拉曳出一個圈選範圍,在 範圍之內的物件都會被選取。要注意的是,使用 圈選方式選取物件之後,之前所選取的物件都會 被取消選取;想保留先前的選取,請按住 [Shift]鍵圈選。
Page 55 December 23, 2007
取消選取
•
要取消所有物件的選取狀態的話,請在沒有物件 的空白處按一下滑鼠左鈕即可。•
若是在選取多個物件之後,想要取消其中某項物 件的選取,那麼請按住 [Shift] 鍵,再按一下該物 件,便可取消選取。Page 56 December 23, 2007
•
按下選取工具後,工具面板的選項區會出現 , 這個按鈕和之前提到的線段工具的貼齊物件功能 相同,主要用途是可以讓線段連接起來︰選取工具的貼齊物件功能
Page 57 December 23, 2007
利用選取工具改變形狀與移動物件
•
選取工具可以改變線條及填色區域的形狀,也能 夠搬移物件的位置喔!•
按下選取工具,將指標移到線條或填色區域的尖 角附近時,若指標變成 ,拉曳便可以改變端 點或尖角位置Page 58 December 23, 2007
改變線條的弧度
•
按下選取工具,將指標移到線條或填色區域的邊 線附近時,若指標變成 ,拉曳便可以改變其 弧度︰Page 59 December 23, 2007
移動圖形物件
•
按下選取工具,並將指標移到物件上,指標若變 成 表示按住拉曳即可移動物件。以填色區域 為例,操作方法如下︰•
除了填色區域之外,若要移動線條或是多個物件、部分線條與區域,都要先選取之後,才能移動喔!
Page 60 December 23, 2007
關於圖像的交疊
•
使用鉛筆、線段、橢圓形、矩形、筆刷工具繪製 的圖像(未按下工具面板中的物件繪製鈕),當 你將一個圖像疊到另一個圖像上時,你會發現難 以再選取原來的圖像了。因為這些繪製的圖像有 個重要特性,就是一旦交疊在一起,就會產生分 割與黏合的效果Page 61 December 23, 2007
關於圖像的交疊
•
要避免圖像交疊後產生分割或黏合的情況,最好 的方法就是把圖像建立為元件(Symbol)或是 群組。Page 62 December 23, 2007
3-6 套索工具
•
套索工具(Lasso Tool)是利用圈選的方式選取 物件,但不像選取工具只能圈選矩形範圍,它可 以圈出任意形狀的範圍喔!Page 63 December 23, 2007
•
多邊形模式可以用類似繪製多邊形的方式來圈選 物件。按下套索工具後,再按下選項區的 鈕 開啟多邊形模式多邊形模式
Page 64 December 23, 2007
3-7 鋼筆工具與選取細部工具
•
專業繪圖軟體中通常少不了貝茲曲線的功能,什 麼是貝茲曲線呢?貝茲曲線是利用設定錨點與控 制點的方法來繪製線條,用移動控制點的方法來 拉曳曲線,以取代手繪線條不夠平滑的缺陷。•
在 Flash 中配合此功能的工具有鋼筆工具(Pen Tool)與選取細部工具(Subselection Tool)。Page 65 December 23, 2007
使用鋼筆工具
•
使用鋼筆工具可以設定線條的錨點與曲線控制點,並藉由錨點設定的方式畫出定位精準的直線,再 配合控制點調整線條彎曲度,便可以輕易繪製定 位精確且弧度理想的曲線。
Page 66 December 23, 2007
•
欲結束時,若是開放路徑,則在終點連按兩下,或按 [ESC] 鍵來結束該線段的繪製;若要封閉路 徑,則將指標移到第 1 個錨點上(指標會出現一 個小圈 )按鈕:
使用鋼筆工具
Page 67 December 23, 2007
使用鋼筆工具
•
之後,只要在工具面板中點選其它工具或執行『編輯/取消全選』命令,鋼筆工具繪製的路徑就 會變成線條。
•
至於用鋼筆工具畫曲線的方法如下:Page 68 December 23, 2007
選取細部工具
•
選取細部工具(Subselection Tool)不但可以選 取鋼筆工具繪製的路徑,所有圖形的外框線、筆 劃、筆刷工具畫的填色區域,一經選取,也會自 動顯示出外框線條的路徑,如此,即可利用路徑 的錨點及控制點來編輯圖形!Page 69 December 23, 2007
圈選路徑
•
選取細部工具的圈選方式和選取工具一樣,按住 滑鼠左鈕拉曳出圈選範圍,則範圍內的物件就會 被選取而出現路徑!•
但不同的是,選取細部工具不必把物件完全包含 在圈選範圍內,也能選取該物件的路徑,同時圈 選範圍內的錨點亦會呈選取狀態。Page 70 December 23, 2007
編輯錨點與控制點
•
增/刪錨點:利用鋼筆工具不僅可以建立錨點並拉 曳出平滑的曲線,還可以依需要增、刪錨點,將 路徑調整到最完美的狀態喔!Page 71 December 23, 2007
編輯錨點與控制點
•
刪除錨點的方法與新增錨點類似,也是先用鋼筆 工具選取物件,待顯示路徑後再把指標移到欲刪 除的錨點上︰Page 72 December 23, 2007
編輯錨點與控制點
Page 73 December 23, 2007
移動錨點
•
錨點影響路徑的主要方向,而控制點影響路徑的 弧度。要移動錨點很簡單,只要用選取細部工具 選取要移動的錨點,再按住滑鼠左鈕拉曳即可!Page 74 December 23, 2007
拉曳控制點調整弧度
•
一個錨點會有兩個控制點,但若該錨點是位於路 徑的端點,那它就只會有一個控制點。•
若是建立該錨點時未經拉曳,那麼該錨點就沒有 控制點。Page 75 December 23, 2007
拉曳控制點調整弧度
•
被選取的錨點除了會顯示出它的控制點外,還會 將其前後相鄰錨點所屬之控制點也顯示出來,拉 曳控制點便可調整路徑弧度!Page 76 December 23, 2007
3-8 還原與操作記錄面板
•
在操作的過程中如果做錯了,有兩種方法可以還 原步驟:▫
第一種是執行還原與重做的命令,這種執行方式的 優點是快速而簡單;▫
另一種方法則是開啟操作記錄面板,經由面板操作 可以進行較為複雜的編輯動作。Page 77 December 23, 2007
還原與重做
•
當你在繪製與編輯圖形時,若想將動作復原,可 以執行『編輯/還原』命令,或按下 [Ctrl] + [Z]組合鍵(亦可按下主工具列上的還原鈕);
•
如果想重做剛剛回復的動作,可以執行『編輯/重 做』命令,或按下 [Ctrl] + [Y] 組合鍵(亦可按主 工具列上的重做鈕)。Page 78 December 23, 2007
操作記錄面板
•
對於較複雜的操作過程,則可以使用操作記錄面 板來還原或重做步驟,其優點在於面板提供每一 步驟的操作資訊,讓使用者能清楚看到步驟執行 的內容。•
每一份文件都有自己的操作記錄,從開啟文件時 就開始記錄步驟,文件關閉時步驟記錄將被清除。Page 79 December 23, 2007
操作記錄面板
•
最多可記錄的步驟次數,以偏好設定內設定的次 數再加 1 次為限,超過時會將之前的步驟逐一清 除,已經被清除的步驟則不會再回復。•
請執行『視窗/其他面板/操作記錄』命令開啟操 作記錄面板,以滑鼠點選步驟定位軸上要還原或 重做步驟的位置,或拉曳步驟定位軸上的滑桿,當你拉曳滑桿時,文件會配合步驟變化,因此可 以清楚得知目前復原步驟的結果。
Page 80 December 23, 2007
•
若是想要清除所有的步驟記錄,以便重新記錄操 作的話,請按下 鈕執行『清除操作記錄』命 令,即可刪除目前所有的操作記錄。不過,從操 作記錄上移除的步驟,將無法重做該步驟哦!操作記錄面板
Page 81 December 23, 2007