Flash 8 公告欄製作教學上篇(含源碼下載)


 


感謝 臣妾 大方的釋出源碼分享,有跑馬燈.公告欄.計日器


這樣就不必再為找不到源碼而喪氣了,真是太感謝臣妾了。


還有感謝品味人生圖片分享 


 

































公告欄展示


公告欄貼格語法↓Bulletin board ( Bb )



單版按鈕型公告欄套用語法↓



<embed src="公告欄網址" width="" height="" FlashVars="go=輸入你想說的話"></embed>

備註:公告欄寬高尺寸以您製做的公告欄為基準,若在製作時設定尺寸超出奇摩預設欄寬,雖然貼格時可將尺寸縮小,但因為文字大小已在製作時配合文字框設定好了,此時您再縮小寬高尺寸,則輸入文字時,可能有些文字會因為尺寸限制,而無法全部顯示,因此這裡特別告知,※若您想把公告欄放在奇摩部落格,那麼尺寸請配合奇摩欄寬,不要超出140,這樣貼格時,奇摩欄邊才不會被擠掉了^^


 

實例展示:單版按鈕型公告欄


<embed src="http://img180.imageshack.us/img180/6522/bb1lm9.swf" width="130" height="150" FlashVars="go=正在製作公告欄,回覆要等一些時候,不好意思,請多多包涵.玄音敬上 2008.07.10"></embed>







分段打字型公告欄套用語法↓



<embed src="公告欄網址" width="" height="" wmode="transparent" flashvars="go=第一段文字#第二段文字#第三段文字"></embed>


備註:落數目隨您分,只要記得用 # ←此符號隔開就行了。若只要單段,不要加 # ,就會變成單版打字公告欄。但要配合您留的文字空間,若文字有的沒有出現,就是空間不夠,那就要分段才能顯示出來,或者再修改公告欄,將文字框加長。




實例展示:分段打字型公告欄



<embed src="http://img112.imageshack.us/img112/1685/bb2fe2.swf" width="130" height="150" wmode="transparent" flashvars="go=正在製作公告欄#回覆要等一些時候#不好意思請多多包涵#玄音敬上 2008.07.10"></embed>




 





公告欄製作開始^^


一. 下載公告欄源碼:


閃8公告欄源碼 ←1. 點圖下載閃8公告欄源碼


2. 下載完成,記得解壓縮,取得源碼↓






.  開啟舊檔


1. 請打開 Flash8 軟體,叫進您解開的源碼單型按鈕公告欄






. 單型按鈕 公告欄變裝秀


3-1. 準備一張底圖,尺寸隨意,動圖或靜圖都可以。


※ 這單型按鈕公告欄源碼,含有時間日期,若您不要直接把圖層丟進垃圾桶就可以了。


3-2. 匯入底圖至元件庫


作法:按檔案→點擊匯入→選匯入至元件庫→點選要匯入的底圖


這裡我找了一張300*288的大圖,而源碼是150*130,那就來縮圖吧!


若您的底圖剛好是源碼的大小,這步驟↓就可以跳過去了^^


若您想做大公告欄,只要更改閃8的舞台大小,其他的圖層物件再各自移好位置就好了。


3-3. 縮小底圖


若是匯入 jpg 圖,在元件庫類型會變成點陣圖,叫入舞台也就這類型圖。


若匯入的是 gif 圖,在元件庫裡有點陣圖也有影片片段,而要叫入舞台的圖是影片片段喔^^


3-3-1. 刪除底圖



↓刪除後,底圖變空白了.



 


3-3-2. 將匯入的底圖拉入舞台



↓縮小底圖尺寸及xy位置



修改完成,看一下測試影片(快速鍵 Ctrl+Enter 鍵),若您滿意現在的樣式,


不想再移動時間日期上下按鈕及文字框的位置,那麼就可以存檔發佈了。


不然,再繼續下面步驟↓


↓先放大視窗



 


3-3-3. 上下按鈕換圖


在前面幾篇欄物教學,時間日期文字的顏色大小位置移動,您們應該都熟悉了,


所以不再說明,現在來教學新物件,上下按鈕換裝作法^^


源碼裡的上下按鈕是圓形綠色的,我們現在將它換成方型綠色鈕


打開內建元件庫↓



↓進入元件庫在最下面找到 playback rounded  按鈕


雙擊兩下,選擇 rounded green play ↓將此按鋌拉入單版公告欄元件庫。



↓替換按鈕





按確定後,看舞台按鈕已換成方形且方向大小都改好了,很方便對不對^^


下按鈕也是一樣的作法,就不再說明喔^^來看看換好的測試影片,還不錯吧^^


最後來調整一下各物件位置↓


要移動某物件時,也可以直接點一下舞台上的某物件,被點擊的物件會有藍框框住,


將鼠標放在藍框內,鼠標會變成 這時就可以移動物件到您想放置的位置了。


 


3-3-4. 調整物件位置


我把全部物件都移位置了,下面就是移動的形況↓


移動位置是否理想,每個物件移動好後看一下測試影片,就能掌握物件的移動情況了。


文字框的內容可以在 Microsoft FrontPage 預覽(不用上傳,套上語法就能預覽)


若沒有此軟體可以上傳後套上語法,再用 語法測試 來預覽。



 


3-3-5. 上下按鈕也可換成自選的小圖


先匯入小圖片至元件庫


1. 按檔案→點擊匯入→選匯入至元件庫→點選要匯入的小圖


2. 點一下舞台的上按鈕物件,下方就會出現上按鈕屬性↓


然後按替換鍵→選擊所匯入的小圖→按確定,按確定鍵後,位置不是很理想,調整一下↓


下按鈕物件,跟上按鈕物件是一樣作法,就不再說明。



3. 調整上下按鈕位置


若需要旋轉物件,點一下左欄工具列的變形工具,可以旋轉物件。



按鈕換好了,可以看一下測試影片,滿意了,再來下個工作^^


 


3-3-6. 文字框空間加長


源碼因為受底圖限制,文字框長度不大,現在換了這底圖,文字框可以拉長一些,


現在來說明如何將文字框加長,這樣文字輸入時,可以多打一些字。



這裡有點麻煩的是,當文字框拉長了,相對的要輸入的文字也會變大,文字大小不會因為設定的大小而固定,所以當文字框有變動時,就要反覆的測試文字框與文字的情況。


因為文字框拉長後,有時輸入的文字,並沒有全部顯示出來,因此要反覆調整到文字框可以了,輸入的文字大小也可以,文字也全部出現,這樣才是完成。


這些都是要不斷的上傳,修改,才能調好喔,所以您若有Microsoft FrontPage這軟體就省事了,不用上傳可以直接預覽,文字框與輸入文字的情況,修改也會快多了。


既然文字框拉長了,那文字如何變小呢?一樣的點一下文字框,下方會出現文字屬性,只要將文字大小再設小一些,測試看看,一直到適當大小為止。



都好了後,最後就是設定連結^^


若圖片還是八黑點圍住,點一下左欄工具列的選取工具,八黑點就不見了。





四. 底圖連結





連結語法


on (release)
{
getURL("http://tw.myblog.yahoo.com/happy-ok", "_blank");
}





4-1 打開動作視窗



↓貼入語法


將上方的連結語法複製,貼到閃8的動作視窗中



好了之後,再看一下測試影片,把滑鼠移到底圖位置,鼠標都會變成手指形狀,文字框在中間無法點連,四周沒有物件在底圖的地方都會變成手指形狀,這表示連結設定成功。





五. 存檔及發佈


5-1.  另存新檔


(直接按工具圖示儲存也可以,但它是直接儲存,


有時候會將原檔給蓋過去,所以還是用另存新檔比較保險.)



fla 源檔無法貼在部落格,只是保留,以後修改,才有源檔可改.



 


6-2.  發佈


檔案另存後,要再經由發佈,就是存 swf 檔,這種檔才能上傳貼到部落格分享。



↓這裡有許多存檔類型,可以自已勾選,若不想用預設名稱,也可自己改檔名.



↓發佈完成再按確定,發佈設定視窗就會消失.



↓看一下檔案內容,基本儲存會存下這三種檔案類型.



檔案存好後,就可以將.swf 這檔案上傳到奇摩支援的swf 空間,取得網址,


套上專有的公告欄語法,就能發表到部落格,與大家分享成品了^^



<p><embed src="http://img295.imageshack.us/img295/7866/bb3ck3.swf" width="130" height="150" FlashVars="go=正在製作公告欄,回覆要等一些時候,不好意思,請多多包涵.玄音敬上 2008.07.10">





七. 上傳空間


奇摩支援的swf空間,目前我都使用青蛙空間樂多,空間都是不穩定的,


所以有越多空間上傳越好,若您有其他空間,歡迎告知分享喔!感恩^^




 

YA^^ 終於熬成婆了,辛苦您把它學完,期待諸位的學習成果分享。


 


祝大家 平安如意 天天快樂開心


玄音 合十/2008.0710




arrow
arrow
    全站熱搜
    創作者介紹
    創作者 翔霏 的頭像
    翔霏

    ~✿翔霏の寶貝屋✿~

    翔霏 發表在 痞客邦 留言(0) 人氣()