系統公告
個人檔案
個人圖檔
ID:cats
暱稱:Diving Cat 潛水貓

招財貓會連到雅虎「潛水貓小鋪」
「買嘛!買嘛!」會連到露天「潛水貓小鋪」
搜尋此頻道內容
搜尋:
進入本站所有文章:
好時光貼曆
記憶裡的螢火蟲
人氣指數
當日人次:
累積人次:
RSS 訂閱
RSS2
ATOM
贊助商
其它資訊
本部落所刊登之內容,皆由作者個人所提供,不代表 yam天空部落 本身立場。
CC授權
著作權說明文字
POWERED BY
POWERED BY
會員登入免費註冊
July 5, 2005

很多朋友問我:「如何製作小時鐘?」

我很樂於在此和大家分享製作方式。

擁有屬於自己製作的小時鐘,不僅可以裝點版面,更可以讓自己一手打造出來的部落格擁有自己獨特的風格。

現在,請跟著我的步驟,一塊兒來打造屬於自己的時鐘吧!

首先教大家製作簡單又實用的電子鐘(本示範教學使用軟體為Macromedia Flash)。

1.新增一個檔案,先存至您的硬碟中。

2.(如圖一)點擊Timeline按鈕,打開場景時間軸,本專案只有一個場景,共四個圖層,請依圖由上至下分別將每個圖層命名為「ActionScript」、「顯示數字」、「底圖」、「動畫」。



圖一

3.「動畫」圖層為大家發揮的部份,您可放入自製的動畫或圖片。

4.「底圖」的圖層請放置一個色塊,做為時鐘顯示數字的底圖。

5.(如圖二)點選「顯示數字」圖層第一個影格(Frame),請用文字工具(Text Tool)在場景中底圖區上方,拖曳出一個文字區塊,然後點選此文字區塊,(如圖三)打開屬性設定(Properties)視窗,將文字屬性設定為動態文字(Dynamic Text),變數欄則將名稱設定為「what_time」。
  圖二



圖三


6.最後,點選「ActionScript」圖層第一個影格(Frame),貼上下列程式碼(如圖四):

now = new Date();
hours = now.getHours();
minutes = now.getMinutes();
seconds = now.getSeconds();
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
if (seconds % 2) {
what_time = hours + ":" + minutes+ ":"+ seconds;
} else {
what_time = hours + " " + minutes+ " " + seconds;
}



圖四

7.圈選「顯示數字」、「底圖」、「動畫」這三個圖層的第二個影格,按下F5為他們各自增加一個影格(Frame)(如圖一,只有第一個圖層沒有第二個影格)。

8.存檔,測試。

是否OK呢?若有問題的話...千萬問我,由於潛水貓將本站定位為插畫網站而不是教學網站,所以希望大家多多把注意力拉回到潛水貓的插畫上,關於程式設計的問題,大家可多多參考市售的一些教學書藉:

1. FlashMX 2004跟macromedia學actionscript ( derek franklin/ jobe maker著,施威銘研究室譯 ) -旗標出版社
2. Flash MX 動畫強力教-Action Script ( 作者/葉翊隆 ) -旗標出版社

Flash30天試用版下載:http://www.macromedia.com/software/flash/

(教學圖片為Macromedia Flash所屬界面,本文作者為潛水貓,請勿轉載)

引用 (你可以針對此文寫一篇屬於自己的blog/想法,並給作者一個通告)
引用
相關閱讀
留言 (21筆)
21.
感謝您的教學~非常成功呢!
謝謝您~
 
AMU 於 2009-11-11 01:31:14 留言 |
20.
我正好想學這個東西~
謝謝你的分享呢~!
也歡迎來我的部落格逛逛喔~^^
 
大魚 於 2008-06-05 19:09:14 留言 |
19.
謝謝你的教學我有成功作出來.等我有空在貼給你看
 
totoro920591 2008-03-08 08:42:27 留言 |
18.
謝謝分享~
有空我也要來試試做個自己的小時鐘 ^^
 
板主回覆:
嗯嗯~我上面好像有步驟少一個~等等改一下就可用了~
dorunda 於 2007-10-10 18:08:38 留言 |
17.
請問依下
Macromedia Flash
要去買嗎!?
還是電腦內就有的軟體
我都找不到@@"
 
宇#。 於 2007-04-22 10:26:02 留言 |
16.
成功的做出小時鐘了
謝謝你^^~
 
匿名 於 2007-01-21 04:39:18 留言 |
15.
我成功了耶~
謝謝你喲~
做出來的東西好可愛哦~
讚讚讚!!!!!
 
chaolin 於 2006-10-20 11:51:21 留言 |
14.
我只能說..
你真的很厲害又有才華人又好耶>
 
匿名 於 2006-07-15 19:51:39 留言 |
13.
有誰知道那的試用版要如何下載…一點進去全去英文也不知道要去哪下載…orz… = =
 
電腦笨蛋 於 2006-07-04 17:56:15 留言 |
12.
好厲害喔
不過我也覺得重要的不是怎麼做時鐘
是你的圖 ^^
 
hikawac 於 2006-06-15 15:56:05 留言 |
11.
成功了....yaya...
 
susan 於 2005-10-15 15:16:13 留言 |
10.
有點懂了

只是時間怎麼快了1小時?.....
 
susan 於 2005-10-13 20:48:13 留言 |
9.
自學中...ㄟ請問now = new Date();
hours = now.getHours();
minutes = now.getMinutes();
seconds = now.getSeconds();
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
if (seconds % 2) {
what_time = hours + ":" + minutes+ ":"+ seconds;
} else {
what_time = hours + " " + minutes+ " " + seconds;
}

~~~~是要貼在哪裡阿?影格的什麼地方......不懂...誰能賜教一下!!
 
susan 於 2005-10-13 20:02:38 留言 |
8.
在圖三右下角,有個Var,就是所謂的變數,不一定用what_time,可以用其他的名字,但與程式中的變數要相同。
 
Justin 於 2005-07-27 16:04:39 留言 |
7.
試了好久...終於成功了ˇˇˇ
原來我忘了加變數
在顯示數字圖層中動態文字的屬性要加上變數what_time
這樣才有東西顯示出來
 
karuta 於 2005-07-17 14:56:21 留言 |
6.
讚讚讚, 好詳細喔!
我也要找個時間來設計一個瑞士小白花時鐘 (希望我找的到時間勒)~
你真的可以開班授課呢!!!
 
emmaswisslife 於 2005-07-16 05:26:47 留言 |
5.
好棒喔!一陣子沒來了!
多了好多令人佩服的教學!!!
 
keven 於 2005-07-07 18:02:01 留言 |
4.
昨天試了一下午,
都做不出來,不知道問題出在哪?
我太笨了!orz
不過,還是要來謝謝潛水貓的教學文^^

 
whynot 於 2005-07-07 12:56:53 留言 |
3.
潛貓親口傳授...
好慷慨!!好好喔!!!!^_^
(感動不已)
 
沿兒 於 2005-07-07 11:11:15 留言 |
2.
師父~我來請安嚕!
好。我改天也來試試看
感謝感恩師父阿
要來去睡了。真得好累好累
 
iamkiyoshi 於 2005-07-07 00:49:04 留言 |
1.
你好好喔…
好…我來學^^成功告訴你喲~
謝謝!!
 
Kite 於 2005-07-06 11:53:38 留言 |
發表你的留言 (字數限制 最多 2000 個中文字)
私密留言:
Name:






內容: