Flash CS4教程：制作时尚的时钟效果(3)

文章来源于动画设计与制作208例，感谢作者 lby 给我们带来经精彩的文章！

设计教程/设计教程/Flash教程2009-10-13

(3)新建一个ActionScript文件，并将其保存为Clock，下面编写时钟类的程序代码。该类接收3个Sprite类型的对象参数，它们分别来自前面3个元件类所创建的实例(如第21~28行代码)，在创建实例时接收完这3个参数后，然后

(3)新建一个ActionScript文件，并将其保存为Clock，下面编写时钟类的程序代码。该类接收3个Sprite类型的对象参数，它们分别来自前面3个元件类所创建的实例(如第21~28行代码)，在创建实例时接收完这3个参数后，然后调用init()方法来注册ENTER_FRAME事件，并在侦听器函数enterFrameHandler()中创建Date的实例，再取得一个特定时间点的时、分和秒值(如第35~38行代码)。

AS3代码

/**
* 该类为时钟原理类
* @author lbynet
* @version 0.1
*/

package {
    import Date;
    import flash.display.Sprite;
    import flash.events.Event;

    public class Clock extends Sprite {

        private var hour:Number;
        private var minute:Number;
        private var second:Number;
        private var _hours:Sprite;
        private var _minutes:Sprite;
        private var _seconds:Sprite;

        public function Clock(h:Sprite,m:Sprite,s:Sprite) {
            //将传递进来的三个对象参数,赋给该时钟类的三个属性
            this._hours = h;
            this._minutes = m;
            this._seconds = s;

            init();
        }
        private function init() {
            this.addEventListener(Event.ENTER_FRAME,enterFrameHandler);
        }

        private function enterFrameHandler(event:Event) {

            var now:Date = new Date(); // 构造一个Date实例,Date 类的实例表示一个特定时间点
            hour = now.getHours();   //获取系统当前的时，分，秒
            minute = now.getMinutes();
            second = now.getSeconds();
            //下面控制时针、分针、秒针的旋转规律、旋转角度，后面进行具体解释
            _hours.rotation = hour*30 + Math.floor(minute*6/12);
            _minutes.rotation = minute*6 + Math.floor(second*6/60);
            _seconds.rotation = second*6;

        }
    }
}

技术看板：时、分、秒的算法

小时(hours)：时钟转动一圈是360°，总共花12个小时，每一小时为30°，为了更加接近生活中时钟的运动效果，因此再加上时针(hour)走完一小时的角度(30°)与分针(minute)走完一小时的角度(360°)，那么它们的比例关系就是1/12。

分钟(minutes)：时钟转动一圈是360°，总共花60分钟，每一分钟是6°，再加上分针(minute)走完一分钟的角度6°与秒针(second)走过一分钟的角度360°，那么它们的比例关系就是1/60。

秒钟(seconds)：时钟转动一圈是360°，共60秒钟，每一秒钟是6°。

(4)返回到flash文档中，然后新建一个AS图层，并编写出程序。通过SkinManager类来加载皮肤文件，并注册侦听器(如第1~3行代码);第5~8行代码是创建存储时钟组成元素的容器，并设置舞台为居中对齐;接着创建sprite_name和class_name两个数组，来分别存储将要被加载swf文件中的元件类的实例名称以及元件类名称(如10和11行代码);当加载完swf时钟皮肤文件后，调用侦听器函数completeHandler()，在侦听器函数中执行一个for()循环语句，然后创建4个(_length值等于4)被加载swf文件中的元件类实例，并在添加实例名称后统一添加到container_mc容器中(如第16~21行代码)。

AS3代码

var skin_mc:SkinManager = SkinManager.getInstance();
skin_mc.loadSkin("skin/01.swf");
skin_mc.addEventListener("skincomplete",completeHandler);

var container_mc:Sprite = new Sprite();
addChild(container_mc);
container_mc.x = stage.stageWidth/2;
container_mc.y = stage.stageHeight/2;

var sprite_name:Array = ["bg_mc","hours_mc","minutes_mc","seconds_mc"];
var class_name:Array = ["Bg","Hours","Minutes","Seconds"];
var _length:uint = class_name.length;
function completeHandler(e:Event) {
    var _class:Class;
    var new_sprite:Sprite;
    for (var i=0; i<_length; i++) {
        _class = skin_mc.getClass(class_name[i]);
        new_sprite = new _class();
        new_sprite.name = sprite_name[i];
        container_mc.addChild(new_sprite);
    }
    create();
}
//创建一个时钟(Clock)类,传入三个参数,参数类型都是Sprite类型,
//它们分别是舞台上存在的三个影片剪辑元件,实例名分别为
//时针(hours_mc) , 分针(minutes_mc) , 秒针(seconds_mc)
function create() {
    var a:Clock = new Clock(getItem("hours_mc"),getItem("minutes_mc"),getItem("seconds_mc"));
    addChild(a);
}
function getItem(Name:String):* {
    return container_mc.getChildByName(Name);
}

创建完被加载swf文件中的元件类实例后，调用create()方法来创建Clock类实例(如第28行代码);getItem()方法主要是通过container_mc.getChildByName()方法来取得container_mc容器中指定名称的对象。

(5)除了前面的方法外，还可以通过随机指定路径来加载swf皮肤文件。

AS3代码

var skin_mc:SkinManager = SkinManager.getInstance();
skin_mc.loadSkin("skin/0"+Math.ceil(Math.random()*4)+".swf");
skin_mc.addEventListener("skincomplete",completeHandler);

(6)按Ctrl+Enter组合键发布本例的所有程序。

进入论坛参与讨论和交作业：http://www.missyuan.com/viewthread.php?tid=424472

共3页:
<
1
2
3
>

情非得已