新建一个Flash文件,设置其文档类为clockAS3,如下图(最好将Flash的帧频也改下,使出来的影片更舒缓):
我们将时钟分成了两个文档,即clock.as(定义时钟的外表)和clockAS3.as(文档类,添加外表和定义指针)这两个文件。当然我们也可以只定义一个AS文件,我们这样做只是为了让条理更加清晰。看我写的定义时钟外表的代码:
![](/Images/OutliningIndicators/ContractedBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
package {//将代码打包
import flash.display.Sprite;//因为外表是可视对象而且是容器,用Sprite类再合适不过了
import flash.text.TextField;//在时钟里可以写入我们的诸如版权等等信息
import flash.text.TextFieldAutoSize;//为使文字书写时居中,需导入此类
public class clock extends Sprite {//我们将外表定义为clock类
public function clock() {//我为了省事,把所有的代码都写在了构造函数里,大家也可以分成块来写
//------为表盘添加背景------
this.graphics.beginFill(0xAAAAAA);
this.graphics.drawCircle(200,200,150);
this.graphics.endFill();
//------为表盘添加计数------
for (var i=0; i<60; i++) {
var info:Sprite=new Sprite();
if (i%5==0) {
info.graphics.lineStyle(1,0xFFFFFF);
} else {
info.graphics.lineStyle(1,0xFFFF00);
}
info.graphics.moveTo(0,0);
info.graphics.lineTo(150,0);
info.rotation=i*6;
info.x=200;
info.y=200;
addChild(info);
}
//------为表盘添加前景------
var fg:Sprite=new Sprite();
fg.graphics.beginFill(0xAAAA80);
fg.graphics.drawCircle(200,200,140);
fg.graphics.endFill();
addChild(fg);
//-----显示12点的指示-----
var show12:TextField=new TextField();
show12.selectable=false;
show12.autoSize=TextFieldAutoSize.CENTER;
show12.text="XII";
show12.x=200-show12.width/2;
show12.y=60;
addChild(show12);
//-----显示3点的指示------
var show3:TextField=new TextField();
show3.selectable=false;
show3.autoSize=TextFieldAutoSize.CENTER;
show3.text="III";
show3.x=330-show3.width/2;
show3.y=190;
addChild(show3);
//-----显示6点的指示------
var show6:TextField=new TextField();
show6.selectable=false;
show6.autoSize=TextFieldAutoSize.CENTER;
show6.text="VI";
show6.x=200-show6.width/2;
show6.y=320;
addChild(show6);
//-----显示9点的指示------
var show9:TextField=new TextField();
show9.selectable=false;
show9.autoSize=TextFieldAutoSize.CENTER;
show9.text="IX";
show9.x=65;
show9.y=190;
addChild(show9);
//------添加背景文字------
var AuthorInfo:TextField=new TextField();
AuthorInfo.selectable=false;
AuthorInfo.autoSize=TextFieldAutoSize.CENTER;
AuthorInfo.text="有梦可依制作";
AuthorInfo.x=200-AuthorInfo.width/2;
AuthorInfo.y=210;
addChild(AuthorInfo);
}
}
}
好了,我们把时钟外表做好了,看下效果(当然是现将它作为文档类测试了,*^__^* 嘻嘻……):
![](/Images/OutliningIndicators/ContractedBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
package{
import flash.events.Event;//因为要用到ENTERFRAME事件,要导入他所在的类包
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
public class clockAS3 extends Sprite{
public function clockAS3(){
var surface:clock=new clock();//在一开始我们就把外表给添加上了
addChild(surface);
//------添加日期,没有使用事件,我偷了个懒,呵呵------
var myTime:Date=new Date();
var dat:TextField=new TextField();
dat.selectable=false;
dat.autoSize=TextFieldAutoSize.CENTER;
dat.text="今天是"+myTime.getFullYear()+"年"+(myTime.getMonth()+1)+"月"+myTime.getDate()+"日\n";
switch(myTime.getDay()){
case 0:dat.appendText("\t\t 星期日");break;
case 1:dat.appendText("\t\t 星期一");break;
case 2:dat.appendText("\t\t 星期二");break;
case 3:dat.appendText("\t\t 星期三");break;
case 4:dat.appendText("\t\t 星期四");break;
case 5:dat.appendText("\t\t 星期五");break;
case 6:dat.appendText("\t\t 星期六");break;
}
dat.x=200-dat.width/2;
dat.y=230;
addChild(dat);
//------添加秒针------
var sec:Sprite=new Sprite();
sec.graphics.lineStyle(1,0xFFFFFF);
sec.graphics.moveTo(0,0);
sec.graphics.lineTo(120,0);
sec.x=200;
sec.y=200;
addChild(sec);
//------添加分针------
var min:Sprite=new Sprite();
min.graphics.lineStyle(2,0xFFFFFF);
min.graphics.moveTo(0,0);
min.graphics.lineTo(110,0);
min.x=200;
min.y=200;
addChild(min);
//------添加时针------
var hou:Sprite=new Sprite();
hou.graphics.lineStyle(3,0xFFFFFF);
hou.graphics.moveTo(0,0);
hou.graphics.lineTo(90,0);
hou.x=200;
hou.y=200;
addChild(hou);
//------为指针设置角度------
sec.addEventListener(Event.ENTER_FRAME,showSec);
min.addEventListener(Event.ENTER_FRAME,showMin);
hou.addEventListener(Event.ENTER_FRAME,showHou);
//------在表盘中间添加一个小点遮住指针,不能定义在外表上~------
var bc:Sprite=new Sprite();
bc.graphics.beginFill(0x000000);
bc.graphics.drawCircle(200,200,5);
bc.graphics.endFill();
addChild(bc);
}
private function showSec(e:Event){
var myTime:Date=new Date();
e.target.rotation=myTime.getSeconds()*6+myTime.getMilliseconds()/1000*6-90;
}
private function showMin(e:Event){
var myTime:Date=new Date();
e.target.rotation=myTime.getMinutes()*6+myTime.getSeconds()/10-90;
}
private function showHou(e:Event){
var myTime:Date=new Date();
e.target.rotation=myTime.getHours()%12*30+myTime.getMinutes()/10-90;
}
}
}
终于写完了。这一次我们制作了一个非常平面化的,但是完全用代码实现的模拟时钟不多说了,看看刚制作的模拟时钟的效果吧,呵呵!