อ่านจากหัวข้อแล้ว หลายๆท่านน่าจะทราบกันบ้างแล้วว่าทั้งคู่ หมายถึงอะไร
หากใครยังไม่ทราบก็ขออธิบายคร่าวๆแล้วกันนะครับ
Papervision3D แน่นอน ใครไม่รู้จัก ก็แปลว่าหลงทางมาเว็ปนี้นแน่นอน มันคือคลาสของ ActionScript 3.0 เพื่อสร้างวัตถุ 3D ในแฟลช นั่นเอง หากยังสงสัยให้วิ่งตรงไปศึกษาที่นี่ได้เลย http://blog.papervision3d.org/
ส่วนของ
APE Engine นั้น ก็คือ (เพิ่มเติม…)
จะทำยังไงดี คงเป็นคำถามแรกหากใครได้ทำงานด้วย ActionScript 3.0 แล้วเกิดเหตุการณ์ว่า ไม่สามารถคลิกปุ่ม ซึ่งอยู่ใต้วัตถุอื่นๆได้
ในการทำงานบางครั้ง แน่นอนว่าเราอาจจะต้องมีการวางวัตถุ ที่อาจจะมีพื้นที่โปร่งใส เช่นภาพ PNG และหากว่าวัตถุชิ้นนั้นถูกวางอบู่บนปุ่มด้วยแล้วหละก็ จะทำให้เราไม่สามารถคลิกปุ่มใต้วัตถุนั้นได้เลย หรือบางทีก็ไปทับบางส่วน ทำให้คลิกปุ่มนั้นได้แค่ครึ่งเดียวเท่านั้นเอง
จะทำยังไงดีหละทีนี้ …. มีคำตอบครับ ด้วยคำสั่งง่ายๆคือ (เพิ่มเติม…)
เวลาที่ Flash Developer อย่างพวกเราคิดจะทำวัตถุให้เคลื่อนไหว จะมานั่งทำ Motion Tween อยู่มันก็ยังไงอยู่ใช่ไหมครับ ก็แหม.. เขียน ActionScript 3.0 กันมาซะขนาดนี้แล้ว จะทำให้วัตถุเคลื่อนไหวทั้งทีใช่ม้าาาา
แต่ก็พูดเกินไปนะครับ จริงๆมันก็ขึ้นอยู่กับงานด้วยแหละ ว่ามันจะเหมาะสมกับงานอะไรบ้าง อย่างถ้าเราจะทำงานให้มันมี interactive เนี่ยะ ก็ต้องลงโค้ดกันหน่อย
ปรกติแล้วเวลาที่เราจะเลือกใช้งานสคริปในการทำให้อะไรก็แล้วแต่เคลื่อนไหวเราก็จะมีตัวเลือกอยู่หลายทางเหมือนกัน นั่นก็คือ คลาส Tween ของ flash ที่ติดมากับแฟลชเลย ซึ่งใช้งานยุ่งยาก หลายบรรทัด หรือ.. บางคนถึงกับ Event.ENTER_FRAME กันเลยทีเดียว ก็ มันง่ายนี่นา แต่ก็แลกมากับความเร็วนะครับ ก็ยิ่งรู้ๆกันอยู่ว่า FlashPlayer ของเรา ก็ไม่ได้เร็วอะไรมากมายขนาดนั้น เพราะทุกอย่าง ถูกโยนภาระให้ CPU ทำงานไปเต็มๆเลย น่าสงสาร CPU จริงๆ ไอ้ครั้นว่าจะซื้อ CPU แรงๆก็ไม่มีเงินซะด้วย แถมไม่ใช่ทางแก้ปัญหา เพราะถึงเครื่องเราจะแรง แต่พอ user มาดู ก็ยังช้าเหมือนเดิม นี่ถือเป็นอีกความท้าทายนึงเลยที่เราต้องจำกัดงบประมาณให้แฟลชกิน CPU น้อยๆ กินแรมน้อยๆนะลูก อย่าตระกะแหลก CPU เดี่ยวชาวบ้านจะว่าเอาได้ว่าเป็น Programmer ไม่มีสมบัติผู้ดี
หนังสือดิจิตอลแม็กกาซีนสำหรับนักพัฒนาแฟลชอย่างพวกเรา มีเนื้อหาที่น่าสนใจหลายตอน และที่สำคัญคือ เนื้อหาแต่ละตอนก็ไม่ธรรมดาบางตอนก็ถึงขั้น advance เหมือนกัน แบบนี้หาไม่ได้ในไทยสักเท่าไหร่นะครับ เพราะหนังสือไทยมักจะเอาใจมือใหม่ซะส่วนใหญ่ เพราะเป็นกำลังซื้อหลักของตลาด อิอิ
ติดตามโหลดได้ ทั้งไฟล์หนังสือ และไฟล์โค้ดตัวอย่างในหนังสือ ซึ่งแต่ละอย่างเห็นแล้วน่าจะโดนใจใครหลายคน ณ. ปัจจุบัน ตอนนี้ออกมา 4 เล่มแล้ว
ผมสนใจเรื่องของการเขียนเกมบน Hi5 หรือ Facebook มานานแล้ว และมองหา API สำหรับแฟลช แต่ก็ยังไม่มีซักที ถ้าเป็นฝั่ง facebook ก็จะเป็น PHP API ซึ่งก็ใช้งานไม่ยาก และน่าสนใจมากเลยทีเดียว
แต่สำหรับเริ่มต้น ผมสนใจในส่วนที่ Hi5 และ MySpace ใช้ระบบ Opensocial จาก Google ที่พัฒนาขึ้นมาสำหรับเว็ปที่เป็น Social Network
ที่น่าสนใจคือ มันเป็นระบบที่ใช้งานกันกว้างขวางมากทำให้เราสามารถนำมันไปใช้ประยุกต์กับเว็ปไวท์อื่นๆได้ด้วย
การทำงานของ opensocial จะเป็นไปตามรูป
Particle ที่เราเห็นชาวบ้านเค้าเขียนกัน แสดงผลด้วย bitmapData จริงๆแล้วมันไม่ได้ยากอย่างที่คิดซักเท่าไหร่
นี่คือตัวที่ผมเขียนขึ้นมาทดสอบ แต่สำหรับเบื้องต้นแล้ว เราจะมาลองทำแบบง่ายๆกันก่อน
ก่อนจะเริ่มดูโค้ดกัน ผมขอสรุปก่อนเลยละกันว่าการทำงานของมันเป็นยังไงกันแน่
สำหรับแฟลช CS3 เป็นต้นไป มีการตั้งค่าสำหรับการใช้งาน Actionscript 3.0 เพิ่มขึ้นมาให้เราได้ใช้กัน
เป็นเทคนิคเล็กๆน้อยๆที่ทำให้เราสามารถ Publish ไฟล์งานที่เขียนด้วย Actionscript 3.0 ให้เร็วขึ้นอีกเท่าตัว
อ้างอิงจาก Flash cs3 นะครับ ส่วนเวอร์ชั่นอื่นจะคล้ายกัน ต่างกันนิดหน่อย
นี่คือหน้าต่างแรกที่เปิดโปรแกรมแฟลชขึ้นมา ที่วงกลมไว้จะเป็นการสร้างเอกสารเปล่าๆ โดยจะแบ่งออกเป็น
1.เอกสารที่เขียนด้วย Actionscript 3.0
2.เอกสารที่เขียนด้วย Actionscript 2.0
3.เอกสารสคริปแฟลชอื่นๆ
หรือจะเลือกที่ file แล้ว new ก็ได้
การ save file
เริ่มจากเรากำหนดสร้างไฟล์ที่ทำงานกับ ActionScript 2.0 กันก่อน เพราะ tutor ชุดนี้จะสอน as2.0
การ save ไฟล์ไปใช้งานนั้น เรามาดูกันก่อนว่าไฟล์หลักๆแล้ว Flash จะมีไฟล์อะไรบ้างที่เราต้องใช้งาน
ในการใช้งาน Flash นั้น เราจะมีไฟล์งาน สองแบบหลักๆคือที่มีนามสกุล Fla และ Swf
1.FLA เป็นไฟล์งานต้นฉบับ เก็บงาน Flash ต้นฉบับของเราไว้แก้ไขต่อภายหลัง
2.SWF เป็น ไฟล์งานสำเร็จ ที่เราทำการ publish ออกมาแล้ว พร้อมสำหรับนำไปใช้งานบนเว็ปไซท์ หรืองานอื่นๆของเรา ไฟล์นี้จะไม่สามารถทำกลับมาแก้ไขได้อีก(ยกเว้นวิชามารต่างๆ)
เรามาดูเมนู File ที่เราจะใช้ save งานกันบ้างดีกว่า หลักๆมีอะไรบ้าง
1.NEW ไว้สำหรับสร้างเอกสารแฟลชเปล่าๆ ใครจะทำการ์ตูน ทำเกม ทำพรีเซนท์อะไรก็แล้วแต่ เลือกสร้างเอกสารเปล่าได้เลย
2.SAVE ต่างๆ มีไว้ save ไฟล์งานต้นฉบับของเราออกมาเป็นไฟล์ FLA
3.import , export
-เมนู import มีไว้โหลดไฟล์อื่นๆเข้ามาในเอกสารแฟลชเปล่าๆของเรา เช่น รูปภาพ jpg หรือเสียงเพลง mp3 หรือไฟล์ vdo ต่างๆ สรุปคือไฟล์ทุกไฟล์ที่แฟลชใช้งานได้ เราอยากใช้งานมันในแฟลชของเรา เรา import เข้ามาได้ที่เมนูนี้
-เมนู export ไว้สำหรับเอาไฟล์งานแฟลชของเรา ที่ทำเสร็จแล้ว ออกมาใช้งานในรูปแบบอื่นๆ ที่ไม่ใช่ SWF เช่น ออกมาเป็น jpg , png , gif animation ,VDO
4.publish มีไว้สร้างไฟล์ swf ที่เราจะเอามาใช้งานในเว็ปไซท์ เกม หรือพรีเซนท์ โดยไฟล์จะออกมาเป็น swf หรือไฟล์อื่นๆเช่น HTML หรือ EXE ตามที่เรากำหนดใน publish setting โดยถ้าเราไม่กำหนด ไฟล์จะออกมาเป็น swf และ HTML ซึ่งเป็นค่าปรกติที่โปรแกรมตั้งไว้
เมื่อเราสร้างเอกสารใหม่ขึ้นมา เราจะพบเครื่องมือเยอะแยะมากมาย
1.เครื่องมือวาดภาพ เส้น ดินสอ พู่กัน สี่เปลี่ยม เทสี ตัด ต่อ ย้าย ไว้สำหรับวาดการ์ตูน และกราฟฟิกต์ของเรา
2. ส่วนนี้เค้าเรียกว่า Stage(สเตจ) มีไว้สำหรับงานของเรา เราวาดการ์ตูน รูปภาพ อะไรก็ไว้ที่ Stage เป็นพื้นที่การทำงาน เราจะเห็นผลงานของเราวิ่งอยู่บน Stage นี่แหละ Stage มีขนาดกว้างและสูงที่สามารถปรับได้ ให้เล็กหรือใหญ่ตามต้องการ
3.Layer เลเยอร์สำหรับงานแฟลชของเรา เราสามารถแยกวัตถุต่างๆออกเป็นเลเยอร์ได้ เลเยอร์คือชั้นๆต่างๆที่จะทำให้เราทำงานเป็นระบบมากขึ้น เช่น เราจะแยกตัวละครไว้เลเยอร์บนสุด แต่ฉากหลังไว้ล่างสุด เพื่อที่ตัวละครจะได้เดินไปเดินมา โดยที่ฉากหลังจะอยู่นิ่ง
4.Time line มีไว้สำหรับกำหนดการเคลื่อนไหวต่างๆ เวลาที่เราทำการเคลื่อนไหวอนิเมชั่นของเรา คล้ายๆกับฟิล์มภาพยนต์ ที่ 1 ช่องมี 1 ภาพ เป็นเรื่องของอนิเมชั่นเบื้องต้น ที่เราจะทำการเล่นภาพหลายๆภาพต่อเนื่องกัน จนหลอกตาคน ให้มองเป็นภาพเคลื่อนไหว
เช่นเราวาดรูปแต่ละเฟรม เป็นแต่ละ step ต่างกันไป พอเรา play ไป ถาพก็เล่นต่อเนื่องจนเกิดเป็นการเคลื่อนไหว
สำหรับการวาดภาพเฟรมละภาพ จนเกิดเป็นภาพเคลื่อนไหวนั้น เราจะเรียกว่าเป็นอนิเมชั่นแบบ เฟรมบายเฟรม (Frame by Frame)
แต่สำหรับแฟลชแล้ว เราสารมารถทำภาพเคลื่อนไหวง่ายๆ เช่นการย้ายวัตถุ ย่อขนาดวัตถุ เปลี่ยนสีวัตถุ โดยไม่ต้องวาดทีละภาพก็ได้
ซึ่งนั่นจะสอนต่อไป
5. เมนู Window สำหรับใครที่หาเครื่องมือ หน้าหน้าต่างเครื่องมือที่หายไปไม่เจอ ขอให้มาหาที่นี่ที่เดียว เพราะเราจะสามารถแสดง และ ซ่อน เครื่องมือทุกชนิด ได้ที่นี่
6.เครื่องมี color ไว้สำหรับกำหนดสีที่เราจะวาดแบบละเอียด โดยจะสังเกตว่า color ก็มีอยู่ในเมนู window เช่นกัน
7.Properties ไว้สำหรับกำหนดคุณสมบัติให้กับสิ่งต่างๆที่เราจะใช้งาน โดย Properties จะเปลี่ยนแปลงไปตามวัตถุที่เราใช้งานในขณะนั้น
เช่น ถ้าเราใช้งานพู่กัน ก็จะเป็นการกำหนด สี ขนาดเส้น ของพู่กัน
ถ้าเราใช้งานวัตถุ จะเป็นการกำหนด ขนาดกว้าง สูง และสีสัน ของวัตถุ
เช่นเดียวกัน ถ้าเครื่องมือนี้หายไป เราก็หามันได้ในเมนู Window เหมือนเดิม
