- Flash動畫原理與實戰
- 齊朝暉 鄭飛編著
- 151字
- 2018-12-29 18:41:53
第4章 Flash技巧
每種軟件都有它獨特的使用技巧,Flash也不例外。Flash是一個功能很多的軟件,目前的Flash MX在Action Script方面又有大量改進。但動畫制作功能方面,仍然沿用了前面的版本,沒有太多的改進。這不能不說是一種遺憾。
Flash動畫制作功能沒有改進,其各種技巧也仍然沿用著。這些技巧幾乎包含了動畫制作的所有方面,貫穿動畫制作的整個過程。
4.1 線框草稿
與以前使用傳統動畫工具(鉛筆、紙、燈箱和定位釘)進行創作相比,Flash的最大好處就是可以很方便地實時檢查動作。
在Flash中完成一個動作,就可以直接看到它的效果(在源文件中或生成的swf文件中)。而在以往的傳統動畫中,要做到這一點可沒這么方便。因為傳統動作都是畫在一張張彼此分開的紙上的。要想將它們連貫起來,可以將這種簡單的鉛筆稿拍成膠片環(首尾相接循環放映,便于觀看),通過實際放映來檢測。
這畢竟是一種麻煩而增加成本的辦法。更多的動畫家采用翻看手稿的辦法。那時,熟練地翻看畫本來呈現動作幾乎成為動畫家必備的一種技能。這種技能被稱為“鉛筆檢測(Pencil Test)”,如圖4-1所示。

圖4-1 鉛筆檢測
圖4-1中顯示了從前向后翻和從后向前翻兩種方法。據說,有經驗的動畫家多采用后一種翻法。
在Flash中,或者說在幾乎所有動畫軟件中,這一切都已成為歷史。電腦生成的動畫可以很方便地隨時觀看效果,為修改提供了最大的便利。
而且,軟件提供了各種方便,讓我們把正在繪制的當前頁與前后頁進行對照。在Flash中,可以靈活運用Onion Skin來達到這一目的。
正是基于這一點,制作畫動的效率更高,制作起來更方便。也正是基于這種方便性,我們可以采取類似“線框草稿”這樣的做法。
所謂線框草稿是指在制作某個動畫時,如果對動作吃不準,把握不是很大時,可以先用線框(Wireframe)的方式畫出很簡略的草圖,其目的是在時間軸上檢查動作的正確性。當對動作感覺滿意后,再將線框改成設計好的動作。
下面來看一個簡單的例子,皮球精靈如圖4-2所示。這個動作的主角是一只皮球精靈,它按照前面講過的彈性和變形規律在不停地跳。

圖4-2 皮球精靈
這里采用26幀的循環,每2幀重復,實際一共畫了13幀。觀察精靈的動作,應該可以回憶起前面講到的一些動畫原理。
在實際創作中,可以先用線框勾勒出這個動作的草稿。線框草稿如圖4-3所示。

圖4-3 線框草稿
用一個symbol來代表精靈的身體。需要注意草稿中的順序號與圖4-2中的差別。圖4-3中還沒有加上中間的延時幀。我們可以看到用很隨意的線條刻畫出的關鍵動作。可以將這個symbol拉到scene中檢測。
調整好動作后,再回到symbol中,在原有的基礎上加一新層,在新層上加上手,如圖4-4所示。

圖4-4 加上手
注意在圖4-4中手隨身體的變化而變化的規律,關鍵是把握其方向性。請對照圖4-3來看。
在圖4-4的基礎上,畫上眼睛等,增加臉部細節,如圖4-5所示。在symbol中再增加新的層。可以增加任意多的層,對草稿進行必要的修飾。

圖4-5 增加臉部細節
以上操作都是用線框草稿完成的,重點在于動作的正確性,描繪本身不一定很嚴格。線框草稿使用淺藍色,以便于后面具體描繪。
在完成所有細節后,在symbol的最上面增加一層,以其下面各層的藍色線框為藍本,用工整的線條畫出精確的形象。這時的工作重點就放在了形象的把握上,因為動作問題已經解決了。精確形象如圖4-6所示。

圖4-6 精確形象
勾勒出滿意的形象之后,就可以將所有線框層刪除了。
最后在所有幀之間加一延時幀,形成如圖4-2所示的一個symbol。可以再加上一點陰影和速度線增強效果。
應該經常使用類似線框草稿這樣的技法。有時甚至就是在Flash里隨意地亂畫,只是為了追求一種新奇的動作而先不必管造型的細節。用這種方法可以快速制造出一些動作來。如果覺得哪個滿意,可以進一步按照上面介紹的方法最終完成它,或者將所有有價值的線框草稿都保留起來,待遇到實際問題時,打開這個“庫”看看哪些可以用,再將其細化也不遲。
如圖4-7所示是一個簡陋的線框草稿。

圖4-7 一個簡陋的線框草稿
面對這樣的草稿,修改是必須的。線框草稿也不一定要使用【鉛筆】工具,使用【Brush】會感覺更舒適、更流暢一些。這和個人的習慣有關。
4.2 形象描繪
運用其本身提供的各種工具,Flash可以很方便地創作出形象。但有時候還需要引入(import)其他軟件制作的圖形。
4.2.1 矢量化圖形
我們看看著名的Flash動畫家Fernandez給我們總結的方法。
有許多種方法可以讓你將手繪的作品引進到Flash中。這里介紹的只是其中一種。運用這種方法,可以將你的美術作品制作成精彩的、字節數很小的影片。
Flash的繪畫工具比Photoshop、Illustrator和其他市場上常見的繪圖軟件更容易使用和掌握。
首先在紙上畫好圖形,然后通過掃描或video采集等方法,將它們放置在Flash的工作區內。引入的圖形不一定是手工繪制的,也可以是一張照片甚至一個電視截屏,只要能夠看清楚線條、能夠描繪它就可以。如圖4-8所示的是掃描手繪作品作為底圖。

圖4-8 掃描手繪作品作為底圖
不必擔心文件的大小和質量,按照這種方法,底圖只是作為一個參考,當全部工作完成時將被刪除。可以運用Transform工具將底圖放大到最適合工作的大小,如圖4-9所示。

圖4-9 放大圖形以便于描繪
現在Layer1包含了底圖,我們先將它上鎖,以免誤操作改變了底圖,然后在其上面加上新的一層Layer2,在這一層中對底圖進行描繪。這時,需要選擇一個對比強烈的顏色來描繪,以便很容易地與底圖區別開來。這里選擇紅色,分層如圖4-10所示。

圖4-10 分層
用直線描繪圖形。注意,描繪時盡量少用直線。一般的做法是從一點直接拉直線到另一點,如圖4-11所示。

圖4-11 用直線描繪
圖4-11中的這些直線,可以很容易地將它們拖曳、調整,以適合底圖的真實形狀。調整直線很容易。選中Arrow工具(黑色箭頭),當在一條直線上移動鼠標時,黑色箭頭下面呈現一小段弧線,這樣就可以拖動鼠標,改變直線的弧度;當鼠標移動到直線的端點時,黑色箭頭下面呈現出一個直角,這時拖動鼠標就可以拖動這個點,改變直線的方向和角度。
采用這樣的描繪、調整方法,在技術上的最大意義在于不增加結點,在不增加文件字節數的情況下,更好地適應了底圖。
用這種方法描繪整個底圖,如圖4-12所示。如果需要做很細致的、局部的調整,可以用zoom工具放大。

圖4-12 描繪整個底圖
在描繪的過程中,應該經常開、關Layer1上的visible開關(即屏蔽底圖、打開底圖)來隨時檢測Layer2中描繪的效果,如圖4-13所示。

圖4-13 隨時檢查描繪效果
描繪完畢后,將底圖所在的Layer1刪除。完成的圖形如圖4-14所示。

圖4-14 完成的圖形
此時可以改變線條的顏色,一般改成黑色,還可以為圖形上顏色。這個圖形可以作為下一步Flash動畫的基礎。最終完成的圖形如圖4-15所示。

圖4-15 最終完成的圖形
4.2.2 Todd Gallina的系列片“Cooking with Bigfoot”
Todd Gallina是系列片“Cooking with Bigfoot”的動畫制作者。迄今為止,這一系列已經超過了15集,每集的容量在1~1.5兆字節之間。現在讓我們看看Gallina這一成功的Flash系列片在最開始時是如何啟動的。
第1步,在紙上進行素描,構思Bigfoot(大腳怪)的形象。這時,在畫家筆下會出現許多樣子,第1步的創作形象如圖4-16所示。

圖4-16 第1步的創作形象
經過篩選、合并和組合等手段,形象逐漸定為圖4-16中7的樣子。重新將其定稿,畫成一個完整的素描。定稿的形象如圖4-17所示。

圖4-17 定稿的形象
將這一形象掃描成jpeg圖形,引入到Flash中。引入jpeg作為底圖后,在其上面增加一層,如圖4-18所示。

圖4-18 增加一層
第2步,在新的一層上用Brush工具(帶壓感)描繪底圖,如圖4-19所示。

圖4-19 描繪底圖
Flash提供4種描繪工具,如圖4-20所示。

圖4-20 4種工具
其中
● Brush:模擬刷子。
● Brush with pressure:在有壓感筆的條件下,更好地模擬刷子。
● Pencil:畫粗細一致的線條。
● Pen:畫貝濟埃曲線。
可以根據需要和個人的不同習慣,用不同的工具描繪底圖。
如圖4-21 所示為使用不同工具描繪出的不同效果。其中,左側是用壓感Brush工具,右側用Pencil工具(最外側的輪廓線),線寬定為4。

圖4-21 用不同工具描繪出的不同效果
在實際工作中,幾種工具結合起來使用最常見。
第3步,為Bigfoot上顏色。在Web-256安全色中,選擇一種最適合Bigfoot的顏色,如圖4-22所示。

圖4-22 上顏色
一旦選擇好顏色后,用Paint Bucket和Brush兩種工具上顏色,如圖4-23所示。

圖4-23 上顏色的工具
第4步,將上好顏色的Bigfoot分解。截下的身體部分轉換成一個個單獨的symbol,如圖4-24所示。

圖4-24 分解
圖4-24只是一個示意圖,為了讓大家看清楚。實際上每個部位還都在原位置。
請注意,這里為Bigfoot增加了一條圍巾。這條圍巾不是個可有可無的道具,它對動作起著關鍵作用。后面還將繼續討論。
將截下的身體部分分配到各自的層里面去,如圖4-25所示。

圖4-25 分配到層
可以使用Flash MX中新增加的層文件夾使層的管理更方便,如圖4-26所示。

圖4-26 層文件夾的使用
在library(制作時的庫)中,制作身體各個部位的symbol,每一種symbol代表一種姿勢。當制作動作時,直接用一個symbol代替另一個。胳膊庫如圖4-27所示。

圖4-27 胳膊庫
圖4-28中,用相同的方法制作嘴庫,如圖4-28所示。畫好各種嘴型,起好名字,用于Bigfoot的說話。

圖4-28 嘴庫
為了使動作更生動,在Bigfoot嘴動的同時,使他的頭也做相應的微小移動,如圖4-29所示。

圖4-29 頭部移動
如果仔細將圖4-29與圖4-28比較可以發現,它的頭部向前面稍稍突出了一點。
注意:這里應該可以體會,為什么給Bigfoot加上了一條圍巾。這是一個很古老、卻很行之有效的動畫技巧,使得頭動時身體可以保持獨立(不動)。
此時Bigfoot的形象就做好了。按照同樣的方法,再制作出片中其他的角色,如圖4-30所示。

圖4-30 一個另外的角色
現在,將各種角色安排到場景中。在做各種動作之前,先引入聲音文件,如圖4-31所示。

圖4-31 引入聲音
在時間軸上的聲音文件可以使我們更容易安排角色的說話和動作。如圖4-32所示是一個完整的對話場景。

圖4-32 一個完整的對話場景
按照這種制作方法,可以很容易地在新的一集中增加新的角色,增加各種新的“身體庫”。隨著制作進程,這個庫將一直增長、壯大,甚至越往后制作越簡單,如圖4-33所示。

圖4-33 增加新角色并不是很困難的事
通過以上的描述,我們可以對國外如何高效、經濟地制作Flash系列劇有個大概的了解。
4.3 形體分割
在Bigfoot的制作流程中提到了形體分割的方法,即先做好一個形象,再將這個形象按照身體的各個部位分割下來,做成一個個單獨的symbol。在Flash制作中,這是一個普遍采用的技巧。這一節專門討論這種技巧。
當然,這種組織造型的方法也有限制,它的形象只能在一個角度(方向)上做動作,與傳統美術片中的“剪紙片”類似。因此,Flash動畫家Fernandez將它稱為“一維造型(1D Model)”也是有道理的。
采用形體分割方法之前最重要的一點是事先設計好動作。在畫角色的時候要特別為這些未來的動作提供方便。角色如圖4-34所示。

圖4-34 角色
事先就決定好這個角色的動作:從畫面的一側走向另一側。在畫的過程中要時刻想到這一點,因此,他的頭主要朝向側面,他的身體由“可拆卸”的組件構成。但圖中的角色不能提供完全的四肢信息,因而在畫的時候應該采用一種“兼顧”的方法。
這種方法叫“讓角色擺出一個概括性高的Pose”,如圖4-35所示。他的左右手、左右腳都是不一樣的。左右手的不同是為了互相區分開,右腳腳尖接觸地面是考慮到了在做類似走路這樣的動作時,腳應該具有的形態,左腳則是一種平常的狀態。

圖4-35 讓角色擺出一個概括性高的Pose
因此,這樣一個靜態的造型基本具備了我們需要的所有身體部件的不同形態。這樣的造型才適合下一步的“分割”。
將形體分割成一塊塊并不是一件很難的事情。仔細研究一下這個形體,考慮動作的幅度,研究一下哪些部位是活動的,哪些是不活動的,連接點在哪里。
將原始造型保留,復制一個原始造型,用復制的造型進行分割,原始造型作為未來修整的參考,如圖4-36所示。

圖4-36 用復制的造型分割
圖4-36是按照矩形截取的,因此不可避免地留下不需要的部分和缺少的部分(比如身體的上半部分),根據原始造型進行修補。最終分割的結果如圖4-37所示。

圖4-37 最終分割的結果
注意,在圖4-37 中有些省略的地方,這些地方主要是看不出左右的部分就用一個代替了。像胳膊和腿。但請注意,胳膊和腿都被分成了上下兩個部分,其關節部分有一個原則:凡是上面壓住下面的,比如,小腿在關節部分壓住大腿,那么小腿關節處圓形部分的輪廓線就被處理掉了,同樣,前臂關節處的輪廓線也被抹掉了。
下面將所有分割下來的部位都轉化成symbol。轉化時,根據部位給它們起好相應的名字,如圖4-38所示。

圖4-38 轉化成symbol
現在可以用這些組件來構成角色,擺動作了。
記住Flash的特性,試著改變instance的屬性來產生不同的效果。這些都不增加文件的容量,卻可以創作出千變萬化的效果。
看看你能不能做出各種動作來?分割組合的動作如圖4-39所示。

圖4-39 分割組合的動作
4.4 第四種symbol
Flash的中心思想是symbol的概念,甚至可以這樣說,Flash就是在用symbol來構成動畫。使用symbol的好處是能大大減少文件容量,修改起來十分方便。
symbol一旦被放置在場景中,就被稱為一個instance,可以通過改變instance的屬性來達到各種效果。symbol被引用為各式各樣的instance,幾乎不消耗任何字節資源。
而當我們對library中的原始symbol進行修改時,其在場景中其他symbol中的各個instance也隨之自動改變。
這是Flash動畫最特殊、最方便的地方。
在為作品上顏色時,時常會碰到這樣的問題:一種顏色已經被許多地方使用,當我們對這個顏色不滿意想用另外一種顏色代替它時,修改起來就很麻煩,只好一點點地將新選中的顏色填充到原來顏色的區域中去代替。
現在假設,如果有一種顏色symbol,我們用它填充許多地方之后想改變一下時,只需要修改這個symbol,則所有用它填充的部分都自動改變了,這會方便很多。
實際上,我們完全可以自己制作出這樣的symbol。Flash提供了三種類型的symbol:Movie Clip、Button和Graphic。現在,我們為它新增加一種Color類型。
請看下面的例子。如圖4-40所示是一個外星人。在Flash中用Brush工具繪制,現在想給它上顏色。

圖4-40 外星人
先選擇一種顏色作為衣服的顏色。這里選擇99cccc(Hex值的顏色)的藍綠色,如圖4-41所示。

圖4-41 選擇衣服的顏色
再選擇一種皮膚的顏色。這時,需要打開其他任意一種繪圖軟件。這里選擇Fireworks 3.0。在Fireworks 3.0中,新建一個10×10的小文件,如圖4-42所示。

圖4-42 新建一個10×10的小文件
然后,任意選擇一種顏色作為皮膚的顏色,這里選擇#cccc66的黃綠色。用它來填充小方塊,如圖4-43所示。

圖4-43 填充顏色
將這個文件另存為png類型,命名為“aa.png”,如圖4-44所示。

圖4-44 保存文件
這時注意,不要將這個文件關閉。返回Flash,依次選擇File/import命令,引入剛才的aa.png文件,如圖4-45所示。

圖4-45 引入png文件
這時,在畫面的左上角會出現aa.png的小方塊。選中它,然后刪除。
打開Color Mixer面板,在中間的下拉菜單中選擇Bitmap選項,我們會發現,png的顏色已經在這里了。選擇不同的顏色模式,如圖4-46所示。

圖4-46 選擇不同的顏色模式
現在就用它來填充外星人的皮膚,皮膚顏色如圖4-47所示。

圖4-47 皮膚顏色
現在假設我們對這個顏色不滿意,可以打開library,右鍵單擊aa.png,選擇“Edit with Fireworks”選項,改變symbol如圖4-48所示。

圖4-48 改變symbol
這時,自動切換到Fireworks,選擇一種新的藍色#99ffff,填充小方塊,改變顏色如圖4-49所示。

圖4-49 改變顏色
此時打開File菜單,發現Save變成了Update,選擇Update,如圖4-50所示。

圖4-50 選擇Update
現在切換回Flash,顏色已經自動改變了,如圖4-51所示。

圖4-51 顏色自動改變了
這里可以把aa.png看成第四種symbol,同樣起symbol的作用,只不過修改它需借助外部工具(Fireworks)而已。
4.5 位圖的使用
Flash作為一個矢量動畫軟件,使用中也不排除位圖的引入。最常見的是在影片中當做背景。一般概念中,矢量圖形具有文件容量小的優點,但實際上,有些情況下使用位圖比畫同樣復雜程度的矢量圖形更“節省資源”。一般在圖比較復雜的情況下,直接引入位圖比使用描繪的矢量圖播放速度更快。
4.5.1 光暈的表現方法
光暈用Flash本身不容易做出來,一般采用位圖方法,如圖4-52所示的片頭。這是一個網站的片頭,其中有一個明顯的模糊效果在背景上移動,這個效果大大增加了速度感和視覺沖擊力。

圖4-52 片頭
用其他軟件進行分析,可以從影片中提取出如圖4-53所示的純位圖符號。

圖4-53 純位圖符號
可以清楚地看到,這是通過類似Photoshop中【高斯模糊】濾境達到的效果。引入此位圖,轉變成symbol,在影片中可以方便地調用。
具體制作過程參見4.5.2節。
4.5.2 焦距的變化
在一些影片中我們常常看到焦距變化。在一個景深比較大的鏡頭里,焦距時而對準比較靠近的一個物體,時而對準另一個比較遠的物體。
在Flash中能否做出類似的效果呢?焦距變化1如圖4-54所示。圖中表現的是一個人和外星人對話的鏡頭。在這個鏡頭中焦距對準外星人,人變得模糊了。

圖4-54 焦距變化1
焦距變化2如圖4-55所示。圖中焦距對準了人,外星人變得模糊了。

圖4-55 焦距變化2
下面詳細敘述這個效果的制作過程。
首先,在Flash中建立一個新文件。做一個抽象的背景,如圖4-56所示。

圖4-56 背景
然后,分別加上兩層,在兩層中分別繪制人和外星人的形象,如圖4-57所示。

圖4-57 增加兩層分別繪制角色
分別將兩層中的形象轉化成兩個symbol,如圖4-58所示。

圖4-58 將形象轉化成symbol
這里,它們分別被命名為“alien”和“man”。增加一個場景,在這個場景中引入alien,如圖4-59所示。

圖4-59 在新增場景中引入alien
然后,依次選擇File/Export Image,輸出一個bmp文件。輸出時選擇Minimum Image Area,如圖4-60所示。

圖4-60 輸出bmp
現在打開Photoshop剛剛生成的bmp文件。用Magic Wand選中所有alien的范圍,如圖4-61所示。

圖4-61 選中alien
復制選中的區域,然后粘貼到Windows的剪貼板上。
打開一個新文件,注意將區域設置得比默認值稍微大一點。默認的大小是根據剪貼板上的圖形來確定的。下一步要做模糊處理,做完后的圖會比原始圖稍微大一點。背景設置為透明,如圖4-62所示。

圖4-62 新建文件背景為透明
將剪貼板中的圖形粘貼到新文件中。在菜單中選擇濾鏡中的高斯模糊(Filter/Blur/Gaussian Blur)對圖形進行處理,如圖4-63所示。高斯模糊的半徑可以設置為2.5。

圖4-63 應用模糊濾鏡
現在,選擇Magic Wand工具,選擇透明部分,再將選區做Inverse(反選),將模糊后的圖形選擇好。Tolerance的值可以設置成30。選擇模糊后的圖形如圖4-64所示。

圖4-64 選擇模糊后的圖形
注意,這時必須將選區保存。將整個圖形保存成一個png文件。
回到Flash,引入這個png文件。這樣就可以看到模仿模糊的效果。
引入的png文件在亮度上會有變化。將引入的png轉換成一個symbol,命名為“alien_b”。在引用它時,調整它的instance屬性的brightness值,大致為30%左右,如圖4-65所示。

圖4-65 調整引用屬性值
用同樣的辦法處理人的圖形,也做成一個模糊效果的symbol在場景中引用。
這樣就很容易完成圖4-54和圖4-55中的效果。當人說話時,焦點對準人,外星人模糊;外星人說話時則相反。
4.6 Flash減肥
雖然寬帶正迅速普及,但考慮到網絡的平均水平,在制作Flash影片時,還是應該注意把文件字節數做得盡量小。此外,簡潔也是技術上的要求,使用symbol可以使文件容量有效地減小,而且修改起來也方便。
影片減肥可以從兩個方面著手:一方面,對于繪制好的圖形,應最大限度地減少結點數;另一方面,盡量使用symbol,symbol的思想應該貫穿一個Flash動畫師創作活動的始終。
4.6.1 減少結點
矢量圖形的特點是通過結點來控制形狀。這些結點越多,文件就越大。試著用帶壓感的Brush工具來隨便畫一個形狀,如圖4-66所示。

圖4-66 隨意畫的一個形狀
按【Ctrl+Enter】組合鍵生成一個swf類型的文件,記住它有多大。
選擇整個形狀,將其復制到剪貼板。增加一個場景,在新的場景中粘貼整個形狀。
選擇Subselection工具(白箭頭),單擊這個形狀的邊緣出現一些結點,如圖4-67所示。

圖4-67 出現一些結點
在圖4-67 中,形狀的邊緣出現一些帶顏色的小方點,這些就是控制形狀的結點。選中一個結點,拖動這個點的兩個控制柄,可以改變形狀,如圖4-68所示。

圖4-68 通過調整結點的柄來改變形狀
現在按【Ctrl+Z】組合鍵恢復原來的形狀。隨便選擇一個結點,按【Del】鍵就可以將它刪除。在不損害基本形狀的情況下,盡量多刪除幾個結點。在形狀的尾部,冗余結點尤其多。最后可以將整個形狀的結點減少到5個。

圖4-69 將結點減少到最少
如果對形狀不滿意,可以通過Arrow工具(黑箭頭)仔細調整各個結點之間的弧線。最后可以形成如圖4-70所示的形狀。

圖4-70 調整好的形狀
圖4-70的形狀和圖4-66的形狀比較,可以發現沒有太多的改變。
此時再按【Ctrl+Enter】組合鍵生成另一個swf。這個是經過減肥后生成的swf,把它和剛才那個swf進行比較會發現,它減少了30多字節。
不要小看這30多字節,在一個復雜作品中,如果對每個形狀都能采取這樣的步驟精心“減肥”,最后形成的文件必將十分簡潔。
使用【Modify/Curves/Optimize】命令可以自動減少結點數。
4.6.2 symbol的使用
symbol不但可以直接放置在場景中,也可以被其他symbol引用,symbol套用也是經常用到的技巧。看下面兩個例子。
1.領帶的例子
這個例子中要表現三個穿著都一樣的人,只是領帶的顏色不一樣。
首先畫一個人的身體,如圖4-71所示。

圖4-71 人的身體
為了看清楚,選擇比較深的顏色作為底色。將它上好顏色,留下領帶部分不上顏色。將這個身體轉換成一個symbol,命名為“body_00”。
下面用它來做出三個系著不同顏色領帶的人。
按【Ctrl+F8】組合鍵,新建立一個symbol,命名為“body_01-1”。進入body_01-1的編輯界面,這是一個空的symbol。將body_00拽入,在info面板上調整它的位置,使中心定位在(0,0)點上,如圖4-72所示。

圖4-72 定位
然后增加一層,將新的一層調整到body_01-1層的下面。在新一層中的領帶位置用任意顏色畫一個方塊,起到填充領帶顏色的作用,如圖4-73所示。

圖4-73 填充領帶顏色
在圖4-73中,為了看清楚畫面,body_01-1所在的Layer 1采用Outlines方式顯示。這個領帶的顏色是藍色的,實際效果如圖4-74所示。

圖4-74 實際效果
在library中,右鍵單擊body_01-1,選擇【Duplicate】命令,復制一個symbol,命名為“body_01-2”。
打開body_01-2,在下面一層中把方塊的顏色改為黃色,如圖4-75所示。

圖4-75 改變方塊的顏色
這樣,就做好了另一個人的身體。依次類推,再復制一個“body_01-3”,改變方塊的顏色為紫紅色。這樣就做好了3個形象。
最后再加上頭的symbol,最終效果如圖4-76所示。

圖4-76 最終效果
這個例子完全采用了symbol套用的方法。
2.四色小人的例子
這個例子和領帶的幾乎相同,但symbol更講究套用。
有這樣一個動畫:4個小人走路,姿勢完全一樣,只是顏色不同,如圖4-77所示。

圖4-77 四色小人
先建立一個17幀的symbol,命名為“walk_01”,屬性為Movie Clip。17幀全部為keyframe,逐幀畫出走路的形態,如圖4-78所示。

圖4-78 走路的形態
有人會很自然地選擇這樣的步驟:打開library,選擇“walk_01”,右鍵單擊選【Duplicate】命令,命名為“walk_02”,在“walk_02”中,單擊洋蔥皮功能中的【Edit Multuple Frames】按鈕,然后選擇所有幀,改變顏色,如圖4-79所示。

圖4-79 改變顏色
按照這種做法,再做出不同顏色的“walk_03”和“walk_04”兩個symbol。
這是一種很自然的想法,操作起來也很容易,但我們如果從“減肥”的角度去考察會發現一些問題。很明顯,這里面有重復的內容,按照“凡是重復出現的內容就把它做成symbol”的原則應該用symbol來解決問題。但這里沒有用到symbol。
再來看效果。把這樣形成的4個symbol引入場景,形成swf的大小是10字節。
下面用symbol的思路制作這個動畫。新建一個Flash文件,首先建立一個Movie Clip屬性的symbol,同樣是17幀,全部設置為keyframe,逐幀畫出小人走路的形態。小人的輪廓是用線寬1的【鉛筆】工具畫出的。現在選擇【箭頭】工具(Arrow Tool),選中第1幀中所有的線條,右鍵單擊,然后選【Cut】命令。增加一層,新的一層也全部設為keyframe。在新的一層的第1幀中右鍵單擊,選擇【Paste in Place】命令。這樣就把第1幀的顏色和線條分離了。用同樣的方法,把所有17幀都做同樣的處理,如圖4-80所示。

圖4-80 顏色和線條分離
然后在時間線上選擇所有【線條】幀,右鍵單擊,選擇【Copy】命令。新建一個symbol,命名為“line”,右鍵單擊選擇【Paste in Place】命令,將17幀線條做成一個單獨的symbol。用同樣的方法,將17幀填充的顏色做成一個單獨的symbol,命名為“color”。
返回到“walk_01”,清除掉原來的所有keyframe,將color引入下面一層,位置為x=0,y=0,將“line”引入上面一層,位置x=0,y=0,組合出symbol,如圖4-81所示。

圖4-81 組合出symbol
這樣形成的symbol和剛才制作的畫面從表面上來看沒有什么區別,但它是用另外兩個symbol組合出來的。
下面的操作將體現出這種做法的特點。在library中選中“walk_01”,右鍵單擊,選擇【Duplicate】命令,命名為“walk_02”。打開此文件,選中位于下層的【Color】的instance,通過屬性面板改變它的【Color】參數,隨便選一種顏色,Tint=100%。這樣也達到了改變顏色、做出另一個symbol的目的,屬性面板如圖4-82所示。

圖4-82 屬性面板
用同樣的方法另外做出不同顏色的“walk_03”和“walk_04”兩個symbol。
把這樣形成的4個symbol引入場景。
現在來檢驗swf的效果。生成swf類型的文件,它的大小是8字節。比第1種方法小了2字節。
也許你會說,有什么了不起,只小了2字節,實際上并不只是節約2字節的問題。我們繼續做試驗,如果按照第1種做法,復制出8個不同顏色的symbol,最終形成的swf為16字節,而用第2種方法復制出8個不同顏色的symbol,最終形成的swf依然是8字節!
對symbol調用instance是Flash的精髓,它幾乎不占字節數。不管你是在場景中調用還是在另一個symbol中調用。
4.6.3 一般原則
這里列出的是制作一般Flash的原則。有些是針對源文件減肥的策略。
(1)Flash影片減肥的第一要素是盡量使用symbol。
(2)盡可能少使用一些特殊的線條類型,比如虛線、點畫線等。實線較之上述特殊線條類型占用資源更少。而用鉛筆繪制的線條比用刷子繪制的線條又要占用較少的資源。
(3)最好將動畫中不動與變動的元素制作到不同的圖層上。
(4)使用“Modify/Curves/Optimize”命令可以最大程度地減少用于描述圖形輪廓的單個線條的數目。
(5)限制字體和字體樣式的使用。在Flash中最好不要使用多種中文字體。
(6)盡可能多地將聲音壓縮,設置為MP3格式,因為在相同的質量下,MP3占用的空間更少。
(7)嵌入字體(embedded fonts)會增加文件的尺寸,能少用盡量少用。
(8)盡量避免對位圖進行動畫處理,而將其作為背景或者靜態元素。
(9)限制每個關鍵幀中的變化區域,令動作的發生區域盡可能小。
(10)盡量將元素或組件群組化(Group)。
(11)利用instance屬性的顏色特效菜單對單一符號制作出多個不同顏色的實體,然后加以應用。
(12)使用漸變色要慎重。使用漸變色填色大約需要50個字節,比用單色填充的文件量要大許多。
(13)最后別忘了把做好的Flash動畫在不同性能的計算機上、不同操作系統的計算機上多測試幾次。
4.7 習題
請用線框草稿的方法,用最快的速度完成下列兩個動作:
(1)一個人跑步被一塊石頭絆倒;
(2)爬起來后天上掉下大石頭將其砸扁。
可以參考下面的圖來做。請務必注意動作要符合動畫原理!

(3)引入一張你喜愛的照片做底圖,任意選擇工具進行描繪,不必用它來做什么動畫,只是體會一下矢量化的方法。
(4)用制作Bigfoot的方法自己制作一小段影片,可以是很簡單的兩個角色的對話。但在最簡單的場景中盡量使對話的動作豐富多彩一些。
(5)在4.3 節的講解中,并沒有實現開始時要做的“從畫面的一側走向另一側”。現在,請讀者實際來操作一下,看看怎樣把這個動作做好。
(6)4.6.2節中的兩個例子看起來很相似,但其最大的區別在哪里?請總結。
- 網站建設與網頁設計從入門到精通Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript
- Bootstrap響應式Web開發
- 園區網互聯及網站建設
- 小白實戰大前端:移動端與前端的互通之路
- Div+CSS網頁制作實戰教程
- HTML5+CSS3網頁制作基礎培訓教程
- 全能網頁設計師精煉手冊
- Photoshop網頁設計從入門到精通
- 中文版Dreamweaver CC+Flash CC+Photoshop CC網頁設計實戰視頻教程
- 淘寶店鋪頁面設計與裝修實戰教程
- 電子商務網頁設計(第二版)
- Web開發者晉級之道:架構、模式和領域驅動設計
- HTML+CSS+JavaScript網頁制作(第2版)
- 秩序之美:網頁中的網格設計
- 從零開始讀懂Web3