• 沒有找到結果。

December 23, 2007

N/A
N/A
Protected

Academic year: 2022

Share "December 23, 2007"

Copied!
81
0
0

加載中.... (立即查看全文)

全文

(1)

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

Flash 網頁設計與特效

December 23, 2007

(2)

Page 2 December 23, 2007

本章提要

3-1 鉛筆工具

3-2 橡皮擦工具

3-3 使用幾何繪圖工具

3-4 筆刷工具

3-5 選取工具

3-6 套索工具

3-7 鋼筆工具與選取細部工具

3-8 還原與操作記錄面板

(3)

Page 3 December 23, 2007

3-1 鉛筆工具

首先介紹最基本的繪圖工具 ― 鉛筆工具(Pencil Tool)。顧名思義,鉛筆工具就像平常我們畫畫 用的鉛筆一樣,用途在於畫出物件的外框線條,

至於上色,就得另外使用水彩之類的工具!

(4)

Page 4 December 23, 2007

鉛筆工具

(5)

Page 5 December 23, 2007

鉛筆工具

使用鉛筆工具繪圖時有幾個要點︰

1.

筆畫的顏色

2.

線條的模式(直線化、平滑化…)

3.

線條的樣式(實線、虛線...)、粗細

在工具面板上可以直接修改筆畫的顏色和線條 模式,至於線條樣式、粗細則要到屬性面板中 設定

(6)

Page 6 December 23, 2007

鉛筆工具的 3 種模式

選用鉛筆工具時,在工具面板下方的選項區中會 出現鉛筆模式鈕,供你選擇鉛筆的線條樣式。鉛 筆工具共有 3 種線條模式:

(7)

Page 7 December 23, 2007

鉛筆工具的 3 種模式

直線化(Straighten)︰在此模式下,如果你畫 出的線條軌跡接近平直,那麼 Flash 會自動把該 線段變成直線; 軌跡若是有弧度的,那就會變成漂 亮的圓弧!

(8)

Page 8 December 23, 2007

鉛筆工具的 3 種模式

平滑化Smooth)︰在 這個模式下,你畫的線條 都會自動變得平滑,所以 即使手抖得厲害,也可以 畫出很平滑的線條哩!

墨水(Ink)︰此模式畫 出的線條最接近手繪,所 以若你對自己手的穩定度 深具信心,就選這個吧!

(9)

Page 9 December 23, 2007

做好繪圖的偏好設定

直線化、平滑化鉛筆模式的自動修飾線條功能,

與偏好設定/編輯頁次(可執行 『編輯/偏好設定』

命令開啟)中的設定息息相關,若該頁次中的繪 圖設定各項功能都關閉的話,那這兩個模式就等 於跟墨水模式沒兩樣了。

(10)

Page 10 December 23, 2007

鉛筆工具的屬性面板

鉛筆工具的屬性面板可以控制鉛筆工具所畫線條 的粗細、色彩、樣式。當選取鉛筆工具後,屬性 面板便會自動切換為鉛筆工具的屬性設定,請先 在此設定所要的屬性後再繪圖。

(11)

Page 11 December 23, 2007

按下端點右邊的 鈕,可以選擇繪製筆畫所呈 現的端點形狀(可選無、圓角、或方形)。當您 分別選擇無及方形繪製出 2 線段時,你會發現端 點都是方形。

端點

(12)

Page 12 December 23, 2007

端點

而方形和無的差別,則必須選取工具面板中的選 取細部工具(Subselection Tool)再同時拉曳框 選 2 線段後才能看出差異之處

當選擇無時,端點的位置會在錨點上,而選擇方 形的筆畫端點位置則會超出錨點之外

(13)

Page 13 December 23, 2007

按下接合右邊的 鈕,可以選擇兩線段間的接合 角形狀(可選尖角、圓角、或斜角),其中只有 選擇尖角後,接合左邊的尖角欄位才可以輸入尖 角尺寸。

接合

(14)

Page 14 December 23, 2007

筆畫樣式

使用鉛筆工具時,按下屬性面板的自訂鈕,即可 開啟筆畫樣式交談窗自訂筆畫的樣式:

(15)

Page 15 December 23, 2007

筆畫樣式

類形區會因為選用不同的筆畫樣式,而出現對應 的屬性選項,底下即說明各種筆畫樣式的屬性︰

實線(Solid)︰沒有可調屬性。

虛線(Dashed)

(16)

Page 16 December 23, 2007

筆畫樣式

點狀線(Dotted)

鋸齒狀的(Ragged)

(17)

Page 17 December 23, 2007

筆畫樣式

點刻線(Stipple)

斑馬線(Hatched)

(18)

Page 18 December 23, 2007

實做練習

請按下工具面板中的鉛筆工具鈕後,在屬性面板 中設定筆畫顏色為紅色,線段寬度設定為 20,然 後選擇點狀線筆畫樣式繪製出花朵部分,接著再 選擇綠色筆顏色繪製出莖、葉部分完成一朵小花。

(19)

Page 19 December 23, 2007

畫壞了怎麼辦?

畫壞了怎麼辦?

範圍小、易修復的,可以利用稍後介紹的橡皮擦工 來擦除。

範圍大些,乾脆執行『 編輯/還原』命令(或按主 工具列的還原鈕 ,或按 [Ctrl] + [Z] 鍵)復原整個 步驟。

不過要注意,不是每個動作都能復原的,而且復 原的次數也是有限的。所以每次動手前,還是要 謹慎點,先存檔為上策!

(20)

Page 20 December 23, 2007

3-2 橡皮擦工具

畫畫難免畫錯,畫錯了就需要橡皮擦來修正一番 囉!使用工具面板中的橡皮擦工具(Eraser Tool)

可以擦除筆畫與填色區域︰

(21)

Page 21 December 23, 2007

橡皮擦模式

橡皮擦模式可以讓你選擇要擦筆畫 線條還是擦填色區域,要擦全部內 容還是部分內容,共有 5 種模式︰

(22)

Page 22 December 23, 2007

水龍頭

按下水龍頭鈕,可以一次把同一填色區域或同色 筆畫清除︰

(23)

Page 23 December 23, 2007

橡皮擦形狀

為了避免擦到不該擦的部 份,使用橡皮擦之前,最 好先依需要調整好橡皮擦 的形狀!

(24)

Page 24 December 23, 2007

3-3 使用幾何繪圖工具

Flash 的幾何繪圖工具包括線段工具(Line

Tool)、橢圓形工具(Oval Tool)、多邊星形工 具(Rectangle Tool)3 種。

這些工具畫出來的幾何圖形包括了筆畫線條和填 色區域,將它們適當地組合加上有技巧地變形與 配色,不但比鉛筆工具簡單,輔助功能也更多。

(25)

Page 25 December 23, 2007

線段工具

使用線段工具可以繪製直線,如果再配合按下主 要工具列的貼齊物件鈕,則可以輕鬆將線段連成 封閉區域:

(26)

Page 26 December 23, 2007

橢圓形工具

使用橢圓形工具可以繪製各式橢圓形。除了可以 設定橢圓形的外框筆畫顏色外,還可以設定內部 填色顏色,直接在橢圓形內填入顏色。

(27)

Page 27 December 23, 2007

多邊星型工具

多邊星型工具包含矩形工具(Rectangle Tool)

多邊星型工具(Polygon Tool)兩種模式,此工 具和橢圓形工具一樣,可以分別設定外框筆畫色 彩和內部填色的顏色,設定的方式也相同。

(28)

Page 28 December 23, 2007

要利用矩形工具畫出圓角矩形,則選取矩形工具 後要按下選項區的 鈕,設定圓角半徑再開始 畫︰

圓角矩形

(29)

Page 29 December 23, 2007

多邊星型工具

多邊星型工具(Polygon Tool)可以輕鬆繪製出 星形和正多邊形,並可以在繪製的同時自由旋轉 角度,不過相對於橢圓形工具和矩形工具都以繪 圖的起始點做為圖形的左上角,多邊星型工具則 是將繪圖的起始點做為圖形的中心點。

(30)

Page 30 December 23, 2007

多邊形選項

使用多邊星型工具,可以按下屬性面板中的選項 鈕,設定不同角數的多邊形或星形。

(31)

Page 31 December 23, 2007

多邊形選項

(32)

Page 32 December 23, 2007

變換顏色與其它屬性

(33)

Page 33 December 23, 2007

變換顏色與其它屬性

顏色區的下方還有 3 個按鈕,其功能分別是︰

黑色和白色︰按此鈕,會自動把筆畫顏色設為黑色,

填色顏色設為白色。

無色︰使用矩形工具或橢圓形工具時,若設好填色 顏色再按此鈕,則會變成「內部不填色」;反之,

若設好筆畫顏色再按此鈕,則變成「畫矩形或圓形 時不加外框線」。

替換顏色︰按此鈕,則筆畫顏色與填色顏色會互換。

(34)

Page 34 December 23, 2007

線段、矩形、橢圓形工具的屬性面板

工具面板的顏色區只能調整線段工具、矩形工具、

橢圓形工具筆畫的顏色,如果想利用這些工具直 接畫出虛線,或是調整筆畫的粗細,那就要到各 工具的屬性面板去設定囉!

(35)

Page 35 December 23, 2007

3-4 筆刷工具

筆刷工具的使用

筆刷工具的 5 種模式

筆刷大小與形狀

感壓筆的功能繪圖物件

(36)

Page 36 December 23, 2007

筆刷工具的使用

筆刷工具(Brush Tool)能模擬水彩筆、麥克筆 的筆觸,繪製出猶如用水彩或是麥克筆所畫出的 圖形。不過,只有在配備感壓筆的情況下,才能 模擬出有色彩濃度變化的水彩筆觸,沒有感壓筆 的話,只能畫出麥克筆的感覺。

(37)

Page 37 December 23, 2007

筆刷工具的使用

(38)

Page 38 December 23, 2007

筆刷工具的使用

在 Flash 裡,筆刷工具也可以做為上色的工具,

但它的色彩是由填色顏色控制,而且沒有外框線。

若有需要,可執行『檢視/預覽模式/外框』命令,

來檢視筆刷工具所繪製圖形的輪廓。

(39)

Page 39 December 23, 2007

筆刷工具的 5 種模式

筆刷工具有 5 種操作模式,

當你使用筆刷工具替圖形上 色時,會因選用不同的模式,

而有不同的操作結果。

(40)

Page 40 December 23, 2007

筆刷工具的 5 種模式

一般繪製(Paint Normal)︰使用此模式為圖形 上色,畫出來的填色區域將會覆蓋住圖形。

(41)

Page 41 December 23, 2007

筆刷工具的 5 種模式

繪製填色(Paint Fill)︰此模式與一般繪製模式 類似,畫出來的填色區域會覆蓋在圖形上,但不 會蓋掉筆畫線條!

(42)

Page 42 December 23, 2007

筆刷工具的 5 種模式

在後面繪製(Paint Behind)︰用此模式只能畫 在空白的地方,不會蓋住圖形的任何一部份,就 像畫在原圖形的後方一般。

(43)

Page 43 December 23, 2007

筆刷工具的 5 種模式

繪製選取範圍(Paint Selection)︰用此模式只 能畫在選取的區域內

(44)

Page 44 December 23, 2007

筆刷工具的 5 種模式

在裡面繪製(Paint Inside)︰筆刷工具只會畫 在一個封閉區域內,而且不會蓋掉筆畫線條。如 果你要在一個封閉區域內填色時,用此模式最合 適!

(45)

Page 45 December 23, 2007

筆刷大小與形狀

筆刷工具的筆頭大小與形狀都可以更改呦!請在 按下筆刷工具後,在選項區中選擇:

(46)

Page 46 December 23, 2007

當你的電腦配備有感壓筆時,你的筆刷工具的選 項區會多出兩個功能鈕,分別是壓力 與傾

斜 ,這兩種功能可以同時搭配使用。

按下壓力鈕會令筆畫隨著感壓筆的受壓力而變化,

產生粗細不同的線條。

感壓筆功能

(47)

Page 47 December 23, 2007

感壓筆功能

一般來說,使用壓力功能畫出的筆劃,看起來會 比未使用壓力時的預設筆劃來的纖細; 而使用傾斜 功能則會模擬畫筆傾斜的筆觸,不過這項功能會 受感壓筆的等級及設定不同,呈現不同的效果。

(48)

Page 48 December 23, 2007

繪圖物件

無論你是選擇何種繪圖工具來繪製圖形,只要按 下工具面板中的物件繪製鈕,然後在舞台中繪製 出圖形後,就會產生繪圖物件。

繪圖物件主要功能在於避免當 2 圖形交疊時產生 裁切的狀況。

此功能僅限一筆畫完成的圖形,也就是說,若放 開滑鼠繪製下一筆畫時,那麼下一筆畫就會是另 一個繪圖物件。

(49)

Page 49 December 23, 2007

繪圖物件

(50)

Page 50 December 23, 2007

繪圖物件

(51)

Page 51 December 23, 2007

3-5 選取工具

當你想針對舞台上某一物件進行編輯,得先利用 選取工具(Arrow Tool)、套索工具(Lasso

Tool)、或選取細部工具(Subselection Tool)

將其選取起來,然後才能開始動手!

選取工具可以使用多種不同的方式,來選取編輯 區中的筆畫、填色區域、文字物件、點陣圖、與 元件的實體(Instance)等物件。

(52)

Page 52 December 23, 2007

單按滑鼠左鈕選取

按下選取工具,然後在物件上按一下就可以選取 單一物件︰

(53)

Page 53 December 23, 2007

雙按滑鼠左鈕選取

在筆畫上雙按滑鼠左鈕,可以將相連的筆畫一併 選取起來;但若相連的筆畫粗細、色彩不同,則 無法同時選取。

雙按填色區域,則可以將與區域相連的外框線條 一起選取︰

(54)

Page 54 December 23, 2007

圈選選取

用選取工具在編輯區中拉曳出一個圈選範圍,在 範圍之內的物件都會被選取。要注意的是,使用 圈選方式選取物件之後,之前所選取的物件都會 被取消選取;想保留先前的選取,請按住 [Shift]

鍵圈選。

(55)

Page 55 December 23, 2007

取消選取

要取消所有物件的選取狀態的話,請在沒有物件 的空白處按一下滑鼠左鈕即可。

若是在選取多個物件之後,想要取消其中某項物 件的選取,那麼請按住 [Shift] 鍵,再按一下該物 件,便可取消選取。

(56)

Page 56 December 23, 2007

按下選取工具後,工具面板的選項區會出現 , 這個按鈕和之前提到的線段工具的貼齊物件功能 相同,主要用途是可以讓線段連接起來︰

選取工具的貼齊物件功能

(57)

Page 57 December 23, 2007

利用選取工具改變形狀與移動物件

選取工具可以改變線條及填色區域的形狀,也能 夠搬移物件的位置喔!

按下選取工具,將指標移到線條或填色區域的尖 角附近時,若指標變成 ,拉曳便可以改變端 點或尖角位置

(58)

Page 58 December 23, 2007

改變線條的弧度

按下選取工具,將指標移到線條或填色區域的邊 線附近時,若指標變成 ,拉曳便可以改變其 弧度︰

(59)

Page 59 December 23, 2007

移動圖形物件

按下選取工具,並將指標移到物件上,指標若變 成 表示按住拉曳即可移動物件。以填色區域 為例,操作方法如下︰

除了填色區域之外,若要移動線條或是多個物件、

部分線條與區域,都要先選取之後,才能移動喔!

(60)

Page 60 December 23, 2007

關於圖像的交疊

使用鉛筆、線段、橢圓形、矩形、筆刷工具繪製 的圖像(未按下工具面板中的物件繪製鈕),當 你將一個圖像疊到另一個圖像上時,你會發現難 以再選取原來的圖像了。因為這些繪製的圖像有 個重要特性,就是一旦交疊在一起,就會產生分 割與黏合的效果

(61)

Page 61 December 23, 2007

關於圖像的交疊

要避免圖像交疊後產生分割或黏合的情況,最好 的方法就是把圖像建立為元件(Symbol)或是 群組。

(62)

Page 62 December 23, 2007

3-6 套索工具

套索工具(Lasso Tool)是利用圈選的方式選取 物件,但不像選取工具只能圈選矩形範圍,它可 以圈出任意形狀的範圍喔!

(63)

Page 63 December 23, 2007

多邊形模式可以用類似繪製多邊形的方式來圈選 物件。按下套索工具後,再按下選項區的 鈕 開啟多邊形模式

多邊形模式

(64)

Page 64 December 23, 2007

3-7 鋼筆工具與選取細部工具

專業繪圖軟體中通常少不了貝茲曲線的功能,什 麼是貝茲曲線呢?貝茲曲線是利用設定錨點與控 制點的方法來繪製線條,用移動控制點的方法來 拉曳曲線,以取代手繪線條不夠平滑的缺陷。

在 Flash 中配合此功能的工具有鋼筆工具(Pen Tool)與選取細部工具(Subselection Tool)。

(65)

Page 65 December 23, 2007

使用鋼筆工具

使用鋼筆工具可以設定線條的錨點與曲線控制點,

並藉由錨點設定的方式畫出定位精準的直線,再 配合控制點調整線條彎曲度,便可以輕易繪製定 位精確且弧度理想的曲線。

(66)

Page 66 December 23, 2007

欲結束時,若是開放路徑,則在終點連按兩下,

或按 [ESC] 鍵來結束該線段的繪製;若要封閉路 徑,則將指標移到第 1 個錨點上(指標會出現一 個小圈 )按鈕:

使用鋼筆工具

(67)

Page 67 December 23, 2007

使用鋼筆工具

之後,只要在工具面板中點選其它工具或執行

『編輯/取消全選』命令,鋼筆工具繪製的路徑就 會變成線條。

至於用鋼筆工具畫曲線的方法如下:

(68)

Page 68 December 23, 2007

選取細部工具

選取細部工具(Subselection Tool)不但可以選 取鋼筆工具繪製的路徑,所有圖形的外框線、筆 劃、筆刷工具畫的填色區域,一經選取,也會自 動顯示出外框線條的路徑,如此,即可利用路徑 的錨點及控制點來編輯圖形!

(69)

Page 69 December 23, 2007

圈選路徑

選取細部工具的圈選方式和選取工具一樣,按住 滑鼠左鈕拉曳出圈選範圍,則範圍內的物件就會 被選取而出現路徑!

但不同的是,選取細部工具不必把物件完全包含 在圈選範圍內,也能選取該物件的路徑,同時圈 選範圍內的錨點亦會呈選取狀態。

(70)

Page 70 December 23, 2007

編輯錨點與控制點

增/刪錨點:利用鋼筆工具不僅可以建立錨點並拉 曳出平滑的曲線,還可以依需要增、刪錨點,將 路徑調整到最完美的狀態喔!

(71)

Page 71 December 23, 2007

編輯錨點與控制點

刪除錨點的方法與新增錨點類似,也是先用鋼筆 工具選取物件,待顯示路徑後再把指標移到欲刪 除的錨點上︰

(72)

Page 72 December 23, 2007

編輯錨點與控制點

(73)

Page 73 December 23, 2007

移動錨點

錨點影響路徑的主要方向,而控制點影響路徑的 弧度。要移動錨點很簡單,只要用選取細部工具 選取要移動的錨點,再按住滑鼠左鈕拉曳即可!

(74)

Page 74 December 23, 2007

拉曳控制點調整弧度

一個錨點會有兩個控制點,但若該錨點是位於路 徑的端點,那它就只會有一個控制點。

若是建立該錨點時未經拉曳,那麼該錨點就沒有 控制點。

(75)

Page 75 December 23, 2007

拉曳控制點調整弧度

被選取的錨點除了會顯示出它的控制點外,還會 將其前後相鄰錨點所屬之控制點也顯示出來,拉 曳控制點便可調整路徑弧度!

(76)

Page 76 December 23, 2007

3-8 還原與操作記錄面板

在操作的過程中如果做錯了,有兩種方法可以還 原步驟:

第一種是執行還原與重做的命令,這種執行方式的 優點是快速而簡單;

另一種方法則是開啟操作記錄面板,經由面板操作 可以進行較為複雜的編輯動作。

(77)

Page 77 December 23, 2007

還原與重做

當你在繪製與編輯圖形時,若想將動作復原,可 以執行『編輯/還原』命令,或按下 [Ctrl] + [Z]

組合鍵(亦可按下主工具列上的還原鈕);

如果想重做剛剛回復的動作,可以執行『編輯/重 做』命令,或按下 [Ctrl] + [Y] 組合鍵(亦可按主 工具列上的重做鈕)。

(78)

Page 78 December 23, 2007

操作記錄面板

對於較複雜的操作過程,則可以使用操作記錄面 板來還原或重做步驟,其優點在於面板提供每一 步驟的操作資訊,讓使用者能清楚看到步驟執行 的內容。

每一份文件都有自己的操作記錄,從開啟文件時 就開始記錄步驟,文件關閉時步驟記錄將被清除。

(79)

Page 79 December 23, 2007

操作記錄面板

最多可記錄的步驟次數,以偏好設定內設定的次 數再加 1 次為限,超過時會將之前的步驟逐一清 除,已經被清除的步驟則不會再回復。

請執行『視窗/其他面板/操作記錄』命令開啟操 作記錄面板,以滑鼠點選步驟定位軸上要還原或 重做步驟的位置,或拉曳步驟定位軸上的滑桿,

當你拉曳滑桿時,文件會配合步驟變化,因此可 以清楚得知目前復原步驟的結果。

(80)

Page 80 December 23, 2007

若是想要清除所有的步驟記錄,以便重新記錄操 作的話,請按下 鈕執行『清除操作記錄』命 令,即可刪除目前所有的操作記錄。不過,從操 作記錄上移除的步驟,將無法重做該步驟哦!

操作記錄面板

(81)

Page 81 December 23, 2007

HW#02 Flash 繪圖練習

請利用 Flash 繪製如下圖之小屋

外觀大致雷同即可,顏色可自由調配

重點項目:

屋簷立體感

窗戶大門反光效果

請將 .fla 檔案 Email 繳交

參考文獻

Outline

相關文件

[r]

[r]

[r]

我們稱 RW 平面為相位平面 (phase plane) ,而相位平面上 的軌跡,則稱為相位軌跡 (phase trajectories) 。. 因此一個相位軌跡便是 (R,W)

一組曲線 F 的垂直軌跡 (orthogonal trajectory) ,是指一條 曲線在與 F 中的曲線相交時,在交點相交的角度為直角。如

其交線垂直於軸三角形的底邊。進而,如果截痕的直徑平行於軸三角形的一邊,那麼任一

直線方程式從 11 年級挪到了 10 年級,看似恢復了 95 暫綱的安排,但是本條目的設計 內涵還是比較接近

英國人,自我教育的學者。獨 立發現四元數可簡化為空間向 量,而仍然滿足電磁學的需求. Heaviside