Fireworks設計影格動畫按鈕文字

作者：三重劉德華│2011-05-12 15:15:13│巴幣：2│人氣：751

製作流程：
1.開新檔，寬150px、高30px、畫布透明。
2.用矩形工具任意框出一個矩形，屬性ｘ0、ｙ0、150px、高30px、黑色。（圖層1）
3.在「圖層1」上按右鍵，選「共享圖層至狀態」，表示動畫不論在那一個狀態時間點都會呈現圖層1的內容。
4.鎖定圖層1，新增「圖層2」，先用文字工具輸入文字，再用指標工具將文字拖曳至畫面正中央，當接近中央點時會有智慧型導引線（參考線）做提示。

5.作用顯示「狀態」面板，在狀態1上按右鍵選擇「重製狀態」，這功能等於複製了狀態1的所有物件，接著選擇所需重製的動畫狀態數量，此例包括原圖共需5張動畫，故設為4。

6.點選「狀態」面板的「狀態1」，※按Shift不放將標題文字拖曳移動到接近畫面最右邊，並增加濾鏡／模糊／移動模糊化，角度設180表示橫向移動，距離設為5；也可以再加個光暈效果，此例的參數設定如下圖：

※以左鍵按住物件不放，再按Shift輔助；拖曳到定點之後，先放開左鍵，再放開Shift。

7.由於「狀態5」需要和「狀態1」相同的樣式，故開啟樣式面板，按新增樣式鈕記錄下這個樣式，此例名稱設為移動A；點選「狀態5」套用樣式後，以上述方式將它拖曳至畫面最左邊。

8.如同6～7的步驟，設置「狀態2」及「狀態4」。先套用移動A，再將其移動距離改縮減為3，命名為移動B，並在更接近中心的兩旁套用此樣式。

9.對著「狀態3」右鍵／屬性，設定停留時間為100/100秒（表示需要停留1杪令人看清楚字）。
10.製作告一段落，便可用播放／停止鈕預覽，之後在「最佳化」面板設定匯出格式為動畫Gif。

檔案／匯出／儲存為Gif，成品如下：

設計補間動畫

目的：透過補間動畫的功能，將文字直接由右邊淡入，到左邊淡出。

步驟1～4同上，
5.因為文字在後續還要重複使用，故得先將文字轉換成元件。點選「圖層2」的文字物件，再點選修改／元件／轉換成元件。（由下方屬性欄可以看出文字轉換為元件）。
6.將文字元件由中心拖曳到畫面右邊之外，估算這間距並記下之後，點選修改／動畫／動畫選取範圍，在狀態欄輸入動畫影格數（數字越高，動畫呈現就越細膩），在移動欄輸入方才估計的移動距離（px），在方向欄設為180度（表示水平移動）。不透明度欄設0～100（淡入）。

　　接著是向左淡出的部份，由於一組補間動畫內不能再產生新動畫，故必須先新增一個狀態。再重新加入方才製作過的文字元件，然後以此元件製作另一組補間動畫。

7。在狀態面板上點選新增／重製狀態，從文件庫面板將文字元件拖曳到新狀態上（ｘ與ｙ軸設為與中心點的狀態5相同），同樣的再次點選修改／動畫／動畫選取範圍，設定參數只有不透明度改為100～0（淡出）。