AS ตอนที่ 1:ปุ่มกับEvent Handler

[X Saint]

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

ผมเข้าใจว่าส่วนใหญ่จะใช้การกำหนด "กดปุ่ม" กันแบบเก่า
ซึ่งสะดวกดี ไม่ผิดอะไร บางทีผมเองก็ใช้
นั่นคือ การสร้างปุ่มขึ้นมา แล้วก็ คลิกที่ปุ่ม แล้วพิมพ์

on(release) {
     gotoAndPlay(1);
}

เป็นต้น

ตัว on นี่เราเรียกว่า Event Handler .... คือ เป็นตัวที่คอยดัก Event หรือเหตุการณ์ต่างๆ ที่พึงเกิดขึ้นได้
ในที่นี้เหตุการณ์ที่บอกให้มันดักไว้คือ release ... ซึ่งหมายถึง ถ้าเมื่อไหร่ที่มีการปล่อยนิ้วจากการคลิกที่ปุ่มนี้ ให้ทำ คำสั่ง ภายใน { }

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

ตั้งแต่ Flash MX ขึ้นไป ได้มีการกำหนดโครงสร้างแบบใหม่ให้กับ Flash ในการจัดการกับ Event Handler โดยแทนที่จะไปฝาก code ไว้กับปุ่ม แต่ละตัวๆ ... เค้าให้สามารถไปฝากแปะไว้ที่ Timeline ได้หมดเลย... ดังนั้นถ้ามีปุ่ม 10 ปุ่ม แทนที่จะไปควานหา ทุกๆ ปุ่ม ก็สามารถดูได้จากที่เดียวตรง เฟรมที่เขียน code ไว้ทั้ง 10 ปุ่ม

โดยโครงสร้างใหม่จะมีรูปแบบ ดังนี้

ชื่อinstance.onRelease = function () {
     คำสั่ง;
}

แต่แทนที่จะใส่ code นี้ที่ ปุ่ม แบบเดิม ให้ไปใส่ที่ Timeline ณ เฟรมแรก ได้เลย
แต่อย่าลืมว่า ตอนนี้คุณต้องระบุชื่อ instance ให้กับปุ่มด้วยแล้ว ไม่งั้นจะไม่รู้ว่าอ้างอิงไปที่ปุ่มไหน



ตัวอย่าง
http://f0nt.com/forum/index.php?action=dlattach;topic=5828.0;id=9091

[Layiji]

ยอด

[roundbol123]

เยี่ยม

(จริงๆต้องเขียนว่าง่าวเน้อเจ้า  )

[X Saint]

Trace

เพื่อให้ทดสอบเองได้ว่ามีอะไรเกิดขึ้นกับปุ่ม ขอแนะนำ trace

trace เป็นคำสั่งสำหรับ debug ดังนั้นจะไม่มีผลอะไรเมื่อดูบน ie หรือ flash player
มันจะมีการแสดงผลก็ต่อเมื่อทดสอบใน Flash ตัว Editor เท่านั้น
ภาษาคอมฯ ส่วนใหญ่จะมีคำสั่งพวกนี้ไว้เพื่อให้สามารถ debug code ของเราได้

รูปแบบ

trace("ข้อความ");

ดังนั้นเอามาทดสอบกับปุ่มได้โดยการใส่ไปว่า

butt.onRelease = function () {
    trace("Hello World");
}

แล้วลอง Ctrl + Enter แล้วก็ลองกดปุ่มดู
ถ้ามีหน้าต่างเล็กๆเปิดขึ้นมาพร้อมกับข้อความว่า Hello World ทุกครั้งที่กดปุ่ม
แปลว่าสำเร็จแล้ว... ยัตต้า!

ปล. ในที่นี้ต้องตั้ง "ชื่อinstance" ให้กับปุ่มนั้นว่า butt (แปลว่าตูด)

[iannnnn]

ยัตต้า

[X Saint]

แต่ถ้าใช้ Trace อย่างเดียว ก็เอาไปอวดใครไม่ได้ เพราะดูได้แต่บน Editor
ดังนั้นขอแนะนำ Dynamic Text Field

แทนที่จะใช้ trace เพื่อแสดงข้อความ เราก็มาเปลี่ยนให้แสดงที่ text field กันแทน
โดยอย่าลืมตั้งชื่อให้กับ text field ด้วย... เพราะในที่นี้จะยกตัวอย่างการอ้างอิงไปที่ text field แบบ instance



โดยกำหนด โค้ดไว้ที่ เฟรมแรก ที่เดิมว่า

butt.onRelease = function () {
     showTxt.text="ข้อความ";
}

ในที่นี้กำหนดชื่อให้ปุ่มว่า butt และกำหนดชื่อให้ text field ว่า showTxt
การอ้างอิงไปที่ส่วนแสดงผลของ text Field ให้ใช้ .text ต่อท้ายชื่อ text field นั้น

[X Saint]

การบ้าน (เห็นคนแถวนี้เค้าชอบทำการบ้านกัน เลยเอาบ้าง)

ลองทำปุ่ม 2 ปุ่มขึ้นไป โดยที่ให้มี text field 1 อันเหมือนเดิม
แต่ว่าการกดแต่ละปุ่ม จะแสดงข้อความต่างกัน

[saa3]

 

[iannnnn]

ลุงท็อปใช้ ฟ MX เหรอครับ
คาดว่าอาจจะมีเหตุผลบางอย่างที่ไม่ใช้ 8
- ขี้เกียจโดนจับ หรือ
- มันไม่ดียังไง




ป.ล.อธิบายได้ละเอียดดีมากสุดยอดโคตรแจ๋วมิ้มๆ เลยครับ

[X Saint]

ลุงท็อปใช้ ฟ MX เหรอครับ
คาดว่าอาจจะมีเหตุผลบางอย่างที่ไม่ใช้ 8
- ขี้เกียจโดนจับ หรือ
- มันไม่ดียังไง




ป.ล.อธิบายได้ละเอียดดีมากสุดยอดโคตรแจ๋วมิ้มๆ เลยครับ

- ถ้าจะโดนจับ ใช้ตัวไหนก็โดนจับคับ 

- ที่ใช้ MX เพราะผมยังไม่ได้โหลด Flash 8

จบข่าว

[นายโอ้เอ้]

ส่งครับ 
// แก้ไขนิด อันแรกมันเฉยๆไปหน่อย
http://f0nt.com/forum/index.php?action=dlattach;topic=5828.0;id=9093

[iannnnn]

ผมขอไม่ส่งนะครับจานลุง
เพราะว่า Photoshop CS2 ตัวเดียวกะแรม 256 ที่เปิดงานตอนนี้
เครื่องมันก็ร้องโอดโอยด้วยความทรมานแล้ว

(เส้นตายปิดงานตอนตีสาม - เวลาในไทย  )

[saa3]

(เส้นตายปิดงานตอนตีสาม - เวลาในไทย  )

[roundbol123]

http://img234.imageshack.us/img234/7245/jw6xp.swf

แวะมาดู

[X Saint]

(เส้นตายปิดงานตอนตีสาม - เวลาในไทย  )

<--- แต่มีเวลาวาดพระ มีคิ้ว