วิธีทำ Button Event on mouse

NOOKFUFU2

วิธีทำ Button Event on mouse
ในบทความนี้จะแนะนำการทำปุ่ม Button สำหรับคลิกเพื่อเปิดเว็บ หรือเปลี่ยน Page ไปที่ยังสเตจต่อไปโดยมีการนำสคริปมาใช้นะค่ะ และจะสอนวิธีทำให้ตัวการ์ตูนกระต่าย(ทางซ้าย) เคลื่อนไหวได้ตามรูปแบบการวางเม้าส์บนปุ่ม ซึ่งนั่นก็คือการกำหนด Event ต่างๆให้กับปุ่มด้วยค่ะ

บทความนี้ค่อนข้างยาวนะค่ะ ข้ามขั้นจากระดับเบื้องต้นมาพอสมควร และต้องใช้ระยะเวลาในการเรียบเรียง จึงอาจจะล่าช้าไปบ้าง แต่หลังจากทำบทความนี้เสร็จแล้ว ก็จะมีไฟล์ให้โหลดเพื่อนำไปศึกษาประกอบกับคำอธิบายภายในบทความ เพื่อให้เข้าใจมากยิ่งขึ้นค่ะ





บอร์ดบล๊อคสคริปไว้ เข้าดูได้ที่นี่ต่ะ
http://www.thaigraph.com/fufu/flash/Bunny_Jumb.swf


โหลดไฟล์ต้นฉบับไปดูประกอบได้ที่นี่ค่ะ (เวอร์ชั่น Flash Cs6)
[hide][/hide]

NOOKFUFU2

ขั้นตอนที่ 1 เตรียมภาพประกอบ และภาพปุ่ม
จะเป็นภาพ bitmap หรือวาดที่วาดจากโปรแกรม Illustrator ก็ได้ (ภาพด้านล่างทุกชิ้นวาดจากโปรแกรม Illustrator โดยการ Ctrl+C และ Ctrl+V มาใส่ในโปรแกรม Flash ตรงๆ) ซึ่งก่อนจะมาถึงขั้นตอนที่ 1ได้ เราจะต้องวางแผนการเคลื่อนไหวของตัวการ์ตูน หรือเรียงลำดับเหตุการณ์ที่จะเกิดขึ้นมาก่อนล่วงหน้าแล้ว

ภาพประกอบแล้วแต่เราจะเป็นผู้กำหนดว่าต้องการให้ภาพอนิเมชั่นมีการเคลื่อนไหวแบบไหน และส่วนภาพปุ่ม เราจะสร้างโดยแค่พิมพ์ Text ธรรมดาที่สร้างจากโปรแกรม Flash ก็ได้ค่ะ

***********************************

Note:
หากนำภาพ Vector มาสร้างอนิเมชั่นใน Flash นอกจากจะทำให้ภาพคมชัดเมื่อมีปรับเปลี่ยนขนาดไซต์งานแล้ว ยังทำให้มีขนาดไฟล์เล็ก กว่าการนำภาพบิทแมทมาใช้ค่ะ (อัพโหลดขึ้นเว็บแล้วไม่โหลดอืด)
***********************************

ขั้นตอนที่ 2 เปลี่ยนวัตถุให้เป็น Symbol
คลิกเลือกวัตถุที่เราต้องการให้มีการเคลื่อนไหว จะชิ้นใดก่อนก็ได้ และไปที่คำสั่ง Modify > Convert to Symbol...  (หรือกดปุ่ม F8) ตั้งชื่อให้กับวัตถุที่จะเปลี่ยนเป็น Symbol และเลือกชนิดของ Symbol ที่จะนำไปใช้ให้ถูกต้อง   

(ศึกษาการสร้าง Symbol เพิ่มเติได้ทีบทความนี้ค่ะ วิธีการสร้าง Symbol ใน Flash ไว้ใช้งาน)


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


ขั้นตอนที่ 4 กำหนดท่าทางการเคลื่อนไหว
- หลังจากวางวัตถุให้อยู่ในรูปแบบที่จะนำเสนอเสร็จแล้ว ขั้นตอนต่อไปเราจะต้องสร้างท่าทางการเคลื่อนไหวของ Symbol แต่ละชิ้นให้มีความสัมพันธ์กับการเคลื่อนเม้าส์ เช่น เมื่อเม้าส์วางบนปุ่ม หรือเลื่อนเม้าส์ออกจากปุ่ม หรือคลิกปุ่ม Symbol แต่ละชิ้นจะเคลื่อนไหวแบบใด (สร้างแค่ท่าทางการเคลื่อนไหวของ Symbol แต่ละเหตุการณ์ ส่วนการนำท่าทางต่างๆไปเชื่อมโยงกับ "ปุ่ม" เราจะนำสคริปมาใช้ทีหลัง)

- แรกๆถ้ายังไม่แน่ใจว่าต้องใช้เฟรมมากแค่ไหน ก็กำหนดเฟรมไปเยอะๆก่อนก็ได้  


- ภาพประกอบด้านล่างคือ  Intro เริ่มต้นก่อนที่การ์ตูนจะเริ่มเคลื่อนไหวสัมพันธ์กับเม้าส์และปุ่ม ข้าพเจ้าจะกำหนดให้ตัวการ์ตูนตื่นจากการหลับ


- หลังจากอนิเมชั่น Intro จบไป ก็เข้าสู่การทำงานจริง ที่เราจะต้องสร้างท่าทางของตัวการ์ตูนให้สัมพันธ์กับปุ่มข้าพเจ้าขอเรียกมันว่า Event ที่ 1 นั่นก็คือเหตุการณ์ที่เม้าส์อยู่ด้านนอก ยังไม่ได้เเคลื่อนเข้ามาวางบนปุ่ม

(*ในตัว Falsh ที่ประมวลผลแล้ว ในแต่ละเหตุกาณ์เราจะเห็นว่าดวงไฟที่อกตัวการ์ตูนเปลี่ยนสีตามสีของปุ่มด้วย แต่จริงๆมันก็คือการเอาภาพสีเดียวกับสีของปุ่มมาแปะทับลงไปแค่นั้นเอง.. ไว้โหลดไฟล์ต้นฉบับไปแกะดูก็จะเข้าใจมากยิ่งขึ้นค่ะ)

(ในภาพประกอบ คุณจะเห็นว่าข้าพเจ้าสร้างอนิเมชั่นให้กับตัวการ์ตูนที่ Event ที่ 1 โดยใช้เฟรมบนไทม์ไลน์ไปเพียง 1 เฟรม (เฟรมที่ 15 ) จริงๆแล้วข้าพเจ้าซ้อนอนิเมชั่นไว้ภายใน (ต้องดับบิ้ลคลิกที่Symbol แต่ละชิ้นเข้าไปดูถึงจะเห็น) เพื่อลดจำนวนเฟรมด้านนอกให้น้อยลง และไม่ให้รก คุณสามารถศึกษาวิธีการซ้อนอนิเมชั่นได้โดยศึกษาจากบทความ การซ้อนอนิเมชั่น และศึกษาวิธีการสร้างอนิเมชั่นแบบต่างๆได้จากบทความที่ข้าพเจ้าทำไว้ก่อนหน้าค่ะ)


- (เฟรมที่ 16) สร้างอนิเมชั่นให้กับเหตุการณ์ที่ 2 ซึ่งก็คือ Event ที่ 2 เป็นเหตุการณ์ที่จะเกิดขึ้น เมื่อเม้าส์วางอยู่บนปุ่ม


- (เฟรมที่ 17) สร้างอนิเมชั่นให้กับ Event ที่ 3 เป็นเหตุการณ์ที่จะเกิดขึ้น เมื่อเม้าส์คลิกปุ่ม (เหตุการณ์ที่ 3 นี้ถือเป็นเหตุการณ์สำคัญ เพราะจะเป็นตัวกำหนดว่าหลังจากคลิกปุ่มแล้ว จะเกิด Event ใดขึ้นตามมา)


ขั้นตอนที่ 5 สร้างปุ่ม
หลังจากสร้างแต่ละ Event ให้กับตัวการ์ตูนเสร็จแล้ว เราก็จะมาสร้างปุ่มที่จะเป็นกุญแจสำหคัญในการกำหนดท่าทางของตัวการ์ตูน และผลลัพธ์ที่จะเกิดขึ้นกัน

- ให้คลิกที่ภาพที่เราจะนำมาใช้ทำเป็นปุ่ม และให้ไปที่คำสั่ง Modify > Convert to Symbol...  (หรือกดปุ่ม F8) ตั้งชื่อให้กับวัตถุที่จะเปลี่ยนเป็น Symbol และเลือกชนิดของ Symbol เป็น Button ดังภาพประกอบด้านล่าง


- จากนั้นให้ดับเบิ้ลคลิกที่ Symbol (ปุ่มที่เพิ่งสร้าง) เพื่อเข้าสู่โหมดแก้ไข (หรือจะดับเบิ้ลคลิกที่ชื่อปุ่มในพาแนล Library ก็ได้)


- คลิกขวาบนเฟรมที่ 2 (Over) และเลือกคำสั่ง "Insert Keyframe"


- ลบภาพปุ่มสีขาวที่แสดงอยู่ในเฟรมที่ 2 (Over) ออกและนำวัตถุที่เป็นภาพปุ่มสีเขียมมาวางแทนที่


- คลิกขวาบนเฟรมที่ 3 (Down) และเลือกคำสั่ง "Insert Keyframe" จากนั้นก็ลบภาพปุ่มสีเขียวออก และนำวัตถุที่เป็นภาพปุ่มสีส้มมมาวางแทนที่


คำอธิบาย
เฟรม Up คือเหตุการณ์ที่เม้าส์ลอยอยู่นอกพื้นที่ของปุ่ม
เฟรม Over คือเหตุการณ์ที่เม้าส์ลอยอยู่บยปุ่ม
เฟรม Down คือเหตุการณ์ที่คลิกเม้าส์บนปุ่ม
เฟรม Hit คือการกำหนดให้เป็นพื้นที่สำหรับรับการตอบโต้ของผู้ใช้ โดยปกติเราจะไม่กำหนดค่าใดๆที่เฟรมนี้

ขั้นตอนที่ 6 เขียนสคริปให้ "ปุ่ม"(button) และ "เหตุการณ์"(Event)
สคริปที่ข้าพเจ้าใช้เป็นสคริปเวอร์ชั่น ActionScript 3.0 รุ่นล่าสุด ที่แตกต่างจากคริปเวอร์ชั่นรุ่นเก่าๆ โดยสคริปตัวใหม่นี้จะมีการประมวลผลรวดเร็วและมีความเสถียรกว่ามาก และแน่นอนว่ารูปแบบภาษาเขียนของมันก็แตกต่างจากการเขียนสคริปแบบของเดิมที่เวอร์ชั่น 2.0 ไปมากพอสมควร  

(*ถ้าเป็นสคริปรุ่นเก่าเราจะสามารถฝังสคริปไว้ที่ตัววัตถุได้โดยตรง แต่ในสคริปรุ่นใหม่เวอร์ชั่น 3.0 เราจะต้องเขียนสคริปไว้ที่เฟรมว่างเท่านั้น)

- เมื่อได้ปุ่ม (button) มาแล้ว จากที่เฟรมดูรกๆในตอนแรกก็เคลียร์ให้โล่งไว้แบบในภาพด้านล่างค่ะ จะได้ดูสะบายตาหน่อย


- จากนั้นก็ให้คลิกที่ปุ่ม และไปที่คำสั่ง Window > Properties เพื่อเปิดหน้า Properties ขึ้นมา ให้กำหนดชื่อให้กับ "ปุ่ม" ที่จะนำไปใช้ในการรันสคริป ใส่ชื่อเสร็จแล้วให้กดปุ่ม Enter 1ครั้ง (ในที่นี้ข้าพเจ้าตั้งชื่อมันว่า "buttonTG" )


- เสร็จแล้วให้สร้างเลอยร์ใหม่ ปล่อยเป็นเฟรมว่างโล่งๆ สำหรับใส่สคริปเพื่อควบคุมการวิ่งของหัวอ่านใน Timeline


- คลิกขวาบนเฟรมที่ 15 (เฟรมที่ใช้แสดงเหตุการณ์ Event ที่ 1)" เลือกคำสั่ง "Insert Blank Keyframe"


- แล้วให้คลิกขวาซ้ำอีกครั้ง เลือกคำสั่ง "Action"


ใส่สคริปลงไปในช่องว่างตามรูปค่ะ


ตามนี้เลย..

1. this.stop();
   
2. 
   
3. buttonTG.addEventListener
   
4. (MouseEvent.ROLL_OUT, button_out)
   
5. function button_out(event:MouseEvent):void{this.gotoAndStop(15);
   
6. }
   
7. 
   
8. buttonTG.addEventListener
   
9. (MouseEvent.ROLL_OVER, button_Over)
   
10. function button_Over(event:MouseEvent):void{this.gotoAndStop(16);
    
11. }
    
12. 
    
13. buttonTG.addEventListener
    
14. (MouseEvent.CLICK, button_home)
    
15. function button_home(event:MouseEvent):void{
    
16.         this.gotoAndPlay(17);
    
17.         var request:URLRequest = new URLRequest("http://www.thaigraph.com");
    
18.         navigateToURL(request);
    
19. }

คัดลอกไปที่คลิปบอร์ด

-----------------------------------------

ความหมาย
บรรทัดที่ 1-- this.stop(); --- หัวอ่านช่วยหยุดที่เฟรมนี้ก่อนนะจ้า

บรรทัดที่ 3 -- buttonTG.addEventListener --- buttonTG (เป็นชื่อปุ่มที่เราตั้งไว้ในพาแนล Properties) .กำหนดให้เริ่มต้นเหตุการณ์ดังต่อไปนี้

บรรทัดที่ 4 -- (MouseEvent.ROLL_OUT, button_out)  --- (สร้างเหตุการณ์ให้กับเม้าส์.เมื่อเม้าส์ไม่ได้อยู่บนปุ่ม(ROLL_OUT), เราจะกำหนดชื่อของเหตุการณ์นี้ว่า botton_out (ตั้งเอาใหม่เองจะใช้ชื่ออะไรก็ได้))

บรรทัดที่ 5 -- function button_out(event:MouseEvent):void{this.gotoAndStop(15);} --- function(การทำงานของ) button_out (even:MouseEvent) คือเหตุการณ์ที่จะมีผลต่อเหตุการณ์ของเม้าส์ ---- :void ถ้าไม่ทำก็ถือเป็นโมฆะ ไม่มีอะไรเกิดขึ้น--- {this.gotoAndStop(15);} แต่ถ้าทำ.. ก็ให้เฟรมนี้กระโดดไปหยุดที่เฟรม15

บรรทัดที่ 8-10 จะซ้ำกัน แต่ต่างกันตรงที่เป็นการกำหนดเหตุการณ์เมื่อเม้าส์วางอยู่บนปุ่ม(ROLL_OVER) และสั่งให้หัวอ่านวิ่งไปและหยุดที่เฟรม 16

บรรทัดที่ 13-17 เป็นเหตุการณ์เมื่อมีการคลิกเม้าส์ โดยจะสั่งให้หัวอ่านวิ่งไปเล่น ที่เฟรม 17 และจะมีคำสั่ง
var request:URLRequest = new URLRequest("http://www.thaigraph.com");
        เพิ่มเข้ามา หมายถึง ขอให้โปรแกรมเรียกURLตามลิงค์ ("....") ขึ้นมาแสดง

บรรทัดที่ 18 navigateToURL(request);  --- คือ ให้นำทางไปยัง URL (ตามที่ขอไว้)

------------------------------------

Note:
***หลักๆการเขียนสคริปจะเรียงตามลำดับดังนี้ --- ชื่อปุ่มที่ตั้งไว้ใน Properties + เหตุการณ์ที่จะสั่งให้โปรแกรมทำ,+ (ตั้งชื่อของเหตุการณ์ที่จะทำ(ตั้งเอง)) + จะให้ทำอะไรบ้างกับเหตุนี้บ้าง

***เครื่องหมาย {} เป็๋นสัญลักษณ์เริ่มต้นและปิดท้ายชุดคำสั่งหลัก ส่วน ";" เป็นสัญลักษณ์ที่ใช้ปิดท้ายชุดคำสั่งย่อยแต่ละชุดภายใน

***ชื่อที่พิมพ์ลงไป และตัวคำสั่งในสคริปจะต้องพิมพ์ "ตัวเล็ก" และ "ตัวใหญ่" ให้ถูกต้อง ไม่เช่นนั้นโปรแกรมจะค้นหาไม่เจอและเกิด Error
------------------------------------


ส่วนเฟรมที่ 20 ของเลเยอร์สคริป ข้าพเเจ้าคลิกขวาเลือกคำสั่ง "Action" และใส่คริปลงไปดังนี้ค่ะ

1. gotoAndStop(15);

คัดลอกไปที่คลิปบอร์ด

เพื่อในกรณีที่มีการคลิกปุ่ม และหัวอ่านวิ่งมาเล่นที่เฟรม 17 มันจะวิ่งมาจนถึงเฟรมที่ 20 และเจอตัวสคริปนี้ดักไว้ ทำให้หัวอ่านต้องกระโดดกลับไปหยุดที่เฟรม 15 เพื่อรอรับคำสั่ง Event ของเม้าส์ใหม่อีกครั้งค่ะ
--------------------------------


คำสั่งที่น่าสนใจที่เกี่ยวกับเม้าส์ที่ต้องการให้มีผลต่อปุ่มหรือวัตถุ

CLICK                          --- เหตุการณ์ที่เกิดขึ้นเมื่อ "คลิกเม้าส์บนวัตถุ"
DOUBLE_CLICK            --- เหตุการณ์ที่เกิดขึ้นเมื่อ "ดับเบิ้ลคลิกเม้าส์บนวัตถุ"
MOUSE_DOWN            --- เหตุการณ์ที่เกิดขึ้นเมื่อ "คลิกเม้าส์-กดปุ่ม"
MOUSE_MOVE             --- เหตุการณ์ที่เกิดขึ้นเมื่อ "เลื่อนเม้าส์เข้ามาในวัตถุ"
MOUSE_OUT               --- เหตุการณ์ที่เกิดขึ้นเมื่อ "เลื่อนเม้าส์ออกจากวัตถุ"
MOUSE_OVER             --- เหตุการณ์ที่เกิดขึ้นเมื่อ "เม้าส์วางลอยอยู่บนวัตถุ"
MOUSE_UP                 --- เหตุการณ์ที่เกิดขึ้นเมื่อ "ปล่อยเม้าส์ลอยอยู่บนวัตถุ"
MOUSE_WHEEL          --- เหตุการณ์ที่เกิดขึ้นเมื่อ "หมุนลูกล้อเม้าส์ในวัตถุ"
ROLL_OUT                 --- เหตุการณ์ที่เกิดขึ้นเมื่อ "เลื่อนเม้าส์ออกจากวัตถุ"
ROLL_OVER               --- เหตุการณ์ที่เกิดขึ้นเมื่อ ""เลื่อนเม้าส์เข้ามาในวัตถุ"

***บางคำสั่งจะทำงานเหมือนกันนะค่ะ แล้วแต่ว่าเราจะเลือกเขียนแบบไหน
--------------------------------


ขอให้สนุกกับทุกชิ้นงานนะค่ะ

บทความโดย NOOKFUFU2
(ขอสงวนสิทธิ์ให้เผยแพร่เฉพาะในเว็บไทยกราฟเท่านั้น!!!)

kitiporn

ขอบคุณครับ สุดยอดเลย ยาวมาก คงเหนื่อยหน้าดู ขอบคุณอีกครั้งครับ อาจารย์

thaigamesthai1

ขอบคุณครับ

ohmohm1234

thx

kamolpans

หามานานแล้ว ขอบคุณมากเลยค่ะ

vlsdtps

ขอบคุณครับ