Flash動畫學習指南九:預設與自定義

轉自:http://bbs.9ria.com/thread-76129-1-1.html


要求:
  • 預備知識:
    對Flash工作區的基本瞭解
  • 需要的工具:
    Flash Professional CS4 (下載)
  • 示例:
    motion-is-awesomer.zip
  • 用戶等級:
    初級



      緩動指的是動畫過程中逐漸的加速或減速,這樣可以使你的的補間動畫看起來更真是或更自然。也許你會運用緩動來實現某種特殊的運動,如隨機移動、小球回彈,從而使動畫任務完成的更快速與簡單。舉個例子,你可以使用一種緩和的緩動曲線,通過不斷調整改變速率,來實現一種更自然的加速或減速。你甚至可以使用緩動來爲你的各種屬性創建隨機效果,比如爲物體的x、y值添加緩動來實現隨機抖動,或者爲物體的alpha值添加緩動來實現隨機閃爍。
爲補間動畫添加預設和自定義
      Flash提供了兩種方法來運用緩動到補間動畫:1、通過動畫屬性監測器中的緩動滑塊來爲你所創建的補間動畫指定一個緩動值;2、使用動畫編輯器爲一個或多個屬性應用預設緩動或自定義緩動。(如圖50)

圖50. 該SWF文件演示了以下緩動:上方實例通過動畫屬性面板來應用常規緩動(aka簡單減速);中間實例應用了正弦波形預設緩動;底部實例應用了自定義緩動。從右向左運動的垂直線沒有應用任何緩動。
      如果你之前用過flash CS4版本,該版本中的緩動和現在的有所不同,不過這也是你的優勢之一。查閱Flash CS4與之前版本的對比,請參考Motion migration guide for Flash CS4 Professional。學習如何在Flash CS4中創建緩動,請繼續閱讀。
使用動畫屬性監測器面板
使用動畫屬性面板來爲補間動畫應用緩動:
  • 創建一個文件,命名爲motionease.fla。
  • 用任意繪圖工具繪製一個圖形,單擊時間軸上的幀,選中所有圖形,然後右鍵選擇“創建補間動畫”。(單擊OK將繪製的圖形轉換爲元件)。時間軸上自動添加到了24幀(對應幀頻數量),如果有必要,可以拖動補間的最後一幀,以確保時間軸上至少有24幀。
  • 將播放頭移動到補間的最後一幀,然後移動舞臺上的實例到另外一個位置。
  • 選中補間路徑,然後在動畫屬性面板(窗口>屬性)中拖動“緩動”的數值(緩動右側的藍色數值)或者輸入一個數值,來調整補間動畫的緩動值。
    • 緩動值在-1和-100之間,表示補間動畫緩慢開始並不斷加速。
    • 緩動值在1和100之間,表示補間動畫快速開始並不斷減速。
  • 執行“控制 > 測試影片”來測試動畫效果。注意觀察舞臺上補間的路徑點是如何變化的。(如圖51所示)

image002.jpg 
圖 51. 這個蜜蜂從右向左運動,一旦設置了緩動,補間路徑的點會有所更新。越靠近補間動畫的結尾,點越密集,因爲作者設置的補間動畫效果是快速開始並不斷減速(緩動移出)。
使用動畫編輯器
使用動畫編輯器來應用預設緩動到補間動畫:
  • 在前一個練習中選中要應用緩動的實例,或者打開bounce-ease.fla文件。
  • 在時間軸上選中補間,並打開動畫編輯器面板。
  • 找到緩動分類,單擊“添加”按鈕,然後在菜單中選擇“彈入”。一個彈入的緩動預設就被添加到補間實例上了,並且緩動分類裏的所有緩動效果對於各個屬性來說都是可用的。你可以通過熱點文本來改變預設值(回彈的次數)。你的改動反映在有右側虛線上,但是右側的虛線圖是不可編輯的。
  • 找到基本動畫分類中的Y屬性這一行,然後在下拉菜單中選擇“彈入”。
          這樣你就將彈入緩動應用到Y屬性上了,並且自動更新到了舞臺上的緩動實例上(你可以拖動播放頭來檢查效果)。也許你也注意到在Y屬性這行的兩個變化:熱點文本值變爲只讀的,Y屬性的右側曲線圖中出現了虛線曲線圖(如圖52)。熱點文本值有所變動,因爲動畫模型來控制你的實例的緩動動畫,並且熱點文本值反映了緩動(不可編輯)值。虛線曲線反映了補間過程的值。如果你拖動實現(可編輯)曲線上的任意屬性的關鍵幀,熱點文本值將會改變。
    image003.jpg 
    圖 52 應用彈入效果到Y屬性上。
  • 回到緩動分類這裏,將彈入的次數改爲5

      注意觀察,與Y屬性的曲線圖一樣,彈入緩動的曲線圖也有所變動。再次拖動時間軸看一下變動後的動畫效果。你可以在本系列的素材文件中找到這個效果的最終版文件,文件名爲bounce-ease-finished.fla。
動畫編輯器中的緩動
      在前一個練習中,當你爲一個動畫添加緩動的時候,你可以看到添加按鈕中有一個預設緩動的列表。除了自定義緩動之外,所有的緩動都是預設好的並且不可編輯,除了預設緩動的整體值之外。舉例來說,你可以通過選擇1至100的值來設定彈性緩動的彈力,設定實例的回彈次數,或者設定實例緩動移出的速度。
      一旦對圖形化的屬性應用了任何緩動,該屬性的熱點文本值就變爲灰選,不可更改。主要是因爲熱點文本值是顯示補間動畫的實際緩動值,但緩動是不可編輯的。熱點文本值(補間動畫數值)是由補間公式來控制的,所以它的很多值都是被限定好的。不過,你可以在右側曲線圖中通過控制點或者其他貝塞爾曲線編輯工具來編輯實線曲線。或者你可以先取消緩動並使用熱點文本來設置數值,然後再添加緩動來看一下你改動後的結果。
設置緩動屬性來快速實現動畫
      如果你使用過低版本的Flash,也許你設置過一些淡入淡出的補間動畫,甚至你用過ActionScript來實現一些緩動公式並應用到你的實例上。Flash CS4使得應用緩動公式到緩動中變的非常簡單、可視化,並且允許應用這些公式到單一屬性上。本節主要爲你介紹一些有趣的效果,並且讓你通過使用緩動預設在幾分鐘內完成這些效果。你可以在你的工作中應用這些技術,並且完成更大範圍內的效果。
爲動畫位置應用緩動
  • 打開素材源碼中的“ease-position.fla”文件。看一下這個簡單的動畫,如果有必要可以拖動時間軸來查看。
  • 選中時間軸上的補間區段,打開動畫編輯器。
  • 找到緩動分類,單擊添加按鈕並選擇正弦緩動。
  • 更改正弦波形緩動值爲4.
  • 找到基本動畫下面的Y屬性,選擇正玹緩動。注意右側曲線圖中虛線曲線變化表示實際緩動值的變化(如圖53)。
  • 回到舞臺,查看舞臺上的動畫路徑,執行“控制 > 測試影片”來預覽動畫。
    image004.jpg 
    圖 53 應用正弦波到Y屬性

爲顏色效果屬性應用緩動
  • 打開素材源碼中的“ease-color.fla”文件。看一下舞臺上的動畫,如果有必要可以拖動時間軸來查看。
  • 選中時間軸上的補間區段,打開動畫編輯器。
  • 找到顏色效果分類,在添加菜單中選擇Alpha。
  • 將播放頭移到最後一幀並添加關鍵幀。設置熱點文本值爲80.
  • 將播放頭移到第一幀,並調整數熱點文本值爲40.這樣補間緩動的alpha值就在40%~80%之間。
  • 找到緩動分類,單擊添加按鈕並選擇“隨機”效果。
  • 將其熱點文本值更改爲20.
  • 回到Alpha屬性處,在緩動一欄選擇隨機效果。注意右側曲線圖中虛線曲線,表示補間值在40%~80%之間。
  • 回到舞臺,查看舞臺上的動畫路徑,執行“控制 > 測試影片”來預覽動畫(如圖54)。

    圖 54 該SWF文件應用緩動來實現透明度在40%~80%之間重複變化的動畫。這個動畫不需要關鍵幀。

爲補間動畫添加自定義緩動
      自定義緩動允許你使用動畫編輯器中的曲線圖來創建自己的緩動,然後你可以應用自定義緩動到補間實例的任意屬性上。(如圖55)
      自定義緩動曲線圖表示隨時間變化的運動情況。水平方向表示各幀,垂直方向表示補間變化百分比。第一個值表示動畫0%時的狀態,最後一個關鍵幀可以設定在0%至100%之間。曲線圖中曲線的斜率表示補間實例的變化速率。如果你在曲線圖中創建一個水平的線(沒有斜率),表示變化速率爲0;如果你在曲線圖中創建一個垂直的線,則表示瞬間的變化速率。
爲補間實例添加一個自定義緩動:
  • 創建一個補間動畫,或者打開“motion-tween.fla”文件。
  • 選中時間軸上的補間區間,打開動畫編輯器面板。
  • 找到緩動分類,單擊添加按鈕,在菜單中選擇自定義選項。
  • 這個操作用來爲補間實例添加一個自定義緩動(如圖55),之後也可以爲各個屬性選擇該自定義緩動。自定義緩動的默認值是一個常量速度,你可以將其編輯成任意效果。
    image006.jpg 
    圖 55 編輯自定義緩動曲線圖來設定你想要的緩動效果。

修改與應用自定義緩動
      你可以通過動畫編輯器中其他屬性曲線圖中標準貝塞爾曲線編輯控制工具來編輯自定義緩動。如何使用這些控制工具,可以參看Modifying keyframes (control points) in graphs。
      你可以在基本動畫下面的各個屬性中選擇應用自定義緩動,和使用預設緩動是一個道理,可以參考Adding preset and custom eases to motion tweens.。
以下練習展示了自定義緩動曲線圖的一個另外且非常有用的獨特特性。
  • 打開素材源碼中的“custom-ease.fla”文件。
  • 選中時間軸上的補間區間,打開動畫編輯器面板。可以看到已經有一個自定義緩動被應用到了補間上。
  • 定位到緩動分類,並找到自定義緩動。單擊該緩動效果,展開它。
  • 將播放頭移動到補間的第40幀,對應X、Y屬性的關鍵幀。
  • 單擊添加關鍵幀按鈕。
  • 拖動此關鍵幀上下移動來觀察其在曲線圖中的百分比變化。
  • 在X、Y屬性中的緩動列選擇自定義緩動。觀察曲線圖中自定義緩動曲線是如何與X、Y屬性曲線在各關鍵幀上重合的。
  • 拖動各個關鍵幀上的操作手柄,或者第一個與最後一個操作手柄,來改變緩動曲線。可以看到緩動曲線與X、Y曲線依然在各關鍵幀上重合(如圖56)。
    image007.jpg 
    圖 56. X、Y屬性應用自定義緩動後的曲線圖
  • 返回緩動分類中的自定義緩動曲線圖。上下拖動第40幀上的關鍵幀,同時觀察X、Y屬性中曲線圖的變化(如圖57)。
    image008.jpg 
    圖 57. 一旦你拖動關鍵幀到新的位置,X、Y屬性的曲線圖中緩動曲線就與X、Y曲線不在關鍵幀處重合。隨之,緩動曲線會與運動路徑上的其他點重合。
  • 重新拖動關鍵幀到兩條曲線的重合點。這樣緩動動畫就與控件屬性重新再關鍵幀上重合。測試動畫看一下效果。
    使用此特性可以幫助你在關鍵幀之間使用自定義緩動。如果想了解更多的關於關鍵幀之間的緩動,可以閱讀“Using eases with your tweens”這一節教程。

複製與保存自定義緩動
      顯而易見的是,你也許希望在其他的補間實例上重用你的自定義緩動,甚至重用在其它文檔中。 下面介紹兩種不同的方法來實現重用自定義緩動。
      第一種簡單地方法是右鍵單擊自定義緩動曲線圖中的空白處(除緩動曲線之外的地方),選擇複製曲線。然後在第二個實例上,添加一個新的自定義緩動,右鍵單擊自定義緩動曲線圖的空白處,選擇粘貼曲線。這樣就把曲線圖複製到了任何一個非空間屬性的曲線圖上。
      第二種方法是在動畫預設面板中保存自定義緩動。這樣做有兩個好處:可以在任何文檔中方便的使用它;也可以將其給其他flash用戶來使用。然而,這樣做也有其侷限性,因爲補間中的其他屬性一同也被保存,比如補間的長度。一般來說,人們總是希望創建一個自定義緩動並重用在沒有任何動畫屬性的補間實例上,然後再將其應用其他基本實例上。也就是說,它會同時應用動畫效果,所以你需要在應用預設緩動後再重新調整補間區間的大小。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章