分享
 
 
 

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

王朝other·作者佚名  2008-08-15
窄屏简体版  字體: |||超大  

本例介紹使用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個圖層。如圖:

圖1

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

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

圖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。如圖:

圖3

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

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

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

圖4

2、制作「首頁」 影片剪輯元件,將庫中「封面」直接復制改名為「首頁」。

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

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

2-3、打開邊線圖層,選中右邊線和下邊線將顏色替換成#999900,選中左邊線和上邊線將顏色替換成#FFFFFF。將庫中蘭花圖拖入場景,調整後大小、位置。點中第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幀。在遮罩圖層右鍵設為遮罩。最後效果如圖:

圖6

4、制作「頁1」 影片剪輯元件,將庫中「首頁」直接復制改名為「頁1」。

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

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

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

圖7

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

第二部分: 制作「翻書」影片剪輯元件

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

1、制作「翻封面」影片剪輯元件。

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

圖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。設置如圖:

圖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,右下角用線條劃一斜線去掉小角。如圖:

圖10

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

圖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個圖層。如圖: [img]http://image.wangchao.net.cn/it/1323268960595.jpg[/img]   圖1   1-2、圖層1(背景)第1幀用矩形工具,無筆觸,畫一矩形:240*300,顏色:#333300,全居中。   1-3、新建花邊圖案影片剪輯,圖層第1幀畫花邊圖案,(舞臺放大)大小設為10.8*18.5,顏色:#666600,復制多枚排列成236*292如圖: [img]http://image.wangchao.net.cn/it/1323268960815.jpg[/img]   圖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。如圖: [img]http://image.wangchao.net.cn/it/1323268960981.jpg[/img]   圖3   1-7、字圖層第1幀用文本工具寫上鳥語花香(也可寫其它)字體:方正小篆體,大小35。顏色#336600。   1-8、圖片圖層(動畫)第1幀將庫中準備好的荷花動畫拖入,放在右下角的位置,調整後大小。   1-9、遮罩圖層第1幀用矩形工具,筆觸禁止,顏色隨意,畫一矩形寬190高162的遮罩片,放在右下角,遮罩片的右靠近右邊線,遮罩片下邊靠近下邊線。右鍵遮罩層設為遮罩。這樣「封面」影片元剪輯件就完成了,最後效果如圖:    [img]http://image.wangchao.net.cn/it/1323268961079.jpg[/img]   圖4   2、制作「首頁」 影片剪輯元件,將庫中「封面」直接復制改名為「首頁」。   2-1、雙擊進入「首頁」編輯場面,自下至上分別是:背景、花邊、邊線、字、4個圖層。刪除字框、圖片、遮罩圖層。   2-2、打開字圖層,用「毛體」書寫兩排詩詞。   2-3、打開邊線圖層,選中右邊線和下邊線將顏色替換成#999900,選中左邊線和上邊線將顏色替換成#FFFFFF。將庫中蘭花圖拖入場景,調整後大小、位置。點中第1幀,修改—組合,點圖片轉換為圖片元件名為圖片,將邊線圖層改為圖片,最後效果如圖: [img]http://image.wangchao.net.cn/it/1323268961280.jpg[/img]   圖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幀。在遮罩圖層右鍵設為遮罩。最後效果如圖: [img]http://image.wangchao.net.cn/it/1323268961502.jpg[/img]   圖6   4、制作「頁1」 影片剪輯元件,將庫中「首頁」直接復制改名為「頁1」。   4-1、雙擊進入「頁1」編輯場面,自下至上分別是:背景、花邊、邊線、字、4個圖層。   4-2、邊線圖層點第一幀修改—分離,分離兩次,點場景釋放鼠標,刪除蘭花圖片,將庫中準備好的位圖拖入全居中。   4-3、字圖層點第1幀,選中文字刪除,最後用文本工具在邊線下部中間位置寫上「1」的頁碼,顏色#999900。如圖: [img]http://image.wangchao.net.cn/it/1323268961725.jpg[/img]   圖7   接下來制作「頁2」「頁3」依此類推一直至「頁20」,怎樣所有的第一部分 制作「頁」影片剪輯元件就完成了,喜歡的朋友們可以先搜集素材,先把「頁」 影片剪輯元件完成,待我繼續寫第二部分「翻書」影片剪輯元件。   第二部分: 制作「翻書」影片剪輯元件   在制作「翻書」影片剪輯元件前先在庫面板建「頁」文件夾,將所有「頁」影片剪輯元件放入文件夾,以便以後做動畫時容易交換元件。   1、制作「翻封面」影片剪輯元件。   1-1、插入影片剪輯元件名為「翻封面」新建8個圖層,自下而上分別是:頁1、光1、封面、高光2、遮罩1、首頁、遮罩2、高光3、高光3遮罩共9個圖。如圖: [img]http://image.wangchao.net.cn/it/1323268961987.jpg[/img]   圖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。設置如圖: [img]http://image.wangchao.net.cn/it/1323268962229.jpg[/img]   圖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,右下角用線條劃一斜線去掉小角。如圖: [img]http://image.wangchao.net.cn/it/1323268962547.jpg[/img]   圖10   第10幀、第20幀、第28幀插入關鍵幀,在第10、20幀處用線條工具劃一斜線後去掉右下部分及線條如圖: [img]http://image.wangchao.net.cn/it/1323268962765.jpg[/img]   圖11
2023年上半年GDP全球前十五強
 百态   2023-10-24
美眾議院議長啟動對拜登的彈劾調查
 百态   2023-09-13
上海、濟南、武漢等多地出現不明墜落物
 探索   2023-09-06
印度或要將國名改為「巴拉特」
 百态   2023-09-06
男子為女友送行,買票不登機被捕
 百态   2023-08-20
手機地震預警功能怎麽開?
 干货   2023-08-06
女子4年賣2套房花700多萬做美容:不但沒變美臉,面部還出現變形
 百态   2023-08-04
住戶一樓被水淹 還衝來8頭豬
 百态   2023-07-31
女子體內爬出大量瓜子狀活蟲
 百态   2023-07-25
地球連續35年收到神秘規律性信號,網友:不要回答!
 探索   2023-07-21
全球鎵價格本周大漲27%
 探索   2023-07-09
錢都流向了那些不缺錢的人,苦都留給了能吃苦的人
 探索   2023-07-02
倩女手遊刀客魅者強控制(強混亂強眩暈強睡眠)和對應控制抗性的關系
 百态   2020-08-20
美國5月9日最新疫情:美國確診人數突破131萬
 百态   2020-05-09
荷蘭政府宣布將集體辭職
 干货   2020-04-30
倩女幽魂手遊師徒任務情義春秋猜成語答案逍遙觀:鵬程萬裏
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案神機營:射石飲羽
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案昆侖山:拔刀相助
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案天工閣:鬼斧神工
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案絲路古道:單槍匹馬
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案鎮郊荒野:與虎謀皮
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案鎮郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案鎮郊荒野:指鹿為馬
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案金陵:小鳥依人
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案金陵:千金買鄰
 干货   2019-11-12
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有