flash相冊制作教材

1、FLASH相冊制作活動目的：會根據(jù)實際需求設(shè)計和制作一個多媒體作品會運用FLASH制作一個簡單的電子相冊重點：相冊界面的規(guī)劃和設(shè)計元件的制作，特別是按鈕的制作瀏覽相片場景的制作難點：翻頁按鈕的制作教法學(xué)法：任務(wù)驅(qū)動，分析法，示范法學(xué)時：6學(xué)時第一、二學(xué)時：界面設(shè)計和規(guī)劃任務(wù)：分析相冊，完成相冊的界面設(shè)計參考資料：視頻教程（FLASH相冊教程1界面設(shè)計）教師活動：1 引導(dǎo)學(xué)生分析相冊，掌握多媒體作品界面設(shè)計的工作2 示范制作小柵格的技巧3 引導(dǎo)學(xué)生理解和運用圖層學(xué)生活動：1 分析相冊的構(gòu)造2 完成相冊主界面的制作小結(jié)：學(xué)生中存在的主要問題和解決方法第三學(xué)時：按鈕制作任務(wù)：完成箭頭動畫和相冊按鈕的

2、制作參考資料：視頻教程（FLASH相冊教程2按鈕制作：FLASH相冊教程4箭頭動畫）教師活動：1 引導(dǎo)學(xué)生分析和理解按鈕元件的制作2 引導(dǎo)學(xué)生分析箭頭動畫學(xué)生活動：1 制作按鈕元件2 制作箭頭動畫小結(jié)：學(xué)生中存在的主要問題和解決方法第4學(xué)時：圖片滾動效果任務(wù)：完成界面上圖片滾動效果的制作參考資料：視頻教程（FLASH相冊教程3_1創(chuàng)建圖片元件組；FLASH相冊教程3_2圖片滾動效果）學(xué)生活動：1 分析圖片滾動效果的原理2 制作圖片滾動效果小結(jié)：學(xué)生中存在的主要問題和解決方法第5學(xué)時：瀏覽相片場景制作任務(wù)：完成瀏覽相片場景制作參考資料：視頻教程（FLASH相冊教程5_1瀏覽相片場景制作；FLAS

3、H相冊教程5_2文字說明的添加）學(xué)生活動：1 分析瀏覽相片場景制作的原理2 制作相片瀏覽場景小結(jié)：學(xué)生中存在的主要問題和解決方法第6學(xué)時：翻頁按鈕制作任務(wù)：完成翻頁按鈕制作參考資料：視頻教程（FLASH相冊教程5_3STOP動作的添加；FLASH相冊教程5_4翻頁按鈕的制作）教師活動：引導(dǎo)學(xué)生理解腳本語句學(xué)生活動：1 分析翻頁按鈕的制作的原理2 制作翻頁按鈕小結(jié)：學(xué)生中存在的主要問題和解決方法考慮到一部分水平較好的學(xué)生會比較快完成這一作品，另安排了一個難度較大的相冊讓他們挑戰(zhàn)自己，資料另起下頁。電子相冊“電子相冊”，聽著還挺誘人哦！或許你見到過用Powerpoint或Authorware制作的

4、“電子相冊”，確實很不錯。那么，你有沒有想過，用Flash制作“電子相冊”呢？“Flash相冊”的形式可以多種多樣，內(nèi)容也可包羅萬象，這一節(jié)，我們將一起制作一個精美的“翻頁式”動畫相冊，懂得了其中的原理，你就可以自己完成諸如“作品集”、“家庭影集”、“求職介紹”、“產(chǎn)品推介”等一切你想得到的動畫相冊了。實例簡介如圖11-2-1所示是本例的封面，單擊相冊可以打開，同時相冊中飄出由學(xué)員們自編自唱的優(yōu)美歌聲。圖11-2-1 相冊封面本例制作過程比較繁雜，考慮到你已經(jīng)掌握相當(dāng)?shù)幕静僮骷寄埽瑪⑹鲋型怀鲋攸c，著重介紹相冊動畫中的關(guān)鍵技巧：“翻頁”效果的制作。本范例的源文件：“相冊.fla”被保存在光盤相

5、關(guān)目錄中，建議打開比照學(xué)習(xí)。知識提要 編輯首幀為空白幀的元件的技巧 在場景中不顯示元件的技巧 創(chuàng)建書頁翻動的效果 利用腳本語句實現(xiàn)幀與幀之間的跳轉(zhuǎn) 使用隱形按鈕的技巧1創(chuàng)建影片文檔（1）設(shè)置影片文檔屬性新建一個影片文檔，在【屬性】面板中設(shè)置大小為600420像素，【背景顏色】為深紅色，【幀頻】為30，如圖11-2-2所示。圖11-2-2 影片屬性設(shè)置（2）創(chuàng)建影片背景在場景中畫一個600420像素的無邊矩形，填充顏色為#990000，在上面用【刷子工具】隨意畫一些各種顏色的小點做點綴，如圖11-2-3所示。圖11-2-3 點綴背景2創(chuàng)建元件這一步驟我們將使用“網(wǎng)格”輔助，執(zhí)行【視圖】|【網(wǎng)格】

6、|【顯示網(wǎng)格】命令，打開網(wǎng)格，接著執(zhí)行【視圖】|【網(wǎng)格】|【編輯網(wǎng)格】命令，打開【網(wǎng)格】對話框，設(shè)置網(wǎng)格大小為5050，如圖11-2-4所示。圖11-2-4 編輯網(wǎng)格（1）創(chuàng)建6個圖形元件在本例中，要用到6幅圖片，分別用作相冊封面和內(nèi)頁內(nèi)容，其中4個作品介紹分別是網(wǎng)上的男人是老虎、春風(fēng)吻上我的臉、警匪之戰(zhàn)、雨巷。新建6個圖形元件，每個元件中導(dǎo)入一張圖片，分別命名為“封面”、“內(nèi)頁”、“網(wǎng)上的男人是老虎”、“警匪之戰(zhàn)”、“春風(fēng)吻上我的臉”、“雨巷”。這6張圖片的位置在：光盤examplepart3*圖片文件夾里，文件名分別為“封面.png”、“內(nèi)頁.png”、“網(wǎng)上的男人是老虎.jpg”、“春風(fēng)

7、吻上我的臉.jpg”、“警匪之戰(zhàn).jpg”、“雨巷.jpg”。如圖11-2-5所示是封面和內(nèi)頁的圖片。圖11-2-5 封面和內(nèi)頁如圖11-2-6所示是四個作品的截圖。圖11-2-6 四個作品截圖6個圖形元件完成后，放在【庫】中待用。（2）創(chuàng)建“箭頭按鈕”元件箭頭按鈕的作用控制前后翻頁，如圖11-2-7所示，添加兩個圖層，分別命名為“增加反應(yīng)區(qū)”、“按鈕白邊”、“按鈕表面”；在“增加反應(yīng)區(qū)”層的第4幀畫了個矩形，以增大按鈕“有效區(qū)”。在“按鈕白邊”與“按鈕表面”層中畫好箭頭的形狀。圖11-2-7所示是按鈕各層分布與做好后按鈕的形狀。圖11-2-7 箭頭按鈕（3）創(chuàng)建“隱形按鈕”元件“隱形按鈕”是

8、Flash制作中常用的一個技巧，把它放到場景中某個位置，該位置就具有按鈕功能，在下面的制作過程中，我們會看到它的實際運用?！半[形按鈕”的制作非常簡單，只需要在“按鈕”的第4幀畫一個無邊的矩形就行了，顏色任選，畫好后將矩形對齊場景的十字中心點。（4）創(chuàng)建“圖片過渡”圖形元件新建一個圖形元件，在場景中畫一個無邊矩形，大小為260180像素，在【混色器】面板中，設(shè)置填充類型為【放射狀】，設(shè)置一種從紅色到黑色的漸變。這個元件的作用是用來過渡“作品圖片”和“內(nèi)頁頁面”之間的顏色，使其銜接得更自然一些。（5）創(chuàng)建“相冊”MC元件創(chuàng)建名為“相冊”的影片剪輯元件。在這個元件中，包含相冊的各個頁面，每個頁面是由

9、“底層背景”、“圖片過渡”、“作品圖片”、“文字”、“按鈕”5個部分組成，如圖11-1-8所示。圖11-2-8 相冊元件的時間軸面板步驟1 布置“相冊”影片剪輯場景“相冊”影片剪輯共有8個關(guān)鍵幀，每幀的內(nèi)容都不同，請你先按圖11-2-8所示創(chuàng)建5個圖層，然后一幀一幀的添加內(nèi)容，下面我們將講解幾個具有特殊內(nèi)容的幀操作，其它幾個操作相同的關(guān)鍵幀內(nèi)容見后面的表格。第1幀：參考圖11-2-8，該幀的各層全是空白幀，僅在【按鈕】圖層中有一條指令：stop();，它的作用是讓相冊的起始狀態(tài)靜止在封面上，等待用戶單擊。第2幀：這是封面幀，從【庫】中拖入名為“封面”的圖形元件，放在【底層背景】圖層中，其大小是

10、290240，X、Y軸的位置都為0。因為是封面，所以其上面的【圖片過渡】、【作品圖片】、【文字】等圖層都是空白幀，【按鈕】圖層中放置的是“隱形按鈕”，調(diào)整其大小為270220，覆蓋在封面上。建好后的第2幀如圖11-2-9所示，圖中的淡綠色部分為“隱形按鈕”，播放時是看不到的。圖11-2-9 相冊封面第3幀：這是“封2頁”內(nèi)容，從【庫】中拖入名為“內(nèi)頁”的圖形元件放在【底層背景】圖層中，大小及位置同封面。再從【庫】中把“圖片過渡”元件拖入【圖片過渡】圖層，設(shè)置【Alpha】值為50。【文字】圖層中放的是名為“打字效果”的影片剪輯，這是一段利用遮罩動畫，事先做好的影片剪輯?！景粹o】圖層中還是“隱形

11、按鈕”，調(diào)整按鈕大小為250180。頁面的下方，還有一個剪頭按鈕指示翻頁的方向（以上按鈕上都有相關(guān)的指令，等我們布置好場景再來逐個添加）。完成后的“封2頁”如圖11-2-10所示。圖11-2-10 相冊封2頁第4幀：是翻開相冊后的第1頁，從這幀起，【底層背景】圖層中的內(nèi)容始終是名為“內(nèi)頁”的圖片元件?！緢D片過渡】圖層中的“圖片過渡”元件要打散，并根據(jù)作品圖片的顏色而適當(dāng)改色，使圖片和背景之間的過渡較為自然。在本實例中，【圖片過渡】圖層第4幀上的圖片填充的顏色參數(shù)：左邊顏色參數(shù)為#FFFFCC、【Alpha】值為80，右邊顏色參數(shù)為#743A01、【Alpha】值為50。如圖11-2-11所示。

12、圖11-2-11 過渡圖片填充時的【混色器】面板從【庫】中把名為“網(wǎng)上的男人是老虎”的圖形元件拖放在【作品圖片】圖層中。在【文字】圖層中創(chuàng)建文字說明：作者是“學(xué)習(xí)來了”、作品名稱是“網(wǎng)上的男人是老虎”，在按鈕層中也有一個隱形按鈕和箭頭按鈕。完成后如圖11-2-12所示。圖11-2-12 做好后的第一頁第5-7幀：做法與第4幀相同，只是分別使用不同的圖片元件，相關(guān)元件從【庫】中取用，并加上不同的說明文字，另外，“過渡圖片”都要打散重新填充，顏色應(yīng)該根據(jù)圖片作調(diào)整，“透明按鈕”的指令見下表11-2-2。第8幀：是“封3”，這頁內(nèi)容是介紹其他一些作品，去掉圖片，加入文字，每行文字都用“隱形按鈕”指向

13、相應(yīng)作品的絕對網(wǎng)址，只要單擊就能看到作品了。圖11-2-13所示的是第8幀完成后的場景。圖11-2-13 完成后的封面3在“謝謝觀賞”的文字對象上也有一個“隱形按鈕”，指令見表11-2-2。 步驟2 檢查“相冊”影片剪輯中各幀的元件分布表11-2-1是各幀中的元件名稱列表，請對照著仔細(xì)檢查。表11-2-1 各幀中的元件名稱底層圖片過渡層作品圖片層文字說明層第1幀無無無無第2幀封面無無無第3幀內(nèi)頁圖片過渡元件無打字影片剪輯第4幀內(nèi)頁同上，打散網(wǎng)上的男人是老虎學(xué)習(xí)來了：網(wǎng)上的男人是老虎第5幀內(nèi)頁同上，打散春風(fēng)吻上我的臉夢雨：春風(fēng)吻上我的臉第6幀內(nèi)頁同上，打散警匪之戰(zhàn)滬上老康：警匪之戰(zhàn)第7幀內(nèi)頁同上

14、，打散雨巷牧馬者：雨巷第8幀內(nèi)頁圖片過渡無四個作品的作者和名稱步驟3 添加各幀隱形按鈕上的動作指令 表11-2-2 列出了“相冊”影片剪輯中所有隱形按鈕上的指令，請對照添加。表11-2-2 各幀隱形按鈕上的動作語句第2幀/ 跳轉(zhuǎn)到上一級路徑，（即“翻頁效果”元件）中，播放該元件第2幀的動作on (release) with (_parent) gotoAndPlay(2); 第3幀/打開新窗口，鏈接到閃客沙龍的網(wǎng)址on (release) getURL( :/280739.chat.yinsha , _blank);第4幀/ 打開新窗口，鏈接該作品的網(wǎng)址on (release) getURL(

15、 :/up.flasher123 /upload/imgwsf/200325940041.swf, _blank);第5幀/ 打開新窗口，鏈接該作品的網(wǎng)址on (release) getURL( :/ _blank);第6幀/ 打開新窗口，鏈接該作品的網(wǎng)址on (release) getURL( :/ hslk /flash/jf.swf, _blank);第7幀/ 打開新窗口，鏈接該作品的網(wǎng)址on (release) getURL( :/cn.flasher123 /flasher123/mmz/yx.swf, _blank);第8幀四個作品的鏈接：溜達：on (release) getUR

16、L( :/ /IssueManage/uploadFile/swf507.swf, _blank);瘟斗士XP：on (release) getURL( :/ _blank);yot418：on (release) getURL( :/gdr.flasher123 /xiqi/yueliang.swf, _blank);小東東：on (release) getURL( :/bbs.flasher123 /upfile/2177_2003-7-4_16-9-41.SWF, _blank);謝謝欣賞，點擊回到首頁：/ 跳轉(zhuǎn)到翻頁效果元件中，并停止在相應(yīng)幀中。on (releas

17、e) with (_root.go.leftpage) gotoAndStop(1); with (_root.go.leftflip) gotoAndStop(2); with (_root.go.rightflip) gotoAndStop(4); / 跳轉(zhuǎn)到上一級路徑，（即“翻頁效果”元件）中，播放該元件第34幀的動作 with (_parent) gotoAndPlay(34); 注意：表11-2-2中一些動作腳本中的URL參數(shù)值，這里僅作為參考，你可以換成對應(yīng)你的作品實例的URL地址。大家一定還記得，我們在第4章中討論過，元件的“重復(fù)應(yīng)用”問題，從上表中可以看出，一個“隱形按鈕”得到

18、了多次應(yīng)用，提高了工作效率，減少了文件量。如圖11-2-4示范設(shè)置在第2幀的隱形按鈕上的動作腳本語句。圖11-2-14 封面隱形按鈕上的腳本語句步驟4 添加各幀中箭頭按鈕上的動作語句現(xiàn)在我們再來看看這個MC元件各幀中箭頭按鈕上的動作語句。第3、5、7幀上的語句是一樣的，均為：/ 跳轉(zhuǎn)到上一級路徑，（即“翻頁效果”元件）中，播放該元件第21幀的動作on (release) with (_parent) gotoAndPlay(21);第4、6幀上的語句是一樣的，均為：/ 跳轉(zhuǎn)到上一級路徑下，（即“翻頁效果”元件）中，播放該元件第2幀的動作on (release) with (_parent) g

19、otoAndPlay(2);至此，“相冊”影片剪輯創(chuàng)建完畢。本例最吸引眼球的動畫效果就是每個頁面能前后翻動，下面我們就來實現(xiàn)這個效果。3創(chuàng)建翻頁效果我們要實現(xiàn)相冊左右翻頁的效果，是通過動作腳本指令控制的。本例的腳本控制構(gòu)思相當(dāng)巧妙，請你在學(xué)習(xí)過程中一定要搞清其邏輯關(guān)系。（1）創(chuàng)建名為“翻頁”的影片剪輯首先，創(chuàng)建一個名為“翻頁”的影片剪輯，在這個影片剪輯中只有三層，如圖11-2-15所示。圖11-2-15 翻頁效果的時間軸面板從圖11-2-15中可以看出，【rightflip】圖層和【leftpage】圖層中都沒有補間動畫，這2層的作用是使頁面翻轉(zhuǎn)時能看到左右兩面的靜止頁面。頁面翻轉(zhuǎn)的動作是由【

20、leftflip】圖層完成的。下面我們就來編輯這個元件。請你先按圖11-2-15所示建好圖層。（2）在相冊元件中加臨時層從【庫】中把名為“相冊”的影片剪輯拖到【leftpage】圖層的場景中，這時，在場景中只看到一個小白點，這是因為“相冊”影片剪輯的第1幀是“空白”的。這種在界面上“看不見”的對象，在Flash中經(jīng)常會碰到，要選擇它或者打開它相當(dāng)困難，本書第4章我們已經(jīng)學(xué)到過如何找出它的“注冊點”，從而打開它進行編輯的技巧。在這里，我們將再介紹另外一種技巧，即在該對象內(nèi)增加一個“臨時層”，在該層的第1幀臨時放上一個“內(nèi)頁”圖形對象，使“不可見”對象變?yōu)榭梢姡瑸楹竺娴木庉嫀順O大方便。當(dāng)然，完成

21、全部制作后別忘記刪除哦！現(xiàn)在我們就先回到“相冊”這個元件中，在按鈕層上面新建1個“臨時層”圖層，在其第1幀用“原地粘貼”的方法（將【底層背景】圖層上第3幀上的“內(nèi)頁”圖形實例復(fù)制、粘貼到當(dāng)前位置）放置一個“內(nèi)頁”圖形元件，第2幀插入空白關(guān)鍵幀，如圖11-2-16所示?，F(xiàn)在，場景中，“相冊”影片剪輯是“有形”的了。圖11-2-16 加了臨時層的相冊元件再回到“翻頁”影片剪輯，我們已經(jīng)能清楚地看到“相冊”元件！現(xiàn)在，我們繼續(xù)編輯“翻頁”影片剪輯。 （3）編輯【rightflip】層在【rightfilp】這一層中，也拖入一個“相冊”元件，在X軸上的位置為0，Y軸上的位置為0，實例名為：“right

22、filp”，如圖11-2-17所示。圖11-2-17 rightflip圖層中的“相冊”屬性在第1幀上添加幀指令：with (_root.go.rightflip) nextFrame();其動作面板如圖11-2-18所示。圖11-2-18 rightflip層第1幀的動作面板在第二幀加關(guān)鍵幀，定義動作語句為：/ 讓此幀內(nèi)的相冊元件翻二頁。二個nesxtFrame是連續(xù)二個下一幀。with (_root.go.rightflip) nextFrame();with (_root.go.rightflip) nextFrame();（4）編輯【leftflip】層關(guān)閉下面二層的“眼睛”，在【le

23、ftflip】層的第1幀中拖入“相冊”影片剪輯，在X、Y軸上的數(shù)值均為0，實例名“l(fā)eftflip”，如圖11-2-19所示。圖11-2-19 leftflip層的屬性面板保持【leftflip】圖層為當(dāng)前編輯圖層，在該圖層的第2、10、11、19、20、21、30、31、40幀處插入關(guān)鍵幀（參考圖11-2-15）。從第2幀到第19幀完成的是從右向左翻頁，從第21幀到第40幀完成的是從左向右翻頁。現(xiàn)在，我們把第11、19、21、30幀處的“相冊”影片剪輯移到場景的左側(cè)，在這4幀的屬性面板上設(shè)置“相冊”影片剪輯在X軸上的位置為-290，如圖11-2-20所示。圖11-2-20 移動元件到場景的左

24、側(cè)（5）移動注冊點把元件移到場景的左側(cè)后，我們觀察圖11-2-20，會發(fā)現(xiàn)場景中有二個十字星，右面的是場景“中心點”，左面的是“相冊”元件自身的“注冊點”，任何對象在變形的時候，總是以一個“假想”的“點”為依據(jù)的，這個點就是對象的“注冊點”，書本的“注冊點”應(yīng)該在“書”的“中軸裝訂線”處，我們必須把頁面的注冊點移到書的中軸處，也就是場景的“0”坐標(biāo)處。在創(chuàng)建補間動畫前，我們要先設(shè)置好第11、19、21、30幀處的注冊點為“0”。下面以第11幀為例：在第11幀處，選取元件，然后按下任意變形工具，此時，元件周圍出現(xiàn)調(diào)節(jié)手柄，如圖11-2-21所示。圖11-2-21 元件周圍出現(xiàn)的調(diào)節(jié)手柄注意左上角

25、的那個白色圓點，這就是注冊點，用鼠標(biāo)左鍵按住它，拖到右上角的十字星上松手，就行了。此時，元件周圍如圖11-2-22所示。比較兩兩種情況，可看出“相冊”影片剪輯的“注冊點”已經(jīng)與場景“中心點”重合。圖11-2-22 移動注冊點按照同樣方法，把處于第19、21、30幀中的“相冊”影片剪輯進行移動編輯。（6）創(chuàng)建翻頁動畫【任意變形】工具有4個選項，如圖11-2-23所示。圖11-2-23 任意變形工具的選項左面是“傾斜與旋轉(zhuǎn)”工具，右面的是“縮放”工具，它們的編輯效果如圖11-2-24所示。圖11-2-24 使用縮放、傾斜工具使元件變形利用這2種編輯特點，把第10、11、30、31幀處的元件作如圖1

26、1-2-25所示的變形。圖11-2-25 第10、11、30、31幀處元件的變形情況接著，分別在第2幀、第11幀、第21幀、第31幀中建立動作補間動畫。在第39中加關(guān)鍵幀，然后縮小場景到15（這樣可以看到全部編輯界面）。把第20、40幀中的元件拖到場景外面任意位置，即圖11-2-26中的紅色區(qū)域以外的任意處。圖11-2-26 第20幀處的場景（7）向【leftflip】層中添加動作語句第1幀：stop();第2幀：with (_root.go.leftflip) /調(diào)用主時間軸中名字為go的影片剪輯實例中的leftflip實例nextFrame();/在leftflip實例中播放下一幀第11幀：with (_root.go.leftflip) nextFrame();第19幀：with (_root.go.leftpage) nextFrame();with (_root.go.leftpage) nextFrame();第20幀：stop();第21