flashcs6教程3.ppt

第3章經(jīng)典實(shí)例：繪制向日葵花海,3.1要點(diǎn)分析3.2繪制單株向日葵3.2.1使用“變形”面板繪制向日葵花瓣3.2.2使用“顏色”面板繪制向日葵花盤3.2.3使用圖形工具制作向日葵的莖和葉3.3設(shè)計(jì)向日葵花海3.3.1設(shè)置向日葵海的背景顏色,3.3.2通過變形制作向日葵花海3.3.3繪制天空中的云朵3.3.4使用補(bǔ)間動(dòng)畫使云飄動(dòng)3.4添加歌頌向日葵的語(yǔ)句3.4.1在Flash作品中插入文本3.4.2美化文本3.4.3對(duì)齊多個(gè)文本,3.2繪制單株向日葵,本節(jié)先來繪制單株向日葵，可以將其分為花瓣、花盤、莖和葉四個(gè)部分，下面將逐一開始繪制。,首先繪制向日葵花瓣，具體操作步驟如下。步驟1在Flash窗口中新建Flash文檔，然后按Ctrl+S組合鍵打開“另存為”對(duì)話框，選擇文件保存位置，接著輸入文件名，再單擊“保存”按鈕，如圖3-1所示。步驟2在工具箱中單擊“橢圓工具”圖標(biāo)，然后在“屬性”面板中設(shè)置筆觸顏色為“無”，填充顏色為“黃色”(#FFFF00)，如圖3-2所示。,3.2.1使用“變形”面板繪制向日葵花瓣,圖3-1“另存為”對(duì)話框,圖3-2設(shè)置橢圓工具參數(shù),3.1要點(diǎn)分析,步驟3在舞臺(tái)中按住鼠標(biāo)左鍵并拖動(dòng)，繪制橢圓圖形，如圖3-3所示。步驟4在工具箱中單擊“選擇工具”圖標(biāo)，如圖3-4所示。,圖3-3繪制橢圓,圖3-4單擊“選擇工具”圖標(biāo),圖3-5調(diào)整橢圓為花瓣形狀,圖3-6單擊“任意變形工具”圖標(biāo),步驟5在舞臺(tái)中單擊圖形邊緣，然后按住鼠標(biāo)左鍵拖動(dòng)，調(diào)整橢圓為花瓣形狀，如圖3-5所示。步驟6在工具箱中單擊“任意變形工具”圖標(biāo)，如圖3-6所示。,步驟7在舞臺(tái)單擊圖形，然后拖動(dòng)花瓣的中心點(diǎn)，使其與花瓣分開一段距離，如圖3-7所示。步驟8按Ctrl+C組合鍵復(fù)制花瓣，再按Ctrl+V組合鍵粘貼花瓣，如圖3-8所示。,圖3-7拖動(dòng)花瓣的中心點(diǎn),圖3-8復(fù)制和粘貼花瓣,步驟9移動(dòng)剛粘貼的花瓣與第1個(gè)花瓣重合，這樣可以保證它們的中心點(diǎn)在同一個(gè)位置，如圖3-9所示。步驟10按Ctrl+T組合鍵打開“變形”面板，然后設(shè)置“旋轉(zhuǎn)”角度為90，如圖3-10所示。步驟11使用類似方法，制作另外兩個(gè)花瓣，效果如圖3-11所示。步驟12使用選擇工具選中舞臺(tái)中的四個(gè)花瓣，然后按Ctrl+C組合鍵進(jìn)行復(fù)制，再按Ctrl+V組合鍵粘貼花瓣，如圖3-12所示。,圖3-9移動(dòng)剛粘貼的花瓣,圖3-10打開“變形”面板,圖3-11再?gòu)?fù)制兩個(gè)花瓣,圖3-12一次復(fù)制多個(gè)花瓣,步驟13在“變形”面板中設(shè)置“旋轉(zhuǎn)”角度為22.5，并調(diào)整花瓣的位置，如圖3-13所示。步驟14使用類似方法，制作所有花瓣，最終效果如圖3-14所示。步驟15使用選擇工具選中所有花瓣并右擊，從彈出的快捷菜單中選擇“轉(zhuǎn)換為元件”命令，如圖3-15所示。,圖3-13旋轉(zhuǎn)花瓣,圖3-14花瓣的最終效果,步驟16彈出“轉(zhuǎn)換為元件”對(duì)話框，輸入元件名稱，設(shè)置元件類型為“圖形”，再單擊“確定”按鈕，如圖3-16所示。,圖3-15選擇“轉(zhuǎn)換為元件”命令,圖3-16“轉(zhuǎn)換為元件”對(duì)話框,圖3-17在“變形”面板中縮放花瓣元件,圖3-18單擊“新建圖層”圖標(biāo),向日葵花瓣制作好后，下面制作花瓣中間的簡(jiǎn)易花盤，具體操作步驟如下。步驟1單擊“花瓣”元件，然后在“變形”面板中等比例縮放圖形，如圖3-17所示。步驟2將“花瓣”移動(dòng)到舞臺(tái)中間位置，然后在“時(shí)間軸”面板中單擊“新建圖層”圖標(biāo)，新建圖層2，如圖3-18所示。,3.2.2使用“顏色”面板繪制向日葵花盤,步驟3在工具箱中單擊“橢圓工具”圖標(biāo)，然后在菜單欄中選擇“窗口”|“顏色”命令，打開“顏色”面板，如圖3-19所示。步驟4在“顏色”面板設(shè)置“顏色類型”為“徑向漸變”，接著單擊左側(cè)的顏色模塊，從彈出的面板中選擇“綠色”(#4D4D4D)，再單擊右側(cè)的顏色模塊，從彈出的面板中選擇“黃色”(#F79E28)，如圖3-20所示。,圖3-20設(shè)置徑向漸變效果,圖3-19選擇“顏色”命令,圖3-22繪制交叉網(wǎng)格,圖3-21在花瓣中間繪制圓,步驟5按住Shift鍵，在花瓣中間繪制圓，如圖3-21所示。步驟6在工具箱中單擊“線條工具”圖標(biāo)，然后在新繪制的圓中畫線條，使之交叉成網(wǎng)格，如圖3-22所示。,圖3-24沿花盤復(fù)制一圏花蕊,圖3-23新建圖層3并制作花蕊,步驟7在“時(shí)間軸”面板中新建圖層3，然后參考前面制作花瓣的方法，制作花蕊，其填充顏色為“#E7CC14”，接著將花蕊移動(dòng)到花瓣和花瓣之間，如圖3-23所示。步驟8借助選擇工具、任意變形工具和“變形”面板，沿花盤復(fù)制一圈花蕊，如圖3-24所示。步驟9選中所有圖形并右擊，從彈出的菜單中選擇“轉(zhuǎn)換為元件”命令，打開“轉(zhuǎn)換為元件”對(duì)話框，設(shè)置元件名稱和類型，再單擊“確定”按鈕，如圖3-25所示。,圖3-25“轉(zhuǎn)換為元件”對(duì)話框,圖3-26設(shè)置矩形工具的筆觸顏色,圖3-27繪制矩形,接下來使用圖形工具制作向日葵的莖和葉，具體操作步驟如下。步驟1在“時(shí)間軸”面板中新建圖層，然后在工具箱中單擊“矩形工具”圖標(biāo)，設(shè)置筆觸顏色為“#336600”，如圖3-26所示。步驟2設(shè)置填充顏色為“#339900”，接著在舞臺(tái)中繪制矩形，如圖3-27所示。,3.2.3使用圖形工具制作向日葵的莖和葉,步驟3使用選擇工具調(diào)整矩形形狀，將其作為向日葵的莖，如圖3-28所示。步驟4在工具箱中單擊“橢圓工具”圖標(biāo)，保持筆觸顏色和填充顏色不變，然后在向日葵莖上繪制橢圓，如圖3-29所示。步驟5使用選擇工具調(diào)整橢圓形狀，將其作為向日葵的葉子，如圖3-30所示。,圖3-29繪制橢圓,圖3-28調(diào)整矩形邊框,步驟6在工具箱中單擊“線條工具”圖標(biāo)，并設(shè)置筆觸顏色為“#336600”，然后在向日葵的葉子上添加葉脈，并使用選擇工具調(diào)整葉脈形狀，最終效果如圖3-31所示。,圖3-30調(diào)整橢圓形狀,圖3-31添加葉子上的經(jīng)脈,步驟7在“時(shí)間軸”面板中隱藏圖層3，然后使用選擇工具選中圖層4中的所有圖形，如圖3-32所示。步驟8參考前面方法，打開“轉(zhuǎn)換為元件”對(duì)話框，設(shè)置元件名稱和類型，再單擊“確定”按鈕，如圖3-33所示。,圖3-32選中圖層4中的所有圖形,圖3-33“轉(zhuǎn)換為元件”對(duì)話框,一般情況下，很多用戶新建Flash文檔時(shí)都會(huì)使用默認(rèn)的白色背景，在進(jìn)行整體布局設(shè)置時(shí)再調(diào)整文件背景顏色，這樣便于在制造過程中查看細(xì)節(jié)制作效果，具體操作步驟如下。,3.3.2設(shè)置向日葵海的背景顏色,3.3設(shè)計(jì)向日葵花海,單株向日葵制作好后，下面開始設(shè)計(jì)向日葵花海，具體操作步驟如下。,圖3-34設(shè)置矩形工具參數(shù),圖3-35繪制矩形,步驟4按Ctrl+T組合鍵打開“變形”面板，設(shè)置旋轉(zhuǎn)角度為-90，接著根據(jù)舞臺(tái)大小放大圖形，使之填充整個(gè)舞臺(tái)，如圖3-36所示。步驟5按Alt+Shift+F9組合鍵打開“顏色”面板，單擊背景圖形，然后根據(jù)遠(yuǎn)看天空顏色在“顏色”面板中調(diào)整線性漸變的填充顏色，同時(shí)在舞臺(tái)中觀察效果，如圖3-37所示。,步驟1在“時(shí)間軸”面板中將轉(zhuǎn)換為元件后用不到的圖層刪除，然后將含有“向日葵”元件的圖層重命名為“向日葵”，接著新建“背景”圖層。步驟2在工具箱中單擊“矩形工具”圖標(biāo)，接著在“屬性”面板中設(shè)置筆觸顏色為“無”，并單擊“填充顏色”圖標(biāo)，在彈出的菜單中單擊“線性漸變”圖標(biāo)，如圖3-34所示。步驟3單擊“背景”圖層，然后在舞臺(tái)中繪制矩形，如圖3-35所示。,圖3-36調(diào)整矩形大小,使用復(fù)制的方法，可以快速繪制多株向日葵，以形成向日葵花海。為了讓各行向日葵看起來不同，可以讓其中的一些向日葵略微變形，具體操作步驟如下。步驟1在“時(shí)間軸”面板中單擊“向日葵”圖層，接著在舞臺(tái)中選中向日葵，并按Ctrl+C組合鍵進(jìn)行復(fù)制，再按Ctrl+V組合鍵粘貼圖形，如圖3-38所示。步驟2使用任意變形工具縮放粘貼的向日葵圖形，如圖3-39所示。步驟3在“時(shí)間軸”面板中新建圖層3，然后切換到“庫(kù)”面板，在“名稱”列表框中單擊“向日葵的花盤”選項(xiàng)，按住鼠標(biāo)左鍵向舞臺(tái)拖動(dòng)，再釋放鼠標(biāo)左鍵，插入元件，如圖3-40所示。步驟4選中插入的“向日葵的花盤”元件，然后按Ctrl+T組合鍵打開“變形”面板，接著選中“傾斜”單選按鈕，并調(diào)整水平傾斜角度，如圖3-41所示。,3.3.2通過變形制作向日葵花海,圖3-37“顏色”面板,圖3-38復(fù)制向日葵,圖3-39縮放圖形,圖3-40插入“向日葵的花盤”元件,圖3-41調(diào)整向日葵花盤水平傾斜,步驟5在“時(shí)間軸”面板中新建圖層2，并將其調(diào)整到圖層3的下方，然后參考前面步驟，在圖層2中插入“向日葵的莖”元件，并在“變形”面板中設(shè)置其3D旋轉(zhuǎn)角度，如圖3-42所示。,圖3-42“變形”面板,圖3-43制作向日葵花海,天空中的云朵是時(shí)刻在變化著的，其形狀并不固定，因此用戶可以繪制任何形狀的云朵。下面我們利用橢圓工具來繪制云朵，具體操作步驟如下。步驟1在“時(shí)間軸”面板中新建“云朵”圖層，然后在工具箱中單擊“橢圓工具”圖標(biāo)，接著在“屬性”面板中設(shè)置筆觸顏色為“無”，填充顏色為“白色”(#FFFFFF)，如圖3-44所示。步驟2在舞臺(tái)中拖帶鼠標(biāo)，繪制白色的橢圓圖形，如圖3-45所示。步驟3繪制第二個(gè)白色的橢圓圖形，并使其與第一個(gè)橢圓圖形部分相交，如圖3-46所示。步驟4繪制第三個(gè)白色的橢圓圖形，并使其與前兩個(gè)橢圓圖形部分相交，如圖3-47所示。,3.3.3繪制天空中的云朵,步驟6使用類似方法，通過“庫(kù)”面板中的“向日葵”元件，制作其他向日葵，形成向日葵花海，效果如圖3-43所示。,圖3-44新建“云朵”圖層,步驟5繼續(xù)繪制橢圓圖形，使其最終形成自己想要的云朵圖形，如圖3-48所示。步驟6使用類似方法，繪制其他形狀的云朵，然后使用選擇工具選中并復(fù)制這些云朵，使用任意變形工具調(diào)整云朵大小，最終效果如圖3-49所示。,圖3-45繪制橢圓圖形,圖3-46繪制第二個(gè)橢圓圖形,圖3-47繪制第三個(gè)橢圓圖形,圖3-48繪制出完整云朵,3.3.4使用補(bǔ)間動(dòng)畫使云飄動(dòng),補(bǔ)間動(dòng)畫通過為一個(gè)幀中的對(duì)象屬性指定一個(gè)值并為另一個(gè)幀中的該相同屬性指定另一個(gè)值來生成動(dòng)畫。創(chuàng)建補(bǔ)間動(dòng)畫的操作步驟如下。步驟1將所有向日葵圖形移動(dòng)到“向日葵”圖層中，然后刪除不需要的圖層，接著在“背景、向日葵、云朵”三個(gè)圖層的第50幀中均插入關(guān)鍵幀，如圖3-50所示。步驟2選中“云朵”圖層第50幀的云朵圖形，向左移動(dòng)其位置，如圖3-51所示。步驟3在兩個(gè)關(guān)鍵幀之間的任意位置處右擊，從彈出的快捷菜單中選擇“創(chuàng)建傳統(tǒng)補(bǔ)間”命令，如圖3-52所示。步驟4右擊第50幀，按F9鍵打開“動(dòng)作”面板，輸入gotoAndPlay(5)代碼，如圖3-53所示。至此，向日葵花海制作基本完成。,圖3-49添加其他云朵,圖3-50插入關(guān)鍵幀,圖3-51移動(dòng)云朵位置,圖3-52選擇“創(chuàng)建傳統(tǒng)補(bǔ)間”命令,圖3-53“動(dòng)作”面板,3.4添加文本,下面給向日葵花海添加一些自己喜歡的語(yǔ)句，讓內(nèi)容看起來更豐富。,圖3-54單擊“文本工具”圖標(biāo),在Flash文檔中插入文本的操作步驟如下。步驟1在“時(shí)間軸”面板中新建圖層，然后在工具箱中單擊“文本工具”圖標(biāo)，如圖3-54所示。步驟2在舞臺(tái)中單擊并按住鼠標(biāo)左鍵拖動(dòng)，插入文本框，接著輸入文字，如圖3-55所示。,3.4.1添加描述向日葵的語(yǔ)句,圖3-55輸入文本,步驟3新建一圖層，在舞臺(tái)另一位置處插入第二段文字，如圖3-56所示。,圖3-56在舞臺(tái)另一位置處插入第二段文字,下面通過設(shè)置文本的字體、大小、顏色、段落格式等參數(shù)來美化文本，具體操作步驟如下。步驟1在舞臺(tái)中選中要設(shè)置的文本，然后在“屬性”面板中單擊展開“字符”子面板，在此設(shè)置文本的字體為“華文新魏”，大小為“30.0點(diǎn)”，顏色為“#CCFFCC”，如圖3-57所示。步驟2在“屬性”面板中單擊展開“段落”子面板，設(shè)置文本縮進(jìn)為“2.0像素”，行距為“5.0點(diǎn)”，如圖3-58所示。,3.4.2美化文本,圖3-57設(shè)置文本的字體格式,圖3-58設(shè)置文本的段落格式,圖3-59美化設(shè)置第二段文字,步驟3使用類似方法，設(shè)置第二段文字的字符格式