Flash 部落格小物教學(二) - 按鈕型公告欄製作教學&源碼分享

按鈕型公告欄製作教學 :
(一).直接套用(與源碼同尺寸)
下載源碼後先解壓縮。打開按鈕型公告欄源碼，此源碼背景大小是設定450x550，在源碼的圖層最底下新增一個底圖圖片，大小事先裁成450x550。

1.-在右方元件庫新增一個元件(元件1)，選影片片段。

2.-從檔案匯入→匯入至舞台。
3.-點回場景1 ，然後選圖層1，接著再新增一個圖層(命名為底圖)，將它拉到最底層(所有源碼圖層的最下方)。

4.-選右方元件庫中剛新增的底圖元件1，將底圖拉到舞台中間對齊好位置即可。

5.-不滿意公告欄的位置嗎? 那使用選取工具將工告欄全部都圈選起來，再使用鍵盤上的箭頭移動工具將它一起移動到適當的位置上。

6.-不滿意公告欄的按鈕顏色嗎? 那就在右方元件庫中選取該按鈕對著它按右鍵選編輯進入修改顏色。

7.-不喜歡按鈕的形狀嗎? 你可以使用任何的圖片來代替。更換的步驟是 : A-先將你要用的圖片匯入元件庫。B-點該按鈕，然後在下方屬性的地方選替換來置換圖片。

8.-如果公告欄的文字框尺寸不符合畫面的配置? 那就點選文字框圖層，將會有藍色的框線產生，你要使用選取工具，拉動框線調整位置來改變大小(不要用變形移動工具這樣字元長寬也會變形)。

9.-想改變公告欄內文字的字形、大小級數、顏色嗎? 點選文字框以後，在下方的屬性中更改即可。

10.-滿意後另存新檔，然後發佈就完成了。

---

(二).如何自訂尺寸(與源碼不同尺寸)
此源碼背景尺寸大小是設定450x550，你想做的公告欄不是這個尺寸怎麼辦?  很簡單打開源碼後，在軟體下方工具列上點屬性，然後在舞台中空白處點一下，就會出現大小尺寸選項直接改成你要的尺寸即可。 接下來動作同上方的教學一樣，配合構圖文字框可能會需要挪動，只要使用選取工具框選源碼中的全部物件(或將時間軸左方源碼的圖層全選)一起移動到適當的位置上即可。
想要作小尺寸的公告欄可以直接縮小背景尺寸然後將公告底框縮小，但是文字框不能用變形公具縮小，要用選取工具拉動藍色的八個點來縮，不然文字會變形變小，按鈕型公告欄源碼中的文字我設定級數是20，大小可以自行更改。再來添加圖片等....讓它變美觀。

---

(三).利用張貼語法等比例縮小來製作適合部落格側欄的小尺寸公告欄
利用張貼語法中width="寬" height="高"等比例縮小，來製作適合部落格側欄的小尺寸公告欄。例如我的源碼尺寸是設定450x550，部落格側欄大小約140~250左右因各人喜好需要不同。我想作寬250那等比縮小張貼語法就變width="250" height="305"，不過按鈕和文字會變太小了。所以....
1.-請將2顆按鈕一起全選使用變形工具拉大。
2.-將文字級數變大，自行測試我的約36左右。

---

想要讓公告欄的圖片更生動嗎? 那就在底圖圖層上另外再添加一些裝飾性的動態物件。為了不破壞源碼的影格，方法是這樣 :
1-從右方的元件庫中找到剛新增圖片時的影片片段(元件 1)，對著(元件 1)影片片段按右鍵進入編輯即可。
2-接下來想要添加任何物件，就往時間軸上添加圖層即可，例如星光、蝴蝶、花瓣等。
如果你不太會製作這些動態物件，網路上有許多部落格論壇都有分享這類的透明動態swf圖，善用網路搜尋可以找到許多。
想要讓公告欄的圖片更生動也可以參考我之前的文章
flash動畫教學(一)- 將靜態圖片變成flash動畫
flash動畫教學(二)- 水波動態教學「天鵝戲水」

---

按鈕型公告欄張貼語法
<embed src="公告欄網址" width="寬" height="高" FlashVars="go=輸入你想說的話"></embed>

※ 說明: go 為原始檔內動態文字框的變數名稱.

---

按鈕型公告欄動畫源碼下載

---

成品示範一  (備份)

---

成品示範二 ：加了圖片動態和音樂播放器  (備份)

---

成品示範三 ： (備份)

---