![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZvv_ihTIRPsGA4fG-LwUbUia3pa7CnB_cuoFZeU1cDa9QjijTRVySvmyA5ICBMIMfcCCOEy81g4TT9Slf1Qz4NHKYJwAihP6daA0Z8081F9Wyq-1oOUgBPJzKD8hbqXKKhQWWgrXhlYxj/s320/67574a4e823811e2b36e22000a1fa437_7.jpg)
這篇來講基本操作。
首先到這個頁面去下載,Spriter 同時支援了win及mac,請找自己需要的版本去下載
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgePIkMCO0NYmzFuZ0lu9goUosNNchCeu9KLR8L3RIrez2Rf0TMuvE0Km8VHqUCNI0hrcxtMKctSBIrzc8GaJAMmSqZXxfKhqRw96d3s_e1-QMvqy16Y24KjihdfyMJJ5Fujx4lNBAQDVM/s320/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596%25E7%2595%25AB%25E9%259D%25A2_022813_115444_PM.jpg)
目前免費提供的版本是alpha4.1版,未來正式版也會分free及pro付費版,free版會有一些功能限制,這個頁面有詳細說明,有興趣可以看看。
各位應該有注意到下載頁面右邊有放了兩支影片,上面還寫了"Don't try Spriter without watching these first"。對,沒錯,請務必看過這兩支影片再來試會比較快。因為目前還在alpha 版,作者幾乎沒有提供任何教學、範例、說明書之類的,而軟體本身介面也沒有簡單到像iPhone一樣可以不看說明書就會用,所以建議是先耐心看過影片後,再來使用。
以下我就挑一些重點來說明
.新建Project時會請你選擇一個folder,請直接選擇你放置動畫元件的folder,這些元件才會出現在你右邊的清單裏,然後就可以從右邊的清單拉進stage裏。(如下圖)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSXfDr-B2gdhqlAhA-LLxj5CaFKQmGYwtHngoHiqxTM9ebsUTBgbftuheaDApklxZ0asHfE_wDhABJOsEVP2H5a_loH0ztvTZ4hBtsnGcHbmjDo8_k6r1kF5JXJlFA2IR8J8g6pPXYNv8/s320/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596%25E7%2595%25AB%25E9%259D%25A2_030113_125641_AM.jpg)
.如下圖,當游標在A區時,滑鼠滾輪可縮放stage;當游標在B區時,滾輪可縮放timeline;C區也可設定stage的縮放,但他會自動隱藏,游標移到A及C區時會出現。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6W8oqDigh3GlYMj1ztIZeBWli65ucOrNukF76if2u-Bm1sz8PnRogrwhWf0EYwsbCpm_3GXQioldALcCUk1RuK7BzlMWTLAeA8LDPXrfTe9kk4ZS5qFjTJXGTZf6G4ReR2UHhDwAD8p8/s320/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596%25E7%2595%25AB%25E9%259D%25A2_030113_122720_AM.jpg)
.下圖為Timeline區。Spriter的Timeline是以ms為單位,這樣比較能通用於各種平台。圖中a處為playhead,拖動playhead至你要新增keyframe的地方,然後直接調整你的角色,keyframe就會自動產生。另外也可以在拖動playhead至某時間點後,直接按下Add Keyframe(圖中b點),便會以當下角色的狀態產生一個新的keyframe。最後c點的按鈕為"是否要將最後一個keyframe做tween回到第0ms的keyframe"。(也就是頭尾串接的動畫)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj7J6uK-1TA0BVXB-vJa-ewSkPBGEvodqGoCSwjNX5J2fGypP7Z8ruUchDCVMu8qR8Jh5tVBGZIIthVIHckVc9BlrwVXT0-Rse0Owj38M4k_7N6SRlg7F1wspr1X70Q0uZi_Gpqqr6Ppg/s320/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596%25E7%2595%25AB%25E9%259D%25A2_030113_011717_AM.jpg)
另外上圖有顯示"CurrentPlaybackTime:391",為目前playhead所在的詳細位置,你可以在"391"那個地方點擊滑鼠,會出現手動輸入框,可精準調整playhead位置。
.左邊是目前出現在stage上的元件列表,可drag移動上下層關係,愈下面的layer在Stage裏表示愈上層。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZlZxFyVzNYujWlZiOt1PGIcKcaMPAe5S8gcyjtUL3NqcFnT5cUspIN8r2ijb_C4oZmDlx2kdprs5jht1F7rnq2HfYDkDFv1NqBBvfx8w8T1UmjHEhXlQ4RY_M9aC74JWP1V0TNxdAI3g/s320/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596_13_3_1_%25E4%25B8%258B%25E5%258D%25881_10.png)
值得一提的是,Spriter可在不同Keyframe中變換Layer的順序,這在以往Flash上是十分麻煩的事情。
.點擊Stage上的元件都會出現如下圖的畫面,元件四週的九個方塊是形變控制點,而a點可控旋轉,另外b點是中心點,所有形變、旋轉都是以b為中心。如果想直接輸入數字來控制元件,可點擊c點開啟詳細面板。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUJTITYCDJeF43QTMbBBxLZzjkw4u_YnWDMgyR1XLQ_5q-yUKwtrZu6X3CuQkQq9WUHMgffjBojxP0FS7SJL1P9VikMNCJgOrUxaLBdb3T_U7YF55-16jMcN0trdWvJ4iYIvHRZPkeN78/s320/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596_13_3_1_%25E4%25B8%258B%25E5%258D%25881_47.png)
.提到旋轉,就不能不知如何調整中心點位置。一般情況下,只要拖曳中心點的那個圓圈即可,但一個新拉進stage的元件,Spriter預設會把中心點設在左上角,與左上角的形變控制點重疊在一起,直接移動的話會變成是點到形變,而不是中心點,所以在點擊時要注意一下游標位置。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOz3HkAfrIr0DOPRAGNFx8PwYtUHlX1MfAk15eCBaDwNQmgA5Be8aVjmFBNfRkfJgt3RH3u-nR-7qXDC4iVEJj2AgicanC6ESqwv0VtbsXXjDcrD9yW5LYdtuMdjqQpWEsMWjJ7vyUgKE/s320/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596_13_3_1_%25E4%25B8%258B%25E5%258D%25882_07.png)
當游標移至重疊的中心點時,中心點的圓圈會放大以方便分辨,這時若點擊在綠色區域,則會移動中心點,若點擊在紅色區域,則做形變控制。
.Spriter也支援元件中途變換不同圖片的功能,只要在stage上以右鍵點擊元件,就會秀出小面板讓你切換。此變換只對目前的keyframe有作用,之前的keyframe還會是舊的那張圖。也就是"換圖"這件事也是keyframe包括的內容之一。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicJgPUhIdyz0rPb-Pq8VyUkcGn09FcE7fCPUaeABbOuqGoGyZo9BXHL12ikwAuazHMKbsQxbrBGhfg4cM3ka16nwNcUJG6ReDQiFq1yrfMVE2O5TjuANWViC_QHdxCOXrj6l2AbIM89UU/s320/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596_13_3_1_%25E4%25B8%258B%25E5%258D%25882_17.png)
.再來是類似Flash中的Onion Skin功能,可以讓你看到前幾格或後幾格keyframe的位置,這是2D動畫中十分重要的功能。開啟後效果如下圖
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYX8CvWaoATRwKS9g4kS-6dE3mz3orpZ3aivCzsyr6cW5WfCJEz5v3PwGdEddH-Kwl3yOjfpOd4YlZROwKsboH6dgguwn4G0oHDGvKUpiIXBrm1ljEQY10v8aIl9IMlZZj_YY4Af_ol64/s320/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596_13_3_1_%25E4%25B8%258B%25E5%258D%25882_36.png)
紅色表示前幾格,綠色表示後幾格。開始方式請參考下圖紅、綠色塊的位置,以playhead為分界點,timeline線以上的這塊區域,在紅色範圍內按右鍵拖拉即可設定過去的keyframes顯示,而綠色範圍內右鍵拖拉即可設定未來的keyframes顯示
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyPg4VgRcKNiyqRGLnphBEnLRi715STAXVngaO2TTIFDrJAM1Q1mvZ6aB8HujlA2F2AGZtPWlxBnNRtNT8CHqAo9mFPDCOnDRp2kkduNngqzMrXGMy-hXlMCwFjkhmuKlpuV_phI1_rnw/s320/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596_13_3_1_%25E4%25B8%258B%25E5%258D%25882_44.png)
.在Timeline上也以一次選取多個Keyframes,下圖中,先點一下a,按著"shift"不放再點一下b,即可選取多個keyframes。選取後,可進行移動、複製貼上等功能,也可在選取多個的狀態下,按著"alt"不放,去拖拉a點或b點,即可做整串keyframe的壓縮及放大。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrNxclZvwHyybG2URm4_bfrXlnJCDxJTafqqcWEUvxjqaLd90V_ESy12IUtWGfFAg036i_dU73bDmHOucAsCmEP-8cB21kByPnSPGEoGnQMEl7YTat3dz4onUWnlsPuYl7FhTVO7dsXsQ/s320/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596_13_3_1_%25E4%25B8%258B%25E5%258D%25883_18.png)
.Spriter也提供了Bones系統及IK功能,只要在stage上空白處,按著"alt"同時以滑鼠點擊拖拉即可拉出一個Bone。在選取某個Bone的狀況下新增Bone的話,則新的Bone則會是原來選取的Bone的Child。選取任何Bone時,都會以顏色提示其主從關係,如下圖
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPSWyO5nScLD1LmOMGqeLAPT8J1AcOlB4qNO9Ul8F_u5QHy_wRbMSzNHGnDRTTYT_w6e8kjNvfJx0hQHq0pKDBvNfPItP_7l6ISL9FCgPwzbnrxfujmeFLUHDK8ZOpsMNU35TLFSW0qq4/s320/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596_13_3_1_%25E4%25B8%258B%25E5%258D%25882_50.png)
.另外也可以在左側的Bone Hierarchy面板調整Bone的主從關係,在這面板也可以為各個Bone命名,以及將元件與Bone綁定,如下圖,head_2.png即與bone_000綁定在一起。這個面板是以樹狀結構呈現,一切都用拖拉即可完成。最後要注意一點,這個面板會列出所有Bones及stage上的元件,如果沒看到元件,可能是右上角的眼睛沒點開。(Show Sprites in Heirarchy)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaLVekz9YRamB-TDJGCkVHgfdgUkN54Y3gNk2bWdyJfnUKKJbE3SOWEnlUJknWSzpPqU5zvtXZbQAhyMc8E_rwCuz4u4LntenDdMIgpr7R5ZRg8jix8sZDUTUNr2FTTmZclrlBSVBMoFc/s320/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596_13_3_1_%25E4%25B8%258B%25E5%258D%25882_58.png)
.在調整Bone時,一樣有方形的形變控制點及圓形的旋轉控制點,當按著"shift"同時調整旋轉控制點的話,即可開啟IK功能。而在Bone上按下右鍵的話,會出現IK的錨點功能,也就是這段Bone的終點會釘在某個位置,並牽制其他Bone的變動。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9aWjXE4SU6QMIfn4zZ_yK2_Skc699d6oZy4oSeD3W21Hi5h7gW-4vjL9IpftSdUCkJC7qCanD23mSbb8pqgVilJRq4Cp-8iZG6NGBT8B3hv-cvBldip35oT1NjJlU3mHZ6p0oMUYJ-9g/s320/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596_13_3_1_%25E4%25B8%258B%25E5%258D%25883_13.png)
.完成一串動畫即可存成一則animation,右側下的Animations可檢視目前所有的animation,並可在此面板中新增、複製、刪除animation,一個SCML檔可存入多個animations
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_RjdP7sEtNvbq2WKD7zLa5PNMe-eZ9MbSSyX67syOjH8-KoPMrs61IFyAS-NLI2XXhjwhNFkPMDaDSgK1dBzjzOJ-7qTGUT9_Svgvg0TFmSdpJCj7zj9DopsQXNWeSV3OU8bHmuNhXVY/s320/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596_13_3_1_%25E4%25B8%258B%25E5%258D%25883_30.png)
.最後當所有動作都完成時,選擇"File"->"Save Project"即可存檔(同時會產生scml檔),然後就可以拿去做程式開發了。
.Spriter目前還在alpha,所以還有很多bug,例如偶爾會無預警關閉,用IK時bone會往奇怪的角度旋轉、莫明產生keyframe…等,都不是什麼大問題,不過建議就是勤於存檔,並期待正式版時這些bug都清掉。若發現什麼bug想通報作者的話,可參考這篇的回報方式。
Index:
.Spriter好好玩系列 (一) ---- 什麼是Spriter ?
.Spriter好好玩系列 (二) ---- Spriter 基本操作
.Spriter好好玩系列 (三) ---- 使用SpriterAS
.Spriter好好玩系列 (四) ---- 使用SpriterMC
沒有留言:
張貼留言