用Flash制作精巧的時鐘
時鐘是日常生活中必備的物品,有了它我們才可以有計劃的進行學習和工作.這次我們用Flash來制作一個精美的小時鐘,你可以把它拖到電腦屏幕的一角,使工作中的你可以方便的查看當前時間和日期.
本實例最終效果如圖1所示;
圖1
時鐘的最終效果
1.首先啟動Flash,新建一個影片,設置影片舞臺大小為270px*320px(單位為象素),背景顏色為灰色,顏色代碼為#CCCCCC.
2.首先制作時鐘里的時針.新建一個影片剪輯元件,命名為hours,進入元件的編輯區后,使用矩形工具繪制一個細長的無邊框的矩形,填充色為灰色,顏色代碼為#999999,如圖2所示;
圖2
制作時針
3.然后制作時鐘里的分針.新建一個影片剪輯元件,命名為minutes,進入元件的編輯區后,使用矩形工具繪制一個細長的無邊框的矩形,填充色為深灰色,顏色代碼為#666666,如圖3所示;
圖3
制作分針
4.最后制作時鐘里的秒針.新建一個影片剪輯元件,命名為conds,進入元件的編輯區后,使用矩形工具繪制一個細長的無邊框的矩形,填充色為紅色,顏色代碼為#FF0000,如圖4所示;
圖4
制作秒針
5.新建一個圖形元件,命名為outeregde,進入元件的編輯區后,使用前面實例中介紹的方法制作一個圓環,填充色為灰色,顏色代碼為#999999,用作時鐘的邊框,如圖5所示;
圖5
制作時鐘的邊框
6.回到主場景中,將影片默認的圖層Layer1重命名為outeredge,然后將元件outeregde拖到舞臺上,調整其位置到舞臺的中央.
7.新建一個圖層numbers,使用文本工具分別輸入從1到12這12個數字,并繞著時鐘邊框排列其位置,如圖6所示;
圖6
添加時間數字
8.新建一個圖層clockhands,分別將元件Hours,
minutes和Seconds拖到場景中,然后使用橢圓工具繪制一個黑色無邊框的正圓,將其放置在表盤的中心,然后分別將時針,分針和秒針放到表盤的中心,使三個表針的下部和中心位置對齊,如圖7所示;
圖7
在表盤中添加表針
9.添加圖層pagetitle,使用工具分別繪制一個靜態文本框和一個動態文本框,在靜態文本框中輸入時鐘的標簽:flash時鐘,設置動態文本框的文本變量名為time,用來動態顯示年,月,日和星期.
10.最后添加一個圖層命名為Action,設置控制時鐘運行的Action腳本.
在第1幀添加如下Action:
time
=
new
Date();//定義time為Date日期對象
hours
=
time.getHours();//取得當前系統的小時,并賦給變量hours
minutes
=
time.getMinutes();//取得當前系統的分鐘,并賦給變量minutes
conds
=
time.getSeconds();//取得當前系統的秒鐘,并賦給變量conds
if
(hours>12)
{
hours
=
hours-12;
}
if
(hours<1)
{
hours
=
12;
}
hours
=
hours*30+int(minutes/2);
minutes
=
minutes*6+int(conds/10);
conds
=
conds*6;
在第2幀添加如下Action:
gotoAndPlay(1);
11.最后一步是給三個表針添加各自的Action,使其可以按照自己的規律進行旋轉
給時針添加如下Action:
onClipEvent
(enterFrame)
{
tProperty(this,
_rotation,
_root.hours);
}
給分針添加如下Action;
onClipEvent
(enterFrame)
{
tProperty(this,
_rotation,
_root.minutes);
}
給秒針添加如下Action:
onClipEvent
(enterFrame)
{
tProperty(this,
_rotation,
_root.conds);
}
FLASH怎么做時鐘？
很簡單，打開flash軟件，新建一文檔，在第一楨打開動作面板，輸入以下腳本代碼。測試OK //畫鐘表邊線 this.createEmptyMovieClip("bianxian_mc", 1); with (bianxian_mc) { lineStyle(2, 0xCCCCCC); moveTo(Math.cos(0*Math.PI/180)*96, Math.sin(0*Math.PI/180)*96); for (var i = 360; i>=0; i--) { lineTo(Math.cos(i*Math.PI/180)*96, Math.sin(i*Math.PI/180)*96); } _x = 100; _y = 100; } //創建時間動態文本 this.createTextField("my_txt", 2, 0, 0, 0, 0); with (my_txt) { autoSize = true; textColor = 0x555555; _x = 70; _y = 60; } //畫12個表格 this.createEmptyMovieClip("biaoge_mc", 3); with (biaoge_mc) { lineStyle(2, 0xCCCCCC); moveTo(0, -96); lineTo(0, -92); _x = 100; _y = 100; } for (i=1; i<12; i++) { duplicateMovieClip(biaoge_mc, "biaoge_mc"+i, 3+i); tProperty("biaoge_mc"+i, _rotation, i*30); } //畫時針 this.createEmptyMovieClip("shizhen_mc", 16); with (shizhen_mc) { lineStyle(4, 0x666666); moveTo(0, 0); lineTo(0, -60); _x = 100; _y = 100; } //畫分針 this.createEmptyMovieClip("fenzhen_mc", 17); with (fenzhen_mc) { lineStyle(2, 0x666666); moveTo(0, 0); lineTo(0, -75); _x = 100; _y = 100; } //畫秒針 this.createEmptyMovieClip("miaozhen_mc", 18); with (miaozhen_mc) { lineStyle(1, 0x666666); moveTo(0, 0); lineTo(0, -90); _x = 100; _y = 100; } //讓時針、分針、秒針動起來 this.createEmptyMovieClip("time_mc", 19); time_mc.onEnterFrame = function() { my_date = new Date(); shi = my_date.getHours(); fen = my_date.getMinutes(); miao = my_date.getSeconds(); shizhen_mc._rotation = shi/12*360+fen/60*30; fenzhen_mc._rotation = fen/60*360+miao/60*6; miaozhen_mc._rotation = miao/60*360; if (shi<10) { shi = "0"+shi; } if (fen<10) { fen = "0"+fen; } if (miao<10) { miao = "0"+miao; } my_txt.text = shi+"："+fen+"："+miao; }; //畫中心圓 this.createEmptyMovieClip("yuan_mc", 20); with (yuan_mc) { beginFill(0x555555); moveTo(Math.cos(0*Math.PI/180)*4, Math.sin(0*Math.PI/180)*4); for (var i = 360; i>=0; i--) { lineTo(Math.cos(i*Math.PI/180)*4, Math.sin(i*Math.PI/180)*4); } _x = 100; _y = 100; }
FLASH時鐘代碼
http://www.qqywf.com/show/fd.swf?id=4288(
粉色FLASH可愛時鐘
女生專用
MIni款)
http://www.qqywf.com/show/fd.swf?id=3836(
簡潔數字FLASH時鐘版
黑白電子表)
http://www.qqywf.com/show/fd.swf?id=3826(
玩的就是心跳_視覺FLASH時鐘代碼
黑色款)
http://www.qqywf.com/show/fd.swf?id=3825(QQ
空間水晶FLASH時鐘代碼)
http://www.qqywf.com/show/fd.swf?id=3328(QQ
空間黑色FLASH時鐘
旋轉特效)
http://www.qqywf.com/skin.swf?m=37(
按住可拖動的QQ空間時鐘FLASH代碼
個性ING)
Flash怎么制作時針12分鐘、分針1分鐘、秒針1秒鐘的時鐘？。
這制作不是很難，但也需要幾個步驟：
1.新建一個文檔，可以命名為時鐘；
2.新建三個影視剪輯文件，分別命名為時針、分針、秒針；
3.導入提前準備好表盤圖片，也可以直接制作一個圖形文件，在這個文件里畫一個表盤；
4.新建幾個圖層，把這些文件放入場景合適的位置，在相應的時間軸上設置關鍵幀；
5.新建一個圖層，打開動作面板，寫上動作語句；
6.可以進行測試，或者保存文件即可。
flash數字時鐘的制作
this.createTextField("my_year",
1,
100,
100,
300,
100);
this.createTextField("my_month",
2,
200,
100,
300,
100);
this.createTextField("my_day",
3,
300,
100,
300,
100);
this.createTextField("my_hours",
4,
100,
200,
300,
100);
this.createTextField("my_minutes",
5,
200,
200,
300,
100);
this.createTextField("my_conds",
6,
300,
200,
300,
100);
this.onEnterFrame
=
function()
{
var
my_date:Date
=
new
Date();
my_txt.text
=
my_date.getSeconds();
my_year.text
=
"年份:"+my_date.getFullYear();
my_month.text
=
"月份:"+int(int(my_date.getMonth())+1)+"月";
my_day.text
=
"日期:"+my_date.getDate()+"日";
my_hours.text="現在是:"+my_date.getHours()+"時";
my_minutes.text=my_date.getMinutes()+"分";
my_conds.text=my_date.getSeconds()+"秒";
};
輸入就可以了
另外，這里還有例子可以下載：
http://www.flash8.net/fla/9774.shtml
