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

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

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

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

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

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

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

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

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

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

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