案例13.4唯美風(fēng)景畫冊ADOBEFLASHCS6案例目的通過制作“唯美風(fēng)景畫冊”動畫，進一步掌握ActionScript3.0語句的應(yīng)用和遮罩動畫的制作。唯美風(fēng)景畫冊“唯美風(fēng)景畫冊”效果圖案例分析“唯美風(fēng)景畫冊”動畫首先利用素材圖片制作按鈕元件，再利用這些按鈕元件制作圖片展示的影片剪輯元件，最后通過addEventListener函數(shù)實現(xiàn)按鈕對影片剪輯元件的控制唯美風(fēng)景畫冊01創(chuàng)建一個新的ActionScript3.0文檔，設(shè)置舞臺大小為550*550像素，背景顏色為黑色。導(dǎo)入素材實踐操作0101執(zhí)行“文件/導(dǎo)入/導(dǎo)入到庫”命令，彈出“導(dǎo)入到庫”對話框，找到要導(dǎo)入的素材圖片，將其導(dǎo)入庫中。導(dǎo)入素材02實踐操作02執(zhí)行“插入/新建元件”命令，或按快捷鍵【Ctrl＋F8】，新建一個按鈕元件，取名為“按鈕1”，進入按鈕元件編輯界面。制作圖片按鈕元件02實踐操作02按快捷鍵【Ctrl＋L】，打開“庫”面板，將素材圖片“001.jpg”拖入場景中，打開對齊面板，是圖片相對于舞臺居中。制作圖片按鈕元件02實踐操作02復(fù)制按鈕元件“按鈕2”～“按鈕8”，分別將圖片素材“002.jpg”～“008.jpg”拖入對應(yīng)的元件場景中。制作圖片按鈕元件02實踐操作03執(zhí)行“插入/新建元件”命令，或按快捷鍵【Ctrl+F8】，新建一個圖形元件，取名為“相框”，進入圖形元件的編輯界面。制作“相框”圖形元件02實踐操作03利用基本繪圖工具繪制一個寬度為514、高度為390的空心白色矩形。制作“相框”圖形元件02實踐操作04執(zhí)行“插入/新建元件”命令，或按快捷鍵【Ctrl＋F8】，新建一個影片剪輯元件，取名為“相冊展示”，進入影片剪輯元件的編輯界面。制作“相冊展示”影片剪輯元件02實踐操作04將“圖層1”重命名為“起始”圖層，在第1幀中，將“庫”面板中“按鈕1”元件拖入場景中，設(shè)置為“水平中齊”、“垂直中齊”。制作“相冊展示”影片剪輯元件02實踐操作04新建“相框”圖層，將“庫”面板中的“相框”圖形元件拖入場景中，并設(shè)置為“水平中齊”、“垂直中齊”。在第320幀處插入一個普通幀，使其延續(xù)。制作“相冊展示”影片剪輯元件02實踐操作04新建“起始動作”圖層，選擇第1幀，打開“動作”面板，輸入代碼“stop();”。制作“相冊展示”影片剪輯元件02實踐操作04新建“圖片1”圖層，在第2幀處插入一個關(guān)鍵幀，從“庫”面板中將“按鈕1”元件拖入場景中，設(shè)置為“水平中齊”、“垂直中齊”。在第40幀處插入普通幀，最后在第2～40幀創(chuàng)建補間動畫，打開“屬性”面板，在“色彩效果”選項組的“樣式”列表框中選擇“亮度”選項，設(shè)置亮度數(shù)量為－100%。用同樣的方法，在第40幀處設(shè)置亮度數(shù)量為0%。制作“相冊展示”影片剪輯元件02實踐操作04新建圖層5，動作幀，在第41幀，插入空白關(guān)鍵幀，在“動作-幀”面板中輸入代碼“stop();”制作“相冊展示”影片剪輯元件02實踐操作04新建“圖片2”圖層，在第41幀處插入一個關(guān)鍵幀，從“庫”面板中將“按鈕2”元件拖入場景中，設(shè)置為“水平中齊”、“垂直中齊”。在第80幀處插入一個普通幀，在第41～80幀創(chuàng)建補間動畫。在第41幀處選中場景中的“按鈕2”元件，在“屬性”面板選擇色彩效果-樣式為亮度，設(shè)置數(shù)值為－100%。在第80幀處設(shè)置其數(shù)值為0。制作“相冊展示”影片剪輯元件02實踐操作04用同樣的方法依次制作其余六張圖片的動畫效果。每張圖片在每一層的起始位置間隔為40，即“圖片1”～“圖片8”的幀的開始位置分別為2、41、81、121、161、201、241、281；結(jié)束幀的位置分別為40、80、120、160、200、240、280、320。每張圖片補間動畫的長度都為39幀。每個圖片層的上方都有一個對應(yīng)的動作層，分別在對應(yīng)的結(jié)束幀的位置插入關(guān)鍵幀后，在“動作”面板中輸入代碼“stop();”。制作“相冊展示”影片剪輯元件02實踐操作05執(zhí)行“插入/新建元件”命令，或按快捷鍵【Ctrl+F8】，新建一個影片剪輯元件，取名為“縮略圖集合”，進入影片剪輯元件的編輯界面。制作“縮略圖集合”影片剪輯元件02實踐操作05新建“圖層1”～“圖層8”，每個圖層對應(yīng)的放入“按鈕1”～“按鈕8”，設(shè)置“寬度”和“高度”均為100和75，并設(shè)置對齊方式為“垂直居中分布”和“水平平均間隔水平”，間隔為20。分別對應(yīng)設(shè)置實例名為“btn_1”～“btn_8”。制作“縮略圖集合”影片剪輯元件02實踐操作06執(zhí)行“插入/新建元件”命令，或按快捷鍵【Ctrl＋F8】，新建一個按鈕元件，取名為“左箭頭”，進入按鈕元件的編輯界面。制作“圖片菜單”影片剪輯元件02實踐操作06利用基本繪圖工具繪制向左的箭頭，并填充為白色。制作“圖片菜單”影片剪輯元件02實踐操作06利用同樣的方法制作出“右箭頭”按鈕元件。制作“圖片菜單”影片剪輯元件02實踐操作06執(zhí)行“插入/新建元件”命令，或按快捷鍵【Ctrl＋F8】，新建一個圖形元件，取名為“遮罩”，進入圖形元件的編輯界面。制作“圖片菜單”影片剪輯元件02實踐操作06利用矩形工具繪制一個寬度為456，高度為90的藍色矩形。制作“圖片菜單”影片剪輯元件02實踐操作06執(zhí)行“插入/新建元件”命令，或按快捷鍵【Ctrl＋F8】，新建一個影片剪輯元件，取名為“圖片菜單”，進入影片剪輯元件的編輯界面。制作“圖片菜單”影片剪輯元件02實踐操作06將“縮略圖集合”影片剪輯元件放置在“圖層1”上，將“遮罩”圖形元件放置在“圖層2”上，將“左箭頭”和“右箭頭”按鈕元件放置在“圖層3”上。調(diào)整各元件的位置，使得“遮罩”圖形元件恰好遮住“縮略圖集合”影片剪輯元件的前4張縮略圖，并且“左箭頭”和“右箭頭”按鈕元件分別在“遮罩”圖形元件的兩端。制作“圖片菜單”影片剪輯元件02實踐操作05設(shè)置“左箭頭”和“右箭頭”按鈕元件的實例名為“l(fā)arrow”和“rarrow”，“縮略圖集合”影片剪輯元件的實例名為“pics”。制作“圖片菜單”影片剪輯元件02實踐操作05將“圖層2”設(shè)置為“圖層1”的遮罩層。制作“圖片菜單”影片剪輯元件02實踐操作06返回主場景中，新建兩個圖層，從上到下分別命名為“大圖”和“縮略圖”。將“相冊展示”和“圖片菜單”影片剪輯元件分別拖入“大圖”和“縮略圖”圖層中，并且調(diào)整好位置。分別設(shè)置其實例名為“displayy”和“menu”。返回主場景02實踐操作06

選擇“代碼”圖層的第1幀，打開“動作-幀”面板，輸入以下代碼：menu.larrow.addEventListener(MouseEvent.CLICK,lmove);//實例menu.larrow添加事件偵聽函數(shù),單擊larrow時觸發(fā)lmove事件functionlmove(event:MouseEvent):void//定義函數(shù)lmove{ if(menu.pics.x>=-120.2) {} else{ menu.pics.x=menu.pics.x+120;//條件函數(shù),若實例menu.pics的x坐標值大于等于-120.2,則保持默認;反之,則實例menu.pics的x坐標值為原坐標值加120 }};menu.rarrow.addEventListener(MouseEvent.CLICK,rmove);//實例menu.rarrow添加事件偵聽函數(shù),單擊rarrow時觸發(fā)rmove事件functionrmove(event:MouseEvent):void//定義函數(shù)rmove{ if(menu.pics.x<=-601) {} else { menu.pics.x=menu.pics.x-120;//條件函數(shù),若實例menu.pics的x坐標值小于等于-601,則保持默認;反之,則實例menu.pics的x坐標值為原坐標值減120 }};返回主場景02實踐操作06menu.pics.btn_1.addEventListener(MouseEvent.CLICK,moving1)//給按鈕menu.pics.btn_1添加事件偵聽函數(shù),單擊"menu.pics.btn_1"時觸發(fā)moving1事件functionmoving1(event:MouseEvent):void//定義函數(shù)moving1{ display.gotoAndPlay(2); //實例display從第2幀開始播放

}; menu.pics.btn_2.addEventListener(MouseEvent.CLICK,moving2)functionmoving2(event:MouseEvent):void{ display.gotoAndPlay(41); };//單擊按鈕"menu.pics.btn_2",實例display從第41幀開始播放menu.pics.btn_3.addEventListener(MouseEvent.CLICK,moving3)functionmoving3(event:MouseEvent):void{ display.gotoAndPlay(81); };//單擊按鈕"menu.pics.btn_3",實例display從第81幀開始播放返回主場景02實踐操作06menu.pics.btn_4.addEventListener(MouseEvent.CLICK,moving4)functionmoving4(event:MouseEvent):void{ display.gotoAndPlay(121); };//單擊按鈕"menu.pics.btn_4",實例display從第121幀開始播放menu.pics.btn_5.addEventListener(MouseEvent.CLICK,moving5)functionmoving5(event:MouseEvent):void{ display.gotoAndPlay(161); };//單擊按鈕"menu.pics.btn_5",實例display從第161幀開始播放返回主場景02實踐操作06menu.pics.btn_6.addEventListener(MouseEvent.CLICK,moving6)functionmoving6(event:MouseEvent):void{ display.gotoAndPlay(201); };//單擊按鈕"menu.pics.btn_6",實例display從第201幀開始播放menu.pics.btn_7.addEventListener(MouseEvent.CLICK,moving7)functionmoving7(event:MouseEvent):void{ display.gotoAndPlay(241); };//單擊按鈕”menu.pics.btn_7”,實例display從第24