目錄

摘要

第1章 引言

1.1 Flash的曆史

1.2 Flash的主要應用領域

1.3Flash的現狀和優缺點

第2章 軟件的基礎概念

2.1 幀和關鍵幀

2.2圖層

2.3 時間軸面闆

2.4 元件

2.5 繪圖工具欄

2.6 動畫形式

2.7 場景

第3章 作品策劃

3.1 項目規劃

3.2關于片頭

3.3關于劇情

3.4 關于過渡效果

3.5關于場景

3.5 關于歌曲音效和同步字幕

3.6關于片尾

3.7 劇情設計

第3章 作品策劃

3.1 項目規劃

首先，我們确定作品的制作方向為歌曲MTV的小型動畫片；時間長度為180秒左右；作品的結構包括，片頭片尾，動畫劇情，鏡頭間的過渡動畫，歌曲音效和同步字幕；使用的主創軟件為Adobe flash CS4 。

3.2關于片頭

片頭，用以交代MTV的歌曲名稱和原唱者信息，有點像書本的封面，圖畫部分和書本的内容對應的關系不是太強。

3.3關于劇情

動畫劇情，用矢量動畫制作出一定的卡通情景，是用卡通動畫形式對歌曲表達内容的解讀和再現，因為是MTV類的，所以劇情的設計得簡約一些，沒有太多的跌宕起伏（況且情節太曲折在畫面上也難以表達）。

3.4 關于過渡效果

鏡頭間過渡動畫，通過明暗變化來間隔兩組鏡頭，讓一個場景到另一個場景之間的連接不至于節奏太過緊密。在場景與場景之間的切換，使用電影中常見的過渡方式，即用暗到亮的方式過渡；

3.5關于場景

場景，其中片頭部分由一個場景構成，正片部分由十二個場景構成，片尾部分由一個場景構成；這時的場景既是動畫中的一組鏡頭，也是軟件中的場景功能，軟件中每一個場景都有一個獨立的時間軸，非常方便操作，如果不使用軟件中的場景功能，那麼3分鐘的時間軸的幀數會被拉得很長，有4500多幀，這麼多幀都擠在一個場景，況且圖層也會很多，所以各種操作就難得多，雖然，建立了十幾個場景，但當導出SWF格式文件時，它會按各場景默認的前後次序播放。

3.5 關于歌曲音效和同步字幕

歌曲音效和同步字幕，音效是這個作品的主體，同步字幕是對音效的補充和視覺呈現。

3.6關于片尾

片尾，片尾部分的作用向觀衆宣告本片結束，謝謝觀衆的關注，備注作者信息之類；

3.7 劇情設計

最終我們選擇了歌曲《我相信》（原唱：楊培安），選定歌曲後，我們以歌曲中表現出來的自信和勵志來拟定劇本劇情：

鏡頭出現在一條通向遠方的大路面前，一輛面包車急馳而來，另一輛黑色的轎車急馳而去；天空留下彎彎的月，這時顯現出片名《我相信》停頓幾秒後，字體放大消失。

一個大學畢業二三年的青年人出現在海灘邊，他做了做準備活動，然後他居然一躍直沖到了天上去了，在天空上飛在白雲上面，然後，一不小心，撞上了一隻沖天的火箭，掉了下來；青年人在電腦桌前猛的起身，原來剛剛是做了一場夢，時間一看，己經是快要9點了（上班都快遲到了）；于是青年人風風火火的踏上上班路；在公司單位裡，一個領導模樣的人在跟青年人大談什麼，“小夥子，是不是工作幾年遇到了迷芒期了，可以考慮去充充電啊！”，青年人撓着頭，似乎在深思什麼（畢業後工作三年，當初所選的那些不喜歡的專業知識早己經抛到九宵雲外去了）；青年人開着一隻小摩托高高興興到了公園裡見女朋友；沒想到，女朋友一陣數落，青年人低着頭聽着，她閨密的男朋友畢業才兩年，己經買了小車了；青年人想起領導提的建議，找到了一家進修學校，經過半年刻苦的學習，他高興的領取了設計師資格證；經過半年多的學習，青年人現坐在電腦前勤肯的工作着，他感覺自己從來都沒有這麼專業過專注過； 一個紅色幕布的舞台上，台上的字幕寫着國際設計大賽，青年人站在台上握着獎杯，他的努力得到了回報，終于找到了自己的發展道路；青年人駕車和女朋友從公園出來，為這個勵志型的小故事交待了一個大圓滿的結尾。

第4章 動畫的制作

前期準備：

在網絡上尋找相關的圖片素材和矢量素材，包括卡通版的人物型像，卡通版的汽車及背景高樓等。

在flash軟件中，繪制出本片的卡通人物角色三視圖，包括，男主角的正視圖，側視圖；女主角的正視圖側視圖；在網上找到場景中的相關道具，汽車正視圖，側視圖，後視圖等；

場景切換（過渡場景）：

相關技術（Alpha透明度變化）

每一個場景的切換用的是同一樣的元素組合，所以每個場景的過渡動畫是共用的，将此圖層的幀複制後，在以後每個場景中粘貼；在主時間軸中新建圖層，命名為“黑布”，用矩形工具畫出一個矩形，将填充色改為黑色，全選矩形，将其大小匹配舞台的大小；再将矩形轉化為圖形元件，在時間軸中插入關鍵幀，将前面的關鍵幀的元件的Alpha設置為100%，将第2個關鍵幀的Alpha值設置為0，再在兩個關鍵幀中建立傳統補間動畫，這樣在鏡頭之初，畫面是黑色的，經過1秒之後，畫面漸漸變亮，并回到正常的亮度。

在主時間軸上再新建圖層，命名為“邊界”，将黑布複制過來，在屬性面闆中，調整元件的Alpah值為20%，這樣做出一個類似玻璃塊的透光效果，用以界定鏡頭的可見範圍，以方便編輯動畫；以後每一個新建的場景中，都将黑布和邊界的圖層粘貼在最上方的圖層；這樣不必再重新制作這個效果。

鏡頭，在Flash軟件本身中并沒有鏡頭的功能概念（像3DSmax這類三維軟件中有攝像機的功能），當我們繪制了一些背景，把舞台給遮蓋住了以後，也就看不到邊界了；所以，為了方便縮放操作，我們繪制出一個和舞台大小相同的矩形（新建一個專用圖層來放置，将此圖層置于最上方），以此來框定邊界，這樣在編輯操作中，就能方便知道哪些元素在鏡頭畫面中可見，哪些不可見，例如片頭動畫中的汽車有一隻從遠處駛入，另一隻車子則從近處駛出，如果沒有這個邊界，那麼動畫就比較難操作，因為不知道車子元件什麼時候什麼位置進入鏡頭。

在Flash創作軟件中，我們直接調整舞台中的對象的縮放比及位移，以此來實現鏡頭推拉移動的效果；比如通過放大對象來營造鏡頭放靠近的效果；通過将對象從下往上移動，來模似鏡頭向上移動。

4.1 場景一；

分鏡頭劇情（片頭動畫，“攝像機”鏡頭角度處于公路中間，然後漸漸上升）在播放一個場景後，引入主題，顯示本片歌曲名，“我相信”；

相關技術包括（Alpha透明度變化，任意縮放，運動補間）

在主時間軸中新建圖層，命名為“背景”（圖層的命名比較任意，既不必像元件的命名那樣擔心名字重複），将背景的元件拖入到舞台中，再新建圖層，命名為“車1”将汽車左的元件拖入，兩個圖層都延長幀，在汽車所在圖層再加入關鍵幀，将第一個關鍵幀的汽車元件縮小，将第二個關鍵幀的元件放大；再在兩個關鍵幀中建立傳統補間動畫；這樣産生汽車左，從小到變大并且向一側移動的動畫，也即是從遠處到近處移動的動畫；新建圖層，命名為“車2”用同樣元件縮放加關鍵幀間建立傳統補間動畫的方法，做出第二隻汽車從近處到遠處移動的動畫；

最後，用文本輸入工具，輸入文字，我相信，在屬性面闆中，把字體選擇為“華康海報體”（字體需要在計算機中安裝，如果沒有安裝此字體的計算機，有可能不能打開原文件）；将文字分離兩次（分離第一次後，文本的字體從整段變成一個個獨立的字體，分離第二次後，它被去掉字體的文本屬性，字體就己經不具有文本屬性，不再可以用輸入法修改，而變成了圖形即填充色塊），分别轉化為圖形元件，再分别分散到不同的圖層；将元件“我”的第一個關鍵幀的元件屬性中選擇Alpha值為0，再将第2個關鍵幀的Alpha值設置為100，然後在第一關鍵幀和第二關鍵

幀之間建立傳統補間動畫；這樣制作出“我”從無到顯現的動畫過程；再次插入關鍵幀，将第3個關鍵幀的Alpha值設置為0，再将其縮放值調整為150%，并在第2關鍵幀和第3關鍵幀之間建立傳統補間動畫，這樣做出“我”字從呈現再到邊放大邊隐去的動畫；用同樣的方法，制作出字體“相”和字體“信”的動畫效果。

在本作品中，最常用的動畫技術是關鍵幀動畫技術，也叫做補間動畫技術；比如制作一隻從左向右水平行駛的汽車（此技術不适應對象的三維轉向），就需要将汽車轉化為“元件”。

4.2場景二；

分鏡頭劇情（出現男主角在海邊做準備活動，然後沖上天空；）

相關技術（縮放變形，運動補間，旋轉變形）

将人物的上半身轉化為元件，将元件類型選擇為圖形元件，操作鼠标在繪圖工具欄中，選擇任意變形工具，把對象的“旋轉中心點”用鼠标移動到底下中間的位置；以制作人物上半身側彎腰的動作效果，再在時間軸上新建圖層，将默認圖層名稱（圖層1）修改為“男主角頭身”，将此元件拖入舞台，調整在适當位置。

當人物向上準備跳躍時，我們沒有再設計具體的動作，但是把人物元件在縱向上縮小，讓它看起來像壓扁的彈簧，然後，人物再向上沖，這樣顯得比較合乎物理學規律。

4.3場景三；

分鏡頭（男主在天空上飛翔，之後撞上一個火箭從天空掉下來；）

相關技術（Alpha透明度變化，旋轉變形，傳統補間動畫，Photoshop軟件基礎應用）

在網上找到火箭的素材圖片，下載後在Photoshop軟件中，用裁切工具和魔術棒工具，将素材多餘的部分去掉，導入到Flash軟件中，在主菜單欄中，選擇”修改”大類中的“将位圖轉化為矢量圖”命令，以确保在輸出動畫時畫面不産生模糊；将火箭圖形轉化為圖形元件，同樣用關鍵幀之間建立傳統補間動畫的方法做出火箭從下向上飛升的動畫；再在主場景時間軸中新建圖層，命名為“男主角側面飛”，在第200幀處插入關鍵幀，将此元件拖入舞台中，調整在适合的位置；制作出男主角水平飛行後撞上火箭的動畫。

4.4場景四；

分鏡頭劇情（男主在書房電腦前醒來，一看時間己經是上午9點了）

相關技術（旋轉變形，運動補間、逐幀動畫）

根據劇本進度，需要制作男主角從桌子上起身的鏡頭，我們将人物側面飛的元件再次利用（庫中的元件支持多次調用，并且這樣做可以提高創作的效率），拖入于舞台中，并放大以顯示局部，顯示局部，也就避免了其他身體部分的動畫制作及調整(因為鏡頭中的畫面看不到)，又豐富了動畫本身的呈現方式（有局部呈現的特寫鏡頭，也有全局呈現的全景鏡頭）；

用橢圓形工具繪畫出人物的眼睛，将線條和填充都選擇為黑色，并轉化為元件，進入元件内部，在元件内部時間軸中，将圖層延長幀，在第8幀處增加插入關鍵幀，并将第二個關鍵幀的黑色橢圓用任意變形工具壓偏；這樣制作出眼睛不斷眨眼的動畫效果。

4.5場景五；

分鏡頭劇情（男主急匆匆跑去了上班；）

相關技術（旋轉變形，運動補間）

制作人物側面的雙手擺動效果；這個場景在鏡頭中隻顯示人物上半身的動作，因為如果鏡頭包括人物的全身，那麼整體的動作的動畫制作的工作量就會大得多，因為跑步的動作涉及的肢體動作比較複雜。

4.6場景六；

分鏡頭劇情（男主在一個前輩同事面前聆聽了很多建議；）

相關技術（運動補間，旋轉變形）

畫面顯現之初，兩個人物是對齊在一起的，然後，将動畫中的人物的元件分别左右移動，以模拟攝像機在左右移動的效果，以豐富動畫的視覺效果。

4.7場景七；

分鏡頭劇情（男主騎摩托車在路上；）

相關技術（運動補間）

在主場景的時間軸上新建圖層，命名為路風景，将背景元件拖入舞台中，使用對齊面闆的對齊工具，将之對齊；再新建圖層，命名為男主騎車，制作簡單的運動補間動畫，在第一個關鍵幀中，将人物元件放在舞台的右側，在第二個關鍵幀中将人物元件水平移動到舞台的左側，再在這兩個關鍵幀中建立傳統補間動畫。

4.8場景八；

分鏡頭劇情（一個女孩子在公園前與男主談話，女主說，閨密的男友工作一年多，己經買車了；）

相關技術（任意縮放，運動補間，逐幀動畫）

氣泡的出現，使用簡單的逐幀顯示方式實現；在主場景的時間軸上新建圖層，修改默認名稱為，公園，将公園的背景元件拖入于舞台中，調整到适當的位置；

在時間軸上新建圖層，修改默認名稱為，男主，将男主角的元件拖入舞台，調整到适當的位置；

在時間軸上新建圖層，修改默認名稱為，女主，将女主角側面形像的元件拖入舞台中；調整到适當的位置中。

4.9場景九；

分鏡頭劇情（男主來到一個培訓機構；）

相關技術（運動補間）

人物從下到上的移動補間制作，這是模拟鏡頭從上到下移動的效果；在時間軸上新建圖層，将默認的圖層名稱修改為學校，将一大樓的元件拖入舞台中，并調整到合适的位置；再用關鍵幀加補間的方法，制作人物和摩托車一起向上移動。

4.10場景十；

分鏡頭劇情（字幕顯示“半年後”，男主從培訓機構中取得設計師專業技能；）

相關技術（旋轉變形，運動補間）

将男主角撓頭的元件，修改成為手持證書左右擺動的動作，這時手和證書實際上是一個獨立的元件，元件的變形中心點經過移動，加上關鍵幀和補間動畫，産生類似于鐘擺的動作。

4.11場景十一；

分鏡頭劇情（男主在專注的工作，時鐘從早上9點一直忙到下午6點）；

相關技術（運動補間）

用橢圓形工具和矩形工具繪畫出時鐘，并将時針和分針轉化為圖形元件；将元件的旋轉中心調整到圖形的底部中間附近，以便于制作時針分針繞一圓旋轉。

4.12場景十二；

分鏡頭劇情（男主站在舞台的中央，得到了一個大賽的金獎）；

相關技術（任意縮放，運動補間）

将前面人物手持證書擺手的動作拿來修改，把“證書”元件替換為“金獎杯”元件；

使用鋼筆工具和橢圓形工具繪制出綠色的舞台，和黑色的人群背影，并都轉化為圖形元件；用鋼筆工具，繪制出紅色的舞台布幕的左側，然後轉化為圖形元件，再用左側的布幕元件複制并水平翻轉得到右側的布幕；左側的布幕和右側的布幕分别放在不同的圖層，分别用關鍵幀間建立傳統補間動畫的方法，制作出布幕從中間向兩邊拉開的動畫效果；用同樣的方法，得到綠舞台後面的布幕；并放在另一個圖層；将圖層放在倒數第二個層次，以使它處在兩層布幕之間。

4.13場景十三；

分鏡頭劇情（男主開着小車，去帶着女友出去玩）；

相關技術（任意縮放，運動補間）

新建一個圖形元件，在元件内部，可以用多個圖層繪制出汽車的形像，新建一個圖層，把人物放入，将汽車玻璃的圖層放在人物的上方，這樣能讓“玻璃”遮擋在人物前面，得到一個模拟現實的效果。

在主場景時間軸中，在前面的關鍵幀中，将汽車縮小至百分之10，然後再縮放至100%，以産生小車從遠處向近處行駛的動畫。

第5章 音效的加入和同步字幕的制作

5.1聲音的導入：

将MP3文件導入到庫中，再在圖層中插入幀，在幀屬性中選擇此聲音文件（的名字），并适當延長幀。

5.2歌詞字幕的制作：

相關技術（傳統補間動畫和遮罩層動畫技術）

在網上找到這首歌的歌詞，複制下來在軟件中粘貼；編輯成一句一行，調整字體的大小；新建一個圖層，用主工具欄中的矩形工具畫出一個長方形，将此圖層設置為遮罩層；将上面的歌詞轉化為圖形元件，當歌曲向前推進時，歌詞适當的向上移動，以兩相對應，遮罩層将顯示的區域限制在一定範圍；而歌詞元件的适時上移，又使得歌詞文字和歌曲進度相一緻。

5.3整合文件：

首先，将前面構成各個場景的Fla文件導出SWF格式文件；在軟件中，再另外新建一個Fla文件，把該SWF文件導入，這時發現，時間軸上的幀變成了一連串關鍵幀，但是，當動畫輸出時，畫面的内容沒有明顯變化；

新建一個圖層，将MP3放入；再新建一個圖層來放置歌詞，及另一個圖層來制作遮罩效果；

歌詞完成後，導出最終的SWF格式文件；最終的SWF文件就是這個MTV的成片。動畫完成後，在鍵盤上按住enter ctrl彈窗播放測試動畫。

結束語

關于編劇，作品的劇情，在定稿之前曾制定過另一個版本，另一個版本劇情是:原先的女主終于嫌棄我們的男主角“不夠上進”而離去，然後男主角經此挫折才發奮圖強去充電學習，最後成功轉型一個高端職業，轎車終将是有的，隻不過最後一起坐在副座裡面的女主角換了，不是那個男主角最初希望她陪伴身邊的人；但是，這樣的故事劇情就摻入了一大半的感傷情愫；就不是我們最近設定的一個勵志小故事，這個小故事，結合歌曲的表達，它是一個滿懷信心的人對未來的憧憬，所以誰也不至于憧憬這感傷的故事，所以為了故事符合勵志的條件，修改成為了最終的版本，“女主角雖有過抱怨，卻不曾離開”。

關于技巧，在這個作品進入實際制作的時候，我發現了許多東西是課堂上沒有學到的，許多軟件的功能應用和技術的組合等等，為了完成這個作品，我在網絡上查閱了大量的相關技術論壇，無數次把别人的小技巧“拿來”；通過無數次借鑒分析網絡上的優秀作品，把閃光的創意移花接目到自己的作品中，雖然在課堂上的學習，一切工具的操作和功能的應用似乎是那麼的清晰可辨，但是一個複雜作品，所遇到的大問題和小問題無數（小到找一個雲朵的素材，大到确定人設的形像），而且問題不論是大是小，每一個都令原本就不充沛的制作時間被無情的消耗；通過無數次嘗試和測試才完成了這個作品。

緻謝

XXXXX

參考文獻

[１] 宗傳玉 肖偉 Flash動畫設計　[M]南京大學出版社２０１１－７－８

[２]羅永紅、周曉莺、陳靜、李海濤　Flash動畫創意設計項目實戰[M]清華大學出版社２０１５－１１－１９

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!