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

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

เกริ่นก่อน
Flash เนี่ย จริงๆ ก็สามารถเขียนโปรแกรมได้มาตั้งนานแล้วครับ แต่มาเริ่มดังกันตอน Flash 5 (ในไทย) เพราะโค้ดที่มากขึ้น ยืดหยุ่นขึ้น
ทำให้มีคนจับมาทำเกม ทำเว็บกันเยอะแยะ กระแสตอบรับดีมาก ซึ่งในตอนนั้นเป็น ActionScript 1

ต่อมายัง Flash 8 (ข้ามไกลมาก) ได้มีการเพิ่มสิ่งที่โปรแกรมเมอร์เรียกกันว่า OOP เข้าไป ทำให้โปรแกรมเมอร์ที่ไม่คุ้นการเขียนโปรแกรมแบบ Frame-based (เขียนกันบนเฟรมๆ นั่นแหละครับ) ทำงานได้สะดวก+คุ้นมากขึ้น
ซึ่ง OOP มันคือกระบวนการการเขียนโปรแกรมครับ ถ้าบอกว่า มันคือ การเขียนโปรแกรมเชิงวัตถุ คงไม่คุ้นเท่าไหร่
ถ้าบอกว่า.. มันคือการเขียนเป็นคลาส ล่ะ? (คงนึกไม่ออกกว่าเดิมแน่)

อย่าเพิ่งซีเรียล ครับ บอกไว้เฉยๆ เอาไว้ประดับความรู้ไว้ก่อน ช่วงหลังผมจะอธิบายอีกที
และด้วยเหตุนี้เองทำให้ต้องมีการเพิ่มเวอร์ชั่นให้ ActionScript เป็นเวอร์ชั่น 2 (แต่ก็ยังเลือกเขียน 1 ได้อยู่)

แล้วต่อมา Adobe เข้าเทคโอเวอร์ Macromedia เค้าก็เลยเอาไปพัฒนา ActionScript ให้มันดีขึ้น เร็วขึ้น
จนกลายมาเป็นเวอร์ชั่น 3 ที่ผมกำลังจะสอนนี่เอง!!!

แต่.. เพราะเป็นของใหม่ (จริงๆ ไม่ใหม่หรอก ฝรั่งเค้าเล่นกันมาหลายปีแล้ว แต่เมืองไทยกลัวที่จะเปลี่ยนแปลงกัน )
เค้าจึงพัฒนา AS3.0 (ตัวย่อของ ActionScript 3 น่ะแหละครับ อย่างงไปเชียว) ใหม่จาก 0
ทำให้ไม่สามารถนำโค้ดที่เป็น AS2 มารันบน AS3 ได้ นั่นคือ
ถ้าทำไฟล์งานเป็น AS3 อย่าแหยมเขียน AS2 ลงไปเชียว มันจะ Error!

ถามว่า หนังสือในไทยไม่มีสอน AS3 เหรอ.. คำตอบคือ มี!
แต่ไม่ละเอียดพอ เพราะ.. สอนเขียน Frame-based อย่างเดียว ไม่ได้สอนเป็น OOP ด้วย

 

อะ แน่นอนว่า AS3 นี่ สนับสนุนการเขียนแบบ OOP มากกว่าเดิมอีก ดังนั้นโปรแกรมเมอร์ท่านใดที่เขียน C#, Java มา ผมว่าไปต่อได้ไม่ยาก (เพราะผมเริ่มที่ AS3 แล้วไปจับ C#, Java ก็รู้สึกว่าไปกันได้เร็วดี)

 

ข้อแตกต่างที่เห็นได้ชัด ระหว่าง AS2 และ AS3

1. มันเขียนโค้ดลงบนวัตถุไม่ได้ (เช่น เขียนโค้ดลงบนปุ่ม) ต้องเขียนบนเฟรม หรือไฟล์ as เท่านั้น

2. ทุกอย่างทำงานเป็น Event และมี Listener อย่างชัดเจน อธิบายคร่าวๆ คือ.. มี "ยาม" มานั่งเฝ้า "เหตุการณ์" ที่กำลังจะเกิดขึ้น เช่น "ยาม" นั่งเฝ้าตึกอยู่ หากมี "โจรปีนตึก" ยามจะต้องทำอะไรบ้าง!!! เราก็กำหนดไป

3. คำสั่งใน AS2 บางส่วนตัดทิ้งไป และใช้งานคนละแบบกันใน AS3 เลย อย่างเช่น
gotoAndPlay ปกติแล้ว AS2 เราจะใส่ชื่อ Scene ก่อนแล้วตามด้วยเฟรม แบบนี้

gotoAndPlay("Scene 1", 1);

แต่ AS3 จะต้องใส่ เฟรม ก่อนชื่อ Scene (ระวังให้ดี)

gotoAndPlay(1, "Scene 1");

แต่เหตุที่ต้องเปลี่ยน เพราะอะไร? ไว้ผมจะอธิบาย ใน "ยาม" ที่เราเข้าถึงเหตุการณ์ "เรียน OOP" ครับ

 

แล้วต้องเตรียมตัวเตรียมใจยังไงบ้าง?

อันดับแรก.. ไปใช้ Flash ให้คล่องก่อนครับ ตั้งแต่เบสิคเลย อย่าง เฟรม คืออะไร, MovieClip คืออะไร, หน้าต่าง Library คือหน้าต่างไหนถ้าหน้าต่างมันซ่อนอยู่ จะเรียกออกมายังไง, ฯลฯ
อ้อ ลองเล่นคีย์ลัดด้วยก็ดีครับ เพื่อความรวดเร็ว

อันดับสอง..ใช้ Flash CS 3 ขึ้นไป อย่าถามว่า Flash 8 ได้มั้ย เพราะ AS 3 พัฒนาในชื่อ Adobe (แต่ทีมงานเก่า) ไม่ใช่ในชื่อ Macromedia และ Flash CS 3 ก็เป็นเวอร์ชั่นแรกที่เป็นของ Adobe!!

อันดับสาม.. ฝึกพิมพ์ให้คล่อง จิ้มรัว หรือสัมผัสก็ได้ครับ เอาไวเข้าว่า

 

เริ่มกันนิดนึงเลยมั้ย?

ผมก็ว่างั้นแหละ..

ขั้นแรก ผมแนะนำว่าให้ดึงเอาหน้าต่างต่อไปนี้มาเตรียมใช้งานครับ

- Properties
- Library
- Components

3 หน้าต่างนี้เป็นหน้าต่างที่สำคัญที่สุด (ในการเขียนโค้ด) ควรเปิดไว้ตลอดอย่าปิดทิ้งเชียว

ต่อมาเป็นหน้าต่าง Actions ครับ (กด F9) หน้าต่างนี้ ให้ดึงลอยออกมากลางหน้าจอเลย ไม่ควรเอาไปหิ้วติดกับใคร (และเตรียมกด F9 ให้คล่องด้วยนะครับ)

ตัวอย่างหน้าจอทำงาน

 

เริ่มเขียนโค้ดชิ้นแรกกันเลยครับ

แน่นอนว่าจะเป็นไรไม่ได้ นอกจาก Hello World!

 

1. สร้างไฟล์ใหม่ครับ โดยเลือกที่ Flash File (ActionScript 3.0)

 

2. คลิกที่คีย์เฟรมแรก กด F9 เรียกหน้าต่าง Actions ขึ้นมาครับ

3. พิมพ์ตามผมไปก่อนเลย

trace( "Hello World!" );

4. รันโปรแกรม (กด Ctrl+Enter)

ถ้าโปรแกรมทำงานถูกต้อง จะมีหน้าต่าง Output เด้งออกมาพร้อมคำว่า Hello World! ตามรูปครับ

 

เป็นไงครับ ง่ายมั้ย?
(ง่ายสิ)

เอาง่ายๆ ก่อนครับ เดี๋ยวจะหมดกำลังใจกัน

 

แล้วบทความนี้ก็จบดื้อๆ แบบนี้แหละครับ.. 

หา ไฟล์เหรอ.. ไม่ต้องแจกมั้ง.. บรรทัดเดียวเอ๊ง.. *27* *54*

Comment



smilebig smileopen-mounthed smileconfused smilesad smileangry smiletonguequestionembarrassedsurprised smilewinkdouble winkcry

Tweet

กรี้ดดดดดดดดดดดดดดด cry
อยากจะให้ดาว แต่ดันจบซะก่อน

#1 By bellbell on 2009-05-25 09:43

เป็นบทความน่าสนใจมากกเลยยครับบ
Hot!

จริงๆผมก็ชอบเขียน Action บ้างพอสมควร
เขียน โปรแกรมก็สนุกอยู่ แต่เวลาเขียนแล้วเจอ Bug ทีนี้ เกิดอาการเครียดขึ้นมาทันทีเลย
(แก้ไงเนี่ย อะไรอย่างนี้ )
แต่ As 3.0 ยังไม่รู้เรื่องเลยสักนิดเดียว
ก็เลยหลักๆมาเอาดีด้านออกแบบ ดีกว่า
เหอๆ

#2 By xxvorachaixx on 2009-05-25 11:59

รอติดตาม ตอนต่อไปคับ อยากเก่ง As3.0

#3 By นายโยจิ^_^ on 2009-05-25 13:20

Hot! ย๊ากกกก สุดยอดครับ



ธีมใหม่สวยงามจริง
อ้า สอนเยอะๆนะค้าบHot!

#5 By ungtaman on 2009-05-25 16:09

ตัวเองจะมาหาเค้าไม๊อ่า ถ้าลงมา กทม. อ่ะ surprised smile




ปล. ก่อ...ตูยังยืนยันคำเดิมว่า เอ็งเอาดีด้านโปรแกรมเมอร์เหอะ sad smile
เนื้อเน้นๆแฮะ
(ธีมบล้อกวิ้งๆจัง)

#7 By inatmon on 2009-05-25 19:43

ตัวหนังสือเป็นพรืดครับ ไม่ผ่านกองพิสูจน์ open-mounthed smile

#8 By xViStA on 2009-05-25 21:25

double wink double wink double wink เยี่ยมครับ

#9 By hankin (124.121.115.123) on 2009-06-07 10:46

เพิ่งหัดเขียน สคริป ครั้งแรก ค่ะ ขอบคุณมาก ตามมาจากเว็บ thaiflashdev จะรอบทความต่อไปนะค่ะ (ตอนแรกรันไม่ได้เพราะกดเคาะวรรคหลัง trace ตอนนี้ได้แล้วค่ะ เดี่ยวจะหาซื้อหนังสือมาอ่านเพิ่มเติม

#10 By ป้อ (117.47.79.128) on 2009-06-19 00:22

sad smile เบื้องต้นจริงด้วยค่ะ

Hallooo world

#11 By arunsawas on 2009-10-28 16:48

ขอบคุณมากค่ะ บทความมีประโยชน์มาก big smile

#12 By hiruma (124.121.19.60) on 2009-10-29 16:25