您当前的位置:首页 > 网络学院 > Flash教程
Flash教程

全代码实现模拟时钟

来源:番禺网站建设 作者:广州做网站 点击量:5723 添加时间:2008-09-04 20:21:33

经过了一个假期,学了点AS3.0的知识,知道自己懂得的东西还是非常少的。很感谢黑羽老师的教材让我对AS3有了大体的认识,自己很艰难的看完了老师的书籍,觉得要走的路还很长很长啊~

我觉得要想学好AS3.0,最重要的还是实践环节,多多将理论付诸实践,这样才能真正的把学到的东西用到实处。记得自己两年前刚开始碰AS的时候,就特别想做一个模拟时钟,不过那时候自己屁也不懂,别说制作模拟时钟了,就是看懂一段代码也得查好多资料啊^0^!现在对AS有了很浅的认识,敢动手实践了,觉得自己还有了一定的进步了,呵呵~看效果:


新建一个Flash文件,设置其文档类为clockAS3,如下图(最好将Flash的帧频也改下,使出来的影片更舒缓):



我们将时钟分成了两个文档,即clock.as(定义时钟的外表)和clockAS3.as(文档类,添加外表和定义指针)这两个文件。当然我们也可以只定义一个AS文件,我们这样做只是为了让条理更加清晰。看我写的定义时钟外表的代码:

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);
        }
    }
}

好了,我们把时钟外表做好了,看下效果(当然是现将它作为文档类测试了,*^__^* 嘻嘻……):



好了,我要写真正的文档类了!o(∩_∩)o…哈哈~

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("tt     星期日");break;
                case 1:dat.appendText("tt     星期一");break;
                case 2:dat.appendText("tt     星期二");break;
                case 3:dat.appendText("tt     星期三");break;
                case 4:dat.appendText("tt     星期四");break;
                case 5:dat.appendText("tt     星期五");break;
                case 6:dat.appendText("tt     星期六");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;
        }
    }
}

终于写完了。这一次我们制作了一个非常平面化的,但是完全用代码实现的模拟时钟不多说了,看看刚制作的模拟时钟的效果吧,呵呵!

发表评论 共有 条评论
用户名: 密码: 验证码: 匿名发表
咨询QQ:番禺网站建设149900898 番禺网络公司296823656 番禺网页设计466741366 番禺域名注册598784086 番禺域名注册(售后技术支持)296823656
咨询信箱:001#py001.com  001#001.gd.cn (请将#改为@)
免费咨询电话:4000-848485   咨询热线:020-8484 8485 / 84888958 / 33110440  传真:020-84888958   手机:13600028769
番禺区市桥地址:广州市番禺区大北路118号(番禺宾馆旁)来访前请预约
番禺零零壹网络(广州市灵易计算机软件有限公司) 法律顾问:广东威信律师事务所陈彬律师
《中华人民共和国增值电信业务经营许可证》 粤ICP备08100317号
请使用1024*768分辨率浏览本站以达到浏览企业建站的最佳视觉效果,如果您有任何番禺建网站,南沙,花都网页设计,网站空间,番禺域名注册,番禺企业邮局的问题请与我们联系