項(xiàng)目十制作交互式動(dòng)畫363任務(wù)1制作中秋節(jié)電子賀卡動(dòng)畫任務(wù)2制作中華美食網(wǎng)任務(wù)3制作唐詩(shī)教學(xué)課件364制作中秋節(jié)電子賀卡動(dòng)畫任務(wù)13651.?能綜合應(yīng)用動(dòng)畫技術(shù)制作電子賀卡。2.?能選擇正確的鼠標(biāo)事件代碼完成場(chǎng)景的跳轉(zhuǎn)。366本任務(wù)是一個(gè)綜合應(yīng)用動(dòng)畫技術(shù)制作中秋節(jié)電子賀卡的實(shí)例，效果如圖所示。通過本任務(wù)的學(xué)習(xí)，可以掌握電子賀卡的制作流程和方法以及場(chǎng)景、元件、實(shí)例、“動(dòng)作”面板的應(yīng)用技巧。367中秋節(jié)電子賀卡動(dòng)畫效果一、播放和停止動(dòng)畫1.?stop（）：用于在此幀停止播放。2.?gotoAndStop（）：用于轉(zhuǎn)到某幀并停止播放。3.?gotoAndPlay（）：用于轉(zhuǎn)到某幀并開始播放。4.?addEventListener（）：用于添加事件的方法。368369二、“圖層深度”面板執(zhí)行“窗口”→“圖層深度”命令，可打開“圖層深度”面板。使用“圖層深度”面板，可以動(dòng)態(tài)地更改圖層的深度，配合攝像頭為對(duì)象創(chuàng)建視覺深度和角度的差異效果。1.?在Animate中創(chuàng)建多個(gè)圖層，并在每個(gè)圖層中放置一個(gè)帶有位移動(dòng)畫的對(duì)象，如圖所示。370創(chuàng)建多個(gè)帶有位移動(dòng)畫對(duì)象的圖層2.?在“圖層深度”面板中更改每個(gè)圖層名稱右側(cè)的深度值，為每個(gè)對(duì)象添加不同的圖層深度，如圖所示。在更改深度值時(shí)，數(shù)值越小對(duì)象越近，反之，數(shù)值越大對(duì)象越遠(yuǎn)，而對(duì)象的實(shí)際大小保持不變。371調(diào)整各圖層的深度值3.?單擊“攝像頭”

后，調(diào)整攝像頭的位置，可以看到攝像頭近處的對(duì)象和遠(yuǎn)處的對(duì)象在以不同的速度移動(dòng)，如圖所示，原本每個(gè)圖層的顏色色塊運(yùn)動(dòng)狀態(tài)是相同的，而調(diào)整了圖層深度后，在相同的時(shí)間內(nèi)，近處的玫紅色色塊向右移動(dòng)的距離要比遠(yuǎn)處紫色色塊向右移動(dòng)的距離大得多，所以近處對(duì)象的移動(dòng)速度比遠(yuǎn)離攝像頭對(duì)象的移動(dòng)速度更快。372373不同圖層深度的動(dòng)畫運(yùn)動(dòng)添加圖層深度前后的對(duì)比效果如圖所示。374無圖層深度的內(nèi)容有圖層深度的內(nèi)容

制作中華美食網(wǎng)任務(wù)23751.?能利用平面設(shè)計(jì)素材合理布局網(wǎng)頁(yè)頁(yè)面。2.?能根據(jù)網(wǎng)頁(yè)頁(yè)面的布局，選擇適合的網(wǎng)頁(yè)頁(yè)面跳轉(zhuǎn)代碼。376本任務(wù)是一個(gè)利用平面設(shè)計(jì)素材制作多頁(yè)面網(wǎng)頁(yè)的實(shí)例，通過添加頁(yè)面跳轉(zhuǎn)代碼，實(shí)現(xiàn)網(wǎng)頁(yè)頁(yè)面間的相互切換效果，如圖所示。通過本任務(wù)的學(xué)習(xí)，可以掌握平面設(shè)計(jì)素材在網(wǎng)頁(yè)制作中的應(yīng)用方法與技巧以及色彩搭配在網(wǎng)頁(yè)中的應(yīng)用和HTML5?Canvas文檔代碼的應(yīng)用方法。377378中華美食網(wǎng)效果一、預(yù)覽動(dòng)畫預(yù)設(shè)Animate的每個(gè)動(dòng)畫預(yù)設(shè)都包括預(yù)覽，用戶可在“動(dòng)畫預(yù)設(shè)”面板中查看動(dòng)畫預(yù)設(shè)預(yù)覽。通過預(yù)覽，用戶可以了解在將動(dòng)畫應(yīng)用于.fla文件中的對(duì)象時(shí)所得到的結(jié)果。對(duì)于用戶創(chuàng)建或?qū)氲淖远x預(yù)設(shè)，可以添加對(duì)應(yīng)的預(yù)覽。執(zhí)行“窗口”→“動(dòng)畫預(yù)設(shè)”命令，彈出“動(dòng)畫預(yù)設(shè)”面板，如圖所示。單擊“默認(rèn)預(yù)設(shè)”文件夾前面的箭頭，展開默認(rèn)預(yù)設(shè)，選擇其中一個(gè)默認(rèn)的預(yù)設(shè)選項(xiàng)，即可預(yù)覽該默認(rèn)動(dòng)畫預(yù)設(shè)，如圖所示。在“動(dòng)畫預(yù)設(shè)”面板外單擊即可停止預(yù)覽。379380“動(dòng)畫預(yù)設(shè)”面板預(yù)覽動(dòng)畫預(yù)設(shè)二、應(yīng)用動(dòng)畫預(yù)設(shè)在舞臺(tái)上選中符合創(chuàng)建補(bǔ)間動(dòng)畫條件的對(duì)象后，在“動(dòng)畫預(yù)設(shè)”面板中選擇需要的動(dòng)畫預(yù)設(shè)，單擊“應(yīng)用”按鈕來應(yīng)用該動(dòng)畫預(yù)設(shè)。每個(gè)對(duì)象只能應(yīng)用一個(gè)動(dòng)畫預(yù)設(shè)。如果將第2個(gè)動(dòng)畫預(yù)設(shè)應(yīng)用于同一個(gè)對(duì)象，則第2個(gè)動(dòng)畫預(yù)設(shè)將替換第1個(gè)動(dòng)畫預(yù)設(shè)。381三、將補(bǔ)間動(dòng)畫另存為自定義動(dòng)畫預(yù)設(shè)選中創(chuàng)建好的補(bǔ)間動(dòng)畫，或?qū)Α皠?dòng)畫預(yù)設(shè)”面板中的補(bǔ)間動(dòng)畫進(jìn)行更改，可將它另存為新的動(dòng)畫預(yù)設(shè)，如圖所示。新預(yù)設(shè)將顯示在“動(dòng)畫預(yù)設(shè)”面板中的“自定義預(yù)設(shè)”文件夾中。382“將預(yù)設(shè)另存為”面板四、導(dǎo)出和導(dǎo)入動(dòng)畫預(yù)設(shè)1.

導(dǎo)出動(dòng)畫預(yù)設(shè)在“動(dòng)畫預(yù)設(shè)”面板中選擇需要導(dǎo)出的預(yù)設(shè)，單擊“動(dòng)畫預(yù)設(shè)”面板右上角的按鈕

，在彈出的菜單中選擇“導(dǎo)出...”選項(xiàng)，如圖所示，將選中的動(dòng)畫預(yù)設(shè)導(dǎo)出為XML文件。383“導(dǎo)入...”和“導(dǎo)出...”選項(xiàng)3842.

導(dǎo)入動(dòng)畫預(yù)設(shè)單擊“動(dòng)畫預(yù)設(shè)”面板右上角的按鈕

，在彈出的菜單中選擇“導(dǎo)入...”選項(xiàng)，如圖所示，在彈出的“導(dǎo)入動(dòng)畫預(yù)設(shè)”對(duì)話框中選擇要導(dǎo)入的文件，單擊“打開”按鈕，選中的預(yù)設(shè)即被導(dǎo)入“動(dòng)畫預(yù)設(shè)”面板中。五、刪除動(dòng)畫預(yù)設(shè)在“動(dòng)畫預(yù)設(shè)”面板中選擇需要?jiǎng)h除的預(yù)設(shè)，單擊面板下方的“刪除項(xiàng)目”按鈕，系統(tǒng)會(huì)彈出“刪除預(yù)設(shè)”對(duì)話框，單擊“刪除”按鈕，即可將選中的預(yù)設(shè)刪除。在刪除預(yù)設(shè)時(shí)，Animate將從磁盤中刪除其XML文件。385制作唐詩(shī)教學(xué)課件任務(wù)3

3861.?能根據(jù)課件的學(xué)習(xí)內(nèi)容，合理設(shè)計(jì)課件界面。2.?能根據(jù)課件設(shè)計(jì)的需要，實(shí)現(xiàn)多場(chǎng)景、多按鈕之間的交互式跳轉(zhuǎn)。387本任務(wù)是一個(gè)教學(xué)課件動(dòng)畫制作實(shí)例，通過添加交互式動(dòng)作腳本，實(shí)現(xiàn)唐詩(shī)學(xué)習(xí)的動(dòng)態(tài)教學(xué)效果，如圖所示。通過本任務(wù)的學(xué)習(xí)，可以掌握教學(xué)課件界面設(shè)計(jì)的原理和方法以及制作交互式教學(xué)課件的方法和技巧。388389唐詩(shī)教學(xué)課件動(dòng)態(tài)教學(xué)效果一、“組件”面板1.

組件的類型在HTML5?Canvas中，Animate的組件有jQuery?UI、用戶界面和視頻這3大類，如圖所示，其作用分別如下。390“組件”面板（1）jQuery?UI組件：包括DatePicker和RadioSet兩個(gè)組件。（2）用戶界面組件：主要用于設(shè)置用戶交互界面，并通過交互界面使用戶與應(yīng)用程序進(jìn)行交互操作，包括Button、CheckBox、ComboBox、CSS、Image、Label、List、NumericStepper、RadioButton、TextInput共10個(gè)組件。（3）視頻組件：只有一個(gè)用于播放視頻的Video組件，如圖所示。391各類組件的內(nèi)容2.

組件的操作組件的操作主要包括添加組件、刪除組件和設(shè)置組件參數(shù)等，下面分別進(jìn)行介紹。（1）添加組件執(zhí)行“窗口”→“組件”命令，打開“組件”面板，雙擊要添加的組件或?qū)⑵渫蟿?dòng)到舞臺(tái)中，即可添加組件，同時(shí)在“庫(kù)”面板中也會(huì)增加該組件及其關(guān)聯(lián)的資源。如果要再次使用相同的組件，可以直接從“庫(kù)”面板中添加。392（2）刪除組件若要從舞臺(tái)中刪除一個(gè)組件，只需先選中該組件，再按Delete鍵刪除即可。若要從Animate文檔中刪除該組件，則必須從“庫(kù)”面板中刪除該組件及其相關(guān)聯(lián)的資源。（3）設(shè)置組件參數(shù)每個(gè)組件都帶有參數(shù)，設(shè)置這些參數(shù)可以更改組件的外觀和行為，執(zhí)行“窗口”→“組件參數(shù)”命令，或單擊“屬性”面板中“對(duì)象”選項(xiàng)卡下的“顯示參數(shù)”按鈕

打開“組件參數(shù)”對(duì)話框，在其中可以設(shè)置組件的相關(guān)參數(shù)。393二、作品優(yōu)化如果動(dòng)畫在網(wǎng)絡(luò)環(huán)境中播放，還要考慮動(dòng)畫作品文件的大小，要在保證動(dòng)畫作品播放效果的同時(shí)，優(yōu)化動(dòng)畫文件，達(dá)到最好的播放效果。動(dòng)畫文件越大，播放時(shí)等待播放的時(shí)間就越長(zhǎng)。雖然在動(dòng)畫作品發(fā)布時(shí)會(huì)自動(dòng)進(jìn)行一些優(yōu)化，但是在制作動(dòng)畫時(shí)還要從整體上對(duì)動(dòng)畫進(jìn)行優(yōu)化，以縮減文件的大小。394動(dòng)畫的優(yōu)化包括以下幾個(gè)方面。