As3.0 การสร้างปุ่ม Drag & Drop

ใน Action Script 3.0 การจะมีปฏิสัมพันธ์กับปุ่ม เราต้องเขียนสคริปให้กับปุ่มกดนั้น เพื่อให้เข้าใจว่า Action script 3.0 มีการทำงานแบบ Interactive อย่างไร ก็จะขออนุญาตอธิบายอย่างง่ายๆ ให้พอทราบเป็นแนวทางครับ

จากรูปที่แสดง ประกอบไปด้วยตัวเข็มหมุดที่มีป้ายผูกติดอยู่ ใน AS 3.0 ทุกๆ เหตุการณ์ เช่น  การคลิกปุ่ม การเคลื่อนที่ของเมาส์ การป้อนค่าผ่านคีย์บอร์ด กระทั่งเฟรมมูวี่คลิป ก็ต้องมีการควบคุมด้วย evenlisteners เราสามารถผูกเหตุการณ์ eventlistener นี้ ไปยังมูวี่คลิป  คอมโพเนนท์ สเตจ หรือสไปรท์ ใดๆ ที่ต้องการใช้งานอินเตอร์แอคทีฟ เช่นเดียวกับการใช้งานของเข็มหมุด คือ การนำไปปักที่วัตถุนั่นเอง

 

eventlisteners แต่ละตัวเปรียบได้กับ trigger funtion ซึ่งก็คือสคริปที่มีตัวทริกเกอร์ที่เป็นตัวจัดการเหตูการณ์พิเศษต่างๆ เช่น การคลิกเมาส์ หมายความว่า ถ้าเราติดเหตุการณ์ eventlistener สำหรับการคลิกเมาส์ให้กับปุ่ม นั่นคือ Trigger function จะเป็นสคริปสำหรับปุ่มนั้น

ตัวอย่าง 

ถ้าเรามีปุ่มกดที่มีชื่อ instance name ว่า Butt1 แล้วต้องการใช้งาน eventlistener สำหรับการคลิกเมาส์ อาจเขียนในรูปแบบได้ดังนี้

1 Butt1.addEventListener (MouseEvent.CLICK,ButtClick);
2 function ButtClick(e:Event){
3        trace("Button Clicked!!!");
4 } 

 

อธิบายได้ว่า

- ปุ่มที่สร้าง(ต้องเป็น Symbol จึงจะสามารถเขียนสคริปควบคุมได้) มีชื่อที่ใช้เรียกว่า Butt1 จะคอยรับฟังเหตุการณ์ ในที่นี้คือการคลิกเมาส์

- เมื่อมีเหตุการณ์คลิกเมาส์ จะทำให้ฟังชัน ButtClick ถูกเรียกใช้งาน และสำหรับ (e:Event) เราสามารถเขียนแบบสมบูรณ์ได้เป็น (e:MouseEvent)  ในที่นี้ตัว e คือรูปแบบตัวแปรเป็น Event (หรือ MouseEvent)

- trace () ใช้ในการแสดงผลในแท็ป Output

 

และสำหรับการ Drag และ Drop ในมูวี่คริป เราใช้การจับเหตุการณ์ 2 ชุด คือ Mouse_Up และ Mouse_Down ซึ่งสามารถเขียนสคริปด้วย MovieClipName ในที่นี้ผมจะสร้างรูปสี่เหลี่ยมลงบนสเตจตั้งชื่อว่า myMovieClip หากมีการคลิกเมาส์ลากมูวี่คลิปนี้จะให้มีการเรียกใช้ฟังชันก์ onStartDrag และเมื่อปล่อยเมาส์หหลังจากการลากไปในตำแหน่งใดๆ ให้เรียกใช้งานฟังชันก์ onStopDrag ดังตัวอย่างสคริปข้างล่าง

1 myMovieClip.addEventListener(MouseEvent.MOUSE_DOWN, onStartDrag);
2 myMovieClip.addEventListener(MouseEvent.MOUSE_UP, onStopDrag);

3 function onStartDrag(evt:MouseEvent):void {
4       evt.target.startDrag();
5       }
6 function onStopDrag(evt:MouseEvent):void {
7       evt.target.stopDrag();
8       }

 

หากไม่รู้ว่าโปรแกรมกำลังเรียกใช้งานฟังชันก์ใด ให้ trace() ข้อความใดๆ ลงไปท้ายสุดของฟังชันก์ แล้วลอง Test Movie ดูครับ

หมายเหตุ ไม่มีโค๊ตให้นะครับ เป็นรูปแบบการทดลองใช้งานง่ายๆ เขียนเองแล้วทำความเข้าใจดูครับ