1 บทที่ 7 _ต่อ การตรวจจับอีเว้นต์

2 การใช้ตัวจับอีเว้นต์ที่ตอบสอดคล้องกับเหตุการณ์ ที่เกิดขึ้น ซึ่งขึ้นอยู่กับออบเจ็กต์แต่ละตัวว่า สามารถตอบสนองอีเว้นต์ใดได้บ้าง เราแบ่งชนิดของการเกิดอีเว้นต์ได้ 2 ลักษณะคือ  อีเว้นต์จากผู้ใช้ (User Event)  อีเว้นต์จากระบบ (System Event)

3 อีเว้นต์ที่ทำให้สคริปต์ทำงาน การเขียนสคริปต์ในงาน Flash สามารถเขียนได้ ในตำแหน่ง 1. ตำแหน่งเฟรมใน TimeLine หลัก 2. ตำแหน่งเฟรมใน TimeLine ของ MovieClips 3. ตำแหน่งตัวปุ่มกด หรือ MovieClips โดยตรงบน stage

4 อีเว้นต์ที่ทำให้สคริปต์ทำงาน โปรแกรม Flash จะทำการแปลคริปต์คำสั่งต่างๆ โดยยึดตามหลักการดังต่อไปนี้ 1. สคริปต์ที่กำหนดใน TimeLine หลักจะถูกแปล เมื่อหัวอ่าน Movie เล่นไปถึง frame นั้นๆ 2. สคริปต์ที่กำหนดให้ในปุ่มกด จะถูกแปลเมื่อเกิด อีเว้นต์ที่ระบุในตัวจับอีเว้นต์ on 3. สคริปต์ที่กำหนดใน MovieClips จะถูกแปลเมื่อ เกิดอีเว้นต์ที่ระบุในตัวจับอีเว้นต์ onClipEvent

5 การเขียนตัวจับอีเว้นต์ในซิมบอลแต่ละแบบ การเขียนสคริปต์ที่ปุ่มกด การเขียนสคริปต์ที่ MovieClips การเขียนสคริปต์แบบจับอีเว้นต์

6 การเขียนตัวจับอีเว้นต์ในซิมบอลแต่ละแบบ รูปแบบการเขียนสคริปต์ที่ปุ่มกด เป็นการเขียนที่ตัว instance ของปุ่มกดนั้นๆ โดยตรง และสคริปต์ของเราจะทำงานก็ต่อเมื่อ ปุ่มกดเกิดเหตุการณ์บางอย่าง เช่น การกดปุ่ม, การปล่อยปุ่ม เป็นต้น on(Event){... } รูปแบบ

7 รูปแบบการเขียนสคริปต์ที่ปุ่มกด on(press){ trace(“You Press”); } on(press,rollover){ trace(“You Press Or Rollover”); }

8 รูปแบบการเขียนสคริปต์ที่ปุ่มกด on(rollOver){ trace(“You Rollover”); } on(press){ trace(“You Press”); }

9 อีเว้นต์ในปุ่มกด เหตุการณ์ความหมาย press release releaseOutside rollOver rollOut dragOver dragOut KeyPress เกิดเมื่อกดปุ่มเม้าส์ เกิดเมื่อกดปุ่มเม้าส์แล้วปล่อย เกิดเมื่อกดปุ่มเม้าส์แล้วปล่อยนอกปุ่ม เกิดเมื่อเลื่อนเม้าส์ไปบนปุ่ม เกิดเมื่อเลื่อนเม้าส์โดนปุ่มแล้วผ่านไป เมื่อกดปุ่มแล้วลากออกแล้วกลับที่เดิม เกิดเมื่อกดปุ่มแล้วลากออกจากปุ่ม เกิดเมื่อผู้ใช้กดปุ่มบนคีย์บอร์ดนั้นๆ

10 รูปแบบการเขียนสคริปต์ที่ MovieClips มีลักษณะคล้ายกับการเขียนสคริปต์ลงบนปุ่มกด แต่ใช้คำว่า onClipEvent แทน รูปแบบ onClipEvent(Event){... }

11 รูปแบบการเขียนสคริปต์ที่ MovieClips onClipEvent(mouseDown){ trace(“You MouseDown”); } onClipEvent(mouseUp){ trace(“You MouseUp”); }

12 อีเว้นต์ใน MovieClip เหตุการณ์ความหมาย load MouseDown onMouseMove onMouseUp unload EnterFrame onKeyDown onKeyUp Data ครั้งแรกเมื่อ movieClip แสดงบน Timeline เมื่อกดปุ่มเมาส์ ณ.ตำแหน่งใดๆ บน stage เมื่อลากเมาส์ ณ.ตำแหน่งใดๆ บน stage เมื่อปล่อยปุ่มเมาส์ ณ.ตำแหน่งใดๆ บน stage ณ. เฟรมแรกหลังจาก movieClip ลบจาก Timeline ทำงานตลอดเวลาตราบที่ movieClip ยังอยู่ เมื่อ movieClip โดนโฟกัส และกดคีย์บอร์ด เมื่อ movieClip โดนโฟกัส และปล่อยคีย์บอร์ด รับข้อมูลจาก loadVariables(), loadMovie()

13 ข้อดี ของการเขียนตัวจับอีเว้นต์ลงในปุ่มหรือ MovieClips โดยตรง ง่ายต่อการเขียนสคริปต์ สามารถเขียนเพิ่มอีเว้นต์ แทรกเข้าไปได้เลย สคริปต์ง่ายต่อการอ่าน เนื่องจากมีการแบ่งเป็น ช่วงๆของอีเว้นต์ เช่น on() หรือ onClipEvent()

14 ข้อจำกัด ของการเขียนตัวจับอีเว้นต์ลงในปุ่ม หรือ MovieClips โดยตรง กรณีมี MovieClips หลายๆตัว หรือซ้อนกันอยู่ หลายๆชั้น อาจจะทำให้ค้นหาสคริปต์ได้ยากเมื่อ ต้องการปรับปรุงแก้ไขภายหลัง ไม่สามารถเขียนตัวจับอีเว้นต์แบบนี้ให้กับออบ เจกต์ที่จะถูกสร้างตอนรันโปรแกรม เขียนได้ เฉพาะออบเจกต์ที่วางบนเสตจตอนออกแบบ เท่านั้น

15 รูปแบบการเขียนสคริปต์แบบจับอีเว้นต์ เป็นการเปลี่ยนจากการเขียนอีเว้นต์ในปุ่มหรือ MovieClips มาเขียนบน TimeLine หลัก โดย อาศัยการเขียนสคริปต์ของอีเว้นต์ในลักษณะแบบ เมธอด เรียกว่า เมธอดอีเว้นต์ (Event Handler Method) รูปแบบ object.eventMethod=function() { statement(s) }

16 รูปแบบการเขียนสคริปต์แบบจับอีเว้นต์ my_Button.onPress = function() { trace(“You Press”); }

17 จุดเด่น ของการจับอีเว้นต์ด้วยเมธอด จับอีเว้นต์ สามารถเขียนสคริปต์สำหรับจับอีเว้นต์จากหลายๆ ออบเจกต์ได้ภายในเฟรมๆเดียว ทำให้สคริปต์ เป็นระเบียบ ง่ายต่อการทำความเข้าใจ และแก้ไข ข้อผิดพลาด เราสามารถที่จะมอบหมายตัวจับอีเว้นต์ ให้กับ ออบเจกต์ที่ถูกสร้างตอนรันไทม์

18 เมธอดจับเหตุการณ์สำหรับ MovieClips Mc.onDataMc.onDragOutMc.onDragOver Mc.onEnterFrameMc.onkeyDownMc.onkeyUp Mc.onKillFocusMc.onLoadMc.onMouseDown Mc.onMouseMoveMc.onMouseUpMc.onPress Mc.onRelease Outside Mc.onRollOut Mc.onRollOverMc.onSetFocusMc.onUnload

19 เมธอดจับเหตุการณ์สำหรับปุ่ม Bt.onDragOutBt.onDragOverBt.onKeyDown Bt.onKeyUpBt.onKillFocusBt.onPress Bt.onReleaseBt.onReleaseOut Side Bt.onRollOut Bt.onRollOverBt.onSetFocus

20 ขอบเขตของตัวแปรและคำสั่งในตัวอีเว้นต์ แบ่งเป็น 2 รูปแบบ คือ 1. แบบฟังก์ชันก์ 2. แบบ on(), onClipEvent()

21 ขอบเขตของตัวแปรในตัวจับอีเว้นต์ของ MovieClips ตัวแปรที่ประกาศไว้ในขอบเขตของประโยค on() หรือ onClipEvent() ของอินสแตนซ์มูฟวี่คลิปจะ มองเห็นได้ตลอดทั้งไทม์ไลน์ของมูฟวี่คลิปตัวนั้น on(press) { varmy_Var = 3; } on(release){ trace(my_Var); }

22 ขอบเขตของตัวแปรในตัวจับอีเว้นต์ของปุ่ม ตัวแปรที่ประกาศไว้ในขอบเขตของประโยค on() ของอินสแตนซ์ปุ่มกด จะมองเห็นได้จากไทม์ ไลน์ที่อินสแตนซ์ปุ่มกดนั้นฝังอยู่

23 ขอบเขตคำสั่งในตัวจับอีเว้นต์ของ MovieClips คำสั่งที่ปรากฎในขอบเขตของประโยค on() หรือ onClipEvent() ของอินสแตนซ์มูฟวี่คลิปจะ ทำงานกับไทม์ไลน์ของอินสแตนซ์มูฟวี่คลิปตัว นั้น on(press) { play(); }

24 ขอบเขตคำสั่งในตัวจับอีเว้นต์ของปุ่มกด คำสั่งที่ปรากฎในขอบเขตของประโยค on() ของ อินสแตนซ์ปุ่มจะทำงานกับไทม์ไลน์ที่อินสแตนซ์ ปุ่มกดนั้นฝังอยู่ on(press) { play(); }

25 ขอบเขตคำสั่งในตัวจับอีเว้นต์ในรูปแบบเมธอด จับอีเว้นต์ ในการประกาศตัวแปรแบบนี้ ตัวแปรจะสามารถ เรียกใช้งานภายในขอบเขตเมธอดจับเหตุการณ์ที่ เรากำหนด my_mc.onPress = function() { var my_Var=“Hi”; } my_mc.onRelease = function() { trace(my_Var); } ผิด

26 ขอบเขตคำสั่งในเมธอดจับอีเว้นต์ คำสั่งที่ปรากฏในขอบเขตของเมธอดจับอีเว้นต์ จะทำงานกับ TimeLine ที่เมธอดฝังอยู่ my_mc.onPress = function() { play(); }

27 ขอบเขตคำสั่งในเมธอดจับอีเว้นต์ ถ้าต้องการสั่งให้ TimeLine ของอินสแตนซ์ my_mc หรือ TimeLine ของอินสแตนซ์ที่เกิด อีเว้นต์เล่น ให้ใช้คำสั่ง this my_mc.onPress = function() { this.play(); }