开启左侧

学习笔记之“时间事件”

[复制链接]
清灯竹影 发表于 2014-6-20 03:52:51 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
                   学习笔记之“时间事件”
当我们需要基于时间创建事件时,会需要类似定时器的东西,也就是时间结束时会发出一个特定的事件。我突然觉得这个有点像定时炸弹那个名堂。就是预先设置好时间,时间一到....{:soso_e170:}{:soso_e136:}
     定时器需要有一些属性来定义它该如何工作。比如定时炸弹.哦,我指的是工程里的定时爆破..我们可以想象,最      起码要有两个条件:
1、          时间间隔(每隔多长时间发出事件)这就是倒计时。
2、            时间间隔运行的次数。说得直接点就是时间间隔结束时,计时器运行结束。理论是枯燥乏味的,尽管这里用了比   喻。我们还是用图示来说明这个问题吧。




欢迎大家多发帖,参与讨论,增进彼此了解。

精彩评论13

正序浏览
 楼主| 清灯竹影 发表于 2014-6-20 04:04:12 | 显示全部楼层
    上图显示的定时器是被设置为1秒的间隔,每一秒指针跳动一格,说明每次倒计时的时间是1秒,第一次倒计时会在1秒后结束,TimerEvent.TIMER事件会被定时器发出。当最后一次倒计时结束时,定时器会发出TimerEvent.TIMER_COMPLETE事件,这表示定时器运行结束。{:soso_e154:}不要被上面内容的两个时间事件的英文给吓住...... {:soso_e113:}稍后我们一起理解它,我保证这个不晦涩....比鲁迅先生的文章要容易理解多了。  
欢迎大家多发帖,参与讨论,增进彼此了解。
 楼主| 清灯竹影 发表于 2014-6-20 04:18:54 | 显示全部楼层
    好,先打开你的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:05 | 显示全部楼层
     现在先运行测试下影片,输出面板会在每次间隔输出“开始计时”字符串。{:soso_e103:}我有点后悔,应该每次输出“滴滴”这样的字符,才显得合适,但是这个没问题,你可以自己修改。在输出10次“开始计时”以后,输出“计时结束”。
回顾下,你做了什么事情?你定义了一个计时器让它结束前每秒发出一个事件。当每个事件发出时,你的输出面板输出了信息。
欢迎大家多发帖,参与讨论,增进彼此了解。
 楼主| 清灯竹影 发表于 2014-6-20 04:43:53 | 显示全部楼层
    接下来,我们把那段代码的零部件分别放桌子上,挽起袖子来分析他们的工作原理。{: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:12 | 显示全部楼层
   通过第一行代码,你已经设置好了时间计时器。但是在你告诉它开始运行之前,它不会自己运行的。所以在第二行代码用了timer对象的start()函数让计时器开始执行。意思就是对timer说:“咳,兄弟,你可以开始干活了!”
   


   等天亮了再写吧,先睡个回笼觉。
欢迎大家多发帖,参与讨论,增进彼此了解。
 楼主| 清灯竹影 发表于 2014-6-20 08:38:23 | 显示全部楼层
   接下来的事情,就是定义事件监听。关于事件监听这个问题,我在孙老师这个板块有个详细的说明,有兴趣的初学者朋友可以找那篇学习笔记来了解,顺便帮捧个场。呵呵!
   回到时间事件的监听。首先,我们来看是用谁来监听?也就是谁是监听事件的发起者,你已经看到了,这两个时间事件的监听者就是timer!到这里,你已经感觉到我们开始定义的这个变量timer的重要性了,它很酷,是吧?
   我们具体来看timer监听的事件,addEventListener 这个不必说了,意思是添加一个事件侦听器。接下来括号里的零件,你可要认真分辨了,仔细把它弄清楚,这真是需要点工匠情怀的。括号(TimerEvent.TIMER,tickTock);
第一个零件:TimerEvent  这表示时间事件类型! 这和你以前认识的MouseEvent鼠标事件类型的区别想必你稍微对比下就明白了,开头单词,一个是时间Timer、另一个是鼠标Mouse   {:soso_e128:}这么看起来区别这俩事件类型不是那么痛苦的。接下来TimerEvent事件类型里有一个TIMER事件,它的意思是每次时间间隔结束的时候被发出的事件。后面你需要指定回调的函数名,就是tickTock()
欢迎大家多发帖,参与讨论,增进彼此了解。
 楼主| 清灯竹影 发表于 2014-6-20 08:49:52 | 显示全部楼层
    明白第一个事件监听的工作原理,第二个就轻松多了。为了节约篇幅,这里我只对TIMER_COMPLETE做解释。它的意思是“定义timercomplete事件对象的type的属性值”,我猜你看到这个解释有点挠头.....但是不要紧,你暂时理解成“在第一个时间事件TIMER结束以后会发生点什么”。
     既然是这样,发生了什么呢?发生的事情就是在输出面板输出“计时结束!”
欢迎大家多发帖,参与讨论,增进彼此了解。
 楼主| 清灯竹影 发表于 2014-6-20 09:05:11 | 显示全部楼层
       我们已经完整的分析了这段代码,想必你对它们的工作原理有了比较清晰的理解。现在再次运行测试下你的影片,深深的理解并直观体会它的效果。
   
    这篇时间事件的学习笔记到此就结束了吗?哦,不是的,我的朋友,如果仅仅如此,那就没必要费这么大功夫来写它了。我有一些想法,看你能不能试一试?{:soso_e113:}
    比如,在舞台上做一个影片剪辑,让它用时间事件动起来,给你一个小提示,可以用类似boll_mc.x+=1来替换第一个时间侦听的trace();或者是一朵花的影片剪辑,然后用时间事件来改变它的scaleX和scaleY让这朵花慢慢的变大...变大到一定程度,旁边有个文本提示什么的......我还能想到很多很多的这样实例,你也能OK!注意尝试修改(1000,10)里的参数来试验各种效果!

    想想,这样你没有用到任何补间动画,没在帧上搞花样....只是敲打出一些代码,加上你的美好创意,就能搞出丰富的效果了。你的同学看了一定会概叹:{:soso_e200:}哇!好吊喔!
欢迎大家多发帖,参与讨论,增进彼此了解。
 楼主| 清灯竹影 发表于 2014-6-22 05:13:22 | 显示全部楼层
     除了以上的想法,根据这篇学习笔记来做一个倒计时器,是一个很不错的练习。我已经做了一个倒计时器实例,现在先上传SWF来看看。我想,如果你愿意用点时间,一定能做出比这个漂亮很多的倒计时器。说实话,这个倒计时器存在着一些缺陷,只要愿意修改,可以让它成为一个好很多的实例。
欢迎大家多发帖,参与讨论,增进彼此了解。
 楼主| 清灯竹影 发表于 2014-6-22 05:16:02 | 显示全部楼层

倒计时器(34.12K)
欢迎大家多发帖,参与讨论,增进彼此了解。
 楼主| skeok 发表于 2014-11-15 20:10:11 | 显示全部楼层
很多的实例
欢迎大家多发帖,参与讨论,增进彼此了解。
张曼静 发表于 2015-4-3 18:26:38 | 显示全部楼层
好像还是不懂
欢迎大家多发帖,参与讨论,增进彼此了解。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

推荐阅读更多+
会员达人更多+
广告位

最新信息

更多+

关注我们:教育技术人

官方微信

官方微博

教育技术热线:

13955453231

学教育技术,上教育技术论坛!

教育技术论坛征稿范围:教育技术应用案例、教程文章、优秀作品等。

Email:sf@etthink.com

Copyright   ©2007-2026  应用思考-教育技术论坛  Powered by©Discuz!  技术支持:且行资源    ( 皖ICP备10014945号-4 )