WEB動畫制作與設(shè)計課件：對象的編輯與修飾

對象的編輯與修飾對象的編輯與修飾對象的編輯與修飾1、對象的變形與操作；2、對象的修飾；3、對齊面板與變形面板的使用【課堂學習目標】【案例學習目標】使用不同的變形命令編輯圖形?！景咐R要點】使用鉛筆工具繪制山圖形和草地圖形，使用縮放命令、旋轉(zhuǎn)與傾斜命令、翻轉(zhuǎn)命令編輯圖形，使用任意變形工具改變圖形形狀。【課堂案例】—繪制稻草人【課堂案例】—繪制稻草人1、繪制山和草地圖形（1）文檔屬性：將“背景顏色”設(shè)為天藍色（#00CCFF）。（2）繪制山鉛筆工具：“鉛筆模式”：平滑；

“筆觸顏色”：黑色；“筆觸高度”：1；【課堂案例】—繪制稻草人1、繪制山和草地圖形（2）繪制山“顏料桶”工具

：“填充色”分別設(shè)為青色（#7BBACE），綠色（#8CC78C）和草綠色（#B5CF4A）【課堂案例】—繪制稻草人1、繪制山和草地圖形（3）繪制草地A、選用“鉛筆”工具繪制草地輪廓B、選擇“顏料桶”工具，“顏色”面板，在“類型”選項為“線性”，選中色帶上左側(cè)的色塊，將其設(shè)為黃色（#F7CF39），選中色帶上右側(cè)的色塊，將其設(shè)為暗黃色（#D3AAOA）?！菊n堂案例】—繪制稻草人1、繪制山和草地圖形（3）繪制草地C、“選擇”工具，選中漸變色的草地圖形，按Ctrl+G組合鍵將圖形組合。多次復制草地，使草地有層次感；【課堂案例】—繪制稻草人

制作復雜圖形時，可以將多個圖形組合成一個整體，以便選擇和修改。另外，制作位移動畫時，需用“組合”命令將圖形轉(zhuǎn)變成組件。選中多個圖形，選擇“修改>組合”命令，或按Ctrl+G組合鍵，將選中的圖形進行組合，如圖所示。一、組合對象原圖組合后效果二、分離對象

要修改多個圖形的組合、圖像、文字或組件的一部分時，可以使用“修改>分離”命令。另外，制作變形動畫時，需用“分離”命令將圖形的組合、圖像、文字或組件轉(zhuǎn)變成圖形。

選中圖形組合，選擇“修改>分離”命令，或按ctrl+B組合鍵，將組合的圖形打散。2、繪制云圖形選擇“鉛筆”工具，繪制出云的輪廓；填充為白色，“Alpha”選項中將其不透明度設(shè)為80%；【課堂案例】—繪制稻草人2、繪制云圖形選中云圖形，按Ctrl+G組合鍵，將圖形組合，按Ctrl+T組合鍵，彈出“變形”面板，在對話框中進行設(shè)置，單擊“復制并應用變形”按鈕點

，復制出一個新的云圖形?！菊n堂案例】—繪制稻草人【功能】應用變形面板可以將圖形、組、文本以及實例進行變形。

選擇“窗口>變形”命令或按Ctrl+T鍵，彈出“變形”面板，如圖所示。

三、變形面板“縮放寬度”

和“縮放高度”

選項

：用于設(shè)置圖形的寬度和高度?！凹s束”按鈕

：用于約束“寬度”和“高度”選項，使圖形能夠成比例地變形?！靶D(zhuǎn)”選項

：用于設(shè)置圖形的角度?！皟A斜”選項

：用于設(shè)置圖形的水平傾斜或垂直傾斜。“重制選區(qū)和變形”按鈕

：用于復制圖形并將變形設(shè)置應用給圖形?！叭∠冃巍卑粹o

：用于將圖形屬性恢復到初始狀態(tài)。三、變形面板選擇“修改>變形”中的“垂直翻轉(zhuǎn)”、“水平翻轉(zhuǎn)”命令，可以將圖形進行翻轉(zhuǎn)，效果分別如圖所示。四、翻轉(zhuǎn)對象原圖垂直翻轉(zhuǎn)水平翻轉(zhuǎn)3、制作稻草人并繪制路圖形（1）選擇“文件>導入>導入到庫”命令將“稻草人”素材導入到庫中。（2）選擇“修改>變形>旋轉(zhuǎn)與傾斜”命令，將中心控制點拖曳到控制框的下方中間位置?！菊n堂案例】—繪制稻草人3、制作稻草人并繪制路圖形（3）選擇“鉛筆”工具，在舞臺窗口中繪制出路的邊線效果?！菊n堂案例】—繪制稻草人3、制作稻草人并繪制路圖形（4）填充路的顏色：選擇“顏料桶”工具，在工具箱中將“填充顏色”設(shè)為乳白色（#FDF3D6）。【課堂案例】—繪制稻草人4、導入素材圖形（1）導入蜻蜓圖形，并進行相應屬性修改?！菊n堂案例】—繪制稻草人4、導入素材圖形（2）導入楓葉素材，轉(zhuǎn)換為元件；在變形面板中進行相應屬性設(shè)置。（3）設(shè)置楓葉的疊放樣式?！菊n堂案例】—繪制稻草人五、疊放對象

制作復雜圖形時，多個圖形的疊放次序不同，會產(chǎn)生不同的效果，可以通過“修改>排列”中的命令實現(xiàn)不同的疊放效果。

如果要將圖形移動到所有圖形的頂層。選中要移動的熱氣球圖形，選擇“修改>排列>移至頂層”命令，將選中的熱氣球圖形移動到所有圖形的頂層，效果如圖所示。5、繪制草圖形（1）新建“草”元件，類型：圖形。（2）利用繪圖工具繪制草的外形輪廓，“填充顏色”設(shè)為褐色（#DE9639）?！菊n堂案例】—繪制稻草人5、繪制草圖形（3）選擇“選擇”工具，選中“草”實例，按住Alt健的同時，復制草圖形并拖曳到適當?shù)奈恢谩Ｔ趫D形“屬性”面板：“色彩效果-樣式”中選擇“色調(diào)”選項，將顏色設(shè)為綠色（#639A00）?！菊n堂案例】—繪制稻草人六、對齊對象

當選擇多個圖形、圖像、圖形的組合、組件時，可以通過“修改>對齊”中的命令調(diào)整它們的相對位置。

如果要將多個圖形的底部對齊。選中多個圖形，選擇“修改>對齊>底對齊”命令，將所有圖形的底部對齊，效果如圖所示。六、對齊對象任務:繪制蝴蝶圖形【

舉一反三】六、對齊對象【操作提示】

本任務中，我們將通過移動、復制等圖形編輯操作，制作蝴蝶圖形。（1）首先利用橢圓工具、線形工具繪制出蝴蝶的身體；（2）利用鉛筆工具和橢圓形工具繪制出蝴蝶的左邊翅膀，并使用“選擇工具”將蝴蝶左側(cè)的翅膀移動到指定位置；（3）通過復制和翻轉(zhuǎn)操作，制作出蝴蝶右側(cè)的翅膀，并將其移動到指定位置?！?/p>

舉一反三】對象的編輯與修飾對象的編輯與修飾對象的編輯與修飾對象的編輯與修飾【案例學習目標】使用不同的繪圖工具繪制圖像，使用形狀命令編輯圖形?！景咐R要點】使用鉛筆工具繪制海水效果，使用橢圓工具繪制氣泡圖形，使用任意變形工具改變圖形的大小，使用柔化填充邊緣命令制作太陽效果?！菊n堂案例】—繪制帆船風景畫【課堂案例】—繪制帆船風景畫【課堂案例】—繪制帆船風景畫一、繪制海水圖形1、導入帆船風景畫底圖。2、繪制海水圖形

選擇“鉛筆”或“鋼筆”等繪圖工具繪制。【課堂案例】—繪制帆船風景畫一、繪制海水圖形2、繪制海水圖形

使用“顏色”面板：“類型”選項：“線性”；色帶上左側(cè)的色塊為藍色（#26BCBC），色帶上右側(cè)的色塊為深藍色（#0D2E74）?！菊n堂案例】—繪制帆船風景畫一、繪制海水圖形2、繪制海水圖形

將海水圖形組合，然后復制出的海水圖形，選擇“修改>變形>水平翻轉(zhuǎn)”命令，將圖形水平翻轉(zhuǎn)。【課堂案例】—繪制帆船風景畫一、繪制海水圖形2、繪制海水圖形選擇“鉛筆”工具，繪制海浪最外層邊線效果，如圖所示。并設(shè)置填充色為“線性”漸變，設(shè)置色帶上左側(cè)的色塊為灰藍色（#1B7E9C），設(shè)置色帶上右側(cè)的色塊為深藍色（#10417D）?！菊n堂案例】—繪制帆船風景畫二、繪制氣泡和云彩圖形1、繪制氣泡（1）選擇“橢圓”工具，“筆觸顏色”設(shè)為無，“填充顏色”設(shè)為白色。填充色為“線性”漸變，設(shè)置色帶上左側(cè)的色塊為白色，色帶上右側(cè)的色塊為綠色（#1AE6D0）。將其組合，并復制多個氣泡?！菊n堂案例】—繪制帆船風景畫二、繪制氣泡和云彩圖形1、繪制氣泡（2）選中復制出的“圓形”，選擇“任意變形”工具，調(diào)整氣泡的大小，使其不均勻的分布在海面上。注意改變氣泡的大小及排列順序?！菊n堂案例】—繪制帆船風景畫二、繪制氣泡和云彩圖形2、繪制云彩（1）新建圖層，選擇“橢圓”工具，在工具箱中將“筆觸顏色”設(shè)為無，“填充顏色”設(shè)為白色。按Ctrl+G組合鍵將其組合，并復制調(diào)整云彩的大小。【課堂案例】—繪制帆船風景畫三、繪制船和太陽圖形1、繪制帆船（1）新建“船”圖層。選擇“矩形”工具，將“筆觸顏色”設(shè)為無，“填充顏色”設(shè)為橘紅色（#FF6600）。【課堂案例】—繪制帆船風景畫三、繪制船和太陽圖形1、繪制帆船（2）使用“選擇”工具和“矩形”工具繪制船帆桿?！菊n堂案例】—繪制帆船風景畫三、繪制船和太陽圖形1、繪制帆船（3）使用“鉛筆”工具和“顏料桶”工具繪制船帆。【課堂案例】—繪制帆船風景畫三、繪制船和太陽圖形1、繪制帆船（4）繪制船身：選擇“鉛筆”工具，繪制船身的邊線，在邊線內(nèi)部填充顏色為淺棕（#CC6666）?！菊n堂案例】—繪制帆船風景畫三、繪制船和太陽圖形2、繪制太陽（1）新建“太陽”圖層。選擇“橢圓”工具，將“筆觸顏色”設(shè)為無，“填充顏色”設(shè)為黃色（#FFFF33），按住Shift鍵在舞臺窗口的左上方繪制出一個圓形?！菊n堂案例】—繪制帆船風景畫三、繪制船和太陽圖形2、繪制太陽（2）選中圓形，選擇“修改>形狀>柔化填充邊緣”命令，彈出“柔化填充邊緣”對話框，并進行參數(shù)設(shè)置?！竟δ堋渴褂萌峄畛涿羁梢詫D形的邊緣制作成柔化效果。一、柔化填充邊緣（1）向外柔化填充邊緣

選中圖形，選擇“修改>形狀>柔化填充邊緣”命令，彈出“柔化填充邊緣”對話框，在“距離”選項的數(shù)值框與“步長數(shù)”選項的數(shù)值框中輸入相應的數(shù)值，然后選擇“擴展”選項，單擊“確定”按鈕，實現(xiàn)填充邊緣柔化。（2）向內(nèi)柔化填充邊緣

選中圖形，選擇“修改>形狀>柔化填充邊緣”命令，彈出“柔化填充邊緣”對話框，在“距離”選項的數(shù)值框與“步長數(shù)”選項的數(shù)值框中輸入數(shù)值，選擇“插入”選項，單擊“確定”按鈕，實現(xiàn)填充內(nèi)部柔化。【功能】應用將線條轉(zhuǎn)換為填充命令可以將矢量線條轉(zhuǎn)換為填充色塊。二、將線條轉(zhuǎn)換為填充

選擇“墨水瓶”工具，為圖形繪制外邊線，如左圖所示。雙擊圖形的外邊線將其選中，選擇“修改>形狀>將線條轉(zhuǎn)換為填充”命令，將外邊線轉(zhuǎn)換為填充色塊，如中圖所示。這時，可以選擇“顏料桶”工具，為填充色塊設(shè)置其他顏色，如右圖所示。繪制外邊線轉(zhuǎn)換為填充色塊設(shè)置其他顏色三、擴展填充【功能】應用擴展填充命令可以將填充顏色向外擴展或向內(nèi)收縮，擴展或收縮的數(shù)值可以自定義。（1）擴展填充色

選中圖形的填充顏色。選擇“修改>形狀>擴展填充”命令，彈出“擴展填充”對話框，選擇“擴展”選項，單擊“確定”按鈕，填充色向外擴展。選中填充顏色擴展填充色三、擴展填充【功能】應用擴展填充命令可以將填充顏色向外擴展或向內(nèi)收縮，擴展或收縮的數(shù)值可以自定義。（2）收縮填充色

選中圖形的填充顏色，選擇“修改>形狀>擴展填充”命令，彈出“擴展填充”對話框，選擇“插入”選項，單擊“確定”按鈕，填充色向內(nèi)收縮。選中填充顏色收縮填充色1．繪制朦朧動畫場景【

舉一反三】【操作提示】

本實例主要使用基本繪圖工具繪制云彩形狀，再使用“柔化填充邊緣”調(diào)整邊緣效果。通過對不同圖形設(shè)置不同的透明度來實現(xiàn)場景的層次感，并將場景制作成為元件，以方便動畫制作過程中的再次使用。對象的編輯與修飾對象的編輯與修飾對象的編輯與修飾對象的編輯與修飾【案例學習目標】

使用不同的浮動面板編輯圖形?！景咐R要點】

使用矩形工具繪制花瓣元件，使用顏色面板、變形面板、對齊面板來完成按鈕的制作?！菊n堂案例】—制作數(shù)字按鈕一、制作按鈕元件1、新建文檔

屬性為：寬度設(shè)為650像素，高度設(shè)為200像素。2、新建元件名稱為“按鈕圖形”，類型為：圖形元件。3、繪制按鈕圖形（1）選擇“橢圓”工具，“筆觸顏色”設(shè)為無，“填充顏色”設(shè)為深紅色（#990000），并在“屬性”面板中將“寬”、“高”選項分別設(shè)置為20。【課堂案例】—制作數(shù)字按鈕一、制作按鈕元件3、繪制按鈕圖形（2）選中該圖形，在“變形”面板中，將“寬度”，“高度”選項設(shè)置為65，單擊“復制并應用變形”按鈕，新復制出一個圓形，并設(shè)置“填充顏色”設(shè)為白色?！菊n堂案例】—制作數(shù)字按鈕一、制作按鈕元件3、繪制按鈕圖形（3）繪制按鈕高光效果。

【課堂案例】—制作數(shù)字按鈕二、制作花瓣元件1、新建“花瓣”圖形元件2、選擇“矩形”工具，將“筆觸顏色”設(shè)為深紅色（#990000），“填充顏色”設(shè)為粉色（#FFCCCC），在“屬性”面板中將“矩形邊角半徑”選項設(shè)為50，在舞臺窗口中心位置繪制圓角矩形。【課堂案例】—制作數(shù)字按鈕二、制作花瓣元件3、雙擊“庫”面板中的“按鈕圖形”元件的圖標，進入“按鈕圖形”元件的舞臺窗口。單擊“時間軸”面板下方的“插入圖層”按鈕，將“庫”面板中的圖形元件“花瓣”拖曳到按鈕上。并選擇“任意變形”工具，將中心控制點拖曳到控制框下方中間的控制點上。【課堂案例】—制作數(shù)字按鈕二、制作花瓣元件4、選擇“變形”面板，將“旋轉(zhuǎn)”選項設(shè)為30，多次單擊“復制并應用變形”按鈕鞋，復制出多個花瓣圖形。并調(diào)整相應圖層的位置?！菊n堂案例】—制作數(shù)字按鈕三、編輯元件1、導入“按鈕底圖”文件。2、將“庫”面板中的圖形元件“按鈕圖形”拖曳到舞臺窗口中，成為實例，復制6次按鈕實例并將其水平放置。【課堂案例】—制作數(shù)字按鈕三、編輯元件3、選擇“文本”工具T，文字大小為18，文字顏色為白色的字母“One、Two、Three、Four、Five、Six、Seven”?！菊n堂案例】—制作數(shù)字按鈕【功能】可以將多個圖形按照一定的規(guī)律進行排列，并能夠快速地調(diào)整圖形之間的相對位置、平分間距、對齊方向。一、對齊面板

選擇“窗口對齊”命令或按Ctrl+K組合鍵，彈出“對齊”面板，如圖所示。一、對齊面板

1、“對齊”選項組“左對齊”按鈕

：設(shè)置選取對象左端對齊?！八街旋R”按鈕

：設(shè)置選取對象沿垂直線中對齊?！坝覍R”按鈕

：設(shè)置選取對象右端對齊?！绊攲R”按鈕

：設(shè)置選取對象頂端對齊?！按怪敝旋R”按鈕

：設(shè)置選取對象沿水平線中對齊?！暗讓R”按鈕

：設(shè)置選取對象底端對齊。一、對齊面板

2、“分布”選項組“頂部分布”按鈕

：設(shè)置選取對象在橫向上上端間距相等?！按怪本又蟹植肌卑粹o

：設(shè)置選取對象在橫向上中心間距相等?！暗撞糠植肌卑粹o

：設(shè)置選取對象在橫向上下端間距相等?！白髠?cè)分布”按鈕

：設(shè)置選取對象在縱向上左端間距相等?！八骄又蟹植肌卑粹o

：設(shè)置選取對象在縱向上中心間距相等。“右側(cè)分布”按鈕

：設(shè)置選取對象在縱向上右端間距相等。一、對齊面板

3、“匹配大小”選項組“匹配寬度”按鈕

：設(shè)置選取對象在水平方向上等尺寸變形（以所選對象中寬度最大的為基準）?！捌ヅ涓叨取卑粹o

：設(shè)置選取對象在垂直方向上等尺寸變形（以所選對象中高度最大的為基準）。“匹配寬和高”按鈕

：設(shè)置選取對象在水平方向和垂直方向同時進行等尺寸變形（同時以所選對象中寬度和高度最大的為基準）。一、對齊面板

4、“間隔”選項組“垂直平均間隔”按鈕

：設(shè)置選取對象在縱向上間距相等?！八狡骄g隔”按鈕

：設(shè)置選取對象在橫向上間距相等。5、“與舞臺對齊”選項“與舞臺對齊”按鈕

：選擇此選項后，上述設(shè)置的操作都是以整個舞臺的寬度或高