2010/05/16 07:52

Flash 8 跑馬燈製作教學(含源碼下載)上篇

 

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

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

之前都是用Flash MX作欄物,有些源碼無法開啟,這次臣妾的欄物源 碼,也因為開不起來,

就想說用 Flash8 來試試看,賓果!而且之前的時鐘及 月曆源碼都照開無誤,

看來閃8 是最佳的Flash欄物製作軟體^^在奇摩搜尋打上 Flash8-cht.exe 可以找到軟體

 

跑馬燈展示

跑馬貼格語法↓Runs the lantern ( Rtl )

跑馬燈網址" width="寬度 隨意" height="40" FlashVars="go=輸 入您想說的話" quality="high" wmode="transparent"> 

 

實例展示:透空跑馬燈

 

http://img58.imageshack.us/img58/7457/rtl01lp6.swf" width="200" height="40" FlashVars="go=可愛的小精靈跑馬燈,這是處女 作喔,喜歡嗎^^成功了,開始製作教學文^^加油!!" quality="high" wmode="transparent">

http://img244.imageshack.us/img244/5814/rtl02ff1.swf" width="200" height="40" FlashVars="go=小精靈閃框跑馬燈,這是加強版,框圖是用閃圖套入,是不是更生動^^" quality="high" wmode="transparent"> 

 

實例展示:實底跑馬燈

 

http://img58.imageshack.us/img58/7457/rtl01lp6.swf" width="寬度隨意" height="40" FlashVars="go=我是可愛的實底小精靈跑馬燈,喜歡嗎^^教 學文開跑了^^加油!!">

http://img244.imageshack.us/img244/5814/rtl02ff1.swf" width="寬度隨意" height="40" FlashVars="go=我是實底小精靈閃框跑馬燈,我是加強版,框圖是用閃圖套入,是不是更生動^^">

 

跑馬燈製 作開始^^

一.  下 載跑馬燈源碼:

 ←1. 點圖下載閃8跑馬燈源碼

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


 

.  開啟舊檔

1. 請打開 Flash8 軟體

↓閃8界面

.  跑馬 燈變裝秀

1. 請先選出三個物件,這是跑馬燈的主角喔。

2. 跑馬燈源碼舞台設定150*40,主角圖片尺寸不要太大,會不好縮放,動圖或靜圖都可以。

換成→

3-1. 起點右圖換主角(就是把小精靈換成招搖貓^^)

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

↓把鼠標移到藍框內,這時鼠標會變成    快點兩下,進入Symbol內

在元件庫找到招搖貓,要拉到舞台的是要影 片片段的元件喔。↓

 

3-3. 插入圖層,丟掉圖層

現在位置一樣還在Symbol裡面喔^^

↓將小精靈圖層丟掉

3-4. 測試影片

ok了,起點右圖置換完成^^

PS:因為起點右圖有AS語法控制,所以換圖 必需用以上方法 (我只會這方法),

起點右圖位置才能跟著跑馬燈寬窄尺寸 移動。


4. 終點左圖換主角(將幸運字換成快樂圖)

換成→

4-1. 回到場景1

4-1. 先把要置換的圖片,匯入到元件庫(請參考上面3-2教學)

4-2. 置換終點左圖

↓替換元件(在此之前有將圖片先匯入元件庫,在這裡就能找到喔^^)

↓圖片換過了

4-3. 調整終點左圖到適當位置

這左圖沒有AS語法控制,所以只要將圖片擺在左邊 不要離開舞台就可以了。

將鼠標移到終點左圖的藍框內,這時鼠 標變成 ,這圖型的鼠標,才能移動物件喔^^

滑鼠移動大步有時不恰當,也可以用方向鍵移動圖片 位置。

我將圖片移動到靠左邊且舞台置中的位置,有看到是 不是左藍邊不見了,

這是因為被終點邊線粉紅色)檔住了, 才會看不到全部藍框。

調好位置後,測試影片看看→圖片有點小,來↓

4-4. 放大圖片

3.將鼠標移到8黑點右上角的黑點,這時鼠標變成,按住滑鼠不動

並按著鍵盤Shif按鍵(等比例放大),往右拉 開,拉到不超出舞台的範圍後,放開滑鼠。

然後再將圖片位置用方向鍵微調到恰當位置就好了, 再看看測試影片。完成^^↓


 

5. 跑馬圖+框,換主角(將小咪圖換成歡迎光臨圖)

換成→ 

5-1. 置換跑馬圖

這跑馬圖也沒有AS語法控制,所以只要將圖片換 過,就可以了。

5-2. 將圖片匯入元件庫(請參考上面3-2匯入教學)

作法同上面→ 4-2. 置換終點左圖

因為跑馬圖是在起點右圖招搖貓的下層,所以點擊 時,都會變成點到招搖貓。

這時把起點右圖隱藏並鎖起來,就可以順利點到跑馬 圖小咪了。

鎖住及隱藏的圖層只要再點一下鎖跟大紅叉就恢復原 狀了。

現在小咪還是被八黑點框住,這時只要將鼠標移到左 邊工具列的選取工具點一下,

小咪就變成是藍框框住的情況了。

PS:這圖層是跑馬圖+框有兩個元件共存,若直接 在場景1替換圖片,會讓跑馬線消失,

所以當小咪圖被藍框框住時,指著藍框裡面快點兩下 進入Symbol裡面,

進入後有跑馬線跟小咪圖兩個圖層,點一下小咪圖層第一格,小咪圖單獨被藍框框住

這時就可以依上面→ 4-2. 置換終點左圖作法開始換圖了

換好圖,再將圖片位置調適當就可以了。然後再看一 下測試影片,滿意了這步驟就完成了。

到這裡,若沒有想要再修改線條及文字色,那麼就算 是完工了。

完工了,再來就是存檔及發佈,然後上傳到奇摩支援 的swf空間後,

取得網址,再套上embed跑馬燈語法,之後就可以貼到部落格自欄位或文章處了。

成品展示↓

我是招搖貓跑馬燈^^感謝臣妾源碼分享及品味人生小圖分享,祝大家快樂開心^^" quality="high" wmode="transparent">

這款欄物製作,還是要感謝臣妾賜源碼,才能順利做出教學文,再次謝謝臣妾。

還有感謝品味人生收集的超可愛小圖分享,好用的素 材,剛好可以做跑馬燈^^

 

有始有終,繼續剩下的修改,這部份簡單多了^^

四. 跑馬文字大小設定及字色更改

修改完後,看一下測試影片,滿意了就可以回到場景 1了↓


五. 起點終點左右邊線顏色及上下框顏色

1.終點邊線換顏色

終點邊線上 下框線修改時會互相干擾,所以先把上下框線給隱藏並鎖起來。

4.指著中心點快點兩下進入Symbol8↓

以上終點邊線換色完成^^


2.上下框線換顏色

剛才把上下框線,隱藏及鎖住,現在再各點一下鎖及 大紅叉,就解開了。

換成把終點邊線隱藏及鎖住。起點右圖也可以解開 了。

4.指著中心點快點兩下進入Symbol9↓

好,現在終點邊線及上下框線都換色完成^^


3. 起點邊線換顏色

最後的了^^

好了,全部換色完成,看一下測試影片。滿意了,就 可存檔了唷^^


六. 存檔及發佈

6-1.  另存新檔

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

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

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

6-2.  發佈

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

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

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

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

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

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

http://blog.roodo.com/happy_ok/c2c18d7d.swf" width="200" height="40" FlashVars="go=招搖貓跑 馬燈,這是藍色框的" quality="high" wmode="transparent">


七. 上傳空間

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

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

貼版語法

YA^^,教學文到此終於告一段落了,這麼一大串 落落長的,

真是辛苦您把它學完喔,期待諸位的學習成果分享。

 

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

玄音 合十/2008.0704

2010/05/16 07:53

Flash 8 跑馬燈製作教學下篇

加閃框及連結點製作(含源 碼下載)

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

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

之前都是用Flash MX作欄物,有些源碼無法開啟,這次臣妾的欄物源碼,也因為開不起來,

就想說用 Flash8 來試試看,賓果!而且之前的時鐘及月曆源碼都照開無誤,

看來閃8 是最佳的Flash欄物製作軟體^^

 

 閃框跑馬燈製作開始 ^^

跑馬燈源碼下載:

 ←1. 點圖下載閃8跑 馬燈源碼

↑下載空間真的很難固定,上傳太多太大就改成收費 制,

沒關係,再換個空間^^若再失連了,請告知我唷, 謝謝^^

2. 下載完成,這是是fla檔,不用解壓,可直接在閃8開啟

 跑馬燈閃框秀

這是延續上編跑馬燈製作完成後,將色碼框換成閃圖,讓跑馬燈外框變成閃框套用方法。

 

 1. 匯入圖片至元件庫

把要替換的閃圖匯入元件庫(也可以是任何動圖或靜圖)

檔案→點擊匯 入→選匯入至元件庫

 

2. 先從起點邊線換圖這 部份開始

進入SyBmol 12↓

PS:↑要記住紫紅閃圖的尺寸及位置,因為置換的 圖也要一樣尺寸位置

↓插入圖層

↓將置換的閃圖拉進舞台

↓修改元件62的寬高及XY 尺寸位置↓

↓刪除圖層

刪除圖層後,看測試影片,控制→測試影片↓右邊線 換圖了↓

  

↑就這樣完成了^^,以上就是起點右邊線換圖步驟 ^O^↑


3. 終點邊線換圖

點Scene 1 回到場景1

↓因為終點邊線跟上下框線重疊,要製作時會妨礙, 所以先把上下框線隱藏及鎖住.

接下來換圖步驟都跟 2. 起點邊線換圖 是一樣的作法,所以 我就簡單說明喔^^

(PS:若是快點兩下進入後,下方屬性沒有出現, 就再點兩下+,然後回到場景1,再重新進入)

PS:↑要記住紫紅閃圖的尺寸及位置,因為置換的 圖也要一樣尺寸位置

↓插入圖層

↓將置換的閃圖拉進舞台

↓修改元件62的寬高及XY 尺寸位置↓

↓刪除圖層

刪除圖層後,看測試影片,控制→測試影片↓左邊線 換圖了↓

  

↑就這樣完成了^^,以上就是起點左邊線換圖步驟 ^O^↑


4. 上下框線換圖

點Scene 1 回到場景1

↓這裡也是,上下框線跟終點邊線重疊,製作時會妨 礙,所以先把終點邊線隱藏及鎖住.

(PS:若是快點兩下進入後,下方屬性沒有出現, 就再點兩下+,然後回到場景1,再重新進入)

接下來換圖步驟也跟 2. 起點邊線換圖 一樣的作法,所以也是簡單說明喔 ^^

 

4-1. 置換紫紅閃圖上

↓上下框線,意思就是有兩個點要換圖,上邊框跟下 邊框,這裡先置換上框線的圖

PS:↑要記住紫紅閃圖的尺寸及位置,因為置換的 圖也要一樣尺寸位置

↓插入圖層

↓將置換的閃圖拉進舞台(先置換紫紅閃圖上的圖 片)

↓修改元件62的寬高及XY 尺寸位置↓

↓刪除圖層

刪除紫紅閃圖上,圖層後,看測試影片,控制→測試 影片↓紫紅閃圖上也換圖了↓

  

↑以上就是紫紅閃圖上框線換圖步驟 ^O^↑而紫紅閃圖下框線換圖步驟跟上框線換圖是一樣的.


4-2. 置換紫紅閃圖下

PS:↑要記住紫紅閃圖的尺寸及位置,因為置換的 圖也要一樣尺寸位置

↓插入圖層

↓將置換的閃圖拉進舞台(先置換紫紅閃圖上的圖 片)

↓修改元件62的寬高及XY 尺寸位置↓

↓刪除圖層

刪除紫紅閃圖下,圖層後,看測試影片,控制→測 試影片↓紫紅閃圖下換圖了↓

  

↑以上就是紫紅閃圖下框線換圖步驟 ^O^↑


哇..全部換圖完畢,這教學文也結束 了,啊!還有 一道手續沒有做,就是更換連結製作網址。

這本應是在上篇就教的,但是我忘記了,PO好文後 才想到,所以就放在這篇教學了。

 

5. 更換連結點

點Scene 1 回到場景1

跑馬燈的連結,在起點右圖跟終點左圖,也就是源碼 的小精靈圖及幸運圖上,

我又加上了,在跑馬圖也加進一個連結,呵,只是語 法加入而已,很簡單,隨您喜歡,就加在那裡喔^^

 

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

 

以上是連結的語法,只要在網址的地方換上您家的位 址就可以了。

※ 這樣就完成了喔,另外兩個連結,作法都跟這是一樣的,我就不再說明了。

來看一下測試影片,點一下連結,成功了,就可以儲存上傳了唷^^


成品展示↓

我是閃框跑馬燈^^感謝臣妾源碼分享及品味人生小圖分享,祝大家快樂開心^^" quality="high" wmode="transparent">

這款欄物製作,還是要感謝臣妾賜源碼,才能順利做出教學文,再次謝謝臣妾。

還有感謝品味人生收集的超可愛小圖分享,好用的素 材,剛好可以做跑馬燈^^

 


六. 存檔及發佈

6-1.  另存新檔

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

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

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

6-2.  發佈

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

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

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

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

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

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

跑馬燈網址" width="任意" height="40" FlashVars="go=輸入您要說的話">


七. 上傳空間

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

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

貼版語法

好了這次真的完工了唷,辛苦您了,看了這麼落落長的一篇教學文

希望有幫上忙,讓您能很快的學會跑馬燈製作^^

 

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

玄音 合十/2008.0705

 

 

 

 

 

引用:http://tw.myblog.yahoo.com/jw!uSQuxCuICkYsLN62.y8z/article?mid=28604

    全站熱搜

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