Flash實例:漂亮的翻書動畫制作(1)

本例介紹使用Flash的遮罩功能制作無腳本軟翻書效果,通過制作軟翻書效果來了解遮罩功能的運用,有興趣的朋友就一起學習吧。

本文由中國教程網 zctmh0336(誠信爲人) 原創,轉載請保留此信息!

先看看效果示例圖:

知識點:遮罩的運用

學習無腳本軟翻書教材前請先看看遮罩的知識:

1、遮罩動畫的概念

(1)什麽是遮罩?

“遮罩”:顧名思義就是遮擋住下面的對象。在Flash8.0中,“遮罩動畫”也確實是通過“遮罩層”來達到有選擇地顯示位于其下方的“被遮罩層”中的內容的目地,在一個遮罩動畫中,“遮罩層”只有一個,“被遮罩層”可以有任意個。

(2)遮罩有什麽用?

在Flash8.0動畫中,“遮罩”主要有2種用途,一個作用是用在整個場景或一個特定區域,使場景外的對象或特定區域外的對象不可見,另一個作用是用來遮罩住某一元件的一部分,從而實現一些特殊的效果。

2、創建遮罩的方法

(1)創建遮罩

在Flash8.0中沒有一個專門的按鈕來創建遮罩層,遮罩層其實是由普通圖層轉化的。你只要在要某個圖層上單擊右鍵,在彈出菜單中把“遮罩”前打個勾,該圖層就會生成遮罩層,“層圖標”就會從普通層圖標變爲遮罩層圖標,系統會自動把遮罩層下面的一層關聯爲“被遮罩層”,在縮進的同時圖標變爲,如果你想關聯更多層被遮罩,只要把這些層拖到被遮罩層下面就行了。

(2)構成遮罩和被遮罩層的元素

遮罩層中的圖形對象在播放時是看不到的,遮罩層中的內容可以是按鈕、影片剪輯、圖形、位圖、文字等,但不能使用線條,如果一定要用線條,可以將線條轉化爲“填充”。被遮罩層中的對象只能透過遮罩層中的對象被看到。在被遮罩層,可以使用按鈕,影片剪輯,圖形,位圖,文字,線條。

下面開始本教程

打開FLASH文檔,名稱:《軟翻書》文檔屬性大小:600*450其它默認。

素材准備:

1、准備20張圖片,用PS處理成:200*150像素。

2、准備1張背景圖片,PS處理成:600*450像素。

3、以及蘭花、荷花的動畫。

4、字體:毛澤東字體、文鼎CS大隸書繁、方正小篆體。

新建位圖文件夾,將位圖全部導入。

第一部分: 制作“頁”影片剪輯元件

1、制作“封面” 影片剪輯元件,插入新建元件影片剪輯名爲“封面”。

1-1、在圖層1上新建六個圖層,自下至上分別是:背景、花邊、邊線、字框、字、動畫(圖片也行)、遮罩7個圖層。如圖:

Flash實例:漂亮的翻書動畫制作(1)

圖1

1-2、圖層1(背景)第1幀用矩形工具,無筆觸,畫一矩形:240*300,顔色:#333300,全居中。

1-3、新建花邊圖案影片剪輯,圖層第1幀畫花邊圖案,(舞台放大)大小設爲10.8*18.5,顔色:#666600,複制多枚排列成236*292如圖:

Flash實例:漂亮的翻書動畫制作(1)

圖2

1-4、花邊圖層第1幀把花邊圖案元件拖入,全居中,點圖案打開濾鏡面板增加投影效果,模糊設爲:0,顔色設爲:#999900,距離設爲:1,挖空打勾。其它默認。

1-5、邊線圖層第1幀用矩形工具,筆觸設爲:2,顔色爲:#999966,填充色關閉,畫一矩形寬210高260全居中,選中右邊線和下邊線顔色換成#000000,選中全部邊線轉爲圖片元件名爲“頁邊線”。

1-6、字框圖層第1幀制作字框大小:205*45,X軸-102,Y軸-106.2。如圖:

Flash實例:漂亮的翻書動畫制作(1)

圖3

1-7、字圖層第1幀用文本工具寫上鳥語花香(也可寫其它)字體:方正小篆體,大小35。顔色#336600。

1-8、圖片圖層(動畫)第1幀將庫中准備好的荷花動畫拖入,放在右下角的位置,調整後大小。

1-9、遮罩圖層第1幀用矩形工具,筆觸禁止,顔色隨意,畫一矩形寬190高162的遮罩片,放在右下角,遮罩片的右靠近右邊線,遮罩片下邊靠近下邊線。右鍵遮罩層設爲遮罩。這樣“封面”影片元剪輯件就完成了,最後效果如圖:

Flash實例:漂亮的翻書動畫制作(1)

圖4

2、制作“首頁” 影片剪輯元件,將庫中“封面”直接複制改名爲“首頁”。

2-1、雙擊進入“首頁”編輯場面,自下至上分別是:背景、花邊、邊線、字、4個圖層。刪除字框、圖片、遮罩圖層。

2-2、打開字圖層,用“毛體”書寫兩排詩詞。

2-3、打開邊線圖層,選中右邊線和下邊線將顔色替換成#999900,選中左邊線和上邊線將顔色替換成#FFFFFF。將庫中蘭花圖拖入場景,調整後大小、位置。點中第1幀,修改—組合,點圖片轉換爲圖片元件名爲圖片,將邊線圖層改爲圖片,最後效果如圖:

Flash實例:漂亮的翻書動畫制作(1)

圖5

3、制作“封底” 影片剪輯元件,將庫中“首頁”直接複制改名爲“封底”。

3-1、雙擊進入“封底”編輯場面,自下至上分別是:背景、花邊、圖片、字、4個圖層。在圖片層上增加簽名圖層,在字圖層上增加遮片層、遮罩層。最後如下背景、花邊、圖片、簽名、字、遮片、遮罩7個圖層。

3-2、簽名圖層第一幀用文本工具寫上自己的名字和制作日期。字體顔色#999900,字體大小20。

3-3、字圖層第1幀用文本工具寫上謝謝觀賞(也可寫其它),字體顔色#999900,字體大小35,點第一幀複制幀,點遮罩圖層(第7層)第一幀粘貼幀。

3-4、遮片圖層第1幀用矩形工具畫一矩形,寬50高60,筆觸無,線形填充左色標:#FFFFFF,Alpha值爲0,中色標:#FFFFFF, Alpha值爲100,右色標:#FFFFFF,Alpha值爲0,打開變形面板旋轉爲25度。20幀插入關鍵幀,第一幀矩形放在字的左邊,20幀放在字的右邊,回到 1幀創建形狀補間,所有圖層延長到20幀。在遮罩圖層右鍵設爲遮罩。最後效果如圖:

Flash實例:漂亮的翻書動畫制作(1)

圖6

4、制作“頁1” 影片剪輯元件,將庫中“首頁”直接複制改名爲“頁1”。

4-1、雙擊進入“頁1”編輯場面,自下至上分別是:背景、花邊、邊線、字、4個圖層。

4-2、邊線圖層點第一幀修改—分離,分離兩次,點場景釋放鼠標,刪除蘭花圖片,將庫中准備好的位圖拖入全居中。

4-3、字圖層點第1幀,選中文字刪除,最後用文本工具在邊線下部中間位置寫上“1”的頁碼,顔色#999900。如圖:

Flash實例:漂亮的翻書動畫制作(1)

圖7

接下來制作“頁2”“頁3”依此類推一直至“頁20”,怎樣所有的第一部分 制作“頁”影片剪輯元件就完成了,喜歡的朋友們可以先搜集素材,先把“頁” 影片剪輯元件完成,待我繼續寫第二部分“翻書”影片剪輯元件。

第二部分: 制作“翻書”影片剪輯元件

在制作“翻書”影片剪輯元件前先在庫面板建“頁”文件夾,將所有“頁”影片剪輯元件放入文件夾,以便以後做動畫時容易交換元件。

1、制作“翻封面”影片剪輯元件。

1-1、插入影片剪輯元件名爲“翻封面”新建8個圖層,自下而上分別是:頁1、光1、封面、高光2、遮罩1、首頁、遮罩2、高光3、高光3遮罩共9個圖。如圖:

Flash實例:漂亮的翻書動畫制作(1)

圖8

1-2、頁1圖層第1幀將庫中“頁1”影片剪輯元件拖入,左對齊、垂直中齊,x值:0,Y值:-150,延長至55幀,上鎖。

1-3、光1圖層第1幀用矩形工具畫一矩形,無筆觸,填充爲線性。打開顔色面板,中間添加一個色碼:從左至右的色碼依次爲:#010101,Alpha值爲0,#F9F9F9,Alpha值爲25,#000000,Alpha值爲0,矩形大小設爲寬 240高300,X值爲0,Y值爲-150。設置如圖:

Flash實例:漂亮的翻書動畫制作(1)

圖9

1-4、封面圖層第1幀將“封面”頁影片剪輯元件放入,X值爲0,Y值爲-150。第28幀延長幀,第29幀插入空白關鍵幀,圖層上鎖。

1-5、高光2圖層點高光1圖片右鍵複制,點高光2後點場景右鍵粘貼到當前位置。第28幀延長幀,第29幀插入空白關鍵幀,圖層上鎖。

1-6、遮罩1圖層第1幀用矩形工具,筆觸無,填充色隨意,畫一矩形遮片寬240高300,X值爲0,Y值爲-150,右下角用線條劃一斜線去掉小角。如圖:

Flash實例:漂亮的翻書動畫制作(1)

圖10

第10幀、第20幀、第28幀插入關鍵幀,在第10、20幀處用線條工具劃一斜線後去掉右下部分及線條如圖:

Flash實例:漂亮的翻書動畫制作(1)

圖11

Flash實例:漂亮的翻書動畫制作(2)
Flash實例:漂亮的翻書動畫制作(2)
  第28幀處用變形工具把遮片調成寬166.5高392.5,X值爲0,Y值爲-242.5,再用線條工具畫二條斜線。去掉下部分和左上部分,選中遮罩1圖層創建形狀補間,第55幀延長幀,刪除第28幀後的形狀補間。如圖:   圖12   ...查看完整版>>Flash實例:漂亮的翻書動畫制作(2)
 
Flash實例:制作樹葉逐漸展開動畫(2)
Flash實例:制作樹葉逐漸展開動畫(2)
  2:新建層2,畫一個長方形,只要能遮住花盆就行了,因爲花盆是一直顯示的.   3:在圖層2按F6插入關鍵幀,每插一步就用畫筆畫一步,形成慢慢伸展的逐幀動畫,圖層1按F5保留   4:最後右鍵圖層2選擇"遮罩"全效果完成...查看完整版>>Flash實例:制作樹葉逐漸展開動畫(2)
 
Flash實例:制作樹葉逐漸展開動畫(1)
  最近有人問我一個樹葉伸展的效果,網上現在好像也很流行.其實就是逐幀+遮罩.拿一個例子來分析一下吧   演示效果:   1:先找一個素材,就這一盆花吧,在ps裏處理下,把多余的背影刪掉...查看完整版>>Flash實例:制作樹葉逐漸展開動畫(1)
 
Flash動畫實例:雪景賀卡制作
  效果簡介:  這是一個雪景賀卡。詩意的房屋、雪景;可愛的雪人、袅袅的炊煙;淺淺的腳印和隨機的雪花,這些組成一幅美麗的雪景圖,也使這張賀卡充滿了情趣。但賀卡的制作也因此變得稍稍複雜。  主要應用技術...查看完整版>>Flash動畫實例:雪景賀卡制作
 
Flash動畫實例:雪景賀卡制作
  效果簡介:  這是一個雪景賀卡。詩意的房屋、雪景;可愛的雪人、袅袅的炊煙;淺淺的腳印和隨機的雪花,這些組成一幅美麗的雪景圖,也使這張賀卡充滿了情趣。但賀卡的制作也因此變得稍稍複雜。  主要應用技術...查看完整版>>Flash動畫實例:雪景賀卡制作
 
Flash實例制作視頻教程:踏春動畫(6)
  第 75 節:走!咱們踏春去(6)  課程目標:制作《走!咱們踏春去》賀卡  課程要點:使用Flash MX 2004制作《走!咱們踏春去》賀卡。實例教程共六節,這是第六節。同時提供fla源文件下載,方便大家學習和參考...查看完整版>>Flash實例制作視頻教程:踏春動畫(6)
 
Flash實例制作視頻教程:踏春動畫(5)
  第 74 節:走!咱們踏春去(5)  課程目標:制作《走!咱們踏春去》賀卡  課程要點:使用Flash MX 2004制作《走!咱們踏春去》賀卡。實例教程共六節,這是第五節。同時提供fla源文件下載,方便大家學習和參考...查看完整版>>Flash實例制作視頻教程:踏春動畫(5)
 
Flash實例制作視頻教程:踏春動畫(4)
  第 73 節:走!咱們踏春去(4)  課程目標:制作《走!咱們踏春去》賀卡  課程要點:使用Flash MX 2004制作《走!咱們踏春去》賀卡。實例教程共六節,這是第四節。同時提供fla源文件下載,方便大家學習和參考...查看完整版>>Flash實例制作視頻教程:踏春動畫(4)
 
Flash制作逼真的太陽地球月亮運動漂亮動畫
  先看兩種不同得效果:  第一種效果        第二種效果:(第二種效果我沒有按照太陽、地球、月亮三者之間的真實旋轉規律去做,按理說地球圍繞太陽轉一圈,自身應該轉365圈,月亮應該圍繞地球轉13.04圈,...查看完整版>>Flash制作逼真的太陽地球月亮運動漂亮動畫
 
 
回到王朝網路移動版首頁