翻書動畫制作詳解.ppt

1、1,漂亮的翻書動畫制作,目的：使用Flash的遮罩功能制作無腳本軟翻書效果，通過制作軟翻書效果來了解遮罩功能的運用。,2,知識點：遮罩的運用 學習無腳本軟翻書前先復習遮罩的知識： 1、遮罩動畫的概念 （1）什么是遮罩？ “遮罩”：顧名思義就是遮擋住下面的對象。在Flash8.0中，“遮罩動畫”也確實是通過“遮罩層”來達到有選擇地顯示位于其下方的“被遮罩層”中的內容的目地，在一個遮罩動畫中，“遮罩層”只有一個，“被遮罩層”可以有任意個。 （2）遮罩有什么用？ 在Flash8.0動畫中，“遮罩”主要有2種用途，一個作用是用在整個場景或一個特定區(qū)域，使場景外的對象或特定區(qū)域外的對象不可見，另一個作用

2、是用來遮罩住某一元件的一部分，從而實現(xiàn)一些特殊的效果。,3,2、創(chuàng)建遮罩的方法 （1）創(chuàng)建遮罩 在Flash8.0中沒有一個專門的按鈕來創(chuàng)建遮罩層，遮罩層其實是由普通圖層轉化的。只要在要某個圖層上單擊右鍵，在彈出菜單中把“遮罩”前打個勾，該圖層就會生成遮罩層，“層圖標”就會從普通層圖標變?yōu)檎谡謱訄D標，系統(tǒng)會自動把遮罩層下面的一層關聯(lián)為“被遮罩層”,在縮進的同時圖標變?yōu)?，如果想關聯(lián)更多層被遮罩，只要把這些層拖到被遮罩層下面就行了。 ，線條。,4,（2）構成遮罩和被遮罩層的元素 遮罩層中的圖形對象在播放時是看不到的，遮罩層中的內容可以是按鈕、影片剪輯、圖形、位圖、文字等，但不能使用線條，如果一定要

3、用線條，可以將線條轉化為“填充”。被遮罩層中的對象只能透過遮罩層中的對象被看到。在被遮罩層，可以使用按鈕，影片剪輯，圖形，位圖，文字,5,準備工作： 打開FLASH文檔，名稱：軟翻書 文檔屬性大小：600*450其它默認。 素材準備：1、準備20張圖片，用PS處理成：200*150像素。2、準備1張背景圖片，PS處理成：600*450像素。3、以及封面上的簡單的動畫。4、字體：設置自己喜歡的字體。5、新建位圖文件夾，將位圖全部導入。,6,第一部分： 制作“頁”影片剪輯元件,1、制作“封面” 影片剪輯元件，插入新建元件影片剪輯名為“封面”。 1-1、在圖層1上新建六個圖層，自下至上分別是：背景、

4、花邊、邊線、字框、字、動畫（圖片也行）、遮罩7個圖層。如圖1所示。,7,圖1 封面制作,8,1-2、圖層1（背景）第1幀用矩形工具，無筆觸，畫一矩形：240*300，顏色：#333300，全居中。 1-3、新建花邊圖案影片剪輯，圖層第1幀畫花邊圖案，（舞臺放大）大小設為10.8*18.5，顏色：#666600，復制多枚排列成236*292如圖2所示：,第一部分： 制作“頁”影片剪輯元件,1、制作“封面” 影片剪輯元件,9,第一部分： 制作“頁”影片剪輯元件,圖2 花邊制作,10,1-4、花邊圖層第1幀把花邊圖案元件拖入，全居中，點圖案打開濾鏡面板增加投影效果，模糊設為：0，顏色設為：#9999

5、00，距離設為：1，挖空打勾。其它默認。 1-5、邊線圖層第1幀用矩形工具，筆觸設為：2，顏色為：#999966，填充色關閉，畫一矩形寬210高260全居中，選中右邊線和下邊線顏色換成#000000，選中全部邊線轉為圖片元件名為“頁邊線”。,第一部分： 制作“頁”影片剪輯元件,1、制作“封面” 影片剪輯元件,11,1-6、字框圖層第1幀制作字框大?。?05*45，X軸-102，Y軸-106.2。如圖3所示：,第一部分： 制作“頁”影片剪輯元件,1、制作“封面” 影片剪輯元件,圖3 字框制作,12,1-7、字圖層第1幀用文本工具寫上鳥語花香（也可寫其它）字體：方正小篆體，大小35。顏色#3366

6、00。 1-8、圖片圖層（動畫）第1幀將庫中準備好的荷花動畫拖入，放在右下角的位置，調整后大小。,第一部分： 制作“頁”影片剪輯元件,1、制作“封面” 影片剪輯元件,13,1-9、遮罩圖層第1幀用矩形工具，筆觸禁止，顏色隨意，畫一矩形寬190高162的遮罩片，放在右下角，遮罩片的右靠近右邊線，遮罩片下邊靠近下邊線。右鍵遮罩層設為遮罩。這樣“封面”影片元剪輯件就完成了，最后效果如圖4所示：,第一部分： 制作“頁”影片剪輯元件,1、制作“封面” 影片剪輯元件,14,圖4 封面效果,1、制作“封面” 影片剪輯元件,15,2、制作“首頁” 影片剪輯元件，將庫中“封面”直接復制改名為“首頁”。 2-1、

7、雙擊進入“首頁”編輯場面，自下至上分別是：背景、花邊、邊線、字、4個圖層。刪除字框、圖片、遮罩圖層。 2-2、打開字圖層，書寫兩排詩詞。,第一部分： 制作“頁”影片剪輯元件,2、制作“首頁” 影片剪輯元件,16,第一部分： 制作“頁”影片剪輯元件,2-3、打開邊線圖層，選中右邊線和下邊線將顏色替換成#999900，選中左邊線和上邊線將顏色替換成#FFFFFF。將庫中蘭花圖拖入場景，調整后大小、位置。點中第1幀，修改組合，點圖片轉換為圖片元件名為圖片，將邊線圖層改為圖片，最后效果如圖5所示：,2、制作“首頁” 影片剪輯元件,17,圖5 首頁效果,2、制作“首頁” 影片剪輯元件,18,3、制作“封

8、底” 影片剪輯元件，將庫中“首頁”直接復制改名為“封底”。 3-1、雙擊進入“封底”編輯場面，自下至上分別是：背景、花邊、圖片、字、4個圖層。在圖片層上增加簽名圖層，在字圖層上增加遮片層、遮罩層。最后如下背景、花邊、圖片、簽名、字、遮片、遮罩7個圖層。,第一部分： 制作“頁”影片剪輯元件,3、制作“封底” 影片剪輯元件,19,3-2、簽名圖層第一幀用文本工具寫上自己的名字和制作日期。字體顏色#999900，字體大小20 3-3、字圖層第1幀用文本工具寫上謝謝觀賞（也可寫其它），字體顏色#999900，字體大小35，點第一幀復制幀，點遮罩圖層（第7層）第一幀粘貼幀。,3、制作“封底” 影片剪輯元

9、件,第一部分： 制作“頁”影片剪輯元件,20,3-4、遮片圖層第1幀用矩形工具畫一矩形，寬50高60，筆觸無，線形填充左色標：#FFFFFF，Alpha值為0，中色標：#FFFFFF， Alpha值為100，右色標：#FFFFFF，Alpha值為0，打開變形面板旋轉為25度。20幀插入關鍵幀，第一幀矩形放在字的左邊，20幀放在字的右邊，回到 1幀創(chuàng)建形狀補間，所有圖層延長到20幀。在遮罩圖層右鍵設為遮罩。最后效果如圖6所示：,3、制作“封底” 影片剪輯元件,第一部分： 制作“頁”影片剪輯元件,21,第一部分： 制作“頁”影片剪輯元件,圖6 封底效果,22,4、制作“頁1” 影片剪輯元件，將庫中

10、“首頁”直接復制改名為“頁1”。 4-1、雙擊進入“頁1”編輯場面，自下至上分別是：背景、花邊、邊線、字、4個圖層。 4-2、邊線圖層點第一幀修改分離，分離兩次，點場景釋放鼠標，刪除蘭花圖片，將庫中準備好的位圖拖入全居中。,第一部分： 制作“頁”影片剪輯元件,4、制作“頁1” 影片剪輯元件,23,4-3、字圖層點第1幀，選中文字刪除，最后用文本工具在邊線下部中間位置寫上“1”的頁碼，顏色#999900。如圖7所示。,4、制作“頁1” 影片剪輯元件,24,第一部分： 制作“頁”影片剪輯元件,圖7 制作頁1,25,4-4、接下來制作“頁2”“頁3”依此類推一直至“頁20”，怎樣所有的第一部分 制作

11、“頁”影片剪輯元件就完成了，先把“頁” 影片剪輯元件完成。,第一部分： 制作“頁”影片剪輯元件,26,第二部分 制作“翻書”影片剪輯元件,在制作“翻書”影片剪輯元件前先在庫面板建“頁”文件夾，將所有“頁”影片剪輯元件放入文件夾，以便以后做動畫時容易交換元件。 1、制作“翻封面”影片剪輯元件 1-1、插入影片剪輯元件名為“翻封面”新建8個圖層，自下而上分別是：頁1、光1、封面、高光2、遮罩1、首頁、遮罩2、高光3、高光3遮罩共9個圖。如圖8所示：,27,第二部分 制作“翻書”影片剪輯元件,圖8 制作翻封面,1、制作“翻封面”影片剪輯元件,28,1-2、頁1圖層第1幀將庫中“頁1”影片剪輯元件拖入

12、，左對齊、垂直中齊，x值：0，Y值：-150，延長至55幀，上鎖。 1-3、光1圖層第1幀用矩形工具畫一矩形，無筆觸，填充為線性。打開顏色面板，中間添加一個色碼：從左至右的色碼依次為：#010101,Alpha值為0，#F9F9F9，Alpha值為25，#000000，Alpha值為0，矩形大小設為寬 240高300，X值為0，Y值為-150。設置如圖9所示：,第二部分 制作“翻書”影片剪輯元件,1、制作“翻封面”影片剪輯元件,29,第二部分 制作“翻書”影片剪輯元件,圖9 制作高光,1、制作“翻封面”影片剪輯元件,30,1-4、封面圖層第1幀將“封面”頁影片剪輯元件放入，X值為0，Y值為-1

13、50。第28幀延長幀，第29幀插入空白關鍵幀，圖層上鎖。 1-5、高光2圖層點高光1圖片右鍵復制，點高光2后點場景右鍵粘貼到當前位置。第28幀延長幀，第29幀插入空白關鍵幀，圖層上鎖。,第二部分 制作“翻書”影片剪輯元件,1、制作“翻封面”影片剪輯元件,31,1-6、遮罩1圖層第1幀用矩形工具，筆觸無，填充色隨意，畫一矩形遮片寬240高300，X值為0，Y值為-150，右下角用線條劃一斜線去掉小角。如圖10所示：,1、制作“翻封面”影片剪輯元件,32,第二部分 制作“翻書”影片剪輯元件,圖10 制作翻封面影片,1、制作“翻封面”影片剪輯元件,33,1-7、第10幀、第20幀、第28幀插入關鍵幀

14、，在第10、20幀處用線條工具劃一斜線后去掉右下部分及線條如圖11所示：,第二部分 制作“翻書”影片剪輯元件,1、制作“翻封面”影片剪輯元件,34,第二部分 制作“翻書”影片剪輯元件,圖11 制作翻封面,1、制作“翻封面”影片剪輯元件,35,1-8、第28幀處用變形工具把遮片調成寬166.5高392.5，X值為0，Y值為-242.5，再用線條工具畫二條斜線。去掉下部分和左上部分，選中遮罩1圖層創(chuàng)建形狀補間，第55幀延長幀，刪除第28幀后的形狀補間。如圖12所示：,第二部分 制作“翻書”影片剪輯元件,1、制作“翻封面”影片剪輯元件,36,第二部分 制作“翻書”影片剪輯元件,1、制作“翻封面”影片

15、剪輯元件,圖12制作效果,37,1-9、首頁圖層第一幀將庫中“首頁”影片剪輯元件拖入，X值為225，Y值為135，打開變形工具把“首頁”影片剪輯元件的注冊點移到頁的右下角，“首頁”影片剪輯元件的左下角與“封面”影片剪輯元件的右下角交叉擺放，第10、20、40幀插入關鍵幀，第10幀移動“首頁”影片剪輯元件右下角與“封面”影片剪輯元件的左下角對齊，X值為0，Y值為-90。,第二部分 制作“翻書”影片剪輯元件,1、制作“翻封面”影片剪輯元件,38,第二部分 制作“翻書”影片剪輯元件,1、制作“翻封面”影片剪輯元件,圖13 制作翻頁效果,39,1-10、第20幀移動“首頁”影片剪輯元件左上角與“封面”

16、影片剪輯元件的右上角對齊，X值為-52.1，Y值為-150，也可打開變形面板，約束打勾，旋轉設為77.4。第40幀“首頁”影片剪輯元件垂直中齊、右對齊，X值為 -240，Y值為-150，第55幀延長幀。如圖13所示。,1、制作“翻封面”影片剪輯元件,第二部分 制作“翻書”影片剪輯元件,40,第二部分 制作“翻書”影片剪輯元件,1、制作“翻封面”影片剪輯元件,圖14制作翻頁效果,41,1-11、遮罩2圖層打開標尺，在“頁”的底部和“頁”的左面各拖一標尺線，第1幀用矩形工具，筆觸無，畫一矩形，筆觸無，填充顏色隨意，畫一正方矩形大小16*16，X值為224，Y值為134。放在封面頁的右下角用線條工具

17、斜角對斜角畫一直線刪除下半部并刪除直線。也可用黑剪頭選擇工具放在矩形右下角，待鼠標出現(xiàn)小三角符號時向上推。如圖15所示（左圖）。,第二部分 制作“翻書”影片剪輯元件,1、制作“翻封面”影片剪輯元件,42,1-12、第10幀插入空白關鍵幀，用矩形工具，筆觸無，畫一矩形，筆觸無，填充顏色隨意，畫一正方矩形大小240*240，X值為0，Y值為-90。用線條工具斜角對斜角畫一直線刪除下半部并刪除直線。也可用黑剪頭選擇工具放在矩形右下角，待鼠標出現(xiàn)小三角符號時向上推。如圖15所示（右圖）。,1、制作“翻封面”影片剪輯元件,第二部分 制作“翻書”影片剪輯元件,43,第二部分 制作“翻書”影片剪輯元件,1、

18、制作“翻封面”影片剪輯元件,圖15 制作翻頁效果,44,1-13、第20幀插入空白關鍵幀，用矩形工具，筆觸無，畫一矩形，筆觸無，填充顏色隨意，畫一正方矩形大小300*240，X值為 -50，Y值為-145。把矩形左下角移到“封面”頁上左下角壓在豎標尺與橫標尺之間，打開變形工具旋轉-12度，調整好位置使矩形覆蓋整個“首頁”，用黑剪頭選擇工具放在矩形右下角，待鼠標出現(xiàn)小三角符號時向上推。或用直線工具劃線刪除。,第二部分 制作“翻書”影片剪輯元件,1、制作“翻封面”影片剪輯元件,45,1-14、第21幀插入關鍵幀，用黑剪頭選擇工具放在矩形上，待鼠標出現(xiàn)小三角符號時，調整矩形，如圖16所示：,1、制作

19、“翻封面”影片剪輯元件,第二部分 制作“翻書”影片剪輯元件,46,第二部分 制作“翻書”影片剪輯元件,1、制作“翻封面”影片剪輯元件,圖16 制作翻頁效果,47,1-15、第28幀插入關鍵幀，用黑剪頭選擇工具放在矩形上，待鼠標出現(xiàn)小三角符號時，調整矩形 1-16、第33幀插入關鍵幀，用黑剪頭選擇工具放在矩形上，待鼠標出現(xiàn)小三角符號時，調整矩形,第二部分 制作“翻書”影片剪輯元件,1、制作“翻封面”影片剪輯元件,48,1-17、第40幀插入空白關鍵幀，用矩形工具，筆觸無，畫一矩形，筆觸無，填充顏色隨意，畫一正方矩形大小258*462，把矩形右下角移到“頁1”頁上左下角壓在豎標尺與橫標尺之間，用黑

20、剪頭選擇工具放在矩形的右上角上，待鼠標出現(xiàn)小三角符號時，調整矩形。第55幀延長幀。如圖17所示：,第二部分 制作“翻書”影片剪輯元件,1、制作“翻封面”影片剪輯元件,49,第二部分 制作“翻書”影片剪輯元件,1、制作“翻封面”影片剪輯元件,圖17 制作翻頁,50,1-18、高光3圖層做法和遮罩2的做法一樣，第1 幀、第10幀（插入空白關鍵幀）、第20幀（插入空白關鍵幀）第21幀（插入關鍵幀）、第28幀（插入關鍵幀）、第33幀（插入關鍵幀）、第40幀（插入空白關鍵幀），第55幀延長幀。不同地方是矩形用線形填充，筆觸無，從左至右的色碼依次為：#010101,Alpha值為0，#F9F9F9， Al

21、pha值為25，#000000，Alpha值為0，如圖18、19、20所示：,第二部分 制作“翻書”影片剪輯元件,1、制作“翻封面”影片剪輯元件,51,第二部分 制作“翻書”影片剪輯元件,1、制作“翻封面”影片剪輯元件,圖18,52,第二部分 制作“翻書”影片剪輯元件,1、制作“翻封面”影片剪輯元件,圖19,53,第二部分 制作“翻書”影片剪輯元件,1、制作“翻封面”影片剪輯元件,圖20,54,圖20,1、制作“翻封面”影片剪輯元件,第二部分 制作“翻書”影片剪輯元件,55,1-10、高光3遮罩圖層，做法與首頁圖層基本一樣，第一幀用矩形工具，筆觸無，畫一矩形寬240，高300，X值為 225，

22、Y值為135，打開變形工具把矩形的注冊點移到右下角，矩形的左下角與“封面”影片剪輯元件的右下角交叉擺放，第10、20、40幀插入關鍵幀，第10幀移動矩形右下角與“頁1”影片剪輯元件的左下角對齊，X值為0，Y值為-90。第20幀移動矩形左上角與“頁1”影片剪輯元件的右上角對齊，X值為-52.1，Y值為-150，也可打開變形面板，約束打勾，旋轉設為77.4。第40幀矩形垂直中齊、右對齊，X值為-240，Y值為-150，第55 幀延長幀。參照例圖在圖層上設好遮罩。,第二部分 制作“翻書”影片剪輯元件,1、制作“翻封面”影片剪輯元件,56,2、制作“翻頁3”影片剪輯元件，庫中直接復制“翻封面”改名為“

23、翻頁3”，進入編輯場景。 2-1、增加和調整圖層，從第1層開始，頁1圖層改為頁3圖層，在頁3圖層上增加首頁圖層，在光1圖層上增加光1左、封面圖層改為頁1，首頁圖層改為頁 2，自下而上分別是：頁3、首頁、光1、光1左、頁1、高光2、遮罩1、頁2、遮罩2、高光3、高光3遮罩共11個圖。如圖21所示：,第二部分 制作“翻書”影片剪輯元件,2、制作“翻頁3”影片剪輯元件,57,第二部分 制作“翻書”影片剪輯元件,2、制作“翻頁3”影片剪輯元件,圖21 翻頁3圖層分布,58,2-2、頁3圖層上（直接復制過來時是頁1）增加首頁圖層，打開頁3圖層的鎖，點第1幀后點場景中的圖元件，點右鍵交換元件換成“頁3”影

24、片剪輯元件。點首頁圖層第1幀從庫中拖入“首頁”影片剪輯元件，設X值：-240，Y值：-150。第50幀延長幀。如圖22所示：,第二部分 制作“翻書”影片剪輯元件,2、制作“翻頁3”影片剪輯元件,59,第二部分 制作“翻書”影片剪輯元件,圖22 翻頁3圖層,2、制作“翻頁3”影片剪輯元件,60,第二部分 制作“翻書”影片剪輯元件,2、制作“翻頁3”影片剪輯元件,圖23 翻頁3交換元件,61,2-3、光1圖層上增加光1左圖層，點光1圖層第一幀復制幀粘帖到光1左圖層第1幀，修改變形水平翻轉，最后移動到位置至X值：-240，Y值：-150。 2-4、頁1圖層（復制時是封面）點第1幀、點場景圖元件，點右

25、鍵交換元件換成“頁1“，延長幀至28幀，29幀插入空白關鍵幀。,第二部分 制作“翻書”影片剪輯元件,2、制作“翻頁3”影片剪輯元件,62,2-5、頁2圖層（復制時是首頁）點第1幀、10幀、20幀、40幀，點場景圖元件，點右鍵交換元件換成“頁2“，延長幀至55。這樣“翻頁3”影片剪輯元件就完成了。,2、制作“翻頁3”影片剪輯元件,第二部分 制作“翻書”影片剪輯元件,63,3、制作其它翻頁影片剪輯元件，庫中直接復制“翻頁3” 影片剪輯元件改名為“翻頁5”，雙擊進入編輯，頁3圖層改為頁5同時交換元件，首頁圖層改為頁2同時交換元件，頁1圖層改為頁3同時交換元件，頁2圖層改為頁4圖層同時交換元件。最后庫

26、中直接復制“翻頁5”改為“翻頁7”修改方法同上，依此類推制作“翻頁9”、“翻頁11”、“翻頁13”、“翻頁15”、 “翻頁17”“翻頁19”。只要掌握每圖層交換元件時頁數(shù)間隔1位，如頁1交換頁3、頁2交換頁4。,第二部分 制作“翻書”影片剪輯元件,3、制作其它翻頁影片剪輯元件,64,4、制作“翻封底”影片剪輯元件，從庫中直接復制“翻頁19”，雙擊進入編輯，按上面方法交換元件，所有圖層延長到110幀。在最上面的圖層（高光3遮罩層）的110幀上插入空白關鍵幀，點右鍵進入動作面板添加stop();代碼。所有的“翻頁”影片剪輯就完成了，下面要進入場景組合。,第二部分 制作“翻書”影片剪輯元件,4、制作“翻封底”影片剪輯元件,65,第三部分 場景組合,在庫中新建翻頁文件夾把所有“翻頁”影片剪輯元件放了文件夾中。 1、進入場景編輯，新建5個圖層自下而上分別是：背景、標題、翻書效果、音樂、按鈕、AS共6個圖層。如圖23所示：,66,第三部分 場景組合,圖23 場景組