Actionscript3.0 里的用户事件流,以及如何利用
2012-09-19 11:07
176 查看
I am talking about this topic, because I encounter a problem with event flow design when working on my new project - which we call it iKeleido.
This involves the event framework in Actionscript3.0, and the details can be found in any book, such as [Actionscript3 Bible]; within it the author drew a picture to illustrate how does events flow within a Flash run-time environment(please
note that the event here should not be regarded as all events, it just means the user interaction event, normally mouse event):
I will not go through with this book, instead, let's focus on my topic, and now create a program. Create four MovieClips into the library, with attached empty ActionScript classes:
And now create a container class, which will hold all of them:
And now is the document class definition:
Let's try it.
Clicking on the graphics will get output like:
Clicking only within the yellow area and outside the graphics, will get:
So far, this program only demostrates the idea of event propagation in Actionscript3. Now let's add something.
Within all the handling methods, add extra lines:
Clicking on one graphic will get:
And clicking on table will get:
Number 2 indicates that the event is at TARGET PHASE(EventPhase.AT_TARGET), whereas 3 indicates BUBBLING PHASE(EventPhase.BUBBLING_PHASE). So, this results tells that, thecapturing process doesn't
happen by default; only bubbling process occurs, so the handlers more close to the target will get triggered earlier.
And, now, remove those lines, and:
Open file TableCloth.as, within the body of method objectClickedHandler(), add lines:
In effect, we will find that, clicking on the car will get tht output:
And nothing eles, which means the event doesn't trigger the event handler attached to_tableCloth within main class,here
is online doc about stopPropagation() & stopImmediatePropagation().
mouseEnabled & mouseChildren
Now we will explore the approaches to stop the mouse events getting dispatched from a specific display object, add two buttons and some text fields to the stage, and change themain.as to:
We now have a program like:
Let's play with it, firstly, press button 'toggle mouseEnabled', to set it to false. Then clicking on the yellow area(outside any graphic of course) will get nothing output, but clicking on cup will get output:
Well, it may seem weird, since the TableCloth instance has mouseEnabled set to false, why we get mouse event on it? Actually, it is because mouseEnabled property will not confine the child elements, it only affects its self.
And it can still receive its children's event during bubbling process.
This moment, clicking on car graphic will still get:
Now, press button 'toggle mouseChildren'. Now we disable both the TableCloth instance and its children. Clicking on any thing will output nothing.
Then press button 'toggle mouseEnabled', to set it back to true. Then clicking on the yellow area(outside any graphic of course) will get:
There is nothing to explain.
Then click on any graphic, you will see:
Because the children are forbidden to dispatch mouse event, so the target is replaced with TableCloth instance itself.
So far, the hierarchy of the DisplayObjects is only two-depth, I should add one more to demonstrate some other language features, however, my penitence has run off. I am so eager to start my problem.
Here is iKeleido's interface:
And let's abstract the situation this program reflects:
First of all, we have a display container, say, ConA, and it is top level container of all this visual elements, visually, you can regard it as the collection of the visual elements except: the wooden background, the potted flower,
the notebook;
Secondly, we have one very complex SpriteX(like the PavoMenu in my example), and SpriteY(like the main content), SpriteX also has many children display objects, and pretty complex animation, so is the main content;
Then, ConA need to keep track of the states of SpriteX and SpriteY, it will mainly be responsible for control the logic of main content's animation, since SpriteX is very self-managed.
This involves the event framework in Actionscript3.0, and the details can be found in any book, such as [Actionscript3 Bible]; within it the author drew a picture to illustrate how does events flow within a Flash run-time environment(please
note that the event here should not be regarded as all events, it just means the user interaction event, normally mouse event):
I will not go through with this book, instead, let's focus on my topic, and now create a program. Create four MovieClips into the library, with attached empty ActionScript classes:
And now create a container class, which will hold all of them:
package { import flash.display.Sprite; import flash.events.MouseEvent; public class TableCloth extends Sprite { private var _skirt:Sprite; private var _coffeeGrinder:Sprite; private var _car:Sprite; private var _cup:Sprite; public function TableCloth() { this.graphics.beginFill(0xF7DFAF); this.graphics.drawRect(0,0,600,400); this.graphics.endFill(); } public function build():void { this._skirt = new Skirt(); this._skirt.name = "SKIRT"; this._skirt.x = 500; this._skirt.y = 100; this.addChild(this._skirt); this._skirt.addEventListener(MouseEvent.CLICK, this.objectClickedHandler); this._coffeeGrinder = new CoffeeGrinder(); this._coffeeGrinder.name = "COFFEEGRINDER"; this._coffeeGrinder.x = 400; this._coffeeGrinder.y = 100; this.addChild(this._coffeeGrinder); this._coffeeGrinder.addEventListener(MouseEvent.CLICK, this.objectClickedHandler); this._car = new Car(); this._car.name = "CAR"; this._car.x = 200; this._car.y = 100; this.addChild(this._car); this._car.addEventListener(MouseEvent.CLICK, this.objectClickedHandler); this._cup = new Cup(); this._cup.name = "CUP"; this._cup.x = 60; this._cup.y = 100; this.addChild(this._cup); this._cup.addEventListener(MouseEvent.CLICK, this.objectClickedHandler); } private function objectClickedHandler($e:MouseEvent):void { trace($e.target.name + " get clicked."); } } }
And now is the document class definition:
package { import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; public class main extends MovieClip { private var _tableCloth:TableCloth; public function main() { this.addEventListener(Event.ADDED_TO_STAGE, this.addedToStageHandler); } private function addedToStageHandler($e:Event):void { this._tableCloth = new TableCloth(); this._tableCloth.x = 100; this._tableCloth.y = 50; this._tableCloth.build(); this.addChild(this._tableCloth); this._tableCloth.addEventListener(MouseEvent.CLICK, this.clickedHandler); } private function clickedHandler($e:MouseEvent):void { trace("TABLE CLOTH get clicked!!"); } } }
Let's try it.
Clicking on the graphics will get output like:
CAR get clicked. TABLE CLOTH get clicked!!
Clicking only within the yellow area and outside the graphics, will get:
TABLE CLOTH get clicked!!
So far, this program only demostrates the idea of event propagation in Actionscript3. Now let's add something.
Within all the handling methods, add extra lines:
trace($e.eventPhase);
Clicking on one graphic will get:
COFFEEGRINDER get clicked. 2 TABLE CLOTH get clicked!! 3
And clicking on table will get:
TABLE CLOTH get clicked!! 2
Number 2 indicates that the event is at TARGET PHASE(EventPhase.AT_TARGET), whereas 3 indicates BUBBLING PHASE(EventPhase.BUBBLING_PHASE). So, this results tells that, thecapturing process doesn't
happen by default; only bubbling process occurs, so the handlers more close to the target will get triggered earlier.
And, now, remove those lines, and:
Open file TableCloth.as, within the body of method objectClickedHandler(), add lines:
if("CAR" == $e.target.name) { $e.stopPropagation(); }
In effect, we will find that, clicking on the car will get tht output:
CAR get clicked.
And nothing eles, which means the event doesn't trigger the event handler attached to_tableCloth within main class,here
is online doc about stopPropagation() & stopImmediatePropagation().
mouseEnabled & mouseChildren
Now we will explore the approaches to stop the mouse events getting dispatched from a specific display object, add two buttons and some text fields to the stage, and change themain.as to:
package { import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; public class main extends MovieClip { private var _tableCloth:TableCloth; public function main() { this.addEventListener(Event.ADDED_TO_STAGE, this.addedToStageHandler); } private function addedToStageHandler($e:Event):void { this._tableCloth = new TableCloth(); this._tableCloth.x = 100; this._tableCloth.y = 50; this._tableCloth.build(); this.addChild(this._tableCloth); this._tableCloth.addEventListener(MouseEvent.CLICK, this.clickedHandler); mEblTxt.text = this._tableCloth.mouseEnabled ? "mouse enabled" : "mouse disabled"; mChlTxt.text = this._tableCloth.mouseChildren ? "yes" : "no"; mouseEblBtn.addEventListener(MouseEvent.CLICK, this.togMousEblBtnPressedHandler); mouseCdlBtn.addEventListener(MouseEvent.CLICK, this.togMousCdlBtnPressedHandler); } private function clickedHandler($e:MouseEvent):void { trace("TABLE CLOTH get clicked!!"); //trace($e.eventPhase); } private function togMousEblBtnPressedHandler($e:MouseEvent):void { this._tableCloth.mouseEnabled = ! this._tableCloth.mouseEnabled; mEblTxt.text = this._tableCloth.mouseEnabled ? "mouse enabled" : "mouse disabled"; } private function togMousCdlBtnPressedHandler($e:MouseEvent):void { this._tableCloth.mouseChildren = ! this._tableCloth.mouseChildren; mChlTxt.text = this._tableCloth.mouseChildren ? "yes" : "no"; } } }
We now have a program like:
Let's play with it, firstly, press button 'toggle mouseEnabled', to set it to false. Then clicking on the yellow area(outside any graphic of course) will get nothing output, but clicking on cup will get output:
CUP get clicked. TABLE CLOTH get clicked!!
Well, it may seem weird, since the TableCloth instance has mouseEnabled set to false, why we get mouse event on it? Actually, it is because mouseEnabled property will not confine the child elements, it only affects its self.
And it can still receive its children's event during bubbling process.
This moment, clicking on car graphic will still get:
CAR get clicked.
Now, press button 'toggle mouseChildren'. Now we disable both the TableCloth instance and its children. Clicking on any thing will output nothing.
Then press button 'toggle mouseEnabled', to set it back to true. Then clicking on the yellow area(outside any graphic of course) will get:
TABLE CLOTH get clicked!!
There is nothing to explain.
Then click on any graphic, you will see:
TABLE CLOTH get clicked!!
Because the children are forbidden to dispatch mouse event, so the target is replaced with TableCloth instance itself.
So far, the hierarchy of the DisplayObjects is only two-depth, I should add one more to demonstrate some other language features, however, my penitence has run off. I am so eager to start my problem.
Here is iKeleido's interface:
And let's abstract the situation this program reflects:
First of all, we have a display container, say, ConA, and it is top level container of all this visual elements, visually, you can regard it as the collection of the visual elements except: the wooden background, the potted flower,
the notebook;
Secondly, we have one very complex SpriteX(like the PavoMenu in my example), and SpriteY(like the main content), SpriteX also has many children display objects, and pretty complex animation, so is the main content;
Then, ConA need to keep track of the states of SpriteX and SpriteY, it will mainly be responsible for control the logic of main content's animation, since SpriteX is very self-managed.
相关文章推荐
- 【译文】如何利用机器学习和分布式计算来对用户事件进行分类
- 如何新建语句级触发器、用户事件触发器
- linux在用户程序中如何向操作系统发送按键事件
- 如何利用C++ Builder 5.0 Enterprise 创建用户自己的网上聊天程序
- 把对象生成为Parcel类型,以及如何利用Parcel来传递Enum类型数据
- 利用JS 事件 与 Cnavas绘图 以及 H5 缓存写的一个手势解锁(二)
- 前端资讯周报 3.13 - 3.19: WebVR来了!以及如何优化scroll事件性能
- 菜鸟学exchange之二:如何管理邮件用户以及邮件策略的设置
- iframe如何触发父元素事件以及父页面控制iframe子页面元素
- Activity 事件以及如何得到新打开Activity关闭后返回的数据
- Linux中用户和用户组的管理以及如何批量创建用户
- 利用Keydown事件阻止用户输入
- 如何利用GeoIP与ELK(Elasticsearch、Logstash与Kibana)映射用户位置
- Jquery 事件冒泡的介绍以及如何阻止事件冒泡
- 如何利用google analytics事件目标统计网站转化率
- 用户控件如何把属性,事件,显示在属性栏
- 利用Redis实现亿级别用户登录统计(活跃度以及登录次数统计)
- (转载)如何写出正确的二分查找?——利用循环不变式理解二分查找及其变体的正确性以及构造方式
- asp小偷程序如何利用xmlhttp实现表单的提交以及cookies或session的发送