零元學Expression Blend 4 - Chapter 6 如何置入Photoshop檔案以及入門動畫設計
本章將教大家如何把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
?
這裏提供現成的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之路
喜歡我文章請推我一下或給我個回應，你的鼓勵會給我無限的動力喔!
若是您有其他問題或是特別需要，請在文章回應處留言，我會盡快回覆您
零元學Expression Blend 4 - Chapter 6 如何置入Photoshop檔案以及入門動畫設計