Thaigraph

 

   

ค้นหา
Thaigraph หน้าฟอรั่ม Flash วิธีทำ Button Event on mouse
Maple Avatar ห้องแต่งตัวใหม่วิธีการเขียน Blog ส่วนตัววิธีโพสคลิปจาก Youtubeตารางข้อมูล เครดิต + Moneyวิธีการโพสกระทู้แบบรวดเร็ว
ดู: 33769|ตอบ: 5
go

วิธีทำ Button Event on mouse

Rank: 7Rank: 7Rank: 7

โพสต์เมื่อ 13-10-2012 10:28 |แสดงโพสต์ทั้งหมด

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

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





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


โหลดไฟล์ต้นฉบับไปดูประกอบได้ที่นี่ค่ะ (เวอร์ชั่น Flash Cs6)
[hide][/hide]
ไฟล์แนบ: คุณจำเป็นต้องเข้าสู่ระบบก่อนจึงจะสามารถดูและดาวน์โหลดไฟล์แนบได้ หากยังไม่มีแอคเคานต์หรือยังไม่ได้เป็นสมาชิก กรุณาสมัครสมาชิก
บางบทความคุณจำเป็นต้องสมัครสมาชิกแบบ VIP และ SUPERVIP ถึงจะเข้าอ่านบทความได้

Rank: 7Rank: 7Rank: 7

โพสต์เมื่อ 13-10-2012 10:42 |แสดงโพสต์ทั้งหมด
ขั้นตอนที่ 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. buttonTG.addEventListener
  3. (MouseEvent.ROLL_OUT, button_out)
  4. function button_out(event:MouseEvent):void{this.gotoAndStop(15);
  5. }

  6. buttonTG.addEventListener
  7. (MouseEvent.ROLL_OVER, button_Over)
  8. function button_Over(event:MouseEvent):void{this.gotoAndStop(16);
  9. }

  10. buttonTG.addEventListener
  11. (MouseEvent.CLICK, button_home)
  12. function button_home(event:MouseEvent):void{
  13.         this.gotoAndPlay(17);
  14.         var request:URLRequest = new URLRequest("http://www.thaigraph.com");
  15.         navigateToURL(request);
  16. }
คัดลอกไปที่คลิปบอร์ด
-----------------------------------------

ความหมาย
บรรทัดที่ 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
(ขอสงวนสิทธิ์ให้เผยแพร่เฉพาะในเว็บไทยกราฟเท่านั้น!!!)



ไฟล์แนบ: คุณจำเป็นต้องเข้าสู่ระบบก่อนจึงจะสามารถดูและดาวน์โหลดไฟล์แนบได้ หากยังไม่มีแอคเคานต์หรือยังไม่ได้เป็นสมาชิก กรุณาสมัครสมาชิก
บางบทความคุณจำเป็นต้องสมัครสมาชิกแบบ VIP และ SUPERVIP ถึงจะเข้าอ่านบทความได้

Rank: 10Rank: 10Rank: 10

โพสต์เมื่อ 16-10-2012 10:42 |แสดงโพสต์ทั้งหมด
ขอบคุณครับ สุดยอดเลย ยาวมาก คงเหนื่อยหน้าดู ขอบคุณอีกครั้งครับ อาจารย์

Rank: 1

โพสต์เมื่อ 7-2-2013 14:21 |แสดงโพสต์ทั้งหมด
ขอบคุณครับ

Rank: 10Rank: 10Rank: 10

โพสต์เมื่อ 5-7-2013 10:42 |แสดงโพสต์ทั้งหมด
thx

Rank: 10Rank: 10Rank: 10

โพสต์เมื่อ 22-6-2014 22:46 |แสดงโพสต์ทั้งหมด
หามานานแล้ว ขอบคุณมากเลยค่ะ

Thaigraph

GMT+7, 21-10-2017 10:14 , Processed in 0.704657 second(s), 23 queries .

Powered by Discuz! X1.5

© 2001-2010 Comsenz Inc. Thai Language by DiscuzThai! Team.

Top 10 Best Sellers in Clothing for 2017 Top 10 Best Sellers in Clothing Best Sellers in Clothing
Top 10 Best Sellers in Books reviewer 2017 Top 10 Best Sellers in Books Best Sellers in Books