Flash動畫執行個體：雪景賀卡製作

flash動畫

　　效果簡介：

　　這是一個雪景賀卡。詩意的房屋、雪景；可愛的雪人、嫋嫋的炊煙；淺淺的腳印和隨機的雪花，這些組成一幅美麗的雪景圖，也使這張賀卡充滿了情趣。但賀卡的製作也因此變得稍稍複雜。

　　主要應用技術：

　　文章中主要學習如何系統的設計賀卡並有效管理數量巨大的元件。掌握賀卡製作中情境的布置，顏色的應用，氣氛的營造等方法。製作中關鍵的技術還有使用隨機函數實現逼真的雪花效果。學習如何巧妙合理地使用素材設計出有靈性和個性的作品。

圖 1

點擊這裡下載源檔案

　　製作步驟：

　　設定情境的大小為400px×300px，背景為白色，幀頻為12fps。

　　設計元件

　　1．按快速鍵Ctrl+F8開啟“建立新元件”面板建立一個名為“房屋”的影片剪輯元件。

　　2．在“房屋”元件的情境裡按快速鍵Ctrl+R開啟“匯入”面板匯入一幅房屋背景圖。為了讓讀者看得清楚一些，故先將背景色設成黑色。如圖2所示。

圖 2

　　3．按快速鍵Ctrl+B把房屋圖片打散，然後炊煙那一段圖片，按快速鍵Ctrl+X剪下下來。如圖3所示。

圖 3

　　4．開啟“建立新元件”面板建立一個名為“炊煙”的圖形元件，在“炊煙”元件的情境中按快速鍵Ctrl+V把剛才剪下的炊煙圖片粘貼到情境中。

　　5．雙擊庫中的影片剪輯元件“房屋”，回到其編輯情境裡。接著建立一個“炊煙”層，然後開啟庫，將剛才製作好的“炊煙“元件拖到“炊煙”中，並調整其位置到“房屋”的煙囪上，如圖4所示。

圖 4

　　以上的步驟看上去好像多此一舉。其實不然，這就是合理利用素材的技巧了。因為這樣做可以在不添加元件的情況下讓設計出炊煙嫋嫋的效果。產生有人氣（動）的感覺，使得整個動畫不至於死氣沉沉。下面來看看“炊煙”的具體製作方法。

　　6．按住Ctrl鍵，同時選中“房屋”元件情境中兩個層的第35幀，並F5鍵插入幀。接著選中“炊煙”層裡第35幀，按F6鍵插入主要畫面格。右鍵點選“炊煙”層的第1幀並選擇“建立補間動畫”命令。如圖5所示。

圖 5

　　7．選中“炊煙”層第1幀中的“炊煙”元件，然後使用“工具”面板中的“任意變形”工具 把“炊煙”元件縮小到看不見為止，其位置仍要在煙囪上。到這裡“炊煙嫋嫋”的效果就設計好了。

　　現在，開啟庫，按住Ctrl鍵選中“房屋”元件和“炊煙”元件，然後按右鍵陰影選擇區，在彈出的菜單中選擇“移至新檔案”命令，在彈出的“新檔案夾”面板裡輸入新元件管理檔案夾的名字“雪屋”。如圖6所示。

圖 6

　　在設計大型的動畫，譬如MTV時，我們總要使用檔案夾來管理元件。這樣做可以非常方便地管理、調用和編輯元件，大大的節省設計時間，提高工作效率。所以建議讀者在設計複雜動畫時應該把一段動畫中的相關元件歸併到同一個檔案夾裡。

　　8．其它景色的設計。首先把情境的縮放比例設定成200%。接著在雪屋的圖片上抓取一塊後面設計中用來襯托背景的雪地圖片。既圖7中藍色線條框中的部分。

圖 7

　　建立一個名為“雪地”的圖形元件，並把剛才裁剪地圖片粘貼到情境中。如所示。

圖 8

　　9．再建立一些圖形元件，然後匯入一個雪人，腳印。雪樹可以可以在“房屋”中截取。所有其它元件如圖9所示。

圖 9

　　10．“文字”影片剪輯元件的設計可以隨意，就看讀者想說些什麼了。關鍵是要能和動畫相映成趣，相輔相成。篇幅關係這裡就不多說什麼了。但要注意，文字動畫的設計不能太花哨，盡量少設計文字動畫，少用各種字型，也盡量不要使用形變動畫和透明動畫，否則會增大檔案體積。

　　11．設計隨機雪花。這是本例中的痛點，涉及到不少Flash編程的知識。但也是相當重要的一個部分。

　　建立一個名為“雪花”的圖形元件。把情境比例設定成800%，然後在“雪花”元件的情境中，按住Shift鍵使用“橢圓”工具繪製一個直徑為5px的圓。如圖10所示。

圖 10

　　12．開啟“建立新元件”面板建立一個名為“落雪影片”的影片剪輯元件元件，如上圖。在庫中雙擊影片剪輯元件元件“落雪影片”進入其編輯情境。把情境中的“圖層 1”改名為“雪花”層，接著從庫中把圖形元件“雪花”拖拽到該層的情境中。

　　13．選中“雪花”層的第40幀按下F6鍵插入主要畫面格，接著按右鍵第1幀選擇“建立補間動畫”命令，然後選中第20幀再插入一個主要畫面格。

　　14．按右鍵該層並在彈出的菜單中選擇“添加引導層”命令為“雪花”層建立一個引導層。在引導層裡畫一條曲線，然後讓第1幀和第40幀的“雪花”元件吸附在曲線的左端，第20幀的雪花吸附在曲線的右端。如圖11所示。

圖 11

　　15．建立一個名為“落雪”的影片剪輯元件。從庫中把“雪花影片”元件拖拽到“落雪”的情境中，選中第3幀按下F5鍵插入幀。點選情境中的雪花影片，在“屬性”面板裡給影片剪輯“雪花影片”取個執行個體名稱“snowflake”，如圖12所示。

圖 12

　　16．在“落雪”元件中建立一個“指令碼”層。如圖13所示。分別點選中該層的第1、2、3幀，然後按下F7鍵插入空白主要畫面格，並按F9鍵開啟“動作”面板，鍵入如下代碼：

圖 13

　　第1幀中的代碼如下：

　　// n是複製的影片剪輯的唯一深度層級。深度層級是被複製影片剪輯的堆疊順序，即影片各自的層次
　　n = 1;
　　// 變數flakes用來控制雪花的數量，即可以控制雪花的密度
　　flakes = 100;

　　第2幀中的代碼如下：

　　i = 1;
　　while (i<=flakes) {    //控制雪花飄落速度
　　　　this["snowflake" add i]._y += Math.random()*2 + 2;
　　　　i++;
　　}
　　if (n == flakes) {
　　　　n = 1;
　　} else {
　　　　snowflakesize = Math.random()*30+30;　//複製雪花影片
　　　　duplicateMovieClip("snowflake", "snowflake" add n, n);　　//控制雪花的飄落範圍
　　　　this["snowflake" add n]._x = Math.random()*500;　//控制雪花的大小
　　　　this["snowflake" add n]._xscale = snowflakesize;
　　　　this["snowflake" add n]._yscale = snowflakesize;
　　　　n++;
　　}

　　第3幀中的代碼如下：

　　//製造影片的迴路，讓影片可以不停地播放
　　gotoAndPlay(2);

　　代碼不是很多，也不是很難理解。代碼中，Math.random()用來產生隨機數字，其返回的值在0到1之間，但不包括1。DuplicateMovieClip()的作用是複製影片剪輯。_x屬性和_y屬性在影片剪輯在情境中的座標值，也就是它們在情境中的位置。_xscale屬性和_yscale屬性是影片剪輯的水平和垂直縮放比例屬性。而this對象的作用則是引用影片剪輯執行個體。

　　設計主情境

　　1．在製作主情境之間，我們先來看看主情境所有的層以及上下關係。如圖14所示。

圖 14

　　2．把主情境中的“圖層 1”層改名為“背景”層，見圖 14。按快速鍵“Shift+F9”開啟“混色器”面板，如圖15所示進行設定。

圖 15

接著用“橢圓”工具在情境中拉出一個圓（不要邊線），並在“屬性”面板裡設定這個圓形的寬、高為480px、380px。最終設定如下圖（白色地區為情境，情境縮放比例為50%）。如圖6所示。

圖 16

　　3．建立“雪地”層。開啟庫，將庫中的圖形元件“雪地”拖拽到該層中，然後用“變形”工具將其拖動放大，最終設定如圖17所示。

圖 17

　　4．建立“景色”層。然後從庫中將“房屋”元件和其它元件都拖拽到情境相應的層中，然後設定好他們的位置。相同的元件可以重複使用，譬如情境中的雪數，就可以複製調整其大小，如圖18所示。從而減小檔案的大小。

圖 18

　　5．腳印的設計稍微繁瑣了些，但不難，多用幾次快速鍵Ctrl+T開啟“變形”面板調整腳印的大小和角度，這樣遍可以事半功倍。從庫中把影片剪輯元件“雪花”拖入到情境中。

　　6．建立一個“文字”層，用來放“文字”影片剪輯元件。然後開啟庫，把讀者自己設計的“文字”影片元件拖到該層中。

　　現在按快速鍵Ctrl+Enter觀看最終效果。筆者相信，在學習了該例後，讀者定能夠設計出自己喜歡的賀卡了。執行個體中，背景的主色調採用了粉紅色，其設計理念是：表達出朋友或戀人的洋溢的熱情，所以，無論從哪個角度來講，看著這張賀卡，你一點都不會覺得冷，即使雪依舊在下。

　　另外，賀卡製作中情境的布置，譬如樹的遠近大小，雪人的位置也是有講究的，這個就要讀者多多積累經驗了。其原則的近大遠小，彼此不能太近。還有最重要的就是如何充分利用素材，設計出有靈性，有個性的作品。希望讀者多積累這方面的經驗。