本章將教大家如何把Photoshop檔案置入Expression Blend 4,以及設置簡單的動畫。
只要按照步驟來,就能很容易的做出動畫的效果。
本章將教大家如何把Photoshop檔案置入Expression Blend 4,以及設置簡單的動畫。
只要按照步驟來,就能很容易的做出動畫的效果。
就是要讓不會的新手都看的懂!
----------------------------------------2010/11/11更新------------------------------------------------
本章範例
(請點飛機一下)
01 開啟新專案,置入Photoshop檔案
打開Blend 4 後選擇Top Menu的 File->New Project(快捷鍵Shift+Ctrl+N)。 選擇Silverlight Application+ Website為你的項目類型;由於我們要置入的檔案背景大小為800*600,所以我們把主要工作區大小改為800*600後,點選File->Import Adobe Photoshop File後選取你要置入的psd檔案。
02 選取我們要的圖層
點選Import Adobe Photoshop File後,會出現一個讓我們選取圖層的視窗,除了最下面的Compatibility image不選之外,其他都打勾。
03 獨立圖層
在Photoshop製作檔案時,我把背景、飛機、火焰都分開各自為一圖層,所以你可以在Objects and Timeline看到圖層是獨立且分開的;爾後,如果你想設計動畫,你可以使用Photoshop把檔案製作好後,放到Blend 4內,當然你也可以使用 Expression Design 4,相容性更高,之後我會針對Expression Design 4設立一個獨立的教學專區。
04 開始進入動畫設置
進入動畫設置前,我們必須把主要工作區的工具更該為動畫設置;請點選Top Menu的window->Workspaces->Animation。
工作區會變為下圖你所看到的樣子:
>
05 新增Storyboard,我們要開始動畫嚕!
Objects and Timeline右上角有個「+」號,點選它後會出現Create Storyboard Resource的對話視窗,我們用預設的Storyboard1當故事版的命名就好了。
若是想要刪除Storyboard,可點選「+」號左邊「x」號,可刪除。
點擊OK後,可以看到下方工具列出現時間軸的控制版面,並且會發現我們的主要工作區被紅色框線包圍住,左上角有個小紅點,這樣表示你已經可以開始你的動畫設定了,若是你點擊小紅點,可以取消動畫錄製模式。
06 讓飛機起飛吧!
時間軸面版上有0-10的數字,這些數字代表秒數,現在拖動黃色的時間指示線,由0移到3的地方。
再來我們選取飛機跟火焰,因為我們要讓他們一起移動(你也可以把它們兩個群組起來);把飛機跟火焰拖動到右上角的地方。
接著按下Play鍵,讓我們來看看效果。
因為我們設置0-3秒,所以飛機由左至右的飛了三秒到達你所拖曳的位子。
這就是Blend神奇的地方,它不需要像Flash一樣,每格秒去設定當格的長相,而且Blend會自動生成動畫的路徑,自然且方便!
07 改變路徑動作
若你不是很喜歡Blend預設動畫的移動路徑,Blend 也很貼心的準備了不少的模式供各位客官套用。
有發現時間軸上有小白圓點嗎?點下右邊的Properties會出現Easing的工具面版,在Easing Function(緩和漸變)下,有許多模式可套用,這邊我選擇Quintic InOut。
(如果你的時間軸上沒有小白圓點,請點選Play左下方處的Record Key frame新增。)
點選Play再播放一次,你會發現動畫的路徑移動跟剛剛的不一樣了。
有33個內建的Easing Function,找一個你自己喜歡的移動模式吧!
08 自創一個屬於自己的Easing Function
若是Blend 4 內建的模式你都不滿意,讓我們來自己設定一個且獨一無二的Easing Function。
首先,點選你想要自定動畫路徑的圖層小白圓點(Record Key frame)後,到Properties->Easing->Key Spline,移動黃色節點,進行拖動,就可以生成新的Easing Function效果。
回到Objects and Timeline,按下Play即可看到你自定的Easing Function。
09 為動畫做一點變化
我們來讓飛機的火焰做一點變化,讓火焰到第三秒的時候有變長的感覺。
在時間指示線位於第三秒的地方,只點選火焰,並使用Selection(快捷鍵V)工具,拉動火焰邊緣使火焰變長,完成後,我們按下Play播放看看。
火焰從0-3秒的地方,漸漸變長,中間無需再做任何設定就能達成,這是Blend強大的地方!
10 設定動畫撥放的次數
在Objects and Timeline的Storyboard1上單擊左鍵,右邊Properties會出現Common Properties設定工具。
若你勾選Auto Reverse,則你的動畫播放完後會自動到轉帶回到原點,你可以試著勾選後按Play試試看。
1x是播放一次,2x是播放兩次…以此類推,Forever就是一直播放不停止。
11 設定觸發動畫條件
設定動畫觸發點,需切換回到一般工作區,點選Top Menu的Window->Workspaces->Design。
我們在Assets的Search鍵入Control Storyboard Action,直接拖動Control Storyboard Action到飛機上
右邊Properties會出現觸發屬性面版Trigger。
Event Name為觸發條件的設定,這邊我們選擇Loaded,表示網頁一打開就會自動跑動畫。
Control Storyboard 我們設定Play、Storyboard則是選取我們剛剛製作的Storyboard1。
12 最後階段
請按F5,等到狀態列出現Build Succeed會自動跑出預設瀏覽器,內容就是我們設定的動畫了!
很簡單吧!
只要一步一步跟著做,你馬上就會使用Blend 4 製作動畫嚕!
要記得舉一反三喔~
本篇的教學就到此。
(若有任何錯誤的地方,請各位前輩或同好能不吝指教,小女子都會虛心接受;若是你喜歡我的教學,請給我點鼓勵,謝謝。)
一步一步邁向HIE之路
喜歡我文章請推我一下或給我個回應,你的鼓勵會給我無限的動力喔!
若是您有其他問題或是特別需要,請在文章回應處留言,我會盡快回覆您