应用思考-教育技术论坛

标题: 学习笔记之“时间事件” [打印本页]

作者: 清灯竹影 时间: 2014-6-20 03:52
标题: 学习笔记之“时间事件”

学习笔记之“时间事件”

当我们需要基于时间创建事件时，会需要类似定时器的东西，也就是时间结束时会发出一个特定的事件。我突然觉得这个有点像定时炸弹那个名堂。就是预先设置好时间，时间一到....{:soso_e170:}{:soso_e136:}
定时器需要有一些属性来定义它该如何工作。比如定时炸弹….哦，我指的是工程里的定时爆破…..我们可以想象，最起码要有两个条件：

1、时间间隔（每隔多长时间发出事件）这就是倒计时。

2、时间间隔运行的次数。说得直接点就是时间间隔结束时，计时器运行结束。理论是枯燥乏味的，尽管这里用了比喻。我们还是用图示来说明这个问题吧。

作者: 清灯竹影 时间: 2014-6-20 03:56
图片说明

作者: 清灯竹影 时间: 2014-6-20 04:04
上图显示的定时器是被设置为1秒的间隔，每一秒指针跳动一格，说明每次倒计时的时间是1秒，第一次倒计时会在1秒后结束，TimerEvent.TIMER事件会被定时器发出。当最后一次倒计时结束时，定时器会发出TimerEvent.TIMER_COMPLETE事件，这表示定时器运行结束。{:soso_e154:}不要被上面内容的两个时间事件的英文给吓住...... {:soso_e113:}稍后我们一起理解它，我保证这个不晦涩....比鲁迅先生的文章要容易理解多了。

作者: 清灯竹影 时间: 2014-6-20 04:18
好，先打开你的flash（AS3.0）然后在主场景，第一帧。先输入下面的代码，我建议你不要复制粘贴，而是逐个的输入这些代码，从我个人的学习体会来说，自己输入代码会培养一种熟悉感。暂时不必理会它们的意思，然后我们一起来分析。
      var timer:Timer=new Timer(1000,10);
      timer.start();
      timer.addEventListener(TimerEvent.TIMER,tickTock);
      timer.addEventListener(TimerEvent.TIMER_COMPLETE,timerComplete);
      function tickTock(event:TimerEvent):void{
               trace("开始计时!")
      }
      function timerComplete(event:TimerEvent):void{
               trace("计时结束！")
      }

作者: 清灯竹影 时间: 2014-6-20 04:25
现在先运行测试下影片，输出面板会在每次间隔输出“开始计时”字符串。{:soso_e103:}我有点后悔，应该每次输出“滴滴”这样的字符，才显得合适，但是这个没问题，你可以自己修改。在输出10次“开始计时”以后，输出“计时结束”。
回顾下，你做了什么事情？你定义了一个计时器让它结束前每秒发出一个事件。当每个事件发出时，你的输出面板输出了信息。

作者: 清灯竹影 时间: 2014-6-20 04:43
接下来，我们把那段代码的零部件分别放桌子上，挽起袖子来分析他们的工作原理。{:soso_e100:}如果你有一点罗永浩先生那种工匠情怀，会发现摆弄并研究这些零部件会是一种很有趣的事情。
第一行代码：var timer:Timer=new Timer(1000,10);
var timer 这是声明一个时间变量，timer是这个变量的名称。如果你不知道什么是变量，可以先百度下，我觉得“变量”这个话题可以用个单独的篇幅来说明，不过这里先略过。既然是时间的变量，它的类型就是"Timer"，然后
我们把这个变量实例化。{:soso_e147:}这个描述稍微有点抽象了，不过你暂时可以这样理解，就是我们准备了一个装时间
的盒子，然后把时间装在里面.......时间都去哪儿了？我们这就来设置时间。后面的括号，有两个参数（1000,10），
第一个参数1000，表示1000毫秒，因为1000毫秒=1秒，你希望定时器执行10次，所以需要添加第二个参数“10”。

作者: 清灯竹影 时间: 2014-6-20 04:49
通过第一行代码，你已经设置好了时间计时器。但是在你告诉它开始运行之前，它不会自己运行的。所以在第二行代码用了timer对象的start()函数让计时器开始执行。意思就是对timer说：“咳，兄弟，你可以开始干活了！”

等天亮了再写吧，先睡个回笼觉。

作者: 清灯竹影 时间: 2014-6-20 08:38
接下来的事情，就是定义事件监听。关于事件监听这个问题，我在孙老师这个板块有个详细的说明，有兴趣的初学者朋友可以找那篇学习笔记来了解，顺便帮捧个场。呵呵！
回到时间事件的监听。首先，我们来看是用谁来监听？也就是谁是监听事件的发起者，你已经看到了，这两个时间事件的监听者就是timer!到这里，你已经感觉到我们开始定义的这个变量timer的重要性了，它很酷，是吧？
我们具体来看timer监听的事件，addEventListener 这个不必说了，意思是添加一个事件侦听器。接下来括号里的零件，你可要认真分辨了，仔细把它弄清楚，这真是需要点工匠情怀的。括号（TimerEvent.TIMER,tickTock);
第一个零件：TimerEvent 这表示时间事件类型！这和你以前认识的MouseEvent鼠标事件类型的区别想必你稍微对比下就明白了，开头单词，一个是时间Timer、另一个是鼠标Mouse {:soso_e128:}这么看起来区别这俩事件类型不是那么痛苦的。接下来TimerEvent事件类型里有一个TIMER事件，它的意思是每次时间间隔结束的时候被发出的事件。后面你需要指定回调的函数名，就是tickTock()

作者: 清灯竹影 时间: 2014-6-20 08:49
明白第一个事件监听的工作原理，第二个就轻松多了。为了节约篇幅，这里我只对TIMER_COMPLETE做解释。它的意思是“定义timercomplete事件对象的type的属性值”，我猜你看到这个解释有点挠头.....但是不要紧，你暂时理解成“在第一个时间事件TIMER结束以后会发生点什么”。
既然是这样，发生了什么呢？发生的事情就是在输出面板输出“计时结束！”

作者: 清灯竹影 时间: 2014-6-20 09:05
我们已经完整的分析了这段代码，想必你对它们的工作原理有了比较清晰的理解。现在再次运行测试下你的影片，深深的理解并直观体会它的效果。

这篇时间事件的学习笔记到此就结束了吗？哦，不是的，我的朋友，如果仅仅如此，那就没必要费这么大功夫来写它了。我有一些想法，看你能不能试一试？{:soso_e113:}
比如，在舞台上做一个影片剪辑，让它用时间事件动起来，给你一个小提示，可以用类似boll_mc.x+=1来替换第一个时间侦听的trace();或者是一朵花的影片剪辑，然后用时间事件来改变它的scaleX和scaleY让这朵花慢慢的变大...变大到一定程度，旁边有个文本提示什么的......我还能想到很多很多的这样实例，你也能OK！注意尝试修改（1000,10）里的参数来试验各种效果！

想想，这样你没有用到任何补间动画，没在帧上搞花样....只是敲打出一些代码，加上你的美好创意，就能搞出丰富的效果了。你的同学看了一定会概叹：{:soso_e200:}哇！好吊喔！

作者: 清灯竹影 时间: 2014-6-22 05:13
除了以上的想法，根据这篇学习笔记来做一个倒计时器，是一个很不错的练习。我已经做了一个倒计时器实例，现在先上传SWF来看看。我想，如果你愿意用点时间，一定能做出比这个漂亮很多的倒计时器。说实话，这个倒计时器存在着一些缺陷，只要愿意修改，可以让它成为一个好很多的实例。

作者: 清灯竹影 时间: 2014-6-22 05:16

倒计时器(34.12K)

作者: skeok 时间: 2014-11-15 20:10
很多的实例

作者: 张曼静 时间: 2015-4-3 18:26
好像还是不懂

欢迎光临应用思考-教育技术论坛 (http://etthink.com/)