用AS制作藝術時鐘
教學目的:通過本節(jié)教學了解和掌握動作面板和as語句的添加、運用,進而制作出更加生動的動畫,從而使你動畫作品更具有感染力。
教學對象:本教材是針對有一定動畫制作基礎和對as語句有一定了解的朋友們編制的,因此省略了一些步驟,還望諒解。
制作步驟
1.啟動FLASH8 軟件。
2.確立文檔屬性 設置動畫尺寸為200*220,幀頻為12,背景顏色任意,其它默認,點擊確定。如圖1所示:
(圖1)
3.在場景添加兩個圖層,共三個圖層,自下而上分別命名為“背景”、“文本”和“as”。點擊背景圖層第一幀,導入一張你喜歡的圖片,寬高為200*220,全居中,上鎖。如圖2所示:
(圖2)
4.點擊文本圖層第一幀,選擇文本工具在圖片下方輸入時鐘名稱,字體顏色自定。上鎖。如圖3所示:
(圖3)
4.點擊AS圖層第一幀,打開動作面板輸入下面語句:
//畫鐘表邊線
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 = 110;
}
//創(chuàng)建時間動態(tài)文本
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 = 110;
}
for (i=1; i<12; i++) {
duplicateMovieClip(biaoge_mc, "biaoge_mc"+i, 3+i);
setProperty("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 = 110;
}
//畫分針
this.createEmptyMovieClip("fenzhen_mc", 17);
with (fenzhen_mc) {
lineStyle(2, 0x666666);
moveTo(0, 0);
lineTo(0, -75);
_x = 100;
_y = 110;
}
//畫秒針
this.createEmptyMovieClip("miaozhen_mc", 18);
with (miaozhen_mc) {
lineStyle(1, 0x666666);
moveTo(0, 0);
lineTo(0, -90);
_x = 100;
_y = 110;
}
//讓時針、分針、秒針動起來
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 = 110;
}
5.時間軸面板如圖4所示:
圖14
6.測試存盤
最終效果顯示:
祝你成功!