| 導購 | 订阅 | 在线投稿
分享
 
 
 

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

來源:互聯網  2008-08-15 06:28:48  評論

本例介紹使用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的遮罩功能制作無腳本軟翻書效果,通過制作軟翻書效果來了解遮罩功能的運用,有興趣的朋友就一起學習吧。   本文由中國教程網 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個圖層。如圖: [url=/bbs/detail_1846416.html][img]http://image.wangchao.net.cn/it/1323268960595.jpg[/img][/url]   圖1   1-2、圖層1(背景)第1幀用矩形工具,無筆觸,畫一矩形:240*300,顔色:#333300,全居中。   1-3、新建花邊圖案影片剪輯,圖層第1幀畫花邊圖案,(舞台放大)大小設爲10.8*18.5,顔色:#666600,複制多枚排列成236*292如圖: [url=/bbs/detail_1846416.html][img]http://image.wangchao.net.cn/it/1323268960815.jpg[/img][/url]   圖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。如圖: [url=/bbs/detail_1846416.html][img]http://image.wangchao.net.cn/it/1323268960981.jpg[/img][/url]   圖3   1-7、字圖層第1幀用文本工具寫上鳥語花香(也可寫其它)字體:方正小篆體,大小35。顔色#336600。   1-8、圖片圖層(動畫)第1幀將庫中准備好的荷花動畫拖入,放在右下角的位置,調整後大小。   1-9、遮罩圖層第1幀用矩形工具,筆觸禁止,顔色隨意,畫一矩形寬190高162的遮罩片,放在右下角,遮罩片的右靠近右邊線,遮罩片下邊靠近下邊線。右鍵遮罩層設爲遮罩。這樣「封面」影片元剪輯件就完成了,最後效果如圖:    [url=/bbs/detail_1846416.html][img]http://image.wangchao.net.cn/it/1323268961079.jpg[/img][/url]   圖4   2、制作「首頁」 影片剪輯元件,將庫中「封面」直接複制改名爲「首頁」。   2-1、雙擊進入「首頁」編輯場面,自下至上分別是:背景、花邊、邊線、字、4個圖層。刪除字框、圖片、遮罩圖層。   2-2、打開字圖層,用「毛體」書寫兩排詩詞。   2-3、打開邊線圖層,選中右邊線和下邊線將顔色替換成#999900,選中左邊線和上邊線將顔色替換成#FFFFFF。將庫中蘭花圖拖入場景,調整後大小、位置。點中第1幀,修改—組合,點圖片轉換爲圖片元件名爲圖片,將邊線圖層改爲圖片,最後效果如圖: [url=/bbs/detail_1846416.html][img]http://image.wangchao.net.cn/it/1323268961280.jpg[/img][/url]   圖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幀。在遮罩圖層右鍵設爲遮罩。最後效果如圖: [url=/bbs/detail_1846416.html][img]http://image.wangchao.net.cn/it/1323268961502.jpg[/img][/url]   圖6   4、制作「頁1」 影片剪輯元件,將庫中「首頁」直接複制改名爲「頁1」。   4-1、雙擊進入「頁1」編輯場面,自下至上分別是:背景、花邊、邊線、字、4個圖層。   4-2、邊線圖層點第一幀修改—分離,分離兩次,點場景釋放鼠標,刪除蘭花圖片,將庫中准備好的位圖拖入全居中。   4-3、字圖層點第1幀,選中文字刪除,最後用文本工具在邊線下部中間位置寫上「1」的頁碼,顔色#999900。如圖: [url=/bbs/detail_1846416.html][img]http://image.wangchao.net.cn/it/1323268961725.jpg[/img][/url]   圖7   接下來制作「頁2」「頁3」依此類推一直至「頁20」,怎樣所有的第一部分 制作「頁」影片剪輯元件就完成了,喜歡的朋友們可以先搜集素材,先把「頁」 影片剪輯元件完成,待我繼續寫第二部分「翻書」影片剪輯元件。   第二部分: 制作「翻書」影片剪輯元件   在制作「翻書」影片剪輯元件前先在庫面板建「頁」文件夾,將所有「頁」影片剪輯元件放入文件夾,以便以後做動畫時容易交換元件。   1、制作「翻封面」影片剪輯元件。   1-1、插入影片剪輯元件名爲「翻封面」新建8個圖層,自下而上分別是:頁1、光1、封面、高光2、遮罩1、首頁、遮罩2、高光3、高光3遮罩共9個圖。如圖: [url=/bbs/detail_1846416.html][img]http://image.wangchao.net.cn/it/1323268961987.jpg[/img][/url]   圖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。設置如圖: [url=/bbs/detail_1846416.html][img]http://image.wangchao.net.cn/it/1323268962229.jpg[/img][/url]   圖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,右下角用線條劃一斜線去掉小角。如圖: [url=/bbs/detail_1846416.html][img]http://image.wangchao.net.cn/it/1323268962547.jpg[/img][/url]   圖10   第10幀、第20幀、第28幀插入關鍵幀,在第10、20幀處用線條工具劃一斜線後去掉右下部分及線條如圖: [url=/bbs/detail_1846416.html][img]http://image.wangchao.net.cn/it/1323268962765.jpg[/img][/url]   圖11
󰈣󰈤
王朝萬家燈火計劃
期待原創作者加盟
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
王朝網路微信公眾號
微信掃碼關註本站公眾號 wangchaonetcn
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有