chapter網頁設計與Web編程實用

會計學1chapter網頁設計與Web編程實用3.1FlashCS3的工作環(huán)境簡介菜單欄時間軸舞臺工具箱屬性面板浮動面板第1頁/共50頁時間軸時間軸：用于組織和控制文檔內容在一定時間內播放的圖層數和幀數

第2頁/共50頁舞臺第3頁/共50頁工作區(qū)（舞臺的后臺）第4頁/共50頁常用面板“屬性”面板：舞臺的下方

“對齊”面板：“窗口”|“對齊”

“顏色”面板：“窗口”|“顏色”“樣本”面板：顏色庫面板

“信息”面板：在編輯操作的過程中為用戶提供一些相關的信息?！皥鼍啊泵姘澹猴@示了當前動畫的場景數量和播放的先后順序“變形”面板：對選定對象執(zhí)行縮放、旋轉、傾斜和創(chuàng)建副本的操作“動作”面板：方便使用Flash的腳本編程語言ActionScript而專門提供的操作界面

“組件”面板：動作集合第5頁/共50頁3.2基本繪圖工具（工具箱）選擇工具部分選取工具直線工具套索工具鋼筆工具矩形工具鉛筆工具刷子工具任意變形工具漸變變形工具墨水瓶工具與顏料桶工具滴管工具橡皮擦工具文本工具第6頁/共50頁3.3基本動畫制作基本動畫類型特點逐幀動畫對每幀畫進行控制保存每一幀的數據

形狀補間動畫保存幀之間不同的數據在一個關鍵幀中繪制一個形狀，然后在另一個關鍵幀中更改該形狀或繪制另一個形狀動作補間動畫一個對象在兩個關鍵幀分別定義不同的屬性并在兩個關鍵幀之間建立運動漸變關系遮罩動畫遮罩層的操作(水波、萬花筒、百頁窗、放大鏡、望遠鏡)引導路徑動畫自定義運動路徑第7頁/共50頁3.3.1逐幀動畫方法與實例創(chuàng)建逐幀動畫的幾種方法：1．用導入的靜態(tài)圖片建立逐幀動畫

用jpg、png等格式的靜態(tài)圖片連續(xù)導入到Flash中，就會建立一段逐幀動畫。2．繪制矢量逐幀動畫

用鼠標或壓感筆在場景中一幀幀的畫出幀內容。3．文字逐幀動畫

用文字作幀中的元件，實現文字跳躍、旋轉等特效。4．指令逐幀動畫

在時間幀面板上，逐幀寫入動作腳本語句來完成元件的變化。5．導入序列圖像

可以導入gif序列圖像、swf動畫文件或者利用第3方軟件（如swish、swift3D等）產生的動畫序列。第8頁/共50頁3.3.1逐幀動畫方法與實例例1：奔馳的汽車步驟1：新建一個大小為550*400的動畫文件，在第1幀處按F6插入關鍵楨。

步驟2：選擇“文件|導入|導入到舞臺”，將小汽車的圖片導入到舞臺上步驟3：單擊第2幀，插入關鍵楨(F6)，選中舞臺上的小汽車并水平平移一段距離。

步驟4：單擊第3幀，插入關鍵楨(F6)，選中舞臺上的小汽車繼續(xù)水平平移一段距離。

步驟5：按照3和4的步驟重復幾次直至小騎車平移到最右邊。

步驟6：同時按下Ctrl+回車鍵，即可觀看最后的動畫效果。

第9頁/共50頁3.3.1逐幀動畫方法與實例例2：奔馳的駿馬----（導入連續(xù)圖片）步驟1：新建一個影片文檔，在“屬性”面板上設置文件大小為460×290像素，“背景色”為白色。

如下圖所示。第10頁/共50頁3.3.1逐幀動畫方法與實例步驟2：創(chuàng)建背景圖層。將當前圖層重命名為“背景”，選擇第一幀，選擇菜單命令“文件|導入|導入到舞臺…”，將背景圖片導入舞臺中，在第8幀處按F5鍵插入普通幀，使幀內容延續(xù)到第8幀。步驟3：導入素材到庫。選擇菜單命令“文件|導入|導入到庫…”，在彈出的對話框中找到素材所在的文件夾，按Ctrl+A，把素材全部選中，再點擊右下角的“打開”按鈕，這樣所有的素材都導入到庫中。如左圖所示。第11頁/共50頁3.3.1逐幀動畫方法與實例步驟4：將馬的圖片添加到舞臺上。插入一個新的圖層并選中第1幀，單擊庫里名為“馬1”的圖形元件，按住鼠標左鍵拖動到舞臺上，然后釋放鼠標，這樣“馬1”圖形就拖到舞臺上了。選中第2幀，按F7鍵插入7個空白關鍵幀，依次在各個空白關鍵幀上，分別從庫里拖出“馬2”、“馬3”、“馬4”、“馬5”、“馬6”、“馬7”、“馬8”到舞臺上，時間軸上所有空白關鍵幀都變成關鍵幀了。下圖為導入的圖片序列。第12頁/共50頁3.3.1逐幀動畫方法與實例步驟5：調整對象位置。單擊“時間軸”面板下方的“編輯多個幀”按鈕，再單擊“修改繪圖紙標記”按鈕，在彈出的菜單中選擇“繪制全部”命令。最后執(zhí)行“編輯”菜單下的“全選”命令，此時時間軸和場景效果。此時時間軸和場景效果如下圖所示。

步驟6：測試存盤

。第13頁/共50頁3.3.2形狀補間動畫實例例：變形文字步驟1：新建一個文檔。在“屬性”面板中設置影片的大小為500×400像素，背景色為白色。步驟2：選中“工具欄”中的“文本工具”，在舞臺上單擊并輸入大寫字母“A”，選中字母“A”，在文本“屬性”面板中設置字體為“黑體”、字號“96”、“粗體”、顏色為“紅色”（#FF0000）。步驟3：在第10、20、30幀處分別按F6鍵建立關鍵幀，用“文本工具”將第10幀的文字改為“B”、顏色改為“綠色”（#00FF00），將第20幀的文字改為“C”、顏色改為“藍色”（#0000FF），將第30幀的文字改為“D”、顏色改為“黃色”（#FFFF00）。

第14頁/共50頁3.3.2形狀補間動畫實例步驟4：分別選擇各關鍵幀的文字，選擇菜單命令“修改|分離”，將各關鍵幀上的文字打散。步驟5：創(chuàng)建形狀補間動畫。分別選擇第1、10、20幀，將其“屬性”面板中的“補間”設為“形狀”。設置后時間軸如圖所示。

步驟6：

Ctrl+Enter快捷鍵預覽動畫第15頁/共50頁3.3.3動作補間動畫方法與實例兩種方式：1)先創(chuàng)建好兩個幀的狀態(tài)，然后在兩個關鍵幀之間建立動作補間關系。2)先創(chuàng)建好起點關鍵幀，然后給此幀賦予動作補間模式，再去創(chuàng)建終點關鍵幀，兩幀之間就建立了動作補間關系。第16頁/共50頁3.3.3動作補間動畫方法與實例動作補間動畫的屬性面板“緩動”選項:-1到-100:動畫運動速度從慢到快，朝運動結束的方向加速補間。1到100:動畫運動的速度從快到慢，朝運動結束的方向減慢補間。

默認:補間幀之間的變化速率是不變的第17頁/共50頁3.3.3動作補間動畫方法與實例動作補間動畫的屬性面板“旋轉”選項:無:禁止元件旋轉自動:使元件在需要最小動作的方向上旋轉對象一次順時針或逆時針+N:使元件在運動時順時針或逆時針旋轉相應的圈數

第18頁/共50頁3.3.3動作補間動畫方法與實例例：跳動的彈球，且落地時還有彈性的效果。步驟1：新建一個文檔。在“屬性”面板中設置影片的寬為300像素，高為300像素，背景色為白色。步驟2：繪制圖形。選擇菜單命令“文件”|“導入”|“導入到庫”，選擇彈球圖片后，將彈球導入到庫。在繪制時，最好是選擇菜單命令“視圖”|“網格”|“顯示網格”，在舞臺上顯示網格。步驟3：選擇菜單命令“插入”|“新建元件”，新建圖形元件名稱填為彈球并將庫中的彈球位圖拖動到舞臺上。步驟4：回到場景編輯界面，打開“庫”面板，將圖形元件“彈球”從庫中拖到舞臺上。步驟5：創(chuàng)建動畫。注意第19頁/共50頁3.3.3動作補間動畫方法與實例（1）在第20幀按F6鍵插入關鍵幀，按向下的方向鍵將圖形放到場偏下的位置，模擬彈球著地的樣子。為了模擬彈球著地時被壓縮的樣子，應該在隨后的幾幀里將圖形壓縮再恢復。在第25幀處按F6鍵插入關鍵幀，將圖形進行壓縮，即上下端點距離縮短，左右距離拉長，但圖形的著地點不應該變化，所以壓縮前必須記住最下端的位置。壓縮完后，將圖形下移到剛才記下的位置上。（2）單擊第20幀，選擇菜單命令“編輯”|“時間軸”|“復制幀”，復制這一幀，再單擊第30幀，選擇菜單命令“編輯”|“時間軸”|“粘貼幀”，把第20幀的內容粘貼過來。在這一幀上，彈球將恢復原形，準備跳起。（3）按照第（2）步的方法，將第1幀的內容復制到第50幀。這一彈球將完成一個循環(huán)。第20頁/共50頁3.3.3動作補間動畫方法與實例（4）現在為每一幀的運動加上漸變。由于重力作用，圖形下落的時候加速，上升的時候減速，所以在第1幀的屬性中將“補間”設置為“動畫”，將“緩動”值改為-60。如下圖：第21頁/共50頁3.3.3動作補間動畫方法與實例（5）在第20幀至第25幀之間右擊，在彈出的快捷菜單中選擇“創(chuàng)建補間動畫”命令。在第25幀至第30幀之間右擊，在彈出的快捷菜單中選擇“創(chuàng)建補間動畫”命令。在第30幀的屬性中將“補間”設置為“動畫”，將“緩動”值改為60。創(chuàng)建后的時間軸如下圖：步驟5：測試動畫。按Ctrl+Enter快捷鍵測試動畫。

第22頁/共50頁3.3.4遮罩動畫方法與實例1.遮罩和遮罩的創(chuàng)建1）遮罩及其作用遮罩動畫是Flash中的一個很重要的動畫類型，很多效果豐富的動畫都是通過遮罩動畫來完成的。在Flash的圖層中有一個遮罩圖層類型，為了得到特殊的顯示效果，可以在遮罩層上創(chuàng)建一個任意形狀的“視窗”，遮罩層下方的對象可以通過該“視窗”顯示出來，而“視窗”之外的對象將不會顯示。在Flash動畫中，“遮罩”主要有2種用途，一個作用是用在整個場景或一個特定區(qū)域，使場景外的對象或特定區(qū)域外的對象不可見，另一個作用是用來遮罩住某一元件的一部分，從而實現一些特殊的效果。第23頁/共50頁3.3.4遮罩動畫方法與實例2）創(chuàng)建遮罩的方法（1）創(chuàng)建遮罩（2）構成遮罩和被遮罩層的元素（3）遮罩中可以使用的動畫形式3）遮罩層的基本原理：能夠透過該圖層中的對象看到“被遮罩層”中的對象及其屬性（包括它們的變形效果），但是遮罩層中的對象中的許多屬性如漸變色、透明度、顏色和線條樣式等卻是被忽略的。比如，我們不能通過遮罩層的漸變色來實現被遮罩層的漸變色變化。第24頁/共50頁3.3.4遮罩動畫方法與實例要在場景中顯示遮罩效果，可以鎖定遮罩層和被遮罩層。可以用“Actions”動作語句建立遮罩，但這種情況下只能有一個“被遮罩層”，同時，不能設置_Alpha屬性。不能用一個遮罩層試圖遮蔽另一個遮罩層。遮罩可以應用在gif動畫上。在制作過程中，遮罩層經常擋住下層的元件，影響視線，無法編輯，可以按下遮罩層時間軸面板的顯示圖層輪廓按鈕，使之變成，使遮罩層只顯示邊框形狀，在這種情況下，你還可以拖動邊框調整遮罩圖形的外形和位置。在被遮罩層中不能放置動態(tài)文本。技巧

第25頁/共50頁3.3.4遮罩動畫方法與實例例：掃描文字步驟1：新建一個Flash文檔。步驟2：按Ctrl+F8快捷鍵插入一個“圖形”元件，并命名為“文字”。選中“工具欄”中的“文本工具”在舞臺上單擊，輸入文字“HELLO,FLASH!”，然后在下面的“屬性”面板中設置字體為“ArialBlack”、字號為“45”、顏色任意。文字元件如圖。第26頁/共50頁3.3.4遮罩動畫方法與實例步驟3：按Ctrl+F8快捷鍵插入一個“圖形”元件，并命名為“彩條”。將工具箱中的填充顏色設置為彩色。選擇工具箱中的“矩形工具”，畫出如圖3-67所示彩條。注意，彩條的寬度應長于文字的寬度。第27頁/共50頁3.3.4遮罩動畫方法與實例步驟4：單擊文檔窗口右上方的“場景”按鈕，回到主場景中。從“庫”面板中拖動圖形元件“彩條”到舞臺上適當的位置。

步驟5：右擊當前圖層，在彈出的快捷菜單中選擇“插入圖層”命令，在當前圖層的上方插入一個新的圖層“圖層2”。從“庫”面板中拖動圖形元件“文字”到舞臺上。第28頁/共50頁3.3.4遮罩動畫方法與實例步驟6：在“圖層2”的第30幀處按F5鍵，插入普通幀。在“圖層1”的第30幀處按F6鍵，插入關鍵幀。步驟7：在“圖層1”的第1幀至第30幀之間右擊鼠標，在彈出的菜單中選擇“創(chuàng)建補間動畫”命令。選擇“圖層1”的第15幀，用工具箱中的選擇工具選中彩條，拖動向向右平移，使第一個字母與矩形的左邊線對齊。步驟8：右擊“圖層2”，在彈出的快捷菜單中選擇“遮罩層”命令，將“圖層2”圖層設置成遮罩層，這時“圖層1”自動成了被遮罩層。步驟9：本例制作完成，按Ctrl+Enter快捷鍵預覽動畫。第29頁/共50頁3.3.5引導路徑動畫方法與實例1)創(chuàng)建引導層和被引導層方法：

第30頁/共50頁3.3.5引導路徑動畫方法與實例2)引導層和被引導層中的對象引導層是用來指示元件運行路徑的，所以“引導層”中的內容可以是用鋼筆、鉛筆、線條、橢圓工具、矩形工具或畫筆工具等繪制出的線段。而“被引導層”中的對象是跟著引導線走的，可以使用影片剪輯、圖形元件、按鈕、文字等，但不能使用形狀。由于引導線是一種運動軌跡，不難想象，“被引導”層中最常用的動畫形式是動作補間動畫，當播放動畫時，一個或數個元件將沿著運動路徑移動。方法：

第31頁/共50頁3.3.5引導路徑動畫方法與實例3)向被引導層中添加元件“引導動畫”最基本的操作就是使一個運動動畫“附著”在“引導線”上。所以操作時特別得注意“引導線”的兩端，被引導的對象起始、終點的2個“中心點”一定要對準“引導線”的2個端頭，如下圖所示：方法：

第32頁/共50頁3.3.5引導路徑動畫方法與實例1)“被引導層”中的對象在被引導運動時，還可作更細致的設置，比如運動方向，在“屬性”面板上，選中“調整到路徑”復選框，對象的基線就會調整到運動路徑。而如果選中“對齊”復選框，元件的注冊點就會與運動路徑對齊。2)引導層中的內容在播放時是看不見的，利用這一特點，可以單獨定義一個不含“被引導層”的“引導層”，該引導層中可以放置一些文字說明、元件位置參考等。3)在做引導路徑功，拖動對象時，對象的中心會自動吸附到動畫時，按下工具箱中的“對齊對象”按鈕，可以使“對象附著于引導線”的操作更容易成路徑端點上。4)過于陡峭的引導線可能使引導動畫失敗，而平滑圓潤的線段有利于引導動畫成功制作。技巧：

第33頁/共50頁3.3.5引導路徑動畫方法與實例5)向被引導層中放入元件時，在動畫開始和結束的關鍵幀上，一定要讓元件的注冊點對準線段的開始和結束的端點，否則無法引導，如果元件為不規(guī)則形，可以點擊工具箱中的“任意變形工具”，調整注冊點。6)如果想解除引導，可以把被引導層拖離“引導層”，或在圖層區(qū)的引導層上單擊右鍵，在彈出的菜單上選擇“屬性”，在對話框中選擇“一般”，作為正常圖層類型。7)如果想讓對象作圓周運動，可以在“引導層”畫一根圓形線條，再用“橡皮擦工具”擦去一小段，使圓形線段出現2個端點，再把對象的起始、終點分別對準端點即可。8)引導線允許重疊，比如螺旋狀引導線，但在重疊處的線段必需保持圓潤，讓Flash能辨認出線段走向，否則會使引導失敗。技巧：

第34頁/共50頁3.3.5引導路徑動畫方法與實例例：小球沿著彎曲道路運動1．新建一個文檔。在“屬性”面板中設 置影片的大小為500×400像素，背景色 為黑色。2．選擇菜單命令“視圖”|“網格”|“顯示網格”，在舞臺上顯示網格線。3．繪制曲線。選中“工具箱”中的“鋼筆工具”，在“顏色”設置里將筆觸顏色設為紅色（#FF0000）。首先在場景中單擊，出現一個控制點，然后在它的右斜上方單擊并拖動鼠標，直到第1個控制點和第2個控制點間出現圓滑的曲線滿意松開鼠標。再在第2個控制點的右斜下方單擊并拖動鼠標，這時在第2個控制點和第3個控制點間出現圓滑的曲線。最后在第3個控制點的右斜上方單擊并拖動鼠標，這時在第3個控制點和第4個控制點間出現圓滑的曲線。繪制成的曲線如右下圖所示。如果繪制的曲線不滿意，可以用選中選擇工具指向需要修整的地方，鼠標指針變成時拖動鼠標即可調整曲線的彎曲度第35頁/共50頁3.3.5引導路徑動畫方法與實例4．右擊當前圖層名，在彈出的快捷菜單中選擇“插入圖層”命令，插入一個新的圖層。單擊“工具箱”中的“橢圓工具”，設置筆觸顏色為無、填充顏色為藍色（#0000FF）。按住Shift鍵并在場景上拖動鼠標，繪制一個大小適中的圓。5．添加引導層。在“圖層2”圖層的名稱上右擊，在彈出的快捷菜單中選擇“添加引導層”命令。此時“時間軸”上新增加了一個引導層。6．選中“圖層1”圖層中的曲線，按Ctrl+C快捷鍵，然后選中“引導層”圖層，按Ctrl+V快捷鍵在引導層上粘貼曲線圖形。拖動“引導層”圖層上的曲線到“圖層1”圖層中曲線的正上方，使兩條曲線間隔大約剛才繪制的圓的直徑的路離。7．用“工具箱”中的“橡皮擦工具”，將“引導層”圖層中的曲線的最高的地方擦去一小塊、最低的地方也擦去一小塊。此時曲線被分成3部分。第36頁/共50頁3.3.5引導路徑動畫方法與實例8．拖動“圖層2”圖層中的圓，使圓的注冊點對準“引導層”圖層中第1段曲線的起始位置。移動“圖層1”圖層中的曲線，使之與圓外切，擦除該曲線的起始點到圓的切點之間的一段曲線。用“選擇工具”對“圖層1”圖層中的曲線整形，使之與“引導層”圖層的曲線平行，擦除“引導層”圖層中曲線末尾多余的部分。效果如圖：第37頁/共50頁3.3.5引導路徑動畫方法與實例9．單擊“圖層1”圖層中的第30幀，按F5鍵插入普通幀（使第1幀的內容延續(xù)到這一幀）。10．單擊“引導層”圖層中的第30幀，按F5鍵插入普通幀。11．單擊“圖層2”圖層中的第10幀，按F6鍵插入一個關鍵幀。拖動圓，使圓的注冊點對準“引導層”圖層的第1段曲線的結束點。12．分別單擊“圖層2”圖層的第11、20、21、30幀，按F6鍵插入關鍵幀。拖動圓，使圓的注冊點分別對準“引導層”圖層的第2段曲線的起始點、結束點，第3段曲線的起始點、結束點。13．創(chuàng)建動作補間動畫。分別在“圖層2”圖層的第1幀至第10幀之間、第11幀至第20幀這間、第21幀至第30幀之間右擊，在彈出快捷菜單中選擇“創(chuàng)建補間動畫”命令。14．本例制作完成，按Ctrl+Enter快捷鍵預覽動畫。第38頁/共50頁3.4動畫制作實例搖曳的燭光溪流效果第39頁/共50頁3.4動畫制作實例一----搖曳的燭光

步驟1：新建一個文檔。背景色黑色，其他默認。步驟2：選擇“插入”|“新建元件”，將元件命名為“光圈”，類型為“影片剪輯”。步驟3：在工具欄中，筆觸色禁止，填充色放射狀，在顏色面板中，將類型設置為放射狀，三個色標：左FFFF00Alpha100%，中FFFF6EAlpha77%，右FFFFCCAlpha0%，如圖。用橢圓工具畫個圓，全居中：

第40頁/共50頁3.4動畫制作實例一----搖曳的燭光步驟4：第15、第30幀加上關鍵幀，點中第15幀，再點修改—變形—縮放和旋轉，縮放150。如左圖：步驟5：在圖層1上點一下，這樣整個圖層都被選中了(時間軸為黑色了)，再在屬性面板里"補間"，選擇"形狀"。釋放下鼠標，時間幀面板的背景色變?yōu)榈G色，在起始幀和結束幀之間有一個長長的實線箭頭，表示形狀補間動畫創(chuàng)建好了。第41頁/共50頁3.4動畫制作實例一----搖曳的燭光步驟6：選擇“插入”|“新建元件”，將元件命名為“蠟燭”，類型為“影片剪輯”。選擇“文件”|“導入”|“導入到庫”，導入本實例中使用的蠟燭燭身，如圖所示。將庫中的元件蠟燭位圖拖入到場景中。在第30幀處插入幀，延長到30幀，并將圖層上鎖。步驟7：在圖層1上新建圖層，畫火苗。筆觸色禁止，填充色線性：左FFFF99Alpha100%，右FFFF1BAlpha30%，畫橢圓，并用部分選擇工具整調形狀使該橢圓的形狀像火苗。

第42頁/共50頁3.4動畫制作實例一----搖曳的燭光步驟8：在圖層2第30幀插入關鍵幀，在第1幀到第30幀之間創(chuàng)建形狀補間動畫，如下圖所示。步驟9：在圖層2第8幀插入關鍵幀，選中火焰，點擊右鍵選擇“分離”。用部分選擇工具調整形狀，第14幀插入關鍵幀，繼續(xù)調整。以此類推，第20、26幀都插入關鍵幀做調整，可以只做火苗伸長和壓縮，做成上下竄動，也可以再加上左右擺動。第43頁/共50頁3.4動畫制作實例一----搖曳的燭光步驟10：在圖層2上新建圖層，點第1幀，從庫中把元件光圈拖入擺放在適當的位置并調整好大小，在屬性面板里“顏色”里Alpha設置為50%，如圖3-80所示。

步驟11：回到場景中，從庫里把蠟燭元件拖到場景中，擺放好，Ctrl+Enter即可觀看到蠟燭火焰搖曳的效果。第44頁/共50頁3.4動畫制作實例二----溪流效果步驟1：新建一個文檔，大小為550×4