k o r s t u d i o X D's notepad

[Flash AS3] #2 - "ยาม" (Event และ Listener) 47

posted on 19 Jun 2009 00:54 by korstudio in Tutorial

ทิ้งห่างไปนานเลย ต้องขอโทษด้วยนะครับ *05*
ใครคิดว่าผมลืมไปแล้ว.. ไม่จริงนะ กลับมา กลับม๊าา *07a*

หลังจากที่คราวที่แล้ว ผมเกริ่นนำให้รู้จักกับ ActionScript 3 ไปบ้างแล้ว
มาตอนนี้.. เรามาเริ่มบทโหดกันเลยดีกว่าครับ แฮ่ *39b*

Link ตอนที่ 1 - เริ่มเขียน ActionScript 3 กันดีกว่า (กดที่นี่)

คำเตือน!
1. ควรมีพื้นฐานการใช้งานโปรแกรม Flash มาก่อน (เช่น เครื่องมือชื่ออะไร, MovieClip คืออะไร, เฟรม ฯลฯ)
2. เป็นบทความเขียนโปรแกรม ดังนั้นรูปน้อย ตัวหนังสือเยอะ เตรียมใจไว้ซะ!

จั่วหัวไว้น่ากลัวมาก จะมีใครอ่านต่อมั้ยเนี่ย
ม่ะ ใครจะอ่านต่อก็.... สูดหายใจเข้าลึก ลึ้กกกก แล้วกลอกสายตาลงมาต่อ

เอาละนะครับ..

ใครเคยเห็นยามบ้าง ยกมือขึ้น (เอ้ายกก *47*/)
แหงสิ ใครจะไม่เคยเห็น

อยากบอกว่า ใน AS3 เราก็มียามนะจะบอกให้ ฮั่นแน่..
แต่ยามใน AS3 เค้าไม่ได้มาเฝ้าตึก เฝ้าของให้เราหรอกครับ

เค้ารอจับ "เหตุการณ์" ต่างหาก!!

เหตุการณ์ หรือ Event (ควรออกเสียงกระแดะๆ นิดนึง "อี๊ เฝ่น.. (เทอะ)" )
ก็คือ.. เหตุการณ์ เอ๊ะ ยังไง มันคือสิ่งที่(คาดว่า)จะเกิดขึ้นครับ

และ ยาม หรือ Event Listener (ห้ามอ่านว่า "ลิสเทนเนอร์" รับไม่ได้อย่างแรงง ต้องอ่าน "ลิส-อึ้น-เหนอะ")
ก็คือ.. ผู้เฝ้ารอ และคอยจับเหตุการณ์ที่กำหนด นั่นเองครับ

ดังนั้น ถ้ามียาม.. ก็ต้องมีเหตุการณ์มาให้รอจับ
มีเหตุการณ์มา จะทำอะไร ก็ต้องมียามคอยทำให้

ราวกับว่า ทั้งสอง เกิดมาเพื่อกันและกันนั่นเองครับ *27*
(ฟังดูโรแมนติกดีชะมัด)

อย่างที่เราคุ้นเคยกันดีว่า.. เวลาจะให้ยาม มาเฝ้าอะไรซักอย่างให้เรา ก็ต้องมีการ "ว่าจ้าง"
ซึ่งในการเขียน AS3 นั้น จะใช้คำยาวๆ ดังนี้คือ addEventListener ครับ

addEventListener จะใช้สำหรับกำหนดว่า เหตุการณ์ต่อไปนี้ ถ้ามีการทำงานแล้ว จะให้ทำอะไร
หรือพูดแบบชาวบ้านๆ คือ จ้างยามให้เฝ้าเหตุการณ์ ที่วัตถุๆ นี้ นั่นเอง แล้วถ้าเกิดอะไรขึ้น.. ก็ทำตามที่กำหนดไว้

วิธีใช้

ชื่อวัตถุ.addEventListener(ชื่อเหตุการณ์, รายการคำสั่ง หรือ Listener);

เช่น

object_mc.addEventListener(MouseEvent.CLICK, onMouseClick);

จากบรรทัดนี้จะแปลได้ว่า

กาลครั้งหนึ่งนานมาแล้ว มีตึกๆ หนึ่งชื่อ object_mc ที่ตึกนี้เจ้าของตึกได้ว่าจ้างให้ยามผู้หนึ่ง
มาเฝ้ารอเหตุการณ์ MouseEvent.CLICK ไว้ ซึ่งเขากำชับยามนายนี้แล้วว่า
หากเกิดเหตุการณ์ดังกล่าวขึ้น.. ให้ทำตามรายละเอียด ดังที่ได้เขียนไว้ใน onMouseClick
ยามนายนั้นรับคำว่าจ้าง แล้วก็มานั่งเฝ้าที่ตึก object_mc ตลอดมา
ด้วยมีใจหวังว่า.. จะเกิดเหตุการณ์นั้นในช่วงชีวิตที่เขาเฝ้ายามอยู่..

อืม.. น่าสงสารยามนายนี้จัง ฮึกๆ *05*

สำหรับ MouseEvent.CLICK นั้น มันคือรูปแบบของเหตุการณ์ครับ จากตัวอย่างจะหมายถึง "เมื่อมีการคลิก" เกิดขึ้น นั่นล่ะ..

อ้าว แล้วมันมีอะไรบ้าง ใครจะไปรู้? ไม่เป็นไรครับ เดี๋ยวผมแนะนำให้

สำหรับ Event หรือ เหตุการณ์ใน AS3 นั้นจะมีอยู่หลากหลายประเภทมากๆ
ผมขอใช้ลักษณะนามว่า "คลาส" ก็แล้วกันนะครับ

ต่อไปนี้ ผมจะแนะนำคลาสที่ควรรู้จักไว้ 3 คลาสด้วยกัน ดังนี้ครับ

1. คลาส Event (ใช่แล้ว Event ที่ชื่อ Event)
จะทำหน้าที่กระจาย "เหตุการณ์ทั่วไป" ให้กับยามที่เฝ้ารออย่างทั่วถึง
(คำว่า "กระจายเหตุการณ์" ใน AS3 จะเรียกว่า "Dispatch" ครับ)

เหตุการณ์ที่ใช้บ่อย: OPEN, COMPLETE, SOUND_COMPLETE, CHANGE, RESIZE, ENTER_FRAME

OPEN - เหตุการณ์นี้จะทำงาน(กระจายเหตุการณ์) เมื่อมีการสั่งเปิดไฟล์/เริ่มโหลดไฟล์อะไรซักอย่าง
COMPLETE - ทำงานเมื่อไฟล์นั่นโหลดเสร็จแล้ว
SOUND_COMPLETE - ทำงานเมื่อเสียงเล่นจบ
CHANGE - ทำงานเมื่อค่าภายในกล่องข้อความ, กล่องเลือกสี, กล่องตัวเลือก ฯลฯ เปลี่ยนแปลง
RESIZE - ทำงานเมื่อมีการเปลี่ยนขนาด
ENTER_FRAME - ทำงานตลอดเวลา มักใช้กับการตรวจสอบอะไรซักอย่าง ที่ต้องการผลตลอดเวลา เช่น การอัพเดตค่าตำแหน่งเมาส์ ฯลฯ ส่วนมากใช้ในงานเกมส์ โปรแกรม หรือการสั่งวัตถุเคลื่อนที่

ตัวอย่าง

object_mc.addEventListener(Event.ENTER_FRAME, onObjectRunning);

2. MouseEvent - จะทำการกระจาย "เหตุการณ์ที่เกี่ยวกับเมาส์" ให้กับยามที่เฝ้ารออย่างทั่วถึง
แน่นอนครับ มันคือเหตุการณ์ที่จะเกิดขึ้นเมื่อเมาส์ไปทำอะไรซักอย่างนั่นเอง และเหตุการณ์ที่เราคุ้นตากันก็คือ...

เหตุการณ์ที่ใช้บ่อย - MOUSE_OVER, ROLL_OVER, MOUSE_OUT, ROLL_OUT, CLICK, MOUSE_DOWN, DOUBLE_CLICK, MOUSE_WHEEL, MOUSE_MOVE

**_OVER - ทำงานเมื่อเอาเมาส์ไปวางบนวัตถุที่จ้างยามไว้
**_OUT - ทำงานเมื่อเอาเมาส์ออกจากวัตถุที่จ้างยามไว้
MOUSE_DOWN - ทำงานเมื่อมีการ "กด" เมาส์ซ้าย (แค่กดก็ทำงานแล้ว)
CLICK - ทำงานเมื่อมีการ "กดแล้วปล่อย" บนวัตถุที่จ้างยามไว้ (เค้าเรียกว่า "คลิก" นั่นเอง)
DOUBLE_CLICK - แน่นอน.. ก็ดับเบิ้ลคลิก (หรือ กิ๊กๆ หรือ 2 กิ๊ก นั่นเอง -- กิ๊กคนเดียวไม่พอสินะ)
MOUSE_WHEEL - ทำงานเมื่อมีการเลื่อนลูกกลิ้งเมาส์ (ไม่ใช่ลูกกลิ้งใต้เมาส์นะ ใครใช้เมาส์แบบนั้นเชยแหลก)
MOUSE_MOVE - ทำงานเมื่อเมาส์เคลื่อนที่

ตัวอย่าง

object_mc.addEventListener(MouseEvent.CLICK, onMouseClick);

3. ProgressEvent - มักใช้ตอนเช็คไฟล์ที่กำลังโหลดครับ -- แน่นอน มันนำมาสู่คำถามยอดฮิต

"ทำพรีโหลดยังไงครับ/คะ" นั่นเอง!!!!

เหตุการณ์ที่ใช้บ่อย: PROGRESS

PROGRESS - ทำงานเมื่อ เอ่อ มันยังโหลดไม่เสร็จน่ะ

ตัวอย่าง

object_mc.addEventListener(ProgressEvent.PROGRESS, onLoading);

เอาละครับ แนะนำไปแล้วกับ "เหตุการณ์" ที่ใช้กันบ่อย(มากๆ)
ทว่า.. ทั้งหมดนี้เป็นเพียงแค่การเกริ่นก่อนเขียนจริงเท่านั้น!!!

ใครที่อ่านข้ามมา.. กรุณากลับไปอ่านต่อให้จบนะจ๊ะ จุ๊บุๆ *27*

อย่างที่ผมเกริ่นมาแล้วนะครับว่า การใช้ "ยาม" และ "เหตุการณ์" จะต้องประกอบด้วย "การว่าจ้าง" และ "ลิสต์รายการที่ให้ทำ"
(เอ๊ะ เกริ่นตรงไหนวะ --หลายคนอาจถาม นั่นสิ ผมเกริ่นตรงไหน.. อ๋อ ก็ตอนยกตัวอย่างไง)

ตอนนี้ เริ่มใช้ "ยาม" กันเลยดีกว่า เพื่อความเข้าใจถึงแก่นแท้แห่งมนุษยชาติ!!
เอ่อ อย่าใส่ใจผมเลยครับ บางทีอ่านข้ามๆ ไปบ้างก็ได้ *05*

เริ่มด้วยเหตุการณ์ยอดฮิต MouseEvent ครับ!

1. สร้างไฟล์ใหม่.. อ๊ะๆ อย่าลืมนะว่า ต้องเป็น Flash File (ActionScript 3.0) เท่านั้น

2. อ้าห์ เรากลับมายังหน้าจอที่คุ้นเคยกันอีกแล้ว *52*
ณ จุดๆ นี้เนี่ย (ถ้าให้ได้อารมณ์ กรุณาทำท่าทางประกอบด้วย -- กรีดมือให้นิ้วแยกออกจากกัน แล้วหักข้อมือ เอานิ้วแนบลงบนอก) ให้สร้าง MovieClip ขึ้นมาอันนึงครับ อ้ะ อย่าถามนะว่าสร้างยังไง *50*

***อย่าลืม ตั้ง Registration Point หรือจุดอ้างอิง ให้อยู่ตรง มุมซ้ายบน นะครับ (ที่จุดเล็กๆ 9 ช่องตามรูป คลิกที่จุดซ้ายบนได้เลย)***

3. ตั้ง Instance Name ว่า test_mc (ตั้งยังไง.. ก็คลิกที่ MovieClip 1 ทีแล้วก้มลงมอง Properties พิมพ์ชื่อเสร็จกด Enter ด้วย)

4. เข้าไปแก้ข้างใน MovieClip ครับ อ๊างง *56* แล้วเพิ่มเฟรมมา 2 เฟรม สำหรับทำเป็นภาพตอนเอาเมาส์วาง และเอาเมาส์ออก แก้สีซะหน่อย เอาให้รู้ว่ากำลังทำอะไรอยู่

5. สร้างเลเยอร์ใหม่ และใส่คำสั่ง stop() ไว้ทั้ง 3 คีย์เฟรมเลยครับ (ร้องเพลง "Stop, Stop, Stop" ของ Nu Virgos คลอไปด้วยก็ดีฮะ)

6. กลับมายัง Stage สุดที่รัก สร้างเลเยอร์ใหม่ แล้วตั้งชื่อว่า as จากนั้นล็อกไว้ซะ จะได้ไม่เผลอมาวาดอะไรในเลเยอร์นี้

7. สร้างยามคนแรก -- คนนี้จะมาคอยเฝ้าตอนเอาเมาส์ชี้ครับ

test_mc.addEventListener(MouseEvent.ROLL_OVER, onTestOver);

สังเกตว่า ทุกครั้งที่ผมตั้งชื่อ Listener (รายการคำสั่ง)จะขึ้นต้นด้วย "on"
จริงๆ ไม่ได้มีข้อห้ามอะไรหรอกครับ
แต่เป็นการตั้งชื่อให้รู้ความหมายเท่านั้นเอง ว่าเป็น Listener นะ.. เวลาแก้จะได้ตามหาได้ถูก

ตอนนี้ผมตั้ง Listener ว่า onTestOver ดังนั้น ผมก็ควรจะสร้าง Listener ให้มีตัวตนจริงๆขึ้นมาด้วย จะได้ให้ยามรู้ว่า ควรจะทำอะไรบ้าง

function onTestOver(event:MouseEvent):void{
test_mc.gotoAndStop(2);
}

สำหรับรูปแบบ (อันน่ามึนหัว) นี้ ไม่ต้องตกใจครับ เพราะมันกำหนดไว้ตายตัวมากๆ แค่จำให้ได้ก็พอแล้ว

function ชื่อListener(ชื่อตัวแปรอะไรก็ได้:ประเภท/คลาสเหตุการณ์):void{
คำสั่งที่ให้ทำทั้งหลาย
}

ตรง "ชื่อตัวแปรอะำไรก็ได้" ผมแนะนำให้ใช้ e หรือ event ครับ เพราะมันสื่อถึงความหมายของมันเอง
และเรื่องราวเกี่ยวกับ "ตัวแปร" ผมจะกล่าวอย่างละเอียดในตอนต่อๆ ไปครับ (ผมเขียนว่า "ต่อๆ ไป" นะ ไม่ได้บอกว่าตอน "ต่อไป")

และ "ประเภท/คลาสเหตุการณ์" ในที่นี้ผมใช้ MouseEvent.ROLL_OVER ดังนั้น ณ จุดๆ นี้ (ทำท่าประกอบ) ผมก็เลยต้องใส่ MouseEvent ครับ

ยามคนแรกเสร็จแล้ว.. สรุปโดยรวมก็คือ เมื่อมีเมาส์มาวางบน test_mc ก็ให้ยามวิ่งไปทำใน onTestOver
ซึ่งในนั้นมีการบอกว่า ให้ test_mc ไปเล่นเฟรมที่ 2 นั่นเองครับ

8. สร้างยามคนที่ 2 -- คนนี้จะมาเฝ้าตอนเอาเมาส์ออกครับ

เขียนคล้ายๆ กับยามคนแรกเลยครับ แบบนี้

test_mc.addEventListener(MouseEvent.ROLL_OUT, onTestOut);
function onTestOut(event:MouseEvent):void{
test_mc.gotoAndStop(1);
}

9. สร้างยามคนที่ 3 -- คนนี้จะมาเฝ้าตอนคลิกเมาส์ครับ

test_mc.addEventListener(MouseEvent.CLICK, onTestClick);
function onTestClick(event:MouseEvent):void{
test_mc.gotoAndStop(3);
trace("Hey, I'm clicked");
}

จะเห็นว่า ในตึกๆ หนึ่ง (วัตถุชิ้นหนึ่ง) สามารถมียามได้หลายคนครับ

10. โค้ดทั้งหมดจะได้เป็นแบบนี้ครับ

   ต่อไปก็ทำการจัดโค้ด ผมแนะนำให้เอาส่วนของการ "จ้างยาม" ไว้ด้านบน และเอา Listener ทั้งหลาย ไว้ด้านล่าง ต่อๆ กันไปครับ
       (การจัดโค้ดให้เป็นระเบียบ เป็นสิ่งสำคัญมากนะครับ เพราะเวลามาแก้เนี่ย เราสามารถหาเจอได้ง่าย
       และโค้ดไม่ดูรกรุงรังครับ)